ปรับความยาว Listbox ในฟอร์ม (HTML Form) เพราะว่าข้อมูลเยอะ ทำให้ยาวเกินไป

บางครั้งกาารสร้างฟอร์ม (Html Form) ก็ติดปัญหาเรื่องของการแสดงผล ของหน้าฟอร์มที่เกิดจาก Listbox หรือ tag ครับ  ปัญหาคือ ข้อมูลใน Listbox ยาวมากทำให้หน้าเว็บเพจที่ใช้แสดงผลนั้นยืดออกจนน่าเกลียด ดังภาพตัวอย่างครับ

ขนาดของ Listbox ที่ยาว ๆ นี้ทำให้จัดหน้าฟอร์ม (Form) ได้ค่อนข้างยาก

วิธีการปรับ เพื่อให้ Listbox ที่อยู่ในฟอร์มสามารถแสดงผลได้โดยไม่ใช้พื้นที่ของหน้าเว็บเพจมากเกินไปนั้น ก็ใช้ CSS เข้ามาช่วยครับ โดยใช้ Property : Width เข้ามาช่วยในการจัดรูปแบบ ดังตัวอย่างครับ

หากปรับแล้วจะได้ผลดังภาพต่อไปนี้

จะได้หน้าตาดังนี้ ซึ่งทำให้สามารถจัดหน้า ฟอร์ม (Html form) ได้งายยิ่งขึ้น

เวลาเลือก ข้อความก็ไม่ได้หายไปนะครับ ยังสามารถแสดงผลได้ยาว ๆ เหมือนเดิม ตามภาพตัวอย่างนี้ครับ

ผลการเลือกรายการ ที่มีข้อความแสดงเต็มเหมือนเดิม

เพียงคำสั่งสั้นๆ เท่านี้ก็ช่วยให้สามารถจัดการฟอร์มได้งายขึ้นแล้วใช่ไหมครับ 

การเปลี่ยนค่าใน class (กำหนดค่า css) ของ html ด้วย javascript

การเปลี่ยนค่า attribute ของ css ใน HTML ด้วยจาวาสคริป

หากเราต้องการแก้ไขค่า css ใน html ด้วยจาวาสริปแล้ว (javascript) เราก็สามารถทำได้โดยง่ายนะครับ  หากเราต้องการทำดังกล่าวสมารถ ทำได้ดังตัวอย่างคำสั่งต่อไปนี้นะครับ

document.getElementById("idElement").setAttribute("class", "className");

เมื่อ className หมายถึงการกำหนดคุณสมบัติใหม่ ๆ ใด ๆ ลงไป แทนคลาสเดิม

เช่นตัวอย่าง

[div id="myElement"]Welcome on my site![/div]
[a href="javascript:changeClass()"]Change Class[/a]
[script language="javascript"]
function changeClass(){
document.getElementById("idElement").setAttribute("class", "myClass");
}
[/script]

หมายเหตุ เปลี่ยน [  = <   และ ] = >


จากตัวอย่างจะมี tag อยู่ ซึ่งจะถูกควบคุมการแสดงผลด้วย class name ที่ชื่อว่า myElement คำสั่งของ javascript ด้านล่างจะเป็นการแสดงตัวอย่างการทำงานของการเปลี่ยนคลาสของ html (หรือส่วนของ css นั่นเอง) ในขณะที่กำลังทำงาน โดยไม่ต้อง refresh หน้าเว็บใหม่ โดยกำหนดให้การแสดงผลใหม่ถูกควบคุมด้วย class name ที่ชื่อว่า myClass

ที่มา : http://woork.blogspot.com/2008/01/change-class-attribute-using-javascript.html