Archive for CSS
June 19, 2007 at 12:24 pm · Filed under Ajax, CSS, JavaScript, PHP
ระยะเวลาในการโหลดหน้าเว็บเพจ เป็นสิ่งหนึ่งที่สำคัญในการพัฒนาเว็บ แต่ถ้าหากว่าหน้าเว็บเพจของเรามีความเร็วในการโหลดเร็วมาก ก็จะเป็นการดี
ขนาดของไฟล์นั้น ก็เป็นอีกปัจจัยหนึ่ง ที่มีผลต่อความเร็วในการโหลดหน้าเว็บเพจ ซึ่งถ้าหากว่าเราสามารถที่จะลดขนาดไฟล์ได้ ก็จะเป็นการดี และทำให้เว็บเพจของเราโหลดเร็วขึ้น ส่วนใหญ่เราจะนึกแต่ขนาดของรูปภาพ แต่ขนาดของไฟล์อื่น ก็สำคัญไม่แพ้กัน ไม่ว่าจะเป็น php, javascript, css ฯลฯ
และวิธีการลดขนาดไฟล์นั้นก็มีหลายวิธี วันนี้ผมมีอีก หนึ่ง ในหลายๆ วิธีมานำเสนอ (*-*)
พระเอกในงานนี้ก็คือ Combine 0.5 ไฟล์ php จากดาวนาเม็ก
ขั้นตอนการทำงาน คือ ใช้ไฟล์ php ในการอ่านไฟล์และ ทำการบีบอัดแล้ว เก็บไฟล์นั้นไว้ใน cache จากหลายๆ ไฟล์ ก็จะเหลือแค่ไฟล์เดียว และที่สำคัญ ใช้ได้ทั้ง javascript และ css (หรือไฟล์อื่นๆ อีก)
Read more »
April 18, 2007 at 10:24 am · Filed under CSS, JavaScript
Kevin Miller ได้ออก LightWindow 1.1 ซึ่งเป็นอีกหนึ่งของจาวาสคริปส์ ไลบราลี่ เพื่อใช้สร้าง วินโดว ที่พัฒนาต่อจาก lightbox.
หลังจากที่เขาได้ศึกษา สคริปส์ เพื่อใช้สร้าง วินโดว หลายๆ อัน ไม่ว่าจะเป็น lightbox, slimbox ฯลฯ และพบว่าไม่มีตัวใหนโดนใจสักอัน ทุกอันมีความสามารถที่ดี แต่ก็จำกัดให้ใช้ในรูปแบบ ที่จำกัดเท่านั้น (รูปภาพ เว็บเพจ แกลเลอรี่ ฟอร์ม …) และบางอันก็เขียนโค้ดไม่ค่อยดี -*- หรือทำการดัดแปลงมาจากตัวอื่นอีกที และไม่มีตัวใด ที่รองรับรูปแบบทุกอย่าเลย และยากที่จะพัฒนาต่อ
และตัวที่เขาได้ทำขึ้นมานี้ ทำงานได้ดี และรองรับรูปแบบที่หลากหลาย ไม่ว่าจะเป็น PDF, movies หรือ Flash ฯ และรองรับรูปแบทึกอย่างที่คุณต้องการที่จะใช้ใน lightbox.
สริปตัวนี้มีขนาด 52k (ยังไม่ได้บีบอัด) และต้องการจาวาสคริปไลบราลี่อีก 2 ตัวคือ prototype 1.5+ และ scriptaculous 1.7+ และเมื่อทำการบีบอัดแล้วขนาดจะอยู่ที่ 9k เท่านั้น
อย่างน้อย นี่ก็เป็นอีกทางเลือกหนึ่ง สำหรับใครที่ต้องการ วินโดว ในรูปแบบนี้
ที่มา: ajaxian
March 20, 2007 at 9:55 am · Filed under CSS, JavaScript
Guillermo Rauch หนุ่มน้อยหน้ามน ซึ่งอายุได้เพียง 16 ปี จาก Argentina ได้เขียน fancy menu โดยใช้ CSS และ JavaScript โดยมี mootools เป็นฐานในการพัฒนา (อะไรจะเก่งปานนั้น)
ตัวอย่างโค้ดก็ได้ประมาณนี้
- window.addEvent(’domready’, function() {
- new SlideList($E(’ul’, ‘fancymenu’), {transition: Fx.Transitions.backOut, duration: 700, onClick: function(ev, item) { ev.stop(); }});
- });
การแสดงผลจะทำให้ดูเหมือนกับว่า มีการซูมเข้าไปในเมนูนั้น ซึงก็ทำออกมาได้ดีทีเดียว (ดีมากๆ) ว่าแต่เด็กรุ่นราวคราวเดียวกันกับ พ่อหนุ่ม Guillermo Rauch ในบ้านเราจะเขียนอะไรแบบนี้ออกมาบ้างมั้ยน้า……
ที่มา ?Ajaxian
