ทำ layout ให้สูงเท่ากันทุกคอลัมน์
Jul 1st
ปัญหาคอลัมน์ยืดยาวไม่เท่ากัน มีรูปแบนเนอร์ที่ต้องการให้อยู่ชิดล่างตลอด มีวิธีแก้ดังต่อไปนี้
ก๊อปปี้สคริปตัวนี้ไป
/* ------------------------------------------------ PVII Equal CSS Columns scripts -Version 2 Copyright (c) 2005 Project Seven Development www.projectseven.com Version: 2.1.0 ------------------------------------------------ */ function P7_colH2(){ //v2.1.0 by PVII-www.projectseven.com var i,oh,h=0,tg,el,np,dA=document.p7eqc,an=document.p7eqa;if(dA&&dA.length){ for(i=1;i<dA.length;i+=2){dA[i+1].style.paddingBottom='';}for(i=1;ih)?oh:h;}for(i=1;i<dA.length;i+=2){oh=dA[i].offsetHeight; if(oh<h){np=h-oh;if(!an&&dA[0]==1){P7_eqA2(dA[i+1].id,0,np);}else{ dA[i+1].style.paddingBottom=np+"px";}}}document.p7eqa=1; document.p7eqth=document.body.offsetHeight; document.p7eqtw=document.body.offsetWidth;} } function P7_eqT2(){ //v2.1.0 by PVII-www.projectseven.com if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){P7_colH2();} }
function P7_equalCols2(){ //v2.1.0 by PVII-www.projectseven.com var c,e,el;if(document.getElementById){document.p7eqc=new Array(); document.p7eqc[0]=arguments[0];for(i=1;i<arguments.length;i+=2){el=null; c=document.getElementById(arguments[i]);if(c){e=c.getElementsByTagName(arguments[i+1]); if(e){el=e[e.length-1];if(!el.id){el.id="p7eq"+i;}}}if(c&&el){ document.p7eqc[document.p7eqc.length]=c;document.p7eqc[document.p7eqc.length]=el}} setInterval("P7_eqT2()",10);} }
function P7_equalCols2(){ //v2.1.0 by PVII-www.projectseven.com var c,e,el;if(document.getElementById){document.p7eqc=new Array(); document.p7eqc[0]=arguments[0];for(i=1;i=pt)?pt:p; g.style.paddingBottom=np+"px";if(np<pt){np+=inc; setTimeout("P7_eqA2('"+el+"',"+np+","+pt+")",sp);} }
เซฟตั้งชื่อ สมมติว่าชื่อ eqCols2.js แอดมันไว้ที่ส่วน head
<script type="text/javascript" src="eqCols2.js"></script>
จากนั้นเรียกใช้งาน ตามที่เว็บเค้าแนะนำ คือใส่ที่ body
<body onLoad="P7_equalCols2(1,'c1','P','c2','P')">
สคริปจะทำงานโดยการใส่ padding-bottom ให้กับแท็กที่เรากำหนด
- เลข 1 คือ คอลัมน์ที่สั้นกว่าจะยืดยาวให้เท่ากันกับคอมลัมน์ที่เรากำหนดแบบ animation ถ้าไม่ต้องการให้ใส่ 0
- c1 คือ id ของคอมลัมน์ เช่น col-one
- P คือ แท็ก html ที่อยู่ใน คอลัมน์ที่เรากำหนด อาจจะใส่เป็น div หรือ แท็กอื่นได้
- c2 คือ id ของ คอลัมน์ที่2 เช่น col-two
หากในเว็บนั้นมีการเรียกใช้ jquery สามารถเรียกใช้แบบนี้ได้ โดยไว้ที่ส่วนใดก็ได้ในหน้าเว็บ
var $j = jQuery.noConflict(); $j('document').ready(function() { P7_equalCols2(1,'col-one','p','col-two','div') });
จากตัวอย่างด้านบน เราจะได้ col-one และ col-two สูงเท่ากัน โดยที่ หาก col-two สูงกว่า มันจะวิ่งไปที่ col-one และทำการใส่ padding-bottom ที่แท็ก p กลับกัน หาก col-one สูงกว่า มันจะไปที่ col-two แล้ว ใส่ padding-bottom ที่แท็ก div
**** ถ้าในนั้น มี div หรือ p มากกว่า 1 ตัว มันจะใส่ padding ในตัวสุดท้าย
ข้อแนะนำ
- ใส่ id ให้ถูกต้อง ตรวจสอบว่า ในคอลัมน์นั้นมี แท็กที่เรา ระบุไว้หรือไม่
- หากต้องการให้คอมลัมน์ยืดออกที่ส่วนกลางโดยที่มีเนื้อหาอยู่บนล่าง ให้ใช้แท็กที่ไม่ซ้ำกับแท็กอื่น เช่น <pre> หรือ <span>
- ถ้ามี 3 คอลัมน์หรือ4 คอลัมน์ก็ให้เพิ่มโค้ดต่อไปเช่น (1,’c1′,’P',’c2′,’P',’c3′,’P',’c4′,’p')
ข้อมูลจาก
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
ตัวอย่างจากในเว็บ http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm






วาว วิธีแปลกแฮะ ขอบคุณครับ
เยี่ยมมากๆครับ
เยี่ยมมากครับ
$(document).ready(function(){
var content = $(“div#content”).height(); //เก็บค่าความสูงของ div ไว้
var sidebar = $(“div#sidebar”).height(); //เก็บค่าความสูงของ div ที่2 ไว้
if(content > sidebar) { //ถ้าค่าของ div แรกมากกว่า
$(“div#sidebar”).css(“height”, content); //ให้เพิ่มความสูงของ div ที่ 2 ให้เท่ากัน
}
if (content < sidebar) { //ถ้าค่าของ div ที่ 2 มากกว่า
$(“div#content”).css(“height”, sidebar); //ให้เพิ่มความสูงของ div แรกให้เท่ากัน
}
});
อันนี้เขียนเองนะครับ โดยใช้ JQuery ช่วย (ผมเขียน javascript ไม่เป็น)
jquery จะมีฟังก์ชันรองรับเยอะมาก
มันจะมีปัญหาครับ ถ้าใช้ height เวลามีคอนเท้นยาว FF มันจะไม่ยืดให้ ต้องเชียนเช็กอีกทีว่า Browser อะไร ถ้าเป็น FF ต้องใช้ min-height ครับ ส่วน ปัญหาอีกอย่างคือถ้าใน div นั้นมีรูปแล้วรูปไม่ได้ใส่ height ไว้ แล้วรูปยังโหลดไม่เสร็จ โหลดช้า ความสูงของ div จะเพี้ยนไปทันทีครับ
โค้ดข้างบนเป็นการยืดให้เท่ากันหมดครับ
ไม่ได้กำหนดใน css ให้ height เลย
แต่ใช้ JQuery เพิ่มลงไปทุกครั้งที่โหลดหน้า
Ex.$(”div#content”).css(”height”, sidebar);
ให้เพิ่ม element id content ให้มีค่าเท่ากันกับ div อีกตัว
ไม่ได้กำหนดรูปในนั้นครับ
ถ้าเข้าหน้าใหม่ที่อีกฝั่งสั้นกว่า ก็ให้ JQuery เพิ่มความสูงให้กับฝั่งนั้นครับ
เจอ blog นี้แล้วทำให้อยากศึกษาเวบ design ให้มากขึ้นอีก ผมเป็นแต่ php เรื่อง layout นี่โคตรโง่จริงๆ แล้วจะแวะมาบ่อยๆนะครับ …
มองไม่เห็นภาพอ่ะครับ
ใครช่วยทำให้เห็นภาพได้ป่าว
ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ
Thank you for good information
เยี่ยมครับ ขอ bookmark ไว้ใช้ในอนาคตเลยนะครับ
ขอบคุณครับ
กลับมาอ่านหลังจากหายไปนานคับ
ได้ความรู้ใหม่ๆเหมือนเดิม
อยากทราบว่าสคริปตัวนี้ใช้กับ Theme WordPress ได้หรือเปล่าค่ะ:d
@ZedA
ใช้ได้ครับ แต่ต้องเพิ่มลงในธีมเองครับ
งงเล็กน้อย แต่ก็ขอบคุณครับ :-?