การใช้งาน jQuery แทน Media Query ใน CSS3 ตอนที่ 2

จากที่เคยเขียนแนวทางการใช้งาน jQuery แทน media query ใน CSS3 เนื่องจาก IE 6,7,8 ยังไม่ support ดังนั้นเราอาจใช้ jQuery เข้ามาช่วยทำ Responsive Web แบบง่ายๆด้วย JavaScript ได้ แต่เนื่องจากตอนนั้นยังทำได้ไม่สมบูรณ์เลยเขียน code มาแบบเต็มๆให้ดู จริงๆอยากจะประยุกต์ Singleton Pattern ใน JavaScript มาด้วยแต่เดี๋ยวยากเกินไป เอาแค่นี้ก่อนละกัน ในบทความนี้จะเปรียบเทียบกับตัว CSS3 ด้วยจะได้เข้าใจมากขึ้น

เริ่มจาก code ส่วนแรกประกาศเป็น function ชื่อว่า checkDevice() เป็นfunction ที่รับ parameter เป็น  width ของ window

1
2
3
4
5
6
7
8
9
10
11
var checkDevice = function(width){
        console.log(width);        
        $('li').removeClass();
        if(width > 760){
             $('li:first-child').addClass('desktop');
        }else if(width > 480 ){
             $('li:nth-child(2)').addClass('tablet');
        }else if(width > 0){
             $('li:last-child').addClass('mobile');
        }
};

และใช้ jQuery ดึงขนาดความกว้างของ window แบบนี้

1
$(window).width()

และสุดท้ายก็ทำการ เรียก function นี้ทุกครั้งที่เกิดการย่อหรือขยายความกว้างของ browser

1
2
3
4
checkDevice($(window).width());
$(window).resize(function(){
     checkDevice($(window).width());
});​

ซึ่งโดยทั้งหมดนี้มีค่าเท่ากับ Style Sheet แบบนี้

1
2
3
4
5
@media screen and (min-width: 760px){
       li:first-child{
           border: 3px solid #41709B;
       }
   }
1
2
3
4
5
@media screen and (min-width: 481px and max-width: 760px){
       li:nth-child(2){
           border: 3px solid #41709B;
       }
   }
1
2
3
4
5
@media screen and (max-width: 480px){
       li:last-child{
           border: 3px solid #41709B;
       }
   }

ใน style sheet จะใช้ min-width และ max-width ในการกำหนดช่วงของความกว้างของ browser ถ้าตกอยู่ในช่วงไหนก็จะทำการกำหนด style sheet ในวงเล็บเข้าไปตาม selector ที่เราเลือก

โดยรอบนี้มี code ให้เข้าไปทดสอบกันได้ที่ http://jsfiddle.net/irobust/vgzvR/ 

แต่ถ้าต้องการดูผลลัพธ์ต้องดูแบบ Full Screen ถึงจะเห็นผลลัพธ์ที่ถูกต้องโดยเข้าไปที่http://jsfiddle.net/irobust/vgzvR/embedded/result/

เปิดอบรมหลักสูตร Advance HTML5 วันที่ 17-18 ธันวาคม

หลักสูตรนี้จะเจาะลึกการใช้งาน HTML5 ในขั้นสูง ผู้เรียนจะต้องมีความเข้าใจในการเขียน JavaScript หรือ jQuery มาแล้วหรือผ่านการอบรมในหลักสูตร Essential Javascript มาก่อน เนื่องจากหลักสูตรนี้จะมีการใช้งาน JavaScript และ jQuery ค่อนข้างเยอะและเน้นทำความเข้าใจในหลึกการทำงานของ javaScript API เป็นหลัก

ราคาปกติ 5,100 บาท พิเศษวันนี้ ถ้านำ Notebook มาเอง เหลือเพียง 4,500 บาท

สามารถเข้าไปดูรายละเอียดหลักสูตรได้ ที่นี่

เปิดอบรมหลักสูตร HTML5 and CSS3 วันที่ 16-18 ธันวาคม

ในหลักสูตร HTML5 and CSS3 จะแบ่งออกเป็น 3 ส่วนหลักๆ ดังนี้

  1. เรียนรู้การใช้งาน TAG ใหม่ๆ ที่เพิ่มเติมเข้ามา
  2. การใช้งาน JavaScript API ที่จะช่วยเพิ่มประสิทธิภาพในการทำงานให้กับระบบของท่าน
  3. การใช้ความสามาถของ CSS3 ในการช่วยจัดการ layout ได้ง่ายขึ้นและมีความน่าสนใจมากขึ้น

ราคาปกติ 6,400 บาท พิเศษสำหรับผู้ที่นำ Notebook มาเอง เหลือ 5,500 บาท

สำรองที่นั่งได้ที่ ลงทะเบียน หรือ contact@irobust.co.th
สอบถามข้อมูลเพิ่มเติมได้ที่ 095-448-2314
สามารถเข้าไปดูรายละเอียดหลักสูตรได้ ที่นี่

การใช้งาน font-face บน canvas

ตัวอย่างการใช้งาน ใช้งาน font-face บน canvas ซึ่งเราจะไม่สามารถเขียนแบบปกติได้เนื่องจาก browser จะ load font ไม่ทันทำให้เราต้องแก้ไขโดยต้อง create link ขึ้นมาและทำการ set attribute ต่างๆให้กับ tag นี้เหมือนกับที่เราเขียน reference stylesheet ปกติ
ซึ่งการ set attribute ให้กับ element ที่เราสร้างขึ้นสามารถกำหนดได้ 2 แบบคือ
link.rel=’stylesheet’ หรือ link.setAttribute(‘stylesheet’); ตามตัวอย่าง

หลังจากนั้นก็ให้ทำ new Image() ขึ้นมาเพื่อทำการ load font แล้วก็เขียน event onerror ดักไว้ เพราะมันต้องเกิด error แน่นอนเพราะสิ่งที่เรา load ไม่ใช่รูปภาพ แต่เห็น stylesheet หลังจากเกิด error แสดงว่า stylesheet ของเรา load เสร็จเรียบร้อยสามารถทำการวาดลงบน canvas ด้วย method fillText() ได้เลย

สุดท้ายถ้า copy code นี้ไปใช้งานจะยังใช้ไม่ได้ต้องทำการใส่ไว้ใน event onload ของ window ด้วยโดยเขียน

1
2
3
window.onload = function(){
// code ตามตัวอย่าง
}

เท่านี้ก็เป็นอันเสร็จเรียบร้อยสามารถใช้งาน font สวยๆบน canvas ได้แล้ว