ลิสต์คอมเม้นท์#3 Time Line Style

posted on 20 Aug 2012 18:23 by limitblog in template directory Idea
"ลิสต์คอมเม้นท์ #3 Time Line Style #2" ครับผม หลังจากได้ทำตัว "Time Line Stye" อันแรกไป เสียงตอบรับเงียบกริบดีเกินคาด วันนี้ Time Line #2 มีแแบบ pure css และแบบใช้ javascript...
 
แบบแรก: Pure css เป็น css3 นะครับ
 
  แบบนี้ การต่อของอีกอันมันจะไม่ค่อยสมบูรณ์ สามารถดูได้จาก DEMO นี้นะครับ และสามารถ Download css ได้เลย
 
 
แบบที่สอง: Css + Javascript
 
  เนื่องจากแบบนี้การใช้ Javascript มาช่วยทำให้การใช้ Css ด้านบนนั้รตั้งเปลี่ยนไปทั้งหมดนะครับ ก่อนอื่นเพิ่ม javascript ด้านล่างใส่ไปที่ Customcode ก่อนนะครับ [วาง widgets ไว้ส่วนไหนก็ได้]
<script type="text/javascript"> $(function(){ var left_column_height = 0; var right_column_height = 0; var items = $('.comment'); for (var i = 0; i < items.length; i++) { if (left_column_height > right_column_height) { right_column_height+= items.eq(i).addClass('right').outerHeight(true); } else { left_column_height+= items.eq(i).outerHeight(true); } } }) </script>
จากนั้น Download Css ไปวางไว้ที่ Edit Css เท่านี้ก็เส็จเรียบร้อย หรือดู DEMO ได้ที่นี่
ท้ายนี้ : เนื่่องด้วยผมเรียบเรียงบทความไม่เก่ง อาจจะงง หรือไม่รู้เรื่องเลย ยังไงก็ถ้าสงสัยหรือยัด code มันไม่แสดง มันเหลื่อมล้ำก็เข้ามาโพสไว้แล้วจะตามไปแก้ให้ถึงบล๊อกเลยครับ
 
- ตัวด้านบน pure css ได้ทดลองกับธีม Simple ความกว้าง content ที่ 490px.
- ตัวด้านล่าง ได้ทดลองกับธีม Simple ความกว้าง content ที่ 500px. - แสดงผลได้ดีบน firefox และ chrome
 
/*ข้ออภัยข้อความไม่สมบูรณ์แก้ไขล่าสุด 6/9/55 เปลี่ยนธีมแต่แก้ไขจนเนื่อหาหน้านี้ฟังไป*/

Comment

Comment:

Tweet

(แอบมา ctrl + f5 ดู css บล็อกนี้ครับ ตกใจ)

#18 By Anantsiri Ch on 2012-09-07 14:32

สุดยอดอ่ะ อันนี้ชอบจังเลย confused smile Hot!

#17 By p.cobra on 2012-09-04 03:38

เราจะบอกว่าเราจิ๊กโค๊ดธีมไป มันสวยมากเลออ่า Hot!
สุดยอดยกนิ้วให้ปาดาวเยอะๆเลย
 Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!
Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!
Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!
โหยอด มหาเทพเมพขริงๆ open-mounthed smile confused smile Hot! Hot! Hot! sad smile

#15 By Photo-Pic on 2012-08-23 23:51

เก่งจังค่ะ ><  สวยมากเลยด้วย จะเอาไปลองทำดูนะคะ  ขอบคุณค่ะ confused smile Hot!

#14 By toririn on 2012-08-22 16:14

อู....สุดยอดเลยครับ ขอลองเอาไปใช้ดูนะ
Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!

#13 By ลอดโต๊ะ on 2012-08-21 22:37

เจ๋ง!! สุด ๆ เลยครับ!!
Hot! Hot! Hot! Hot! Hot! Hot! Hot!

#12 By Anantsiri Ch on 2012-08-21 11:37

@limitblog ผมคารวะท่าน ด้วยเหล้าขาวหนึ่งจอก
-/\- โปรดรับข้าเป็นศิษย์ด้วยเถิด :-3 open-mounthed smile open-mounthed smile
Hot! Hot! Hot! Hot!

#11 By ozinepank on 2012-08-21 11:00

ในที่สุดก็ทำแบบ 2 ข้างได้แล้วสินะ ฮ่า ๆ คราวก่อนได้แบบข้างเดียวก็ว่างามแล้วนะ confused smile Hot!

#10 By BoatKung on 2012-08-21 07:20

ขอบคุณนะจร๊าา   big smile big smileHot! Hot! Hot! Hot! Hot!
ยกนิ้วให้ กดไลท์เลย big smile confused smile open-mounthed smile double wink Hot! Hot! Hot!

#8 By บุรุษนิรนาม on 2012-08-20 23:29

good job

#7 By iamdozenist on 2012-08-20 21:33

เจ๋งมากค่ะ Hot! ขอบคุณสำหรับโค้ดค่ะ
บล็อกสวยมากเลยค่ะ ใหเดาวเล้ย!
Hot! Hot! Hot! Hot! Hot!

#6 By CHUNKKO* on 2012-08-20 21:08

Hot! Hot! Hot!
สุดยอดจริง ๆ กับบ้านนี้ครับ..
ยกนิ้วให้555+^^big smile big smile
 ขอลองไปหัดทำบ้างนะคะ
ขอบคุณสำหรับเทคนิคดีๆค่ะ

#4 By NAT on 2012-08-20 20:32

บล๊อคนี้อลังการทุกครั้งที่เข้ามาจริงๆ 
ขอนำไปใช้นะครับ :DHot! confused smile

#3 By iSadNop on 2012-08-20 20:31

อูววว สร้างสรรค์สุดๆไปเลยค่าาา า
ขออนุญาตินำไปใช้บ้างนะคะ >< ////// !
Hot! Hot! Hot! Hot! Hot!

#2 By ゛K๏shiha! on 2012-08-20 20:23

สุดยอดค่ะ บล็อกนี้นับวันยิ่งเจ๋งนะ
Hot! Hot! Hot!

#1 By zaяaz' on 2012-08-20 20:03