ทำ jQuery Filter แบ่งหมวดหมู่ข้อมูล

Share the joy
  •  
  •  
  •  
  •  
  •  

ถ้า List ของเรามีข้อมูลเยอะ ก็ยากแก่คนดูจะเลือกดู หรือการเลือกดูแต่หมวดหมู่ที่ตัวเองสนใจได้ง่าย ก็จะเป็นเรื่องดีของผู้ใช้เว็บไซต์ จะทำเป็นรูปแบบ Plugin เพื่อง่ายต่อการใช้มีฟังก์ชั่นดังนี้ สามารถสร้างกลุ่มหมวดหมู่ขึ้นมาได้เอง สามารถเซตหมวดหมู่ที่เริ่มต้นได้    ตัวอย่าง  วิธีการ ในแท็กปุ่มกดให้สร้างแอทริบิวท์ val ขึ้นมาและกำหนดค่าเพื่อแยกแต่ละประเภท   <li><a href=”javascript:void(0)” val=”All” class=”active”>All</a></li> <li><a href=”javascript:void(0)” val=”Showcase”>Showcase</a></li> <li><a href=”javascript:void(0)” val=”Mobile_App”>Mobile App</a></li> <li><a href=”javascript:void(0)” val=”Touch_screen”>Touch screen</a></li> <li><a href=”javascript:void(0)” val=”Website”>Website</a></li> ส่วนแท็กข้อมูล ข้อมูลไหนอยู่ประเภทไหนก็ใส่ชื่อคลาดตามที่ได้ตั้งไว้ <li class=”Website” > <a href=”#” target=”_blank” class=”pic”><img src=”web.jpg”></a> <h2>Website #1</h2> <p><a href=”#” target=”_blank”>view</a> ; <a href=”#” target=”_blank”>video…

Details

การทำ Responsive HTML5 jQuery Banner แทน Flash banner

Share the joy
  •  
  •  
  •  
  •  
  •  

ขอเสนอ เทคนิคและวิธีการทำ Responsive jQuery Banner… คงใกล้ถึงเวลาหมดยุคแบนเนอร์ ที่ทำจาก Flash animation เข้าไปทุกที เตรียมตัวที่เปลี่ยนจาก Flash มาเป็น HTML5/CSS3 หรือ jQuery กันได้แล้ว และต้องทำให้แบนเนอร์ที่ animate จาก jQuery ให้สารมารถใช้กับเว็บ Responsive ของเราได้ด้วย ตัวอย่าง Responsive Banner (ทดสอบโดยการลองยืดหดหน้าจอ) สร้างแบนเนอร์แต่ละขนาด สร้างแบนเนอร์อนิเมตแยกเป็นไฟล์ HTML แต่ละไซด์ขนาดแบนเนอร์ เช่น banner-for-desktop.html, banner-for-mobile.html,… จะกี่ขนาดก็ตามแต่ต้องการ ตัวอย่าง banner1.html, banner2.html (ที่เห็นมันนิ่งๆเพราะมันไม่ได้เรียกไฟล์ jQuery ตอนที่ท่านๆทำก็ดึงไฟล์ jQuery มาก่อนพอเสร็จแล้วค่อยเอาออกครับ) ตัวอย่างโค๊ด jQuery animate $(‘#ani1′).animate({                        top: 300 }, 500, function() { // Animation complete. $(‘#ani1′).animate({                        top:…

Details

เปรียบเทียบ transition CSS3 ระหว่าง top left, tranform, jQuery animate บน Mobile browser

Share the joy
  •  
  •  
  •  
  •  
  •  

ทดสอบดูว่าควรใช้วิธีไหนในการ animate อีลีเม้นของเราบน Mobile website ดี 1. CSS3 แบบกำหนด top lef .box {     width:60px;     height:60px;     position: absolute;     top:0;     left: 0;     background:red;     transition:all 2s ease-out;     -moz-transition:all 2s ease-out; /* Firefox 4 */     -webkit-transition:all 2s ease-out; /* Safari and Chrome */     -o-transition:all 2s ease-out; /* Opera */ } .box.ani1 {     left:300px; }  2. CSS3 คำสั่ง transform transform:…

Details

ทำ List แทก li อยู่กึ่งกลางแบบ ไดนามิก

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

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

วิธีการ

เซต ul ให้ text-aligh:center; และ li เซต display:inline-block;

 

ul{text-align:center;}

ul > li{display:inline-block;}

ปัญหาอัพ App ขึ้น store แล้ว Application Loader ฟ้อง fail codesign

ปัญหา Error นี้เจอบ่อยมาก แต่ก็ลืมวิธีแก้ปัญหาได้ทุกที เพราะนานๆจะอัพแอพขึ้น Store สักที

error-codesign

แก้ปัญหาโดยการ ลองสร้าง Cer แบบ Distribute ขึ้นมาใหม่ และExport ไฟล์ p12 ใหม่ provision แบบ Distribute ก็เชื่อมโยงกับ Cer ตัวใหม่นี้ให้ถูกต้อง

ประทับใจ และข้อดี เมื่อเริ่มใช้ Adobe edge animation

สร้าง Animation HTML5 ง่ายๆด้วย Adobe Edge

ได้ยิน Adobe Edge animation มานานแล้ว แต่ไม่ได้ลองใช้สักที ไม่คิดที่จะใช้ด้วย เพราะในใจคิดว่าคงไม่เวิคหรอก โค๊ดที่ได้ก็คงเละๆเทะๆตามโปรประสาโปรแกรม Generate โค๊ดนั่นแหล่ะ

แต่เมื่อ Google web designer ออกมา และกระแสแรงมากก็ลองใช้ดู ก็รู้สึกชอบดี เลยอยากลองเปรียบเทียบเล่นกับ Adobe Edge Animation ดู ก็รูสึกชอบมากกว่าซะอีก อาจเป็นเพราะเครื่องไม้เครื่องมือ และคอนเซปการทำงานที่เหมือน Adobe Flash + After Effect มาก เลยทำให้เข้าใจได้ไม่ยาก

 

 

สรุปแล้วเป็นเครื่องมือที่ง่ายในการ animate HTML5 ไม่ต้องวุ่นวายในการเขียนโค๊ดเอง ประหยัดเวลาและสมองไม่ต้องนั่งปวดหัว