web

มาเพิ่มสีสันและความแปลกใหม่ให้กับเอ็นทรีกันดีกว่า...

ถ้าคุณมีข้อความในเอ็นทรีที่ความยาวหลายบรรทัด

- - - - - - - - - - - - - - - - - - - - - - - - -

ยาว

ย้าว

ยาว

ยาวมาก

ยาวเกินไป

ยาวจนเกะกะ

ยาวจนกินเนื้อที่บนหน้าจอในบล็อกคุณ

- - - - - - - - - - - - - - - - - - - - - - - - -

วันนี้ขอแนะนำทางเลือกใหม่ในการจำกัดพื้นที่ของเนื้อหาโดยใช้ scrollbar เป็นตัวช่วย

ตอนเขียนเอ็นทรี ให้คลิกที่ปุ่ม แล้วแทรกโค้ดนี้ลงไปในส่วนที่ต้องการให้มีกรอบพร้อม scrollbar

<div style="OVERFLOW: auto; width: 100%; height: 100">เนื้อหายาว ๆ </div>

แล้วปัญหาดังกล่าวจะหมดไป

ยาว

ย้าว

ยาว

ยาวมาก

ยาวเกินไป

ยาวจนเกะกะ

ยาวจนกินเนื้อที่บนหน้าจอในบล็อกคุณ

เพิ่มเติม

สามารถปรับเปลี่ยนความกว้างและความยาวกันได้ตามชอบ
และสามารถเพิ่มเติมคุณสมบัติอื่น ๆ ได้อีกด้วย
ตัวอย่างเช่น

<div style="OVERFLOW: auto; width: 80%; height: 150; color:#FFFFFF; background-color:#C0F060">เนื้อหายาว ๆ </div>

  • width: 80% หมายถึง ความกว้างของกรอบเป็น 80% ของเนื้อที่การเขียน
  • height: 150 หมายถึง ความสูงของกรอบเท่ากับ 150 พิกเซล
  • color:#FFFFFF หมายถึง สีตัวอักษรในกรอบมีสีขาว
  • background-color:#C0F060 หมายถึง สีพื้นในกรอบมีสีเขียว

ยาว

ย้าว

ยาว

ยาวมาก

ยาวเกินไป

ยาวจนเกะกะ

ยาวจนกินเนื้อที่บนหน้าจอในบล็อกคุณ

ใครสนใจก็สามารถนำไปทดลองใช้กันได้นะครับ

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

การเปลี่ยนธีมแบบสุ่ม

จากที่หลาย ๆ คนได้เห็นธีมเฉพาะกิจ:แฮร์รี่พอตเตอร์ในบล็อกนี้มาหนึ่งอาทิตย์แล้ว
นั่นแหละคือการเปลี่ยนธีมแบบสุ่มและในวันนี้เราจะมาเฉลยเทคนิคให้ทราบกัน

ขอแจ้งให้ทราบไว้ก่อนว่า ถ้าใครยังไม่เคยอ่านบทความเกี่ยวกับการเปลี่ยนธีม
ในบทความก่อนหน้านี้ สามารถตามไปอ่านได้
ที่นี่เพื่อที่จะได้ไม่งงจนเกินไป
(หรือไม่ก็จะงงยิ่งกว่าเดิม เฉกเช่นเหยื่อคนอื่น ๆ ที่หลงเข้าไปอ่านก่อนหน้านี้)

ลักษณะการทำงานของฟังก์ชั่นเปลี่ยนธีมแบบสุ่มก็คือ เป็นการสุ่มเลือกค่าออกมา
จากขอบเขตที่กำหนดไว้ เช่น ขอบเขตที่กำหนดไว้คือ7 เลขที่จะถูกสุ่มออกมา
ก็จะอยู่ระหว่าง 0 ถึง 6 เท่านั้น

ให้ลองศึกษาสคริปต์ข้างล่างดูนะครับ

function getCSS()
{ 
// สร้างตัวแปรเพื่อระบุ url ที่ใช้ฝากไฟล์ css
url = 'http://www.yourhost.com/folder/'; // สร้างอาร์เรย์ (Array) เพื่อเก็บสมาชิกของชื่อไฟล์ธีมต่าง ๆ ที่จะนำมาใช้
themes = new Array ("style1", "style2", "style3", "style4",
"style5", "style6", "style7");
// ขอบเขตก็คือจำนวนสมาชิกในอาร์เรย์นั่นเอง นับดูตอนนี้จะเท่ากับ 7
range = themes.length;
today = new Date();		// สร้างตัวแปรรับค่าวันเวลาปัจจุบัน
second = today.getSeconds(); // ดึงเฉพาะเลขวินาทีออกมาใส่ตัวแปร
// เอาค่าวินาทีมา mod กับขอบเขต จะได้ค่าระหว่าง 0 ถึง 6
var i = second%range;
// ค่าที่สุ่มออกมาได้จะเป็นตำเหน่งของสมาชิกในอาร์เรย์ที่เป็นชื่อไฟล์
display = url + themes[i] +'.css';
//สั่งให้โค้ดสร้างคำสั่งเรียกธีมโดยใช้ตัวแปร display มาใส่แทนในส่วนของชื่อไฟล์
var css = '<';
css+='link rel="stylesheet" href="' + display + '" \/';
css+='>';
// พิมพ์คำสั่งเรียกธีมที่สร้างเสร็จแล้ว
document.write(css);
}

