jQuery

Check Mobile Orientation by JavaScript

มือถือใหม่ ๆ สามารถที่จะหันหน้าจอให้เป็น แนวตั้ง และแนวนอนได้ ส่วนการเข้าเว็บนั้นก็ไม่มีปัญหาอะไร แต่บางครั้งขนาดที่เปลี่ยนแปลงอยู่ตลอด ทำให้การจัดวางรูปภาพ หรือวิดีโอมีปัญหา คือไม่พอดีจนต้องสกลอร์ซ้าย-ขวาบ้าง ทางแก้ปัญหานี้ทำได้โดยการใช้ JavaScript ตรวจสอบขนาดหน้าจอ แล้วก็ย่อ/ขยายรูปภาพให้เหมาะสมกับขนาดที่เปลี่ยนแปลงไป (DEMO)

หมายเหตุ:

  • ผมใช้ jQuery ในการตรวจสอบ และกำหนดค่า เพราะทำง่ายดี ถ้าอยากจะใช้ JavaScript เดิม ๆ ก็ทำได้ไม่ยาก
  • ผมไม่มีมือถือสมัยใหม่ไว้ให้ทดลอง มีแต่ IE บน Windows Phone Emulator ซึ่ง IE มันใช้ onResize() ไม่ได้
  • iPhone มี event ตอนเปลี่ยนหน้าจอให้โดยเฉพาะ ลองหาดูเองนะ

Slide in the box with jQuery

วันก่อนโน้นนั่งฟัง jQuery for Absolute Beginners ตอนที่เท่าไหร่ไม่รู้ เขาสอนเรื่องการทำให้ภาพเลื่อนลงโดยอยู่ภายในขอบเขตของภาพเดิม (เป็นยังไงกันแน่ดูจากใน demo ละกันนะครับ)

จุดสำคัญของการทำแบบนี้ แทนที่จะอยู่ที่ JavaScript กลับไปอยู่ที่การกำหนด CSS เสียอย่างนั้น โดยการสร้าง <div> มาครอบรูปทั้งคู่ไว้ ในขนาดของกล่องให้มีขนาดเท่ากับขนาดภาพ แล้วกำหนดตำแหน่งของรูปให้เป็น absolute ที่ตำแหน่ง (0,0) ส่วนรายละเอียดปลีกย่อยอื่น ๆ ดูได้จากใน code ครับ

ของเขาทำสไลด์ไปด้านเดียวคือ ด้านล่าง แต่การสไลด์ไปด้านอื่น ๆ ก็ทำได้ไม่ยากถ้าเข้าใจ ผมเลยทำเป็นแบบทั้งสี่ด้านเก็บไว้

Fade Image by jQuery

อันนี้ เวลาเอาเมาส์ไปชี้บนรูป แล้วรูปชัดขึ้น พอเอาเมาส์ออกไปแล้วรูปกลับไปจางเหมือนเดิม ทำได้ง่าย ๆ โดยการใช้ .hover, .animate() และ { "opacity" : <value> }

ถ้าไม่เข้าใจดูได้จาก Demo ละกันครับ

Increase/Decrease Font Size by jQuery

ครั้งก่อนเขียนการย่อ/ขยายขนาดฟอนท์โดยใช้ JavaScript อย่างเดียว แต่สำหรับคนที่ใช้ jQuery อยู่แล้ว มีทางเลือกอื่น คือใช้ความสามารถเกี่ยวกับ CSS ของ jQuery ได้เลย