Snapshot

myBB Jump to Page

In myBB forum's system, it not easily to go to middle pages, if that thread have ton of pages because it don't have jump to page or go to page ability, but we can add it.

Go to AdminCP - Template & Style - Template - [THEME TEMPLATE] - Multipage Pagination Templates - multipage

Add these lines after {$prevpage}{$start}{$mppage}{$end}{$nextpage} before last </div> (or some where you want)

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 ได้เลย

Increase/Decrease Font Size by JavaScript

code สำหรับย่อ/ขยายขนาดฟอนท์ใน element โดยใช้ JavaScript ในตัวอย่างใช้หน่วยเป็น em เพื่อความสะดวกในเวลาสร้างหน้าเว็บ (และ W3C เขาแนะนำให้ใช้หน่วยนี้)

Code Snapshot for Web Developer

หนังสือเล่มนี้เอาไว้เอาไว้รวบรวม code snapshot ที่เกี่ยวกับการพัฒนาเว็บเป็นหลัก เพื่อกันลืม และแบ่งปันให้กับคนอื่น ๆ ที่สนใจ (และเผลอเข้ามาในเว็บผม)

ในทุก ๆ ตอนจะมีคำอธิบาย code สั้น ๆ อยู่ในตัว code เอง เพื่อความเข้าใจ และอีกอย่างพอเวลาผ่านไปนาน ๆ จะได้นึกออก

ตัว code อาจจะไม่ซับซ้อนมากนัก และพยายามจะเขียนให้เข้าใจง่ายมากที่สุด ซึ่งอาจจะดูเยิ่นเย้อไปบ้างสำหรับบางท่าน อันนี้เป็นความตั้งใจ หากประสงค์จะย่อให้สั้นลงมีโปรแกรม หรือเว็บหลายเว็บที่บริการบีบอัดข้อมูลอยู่ สามารถใช้บริการได้ตามสะดวกครับ