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 แทน

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