getCSS();

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

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

ในขณะที่ฟังก์ชั่นสุ่มของจริง (random) จะต้องใช้การทำงานที่ซับซ้อนกว่าอีกนิดนึงคือ
คือมันจะมีหน้าที่สุ่มเลือกค่าระหว่าง 0 ถึง 1 ออกมาให้เท่านั้น ที่เหลือเป็นหน้าที่ของเรา
ที่จะกำหนดขอบเขตของจำนวนที่ต้องการเอาเอง
ซึ่งถ้าเราจะเปลี่ยนโค้ดการเปลี่ยนธีม
ด้านบนให้มาใช้ฟังก์ชั่นการสุ่มจริง ๆ เราจะต้องเปลี่ยนโค้ดในบรรทัดเหล่านี้

today = new Date();		// สร้างตัวแปรรับค่าวันเวลาปัจจุบัน
second = today.getSeconds(); // ดึงเฉพาะเลขวินาทีออกมาใส่ตัวแปร
// เอาค่าวินาทีมา mod กับขอบเขต จะได้ค่าระหว่าง 0 ถึง 6
var i = second%range;

ให้เป็นแบบนี้แทน

var rand = Math.random();
// ตัวแปร rand จะบรรจุค่าหนึ่งที่อยู่ระหว่าง 0 ถึง 1 (มีทศนิยมให้หลายตำแหน่ง)
  var i = Math.round(rand*(range-1));
// พอเอาไปคูณกับ range-1 ที่เท่ากับ 6 จะทำให้ค่าที่สุ่มได้จะอยู่ระหว่าง 0 ถึง 6
// ส่วนฟังก์ชั่น Math.round จะช่วยปัดเลขทศนิยมให้เป็นเลขจำนวนเต็ม

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

เอาล่ะ ถ้าแก้ไขโค้ดให้ได้ที่ต้องการเสร็จเมื่อไหร่ บันทึกโค้ดลงในไฟล์ สมมุติว่าชื่อ "css_random.js"

ส่วนคำสั่งสำหรับการเรียกใช้สคริปต์ css_random.js เป็นดังนี้

<script language="javascript" src="http://www.yourhost.com/folder/css_random.js"></script>

ทีนี้ก็เอาโค้ดตรงโซนสีเขียวไปแปะในเอ็นทรีก็ได้

หรือถ้าจะต้องการให้มีผลกับทั้งบล็อก ก็ให้ไปวางโค้ดเรียกสคริปต์ในส่วนของ
Preferences > Links > Add New Link แทน

ลองเอาไปทดลองดูนะครับ สนุกดี

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

ธีมที่เปลี่ยนตามเวลาในการเข้าบล็อกของผู้เยี่ยมชม

ขอเล่าที่มาของการเขียนบมความเรื่องการเปลี่ยนธีมหน่อยละกัน...
สืบเนื่องมาจากที่คุณตุ้มเป๊ะส่งลิงค์ของบทความเกี่ยวกับการสลับธีมมาฝากให้แปล

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

ตัวอย่างก็เอามาจากเว็บเขานั่นแหละ แต่มีการตัดโค้ดบางบรรทัดที่ไม่จำเป็นออกไป
เปลี่ยนชื่อตัวแปร ลดเงื่อนไขในการเปลี่ยนธีมให้น้อยลง และสร้างตัวแปรเพื่อรองรับ
การเก็บโค้ดไว้ในเซิร์ฟเวอร์อื่น (ตัวแปรชื่อ url) แถมคำอธิบายโค้ดเพิ่มเติมแต่ละบรรทัด

หลักการคือ เขียนโค้ดในภาษาจาวาสคริปต์ (JavaScript) ดึงค่าของเวลา (ชั่วโมง)
ปัจจุบันมาสร้างเงื่อนไขในการเลือกธีมแสดงผล

จากตัวอย่าง สมมุติว่าต้องการแบ่งช่วงเวลาออกเป็น 4 ช่วง คือ 0:00, 6:00, 12:00, 18:00
หรือคุณก็สามารถแก้ไขโค้ดเพื่อปรับเปลี่ยนเวลาหรือ แบ่งช่วงเวลาใหม่ได้ตามใจชอบ

สำหรับการเปลี่ยนธีมในเอ็นทรีใดเอ็นทรีหนึ่ง
ให้เอาโค้ดนี้ไปแปะไว้ในส่วนล่