Code For Web: 2012

วันอังคารที่ 1 พฤษภาคม พ.ศ. 2555

PHP Compare Date/Time ฟังก์ชั่นการเปรียบเทียบเวลา

ตัวอย่างโค้ด

<?php
function compareDate($date1,$date2) {
$arrDate1 = explode("-",$date1);
$arrDate2 = explode("-",$date2);
$timStmp1 = mktime(0,0,0,$arrDate1[1],$arrDate1[2],$arrDate1[0]);
$timStmp2 = mktime(0,0,0,$arrDate2[1],$arrDate2[2],$arrDate2[0]);

if ($timStmp1 == $timStmp2) {
echo "\$date = \$date2";
} else if ($timStmp1 > $timStmp2) {
echo "\$date > \$date2";
} else if ($timStmp1 < $timStmp2) {
echo "\$date < \$date2";
}
}
echo compareDate("2004-01-06","2004-05-06");
?>

PHP compare date

Screenshot

PHP compare date

Google Maps API V.2 อย่างง่าย ตอนที่ 2 หาพิกัดบนแผนที่ แบบที่ 1

แบบที่ 1 เมื่อมีการขยับแผนที่ให้เก็บค่าจุดกลางแผนที่แล้วทำการแสดงผลค่า Lat Lng อยู่ใต้แผนที่
ตัวอย่างโค้ด

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>newsirius13</title>

<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAKaJQ6galA0QmFhNdQzYuwRQnaT__a1y-hZdnJBN4Ggj_4W3wVRTkKlGxp0EJvRTbiAqcn-FCYSTDog"
type="text/javascript"></script>

<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(13.8196,100.0601), 7);

GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

}
}

</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 800px; height: 500px"></div>
<div id="message"></div>
</body>
</html>

ในส่วนของbodyให้ใส่ <div id="message"></div>เพื่อแสดงผลได้เลย

Google Maps API V.2 อย่างง่าย ตอนที่ 1 บทนำ

ในบทความนี้ผมจะกล่าวถึงการใช้ Google Maps APIอย่างง่ายเพื่อเป็นตัวอย่างให้ผู้สนใจได้ทำขึ้นเพื่อเริ่มต้นทดลองใช้งาน หรือเรียนรู้ทำความเข้าใจในเทคโนโลยของ Google Maps API
ความรู้พื้นฐานเบื้องต้นที่จำเป็นในงานพัฒนา Google Maps mashup ซึ่งควรมี ดังนี้
1. html/ xhtml
2. javascript

เริ่มต้นการ Google Map API
ก่อนอื่นเราต้องทำการยื่นคำขอ API Key สำหรับ URL ของเว็บไซต์ที่จะใช้บริการ Google Maps API เว็บไซต์นั้นเป็นที่ที่เราจะนำเว็บเพจที่มี Google Maps เป็นองค์ประกอบไปวางไว้ หากไม่ใส่ API Key ลงไปจะไม่สามารถใช้บริการ Google Maps API ได้
(URL ที่ยื่นคำขอรับ API Key:- http://www.google.com/apis/maps/signup.html)
*แต่ถ้ารันบนเครื่องผู้ใช้เอง(localhost)ยังไม่จำเป็นต้องใส่ API Key ก็ได้
เค้าโครงของแฟ้มข้อมูล HTML สำหรับการสร้าง Google Maps API อย่างง่าย

โค้ด

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>My Google Maps Mash-up</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg..." type="text/javascript"></script>
</head>
<body onload='initialize()' onunload='unloadGmap()'>




</body>
</html>

คำอธิบาย

วันศุกร์ที่ 27 เมษายน พ.ศ. 2555

การทำเมนูแบบเอาเมาส์ชี้ที่เมนูแล้วมีคำอธิบาย

เอาโค้ดนี้วางไว้ในส่วนของ <head></head>

<style type="text/css">

</style>

<script language="javascript">

</script>

ส่วนอันนี้ไว้ในส่วนของ <body>

<table class="coolmenu" bgcolor="black" border="1" bordercolor="ivory" cellpadding="2" cellspacing="0">

<tr>
<td bordercolor="black" id="choice1" onmouseover="movein(this,'Free DHTML Scripts')" onmouseout="moveout(this)"">
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></td></tr>

<td bordercolor="black" id="choice2" onmouseover="movein(this,'Free Java applets')" onmouseout="moveout(this)">
<a href="http://freewarejava.com">Freewarejava.com</a></td></tr>

<td bordercolor="black" id="choice3" onmouseover="movein(this,'CSS Gallery/ Inspiration')" onmouseout="moveout(this)"><a href="http://www.cssdrive.com">CSS Drive</a></td></tr>

<td bordercolor="black" id="choice4" onmouseover="movein(this,'Get Coding Help')" onmouseout="moveout(this)"><a href="http://www.codingforums.com.com">Coding Forums</a></td></tr>

<tr>
<td bordercolor="black" id="boxdescription"></td></tr>
</table>

<p>This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>

วันพฤหัสบดีที่ 26 เมษายน พ.ศ. 2555

การตรวจสอบนามสกุลไฟล์และขนาดของไฟล์ก่อนการ upload

คุณสมบัติ

1.รับแต่ไฟล์ที่มี่นามสกุล Gif, Jpg, Pdf, Png, Tiff, Doc และ Docx เท่านั้น
2.ต้องมีขนาดไฟล์ไม่เกิน 200 KB
3.หาก Upload ไม่ผ่านจะ Alert แล้วเคลียร์ค่าในช่อง File ให้ทันที
4.หาก Upload สำเร็จจะซ่อนคอนโทรลสำหรับการ Upload ทั้งหมดแล้วส่งชื่อไฟล์ที่ Upload ไปไว้ที่ Text Box
5.ทั้งหมดนี้สำเร็จในหน้าเดียว ไม่มีการ Reload ไปหน้าอื่นใด ๆ ทั้งสิ้น

ทดลองบน IE8 แล้วใช้ได้ผลดี ฝากท่านผู้อ่านบทความไปลองกับ Browser ตัวอื่น ๆ ด้วยครับ

1. upload.html

<script>
function reset_file(name)
{
var elem=document.myform(name);
elem.parentNode.innerHTML=elem.parentNode.innerHTML;
return false;
}
function clickupload()
{
if(document.myform.fileupload.value.length==0)
{
alert("Please select file to upload");
return false;
}
alert("Now uploading please wait");
document.myform.btn.disabled=true;
return true;
}
function uploadok(pathfile)
{
document.myform.fileupload.style.display="none";
document.myform.btn.style.display="none";
document.myform.txt.style.display="";
document.myform.txt.value=pathfile;
alert("Upload complete\n"+pathfile);
return true;
}
function over_size(size)
{
alert("File not over 200 KB\n"+size+" KB");
reset_file("fileupload");
document.myform.btn.disabled=false;
return false;
}
function wrong_type(type)
{
alert("Please upload only file type\nGif, Jpg, Png, Pdf, Doc, Docx, Tiff\n"+type);
reset_file("fileupload");
document.myform.btn.disabled=false;
return false;
}
</script>
<iframe id="uploadtarget" name="uploadtarget" style="display=none"></iframe>
<form name="myform" action="upload.php" method="post" enctype="multipart/form-data" onsubmit="return clickupload();" target="uploadtarget">
<input name="fileupload" type="file"><br>
<font color="red" size="2">Not over 200 KB (Gif, Jpg, Pdf, Doc, Docx, Tiff)</font><br>
<input id="btn" name="btn" type="submit" value="Upload">
<input name="txt" style="display=none"> 
</form>

2. upload.php

<?
$file = strtolower($_FILES["fileupload"]["name"]);
$sizefile = $_FILES["fileupload"]["size"];
$type= strrchr($file,".");
if($sizefile>204800)
{
?>
<script>
window.parent.over_size("<?=$sizefile/1024?>");
</script>
<?
}
elseif(($type==".jpg")||($type==".jpeg")||($type==".gif")||($type==".png")||($type==".doc")||($type==".docx")||($type==".pdf")||($type==".tif")||($type==".tiff"))
{
$tempfile = date("Y-m-d")."-".$file;
copy($_FILES["fileupload"]["tmp_name"],$tempfile);
?>
<script>
window.parent.uploadok("<?=$tempfile?>");
</script>
<?
}
else
{
?>
<script>
window.parent.wrong_type("<?=$_FILES["fileupload"]["name"]?>");
</script>
<?
}
?>

หน้าตาของ upload.html

หลังจาก Upload จะมีข้อความบอกให้รอ

หากนามสกุลไฟล์ไม่ถูกต้อง จะแจ้งเตือนทันที (อันนี้ลองอัพไฟล์ .xls)

หรือหากขนาดไฟล์ใหญ่เกิน 200 KB ก็ไม่ยอมเช่นกัน

หาก Upload สำเร็จ จะแจ้งชื่อไฟล์ใหม่ที่โค้ดสร้างขึ้นให้ทราบทันที

ชื่อไฟล์ที่ Upload สำเร็จจะไปอยู่ใน Text Box เผื่อจะนำไปใช้งานต่อ
และซ่อนพวกช่องไฟล์และปุ่ม Upload ด้วย

วันพุธที่ 25 เมษายน พ.ศ. 2555

การทำ menu แบบ spinmenu

พอดีไปเห็นเมนูแบบนี้มา แปลกดีครับลองใช้ดูน่ะครับ

โค้ดก็ตามนี้เลยน่ะครับ
1. spin.htm

<html>
<head>

<script type="text/javascript" src="spinmenu.js"></script>
</head>

<body>
<p>Example Spin Menu:</p>



<script type="text/javascript">

/*
3D Spin Menu- By Petre Stefan (http://www.eyecon.ro) w/ changes by JK
Visit JavaScript Kit (http://www.javascriptkit.com) for script
Keep this notice intact!
*/

eye.isVertical = 0; //if it's vertical or horizontal [0|1]
eye.x = 150; // x offset from point of insertion on page
eye.y = 0; // y offset from point of insertion on page
eye.w = 150; // item's width
eye.h = 30; // height
eye.r = 100; // menu's radius
eye.v = 20; // velocity
eye.s = 8; // scale in space (for 3D effect)
eye.color = '#ffffff'; // normal text color
eye.colorover = '#ffffff'; // mouseover text color
eye.backgroundcolor = '#0099ff'; // normal background color
eye.backgroundcolorover = '#990000'; // mouseover background color
eye.bordercolor = '#000000'; //border color
eye.fontsize = 12; // font size
eye.fontfamily = 'Arial'; //font family
if (document.getElementById){
document.write('<div id="spinanchor" style="height:'+eval(eye.h+20)+'"></div>')
eye.anchor=document.getElementById('spinanchor')
eye.spinmenu();
eye.x+=getposOffset(eye.anchor, "left") //relatively position it
eye.y+=getposOffset(eye.anchor, "top") //relatively position it

//menuitem: eye.spinmenuitem(text, link, target)
eye.spinmenuitem("JavaScript Kit","http://www.javascriptkit.com");
eye.spinmenuitem("Free JavaScripts","http://www.javascriptkit.com/cutpastejava.shtml");
eye.spinmenuitem("JS Tutorials","http://www.javascriptkit.com/javaindex.shtml");
eye.spinmenuitem("Advanced JS Tutorials","http://www.javascriptkit.com/javatutors/");
eye.spinmenuitem("DHTML/ CSS Tutorials","http://www.javascriptkit.com/dhtmltutors/index.shtml");
eye.spinmenuitem("Web building tutorials","http://www.javascriptkit.com/howto/");
eye.spinmenuclose();
}
</script>

<p align="left"><font face="arial" size="-2">This free script provided by<br>
<a href="http://javascriptkit.com">JavaScript Kit</a></font></p>

</body>

2. spinmenu.js

//EYEspin_dhtml (c) Petre Stefan
//email: eyecon@eyecon.ro
//website: www.eyecon.ro
//Modified by JavaScriptKit.com for relative positioning of menu
//please leave this copyright notice intact

eye={p:0,x:0,y:0,w:0,h:0,r:0,v:0,s:0,isVertical:0,a1:0,a2:0,a3:0,color:'#ffffff',colorover:'#ffffff',backgroundcolor:'#0099ff',backgroundcolorover:'#000000',bordercolor:'#000000',fontsize:12,fontfamily:'Arial',pas:0,spinmenu:function(){this.p=this.r/this.s;this.a1=this.a2=this.isVertical?0:Math.PI/2},spinmenuitem:function(a7,a6,a5){a4=" onclick='window.open(\""+a6+"\""+(a5?(",\""+a5+"\""):",\"_self\"")+")'";document.write("<div id='spinmenu"+this.a3+"' style='cursor:pointer;cursor:expression(\"hand\");position:absolute;width:"+this.w+"px;left:"+this.h+"px;"+"background-color:"+this.backgroundcolor+";color:"+this.color+";border:1px solid "+this.bordercolor+";font:normal "+this.fontsize+"px "+this.fontfamily+";text-align:center;cursor:default;z-Index:1000;' onmouseover='this.style.color=\""+this.colorover+"\";this.style.backgroundColor=\""+this.backgroundcolorover+"\"'"+ "onmouseout='this.style.color=\""+this.color+"\";this.style.backgroundColor=\""+this.backgroundcolor+"\"'"+a4+">"+a7+"</div>");this.a3++},muta:function(){a8=document.getElementById("controale");for(i=0;i<this.a3;i++){a9=document.getElementById("spinmenu"+i+"");a9s=a9.style;if(this.isVertical){xi=parseInt(this.r*Math.cos(this.a1+i*this.pas))/this.s;yi=parseInt(this.r*Math.sin(this.a1+i*this.pas));a10=(this.p+xi)/(2*this.p);a11=this.fontsize*(this.p+xi)/(2*this.p)+2;a12=parseInt(100*(this.p+xi)/(2*this.p))}else{xi=parseInt(this.r*Math.cos(this.a1+i*this.pas));yi=parseInt(this.r*Math.sin(this.a1+i*this.pas))/this.s;a10=(this.p+yi)/(2*this.p);a11=this.fontsize*(this.p+yi)/(2*this.p)+2;a12=parseInt(100*(this.p+yi)/(2*this.p))};a13=(this.w-20)*a10+20;a14=(this.h-20)*a10+10;a9s.top=(yi+this.y-a14/2)+"px";a9s.left=(xi+this.x-a13/2)+"px";a9s.width=a13+"px";a9s.fontSize=a11+"px";a9s.zIndex=a12};a8.style.top=this.y+(this.isVertical?this.r:this.p)+this.h/2+6;a8.style.left=this.x-a8.offsetWidth/2;if(this.a1!=this.a2){this.a1=(this.a1>this.a2)?(this.a1-this.pas/this.v):(this.a1+this.pas/this.v);if(Math.abs(this.a1-this.a2)<this.pas/this.v)
this.a1=this.a2;setTimeout("eye.muta()",10)}},spinmenuclose:function(){this.pas=2*Math.PI/this.a3;document.write('<div id="controale" style="position:absolute"><button type="" onclick="eye.a2+=eye.pas;eye.muta()" onfocus="this.blur()"><<</button> <button type="" onclick="eye.a2-=eye.pas;eye.muta()" onfocus="this.blur()">>></button></div>');eye.muta()}};

function getposOffset(what, offsettype){var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;var parentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}return totaloffset;
}

วันอังคารที่ 24 เมษายน พ.ศ. 2555

สร้างกราฟบด้วยวิธีง่ายๆโดยใช้ FusionCharts

FusionCharts (www.fusioncharts.com) เป็นเครื่องมือช่วยสร้างกราฟเพื่อแสดงผลบนเว็บเพจ กราฟที่ออกมาจะมีลักษณะเป็น Flash ที่สวยงามและมีลูกเล่น เราสามารถใส่ link หรือข้อความลักษณะ tooltip ให้แสดงผลเวลาผู้ใช้ลากเมาส์ไปชี้ได้
FusionCharts สามารถเรียกใช้ได้ด้วยเว็บสคริปหลายภาษา ไม่ว่าผู้ใช้จะพัฒนาเว็บแอพพลิเคชั่นด้วย ASP, PHP, JSP หรือ Javascript ก็ใช้บริการได้ ที่สำคัญคือเจ้า FusionCharts มันให้บริการฟรี !!
การใช้งาน FusionCharts ก็ง่ายมากครับ ผมจะแสดงตัวอย่างการเรียกใช้ด้วย PHP นะครับ
1. ขั้นแรกเลยไปดาวน์โหลด FusionCharts รุ่นใช้ฟรี ที่นี่
2. ในโฟลเดอร์ที่ดาวน์โหลดมาจะมีไฟล์ชื่อ Index.html หน้านี้มีประโยชน์มากครับ ลองกดเข้าไปจะมีตัวอย่างการใช้งานมากมาย
3. การติดตั้งง่ายมากครับ เราสร้างโฟลเดอร์หนึ่งในเว็บแอพพลิเคชั่นที่เราจะเรียกใช้ขึ้นมาก่อน ผมตั้งชื่อว่า fusioncharts
4. ทีนี้กลับไปโฟลเดอร์ที่เราดาวน์โหลดมา ก็อปปี้โฟลเดอร์ชื่อ Chart มาไว้ในโฟลเดอร์ fusioncharts ในขั้นตอนที่แล้ว ไฟล์ swf ในโฟลเดอร์นี้เองที่จะใช้ในการสร้างกราฟขึ้นมา แต่ละตัวก็จะสร้างในลักษณะต่างกันไป เช่น FCF_Bar2D.swf จะใช้สร้างแผนภูมิแท่งแนวนอน FCF_Pie3D.swf ใช้สร้างแผนภูมิวงกลมสามมิติ เป็นต้น
5. เราจะใช้ PHP ในการวาดกราฟ ดังนั้นให้ก็อปปี้ FusionCharts.php ในโฟลเดอร์ Code/PHP/Includes/ มาด้วยนะครับ
6. คราวนี้มาลองสร้างกราฟง่ายๆ กันดีกว่า ผมจะสร้างในลักษณะแผนภูมิแท่งแนวตั้งสามมิติที่เป็นชุดๆ ตามรูปนี้

โค้ด php เป็นแบบนี้ครับ

<?php
include_once("FusionCharts.php");
$strXML = "<graph  caption='สถิติเด็ก' xAxisName='ปี พ.ศ.' baseFontSize='12' decimalPrecision='0'  numberSuffix=' คน'>";
$strXML.= "<categories>";
$strXML.=  "<category name='2548' />";
$strXML.= "<category name='2549'  />";
$strXML.= "<category name='2550' />";
$strXML.=  "<category name='2551' />";
$strXML.=  "</categories>";
$strXML.= "<dataset seriesname='เด็กผู้ชาย'  color='0000FF'>";
$strXML.= "<set value='25' />";
$strXML.=  "<set value='52' />";
$strXML.= "<set value='37'  />";
$strXML.= "<set value='60'  />";
$strXML.="</dataset>";
$strXML.= "<dataset  seriesname='เด็กผู้หญิง' color='FFCCFF'>";
$strXML.= "<set value='20'  />";
$strXML.= "<set value='48' />";
$strXML.= "<set  value='30' />";
$strXML.= "<set value='62'  />";
$strXML.="</dataset>";
$strXML.= "</graph>";
echo  renderChartHTML("Charts/FCF_MSColumn3D.swf", "", $strXML, "child", 600,  300);
?>

อธิบาย
include_once("FusionCharts.php");
ไฟล์ FusionCharts.php เป็นไฟล์ที่เก็บ Function ให้เราเรียกใช้ในการสร้าง Chart เราจึงต้องแนบมาด้วย
$strXML เป็นตัวแปร String ที่เราใช้สร้าง FusionCharts ขึ้นมา FusionCharts จะสร้างโดยใช้ XML ในรูปแบบตรงกับที่เขากำหนดมา กราฟแต่ละอย่างจะมีการเรียกใช้ XML นี้ต่างกันแต่ก็จะคล้ายๆ กัน
แต่ละ Tag ของ XML เราสามารถใส่ Attribute เพื่อปรับแต่งค่าต่างๆ อย่างเช่น ใส่สี เปลี่ยนขนาดตัวอักษร เหมือนกับแท็กของ HTML นั่นแหละครับ
ลักษณะโครงสร้างของ XML ของกราฟแต่ละแบบ รวมถึง Option ต่างๆ พร้อมตัวอย่างการเรียกใช้ เราดูได้จาก http://docs.fusioncharts.com/free หรือไฟล์ Index.html ในขั้นตอนที่ 2 ก็ได้ครับ ในหัวข้อ Chart XML API
echo renderChartHTML("Charts/FCF_MSColumn3D.swf", "", $strXML, "child", 600, 300);
ส่วนนี้เป็นฟังก์ชั่นที่สั่งให้ FusionCharts นำ XML ไปวาดกราฟออกมา
- พารามิเตอร์ตัวแรกจะเป็นไฟล์ swf ตัวที่ตรงกับประเภทกราฟที่เราจะวาด ในที่นี้คือ Multi-Series Column 3D
- ตัวที่สองเป็น URL ที่เราเก็บไฟล์ XML เอาไว้ ในที่นี้เราไม่ใช้ไฟล์ XML แต่เขียนลงไปใน PHP เลย จึงเว้นว่างไว้
- ตัวที่สามเป็น String ในรูปแบบของ XML ในที่นี้คือ $strXML
- ตัวที่สี่เป็น ID ของกราฟ กราฟในแต่ละหน้าห้ามมี ID ซ้ำกัน
- สองตัวสุดท้ายใช้ใส่ขนาดความกว้างและความสูงของกราฟเป็น pixel
เท่าที่ทดลองใช้ FusionCharts ทำงานได้ดี แต่มีปัญหาอยู่เล็กน้อยกรณีที่ใช้ภาษาไทย เราไม่สามารถใช้ภาษาไทยกับชื่อแกน Y ได้ แต่นอกนั้นก็นับว่ามันทำงานกับภาษาไทยได้ดีครับ

วันศุกร์ที่ 20 เมษายน พ.ศ. 2555

การทำ autocomplete อย่างง่าย

สามารถนำไปประยุกต์ใช้ใน form ได้เพื่ออำนวยความสะวดกในการกรอกข้อมูล ครับ
HTML Code ตัวอย่าง

<html>
<head>
<title></title>
<script type="text/javascript" src="autocomplete.js"></script>
<link rel="stylesheet" href="autocomplete.css" type="text/css"/>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input name="show_arti_topic" type="text" id="show_arti_topic" size="50" />
<input name="h_arti_id" type="hidden" id="h_arti_id" value="" />
</form>
<script type="text/javascript">
// แทรก javascript
</script>
</body>
</html>

<html>
<head>
<title></title>
<script type="text/javascript" src="autocomplete.js"></script>
<link rel="stylesheet" href="autocomplete.css"  type="text/css"/>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <input name="show_arti_topic" type="text" id="show_arti_topic" size="50" />
  <input name="h_arti_id" type="hidden" id="h_arti_id" value="" />
</form>
<script type="text/javascript">
// แทรก javascript
</script>
</body>
</html>

Javascript Code

<script type="text/javascript">
function make_autocom(autoObj,showObj){
var mkAutoObj=autoObj;
var mkSerValObj=showObj;
new Autocomplete(mkAutoObj, function() {
this.setValue = function(id) {
document.getElementById(mkSerValObj).value = id;
}
if ( this.isModified )
this.setValue("");
if ( this.value.length < 1 && this.isNotClick )
return ;
return "gdata.php?q=" +encodeURIComponent(this.value);
});
}

// การใช้งาน
// make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");
make_autocom("show_arti_topic","h_arti_id");
</script>

<script type="text/javascript">
function make_autocom(autoObj,showObj){
 var mkAutoObj=autoObj; 
 var mkSerValObj=showObj; 
 new Autocomplete(mkAutoObj, function() {
  this.setValue = function(id) {  
   document.getElementById(mkSerValObj).value = id;
  }
  if ( this.isModified )
   this.setValue("");
  if ( this.value.length < 1 && this.isNotClick ) 
   return ; 
  return "gdata.php?q=" +encodeURIComponent(this.value);
    }); 
} 
 
// การใช้งาน
// make_autocom(" id ของ input ตัวที่ต้องการกำหนด "," id ของ input ตัวที่ต้องการรับค่า");
make_autocom("show_arti_topic","h_arti_id");
</script>

gdata.php Code

<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// เชื่อมต่อฐานข้อมูล
$link=mysql_connect("localhost","root","123456") or die("error".mysql_error());
mysql_select_db("database_name",$link);
mysql_query("set character set utf8");

$q = urldecode($_GET["q"]);
$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="article"; // ตารางที่ต้องการค้นหา
$find_field="arti_topic"; // ฟิลที่ต้องการค้นหา
$sql = "select * from $table_db where locate('$q', $find_field) > 0 order by locate('$q', $find_field), $find_field limit $pagesize";
$results = mysql_query($sql);
while ($row = mysql_fetch_array( $results )) {
$id = $row["arti_id"]; // ฟิลที่ต้องการส่งค่ากลับ
$name = ucwords( strtolower( $row["arti_topic"] ) ); // ฟิลที่ต้องการแสดงค่า
// ป้องกันเครื่องหมาย '
$name = str_replace("'", "'", $name);
// กำหนดตัวหนาให้กับคำที่มีการพิมพ์
$display_name = preg_replace("/(" . $q . ")/i", "<b>$1</b>", $name);
echo "<li onselect=\"this.setText('$name').setValue('$id');\">$display_name</li>";
}
mysql_close();
?>

แต่จำเป็นต้องมีไฟล์ประกอบอีกน่าะครับ copy แล้วสร้างไฟล์ save ชื่อตามนี้เลย
1.autocomplete.js
(function(){var ua=navigator.userAgent.toLowerCase();var webkit=/webkit/.test(ua),webkit4=/webkit\/4/.test(ua),gecko=!webkit&&/gecko/.test(ua),ff2=!webkit&&/firefox\/2/.test(ua),ff3=!webkit&&/firefox\/3/.test(ua),msie=/msie/.test(ua),msie6=/msie 6/.test(ua),msie7=/msie 7/.test(ua),msie8=/msie 8/.test(ua),backCompat=document.compatMode=="BackCompat",loaded=0,sw=0,sn,$$=0,PX="px",Event=new Object(),g_bw=1;var empty=function(){},getStyle=function(e){if(!webkit&&document.defaultView&&document.defaultView.getComputedStyle){return document.defaultView.getComputedStyle(e,null)}else{return e.currentStyle||e.style}},Estyle=function(e,s){e=$(e);var v=e.style[s];if((!v)&&(document.defaultView)){var css=document.defaultView.getComputedStyle(e,null);v=css?css[s]:null}return v=="auto"?null:v},$=function(e){if(typeof e=="string"){e=document.getElementById(e)}return e},$A=function(itr){if(!itr){return[]}var rs=[];for(var i=0,length=itr.length;i<length;i++){rs.push(itr[i])}return rs},toInt=function(s){return isNaN(parseInt(s))?0:parseInt(s)},has_class=function(e,n){return new RegExp("(^|\\s)"+n+"(\\s|$)").test(e.className)},rm_class=function(e,n){if(!e){return}e.className=e.className.replace(new RegExp(n,"g"),"")},cumulativeOffset=function(e){var T=0,L=0;do{T+=e.offsetTop||0;L+=e.offsetLeft||0;e=e.offsetParent}while(e);return[L,T]},getOffsetParent=function(e){if(e.offsetParent){return e.offsetParent}if(e==document.body){return e}while((e=e.parentNode)&&e!=document.body){if(Estyle(e,"position")!="static"){return e}}return document.body},viewportOffset=function(t){var T=0,L=0,e=t;do{T+=e.offsetTop||0;L+=e.offsetLeft||0;if(e.offsetParent==document.body&&e.style.position=="absolute"){break}}while(e=e.offsetParent);e=t;do{if(!window.opera||e.tagName=="BODY"){T-=e.scrollTop||0;L-=e.scrollLeft||0}}while(e=e.parentNode);return[L,T]},fixMSIE=function(e){var d=[0,0];if(e==document.body){d[0]+=document.body.offsetLeft;d[1]+=document.body.offsetTop}else{if((msie6||msie7)&&e.style){d[0]+=toInt(getStyle(e).marginLeft);d[1]+=toInt(getStyle(e).marginTop)}}return d};var Try={these:function(){var returnValue;for(var i=0,length=arguments.length;i<length;i++){var lambda=arguments[i];try{returnValue=lambda();break}catch(e){}}return returnValue}};Object.extend=function(d,s){for(var p in s){d[p]=s[p]}return d};Object.extend(Object,{keys:function(o){var keys=[];for(var p in o){keys.push(p)}return keys},clone:function(o){return Object.extend({},o)}});var Class={create:function(){var parent=null,ps=$A(arguments);function klass(){this.initialize.apply(this,arguments)}Object.extend(klass,Class.Methods);klass.superclass=parent;klass.subclasses=[];for(var i=0;i<ps.length;i++){klass.addMethods(ps[i])}if(!klass.prototype.initialize){klass.prototype.initialize=function(){}}klass.prototype.constructor=klass;return klass}};Class.Methods={addMethods:function(s){var ps=Object.keys(s);if(!Object.keys({toString:true}).length){ps.push("toString","valueOf")}for(var i=0,length=ps.length;i<length;i++){var property=ps[i],value=s[property];this.prototype[property]=value}return this}};Object.extend(Function.prototype,{bind:function(){if(arguments.length<2&&typeof arguments[0]=="undefined"){return this}var __method=this,args=$A(arguments),object=args.shift();return function(){return __method.apply(object,args.concat($A(arguments)))}},bindAsEventListener:function(){var __method=this,args=$A(arguments),object=args.shift();return function(event){return __method.apply(object,[event||window.event].concat(args))}},curry:function(){if(!arguments.length){return this}var __method=this,args=$A(arguments);return function(){return __method.apply(this,args.concat($A(arguments)))}},delay:function(){var __method=this,args=$A(arguments),timeout=args.shift()*1000;return window.setTimeout(function(){return __method.apply(__method,args)},timeout)}});Function.prototype.defer=Function.prototype.delay.curry(0.01);Object.extend(Event,{element:function(e){return $(e.target||e.srcElement)},stop:function(e){if(e.preventDefault){e.preventDefault();e.stopPropagation()}else{e.returnValue=false;e.cancelBubble=true}},observers:false,_observeAndCache:function(e,n,observer,useCapture){if(!this.observers){this.observers=[]}if(e.addEventListener){this.observers.push([e,n,observer,useCapture]);e.addEventListener(n,observer,useCapture)}else{if(e.attachEvent){this.observers.push([e,n,observer,useCapture]);e.attachEvent("on"+n,observer)}}},unloadCache:function(){if(!Event.observers){return}for(var i=0,length=Event.observers.length;i<length;i++){Event.stopObserving.apply(this,Event.observers[i]);Event.observers[i][0]=null}Event.observers=false},observe:function(e,n,observer,useCapture){e=$(e);useCapture=useCapture||false;if(n=="keypress"&&(webkit||e.attachEvent)){n="keydown"}Event._observeAndCache(e,n,observer,useCapture)},stopObserving:function(e,n,observer,useCapture){e=$(e);useCapture=useCapture||false;if(n=="keypress"&&(webkit||e.attachEvent)){n="keydown"}if(e.removeEventListener){e.removeEventListener(n,observer,useCapture)}else{if(e.detachEvent){try{e.detachEvent("on"+n,observer)}catch(ex){}}}}});if(msie){Event.observe(window,"unload",Event.unloadCache,false)}var Ajax={getTransport:function(){return Try.these(function(){return new XMLHttpRequest()},function(){return new ActiveXObject("Msxml2.XMLHTTP")},function(){return new ActiveXObject("Microsoft.XMLHTTP")})||false}};Ajax.Updater=Class.create({_complete:false,initialize:function(options){this.options={contentType:"application/x-www-form-urlencoded",encoding:"UTF-8"};Object.extend(this.options,options||{});this.transport=Ajax.getTransport()},request:function(url){this.url=url;var params=Object.clone(this.options.parameters);this.parameters=params;try{var response=new Ajax.Response(this);this.transport.open("GET",this.url,true);if(true){this.respondToReadyState.bind(this).defer(1)}this.transport.onreadystatechange=this.onStateChange.bind(this);this.setRequestHeaders();this.transport.send(null)}catch(e){}},onStateChange:function(){var readyState=this.transport.readyState;if(readyState>1&&!((readyState==4)&&this._complete)){this.respondToReadyState(this.transport.readyState)}},setRequestHeaders:function(){var headers={"X-Requested-With":"XMLHttpRequest",Accept:"text/javascript, text/html, application/xml, text/xml, */*"};if(this.method=="post"){headers["Content-type"]=this.options.contentType+(this.options.encoding?"; charset="+this.options.encoding:"");if(this.transport.overrideMimeType&&(navigator.userAgent.match(/Gecko\/(\d{4})/)||[0,2005])[1]<2005){headers.Connection="close"}}for(var n in headers){this.transport.setRequestHeader(n,headers[n])}},success:function(){var status=this.getStatus();return !status||(status>=200&&status<300)},getStatus:function(){try{return this.transport.status||0}catch(e){return 0}},respondToReadyState:function(readyState){var state=Ajax.Updater.Events[readyState],response=new Ajax.Response(this);if(state=="Complete"){try{this._complete=true;(this.options["on"+response.status]||this.options["on"+(this.success()?"Success":"Failure")]||empty)(response)}catch(e){this.dispatchException(e)}}try{(this.options["on"+state]||empty)(response)}catch(e){this.dispatchException(e)}if(state=="Complete"){this.transport.onreadystatechange=empty}},dispatchException:function(ex){}});Ajax.Updater.Events=["Uninitialized","Loading","Loaded","Interactive","Complete"];Ajax.Response=Class.create({initialize:function(request){this.request=request;var transport=this.transport=request.transport,readyState=this.readyState=transport.readyState;if((readyState>2&&!msie)||readyState==4){this.status=this.getStatus();this.responseText=transport.responseText==null?"":String(transport.responseText)}},status:0,getStatus:Ajax.Updater.prototype.getStatus});var g=1561975156;var cwa={b:function(t){return t.substring(t.indexOf("{")+1,t.lastIndexOf("}"))},focus:function(t){t.focus();var l=t.value.length;if(msie){var r=t.createTextRange();r.moveStart("character",l);r.moveEnd("character",l);r.select()}else{t.setSelectionRange(l,l)}}};var ac=function(){this.initialize.apply(this,arguments)};(function(){var t;function _domloaded(z){if(loaded){return}if(t){window.clearInterval(t)}loaded=1;if(!$$){var e=document.createElement("div");var es=e.style;es.position="absolute";es.right=es.top="0px";es.backgroundColor="#feea3d";es.cursor="pointer";es.padding=".5em";var days=Math.floor((g-new Date().getTime()/1000)/86400);if(days<15){if(days<0){days=0}e.innerHTML="The autocomplete trial has "+days+(days>1?" days":" day")+" left. <a href='http://createwebapp.com/buy.html'></a>";document.body.appendChild(e)}}}if(document.addEventListener){if(webkit){t=window.setInterval(function(){if(/loaded|complete/.test(document.readyState)){_domloaded()}},0);Event.observe(window,"load",_domloaded)}else{document.addEventListener("DOMContentLoaded",_domloaded,false)}}else{document.write("<script id=_onDOMContentLoaded defer src=//:><\/script>");$("_onDOMContentLoaded").onreadystatechange=function(){if(this.readyState=="complete"){this.onreadystatechange=null;_domloaded()}}}})();Object.extend(ac,{unlock:function(n){if(n.indexOf("C")>-1&&n.indexOf("G")>-1&&n.indexOf("N")>-1){$$=1}},I:function(e){var v;if(e.nodeType==1){v=e.getAttribute("onselect")}return v},C:function(v){var e=Event.element(v);for(var i=0;i<ac.inst.length;i++){var a=ac.inst[i];if(a.text!=e&&a.L.e!=e&&a.image.e!=e){a.L.hide()}}},L:function(){if(msie){sn=self.name}var x="autocomplete_x1";if(loaded){var e=document.createElement("div");e.id=x;document.body.appendChild(e)}else{document.write("<div id='"+x+"'></div>")}var e=$(x);var es=e.style;es.position="absolute";es.left=es.top="-800px";es.overflow="scroll";es.width="40px";e.innerHTML="<div style='width:80px;height:80px' class='autocomplete_icon'></div>";sw=e.offsetWidth-e.clientWidth},inst:new Array(),name:"",key:"",updateViews:function(){for(var i=0;i<ac.inst.length;i++){ac.inst[i].image.position()}}});var NSImage=Class.create({initialize:function(o){var id="_image_"+NSImage.count++;document.write("<div id='"+id+"' class='autocomplete_icon' style='padding:0; margin:0; height:12px; width:12px; position:absolute; left:-99px; top:-99px; font-size:0px'></div>");this.e=$(id);this.o=o;this.e.onclick=function(){if(this.isReset()){o.setText("");this.ready();o.makeURI();o.stop()}else{if(this.isReady()){o.isON=1;o.isNotClick=0;o.custom_uri="";o.request()}}o.text.focus()}.bind(this,o)},finished:function(){if(this.o.text.value.length){this.reset()}else{this.ready()}},position:function(){var t=this.o.text;var p=viewportOffset(t);var parent=getOffsetParent(this.e);var d=viewportOffset(parent);this.e.style.left=(p[0]-d[0]-fixMSIE(parent)[0]+t.offsetWidth-16)+"px";this.e.style.top=(p[1]-d[1]-fixMSIE(parent)[1]+Math.round((t.offsetHeight-12)/2)+(webkit?1:0))+"px"},ready:function(){this._set("0 0")},go:function(){this._set("0 12px")},reset:function(){this._set("0 24px")},isReady:function(){return !(this.isGo()||this.isReset())},isGo:function(){return this._get().indexOf("12")>-1},isReset:function(){return this._get().indexOf("24")>-1},_get:function(){return this.e.style.backgroundPosition},_set:function(v){this.e.style.backgroundPosition=v}});Object.extend(NSImage,{count:0});var NSList=Class.create({initialize:function(object,withFrame){NSList.count++;var id="_list_"+NSList.count;var x="autocomplete_list";if(loaded){var e=document.createElement("ol");e.id=id;var es=e.style;es.position="absolute";es.left=es.top="-8000px";e.className=x;document.body.appendChild(e)}else{document.write("<ol id='"+id+"' style='position:absolute;left:-8000;top:-8000px' class='"+x+"'></ol>")}this.e=$(id);this.o=object;if(msie6&&withFrame){if(loaded){var e=document.createElement("iframe");e.id="_iframe_"+NSList.count;var es=e.style;es.position="absolute";es.filter="progid:DXImageTransform.Microsoft.Alpha(opacity = 0)";e.src="javascript:false;";document.body.appendChild(e)}else{document.write("<iframe id='_iframe_"+NSList.count+"' style='position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity = 0)' src='javascript:false;'></iframe>")}this.F=$("_iframe_"+NSList.count);this.F.style.display="none"}},isVisible:function(){var s=this.e.style;return(s.display!="none")&&(toInt(s.left)>=0)&&(toInt(s.top)>=0)},setContent:function(t){this.e.innerHTML=t},content:function(t){return this.e.innerHTML},hide:function(){if(this.isVisible()){this.e.style.left="-8000px"}if(this.F){this.F.style.display="none"}},display:function(w,h,sf){var t=this.o.text;var p=viewportOffset(t);var parent=getOffsetParent(this.e);var delta=viewportOffset(parent);var l=p[0],d=t.offsetWidth-w,a=this.o.options.align,ls=this.e.style;if((a=="auto")&&(document.body.offsetWidth-l-w>14)){d=0}if(a=="left"){d=0}if(a=="center"){d/=2}ls.width=w+"px";ls.height=h;if(sf){this.o.D()}var F=this.F;var e=this.e;setTimeout(function(){ls.top=p[1]+t.offsetHeight-delta[1]-fixMSIE(parent)[1]+"px";ls.left=l-delta[0]-fixMSIE(parent)[0]+d+(msie?t.scrollLeft:0)+"px";ls.display="";if(F){self.name=sn;var es=F.style;es.top=ls.top;es.left=ls.left;es.width=ls.width;es.height=e.clientHeight;es.display=""}},100)},autoWidth:function(){var i=500;if(!!window.opera){this.e.style.width=i+PX}var oh=this.e.offsetHeight;if(webkit||ff3||msie8){w=this.e.offsetWidth}else{var step=50;var l=100,h=i,ow;do{i=Math.ceil((l+h)/2);this.e.style.width=i+PX;ow=this.e.offsetWidth;if(gecko||document.compatMode=="CSS1Compat"){ow-=g_bw*2}if((this.e.offsetHeight>oh)||(ow>i)){l=i+step}else{h=i}}while((h-l)/step>0.9);w=h;this.e.style.width=w+"px"}return w},autoHeight:function(){var s=this.o.options.size;var A=$A(this.e.getElementsByTagName("li"));var l=A.length;var m=A[(l>s?s:l)-1];var h=m.offsetTop+m.offsetHeight;if(msie6||msie7){h-=toInt(getStyle(m).paddingTop)}if(msie8){h-=g_bw}h-=g_bw;return h+"px"},parseItems:function(){var items=new Array(),ls=this.e.childNodes;for(var j=0;j<ls.length;j++){var x=ls[j];if(x.nodeType==1&&x.getAttribute("onselect")){var i=items.length;x.onmouseover=function(i){this.focus(i)}.bind(this.o,i);x.onclick=function(i){this.i=i;this.z()}.bind(this.o,i);items.push(x)}}if(items.length>this.o.options.size){this.e.style.overflow="auto"}return items},prepare:function(){this.e.style.width=this.e.style.height="auto";var ls=this.e.childNodes,i=0,lt;for(var j=0;j<ls.length;j++){var x=ls[j];if(ac.I(x)){lt=x;if(msie&&(i++<this.o.options.size)&&!x.getElementsByTagName("span").length){x.innerHTML="<span style='padding:0'></span>"+x.innerHTML}}}if(lt){lt.className="last_item"}return ls.length}});Object.extend(NSList,{count:0});ac.prototype={$c:0,init:0,T:0,i:-1,d:1,custom_uri:"",initialize:function(t,f,options){this.text=$(t)?$(t):document.getElementsByName(t)[0];if((this.text==null)||(f==null)||(typeof f!="function")){return}this.text.setAttribute("autocomplete","off");this.setOptions(options);this.f=f;this.makeURI=function(){this.value=encodeURIComponent(this.text.value);if(this.bR()){return this.f()}}.bind(this);var x=this.text.getAttribute("autocomplete_id");if(x!=null){return}var sid="no_"+ac.inst.length;this.text.setAttribute("autocomplete_id",sid);this.onchange=this.text.onchange;this.text.onchange=function(){};this.L=new NSList(this,1);this.L2=new NSList(this);ac.inst.push(this);if(ac.L){ac.L();ac.L=null}this.image=new NSImage(this);this.fpi();this.r()},fpi:function(){for(var i=1;i<=4*10;i++){setTimeout(this.image.position.bind(this.image),i*50)}},setOptions:function(options){this.options={width:"auto",delay:0.4,delimChars:",",size:10,select_first:1,align:"auto"};Object.extend(this.options,options||{})},r:function(){this._k=this.k.bindAsEventListener(this);this.$r=this.request.bind(this);var t=this.text;t.className+=" autocomplete_text";if(/mac/.test(ua)){t._ac=this;t.onkeypress=function(e){return !this._ac.$s}}var O=Event.observe;if(msie){O(t,"keydown",this._k)}else{O(t,"keypress",this._k)}O(t,"keyup",function(e){if(e.keyCode==27){this.image.finished()}}.bind(this));O(t,"blur",this.blur.bind(this));if(ac.inst.length==1){O(document,"click",ac.C)}O(window,"resize",this.image.position.bind(this.image));var e=t;while(e=e.parentNode){if(e.style&&(e.style.overflow=="scroll"||e.style.overflow=="auto")){this.scrollable=this.scrollable?this.scrollable:e;O(e,"scroll",this.onScroll.bind(this))}}},setText:function(v){this.text.value=v;return this},onScroll:function(){var s=this.scrollable;if(s){var p=this.t();var o=cumulativeOffset(s);if(p[1]>=o[1]&&p[1]<o[1]+s.offsetHeight&&p[0]>=o[0]&&p[0]<o[0]+s.offsetWidth&&this.L.isVisible()){this.s()}else{this.L.hide()}}},t:function(){var p=viewportOffset(this.text);return[p[0]+(msie?this.text.scrollLeft:0)+(document.documentElement.scrollLeft||document.body.scrollLeft),p[1]+(document.documentElement.scrollTop||document.body.scrollTop)]},iolv:function(){var d=this.options.delimChars,v=encodeURIComponent(this.text.value),i,j,k=0;for(i=v.length-1;i>=0;i--){for(j=0;j<d.length;j++){if(v.charAt(i)==d.charAt(j)){k=i+1;break}}if(k){break}}return k},page:function(n){var s=this.options.size,i=this.i,l=this.items.length;if(n=="page_up"){if(i>=s){this.focus(i-s)}else{this.focus(0)}}if(n=="page_down"){if(i+s<l){this.focus(i+s)}else{this.focus(l-1)}}},blur:function(){if(!this.L.isVisible()&&!this.image.isGo()){this.isON=0;setTimeout(function(){if(!this.isON){this.stop()}}.bind(this),4)}},stop:function(){this.c();this.image.finished();this.L.hide()},c:function(){if((this.latest)&&(this.latest.transport.readyState!=4)){this.latest.transport.abort()}},k:function(e){if(!$$&&Math.floor((g-new Date().getTime()/1000)/86400)<0){return}this.isON=1;this.$s=false;var c=e.keyCode;var delay=this.options.delay;this.isModified=1;this.isNotClick=1;if(c==13||c==9){if(c==13){Event.stop(e)}if(this.L.isVisible()){if((this.$c)&&(this.i>-1)){this.$s=true}this.z();return}delay=0.005;this.isModified=0}if(c==27){this.stop();if(webkit){this.text.blur();this.text.focus()}}var pupd=0,ud=0;if(c==33||c==34||c==63276||c==63277){pupd=1;if(this.$c){(c==33)||(c==63276)?this.page("page_up"):this.page("page_down")}}if(c==38||c==40||c==63232||c==63233){ud=1;if(this.$c){(c==38)||(c==63232)?this.U():this.D()}}if((pupd||ud||c==13)&&this.$c){Event.stop(e);return}if(delay>60||c==9||c==27||c==37||c==39||c==35||c==36||c==45||c==16||c==17||c==18||c==91){return}this.custom_uri="";clearTimeout(this.T);this.c();setTimeout(function(){this.T=setTimeout(this.$r,delay*1000)}.bind(this,delay),5)},z:function(){var m=this.G();if(m){this.stop();var isP=0;try{var s=m.getAttribute("onselect").replace("this.request(","this.request(1");isP=s.indexOf("this.request(")>-1;eval(s)}catch(e){}cwa.focus(this.text);if(!isP){this.image.finished()}if(this.onchange){setTimeout(function(){this.onchange.bind(this.text)()}.bind(this),4)}}},G:function(){return this.items?this.items[this.i]:null},focus:function(i,pass){if((this.i==i)||(!this.$c)){return}this.L.e.style.display="";rm_class(this.G(),"current_item");this.i=i;var m=this.G();if(!m){return}m.className+=" current_item";var u=this.L.e,h=this.options.size*m.offsetHeight,mt=m.offsetTop;if(ff2){mt+=g_bw}if(msie8){mt-=g_bw}var moveUp=(mt<=u.scrollTop)||(i==0);var moveDown=mt+m.offsetHeight-u.scrollTop>h;if(moveUp){if(msie6||msie7){mt-=toInt(getStyle(m).paddingTop)}u.scrollTop=mt}if(moveDown){if(msie6||msie7){mt-=toInt(getStyle(m).paddingBottom)}u.scrollTop=mt+m.offsetHeight-h}try{var z=m.getAttribute("onfocus");if(msie){z=cwa.b(z.toString())}eval(z)}catch(e){}},U:function(){if(this.i>-1){this.focus(this.i-1)}},D:function(){if(this.i<this.items.length-1){this.focus(this.i+1)}},bR:function(){if(!this.init){this.init=true;this.L.onscroll=function(){cwa.focus(this.text)}.bind(this)}return true},request:function(u){var z=typeof u!="string";if(u==1){u=this.url;this.isON=1}else{if(z){u=this.makeURI()}}if(this.isON){this.url=u;if(u==undefined){this.stop();return}this.$c=0;this.i=-1;this.image.go();this.latest=new Ajax.Updater({onComplete:this.d.bind(this)});this.latest.request(u+this.custom_uri)}else{this.stop()}},d:function(response){var l=this.latest;var tx=l.transport;if(this.isON&&(tx==response.transport)&&(this.latest.url==this.url+this.custom_uri)){this.L2.setContent(response.responseText);this.$c=1;try{if((typeof tx.status!="unknown")&&l.success()){}else{this.L2.setContent("<li onselect=';'>An error occured. <br/>HTTP error code:"+tx.status+"</li>")}this.$c=1;if(this.L2.prepare()){this.s(this.options.select_first)}else{this.stop()}}catch(e){}}},offset:function(e){var o=0;if(gecko||webkit||(msie&&!backCompat)){var pl="padding-left",pr="padding-right";var f=function(e,p){return toInt(Estyle(e,p))};o=g_bw*2+f(e,pl)+f(e,pr)}return o},s:function(ft){this.isON=1;var w=this.L2.autoWidth(),h="auto";this.i=-1;this.L.setContent(this.L2.content());this.items=this.L.parseItems();if(this.items.length>this.options.size){w=parseInt(w)+sw;h=this.L2.autoHeight()}if(w<this.text.offsetWidth){w=this.text.offsetWidth}if(this.items.length){this.L.display(w,h,ft)}if(msie){setTimeout(function(){for(var j=0;j<this.items.length;j++){var x=this.items[j];if(!x.getElementsByTagName("span").length){x.innerHTML="<span style='padding:0'></span>"+x.innerHTML}}}.bind(this),0)}this.image.finished()}};window.AutoComplete=window.Autocomplete=ac})();

2.autocomplete.css

.autocomplete_list * {
font-family: "myriad pro", "segoe ui", "trebuchet ms", sans-serif;
font-size: 13px;
}

.autocomplete_list b {
font-weight: bold;
}

.autocomplete_list {
background: #f2f2f2; display: block;
border: 1px solid gray;
text-align: left; z-index: 200;
}

.autocomplete_list, .autocomplete_list ol, .autocomplete_list li {
list-style-type: none;
margin: 0;
padding: 0;
}

.autocomplete_list li {
margin: 0;
text-align: left;
cursor: pointer;
padding: 4px;
border-bottom: 1px solid silver;
}

.autocomplete_list .last_item {
border: none;
}

.autocomplete_list .current_item {
background: #b4d5fe; color: #000;
}

.autocomplete_list span {
color: #111; float: right; padding-left: 2em;
}

.autocomplete_icon {
background-image: url(autocomplete.gif);
cursor: pointer;
cursor: hand;
}

3.autocomplete.gif

การคำนวณหาอายุจากวันเกิด

จะมีวิธีอยู่ 2 วิธีน่ะครับ
วิธีที่ 1
<?php
// กรณีวันเกิดที่เก็บสามารถแยกออกเป็นแต่ละส่วน เช่นปี ค.ศ. เดือน และ วัน
// ตัวอย่าง ปีเกิด 1990 เดือนเกิด 2 (กุมภาพันธ์) วันที่ 14
// ฟังก์ชันคำนวณหาอายุใช้ดังนี้
function getAge($year,$month,$day) {
$then = mktime(1,1,1,$month,$day,$year);
return(floor((time()-$then)/31556926));
}
// การใช้งาน
echo getAge(1990,2,14);
// ผลลัพธ์จะได้ 19
?>

วิธีที่ 2
<?php
// กรณีวันเกิดที่เก็บอยู่ในรูปแบบของ date แบบมาตรฐาน คือ ปี ค.ศ.- เดือน - วันที่
// ตัวอย่าง 1990-02-14
// ฟังก์ชันคำนวณหาอายุใช้ดังนี้
function getAge($birthday) {
$then = strtotime($birthday);
return(floor((time()-$then)/31556926));
}
// การใช้งาน
$dateB="1990-02-14"; // ตัวแปรเก็บวันเกิด
echo getAge($dateB);
// ผลลัพธ์จะได้ 19
?>

วันอังคารที่ 17 เมษายน พ.ศ. 2555

ขยายหน้าจอให้เป็นแบบ Maximize โดยอัตโนมัติ

ตามโค้ดด้านล่างนี้เลยครับ

<script language="JavaScript1.2">

</script>

ป้องกันการคลิกขวา (No right click) ให้กับรูปภาพ

เพียงแค่นำโค้ดด้านล่างนี้ไปไว้ก่อนที่จะปิด </body>

<script language="JavaScript1.2">
var clickmessage="Right click disabled on images!"

function disableclick(e) {
if (document.all) {
if (event.button==2||event.button==3) {
if (event.srcElement.tagName=="IMG"){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName=="IMG"){
alert(clickmessage)
return false
}
}
}

function associateimages(){
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown=disableclick;
}

if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()
</script>

วันพฤหัสบดีที่ 12 เมษายน พ.ศ. 2555

แสดงเวลาในการประมวลผล

โค้ดตามนี้เลยครับ
function microtime_float()
{
list($usec, $sec) = explode(" ", microtime());
return ((float)$usec + (float)$sec);
}

$time_start = microtime_float();

// Sleep for a while
for($i=0;$i<10000;$i++)
{
}
// usleep(100);

$time_end = microtime_float();
$time = $time_end - $time_start;

echo "Did nothing in $time seconds ";

แสดงข้อมูลความเตือนเมื่อออกจากเพจ

แสดงกรอบโต้ตอบเมื่อเราปิดบราวเซอร์ ออกจากเพจ เปลี่ยนเพจ หรือ กระทั่ง Refresh โดยใช้ event onunload ของ body อีเวนต์นี้ อาจทำงานไม่เหมือนกันในแต่ละ browser นะครับ

<body onunload="dounload()" bgcolor="#FFFFFF">
</body>
<script language="Javascript" type="text/javascript">
function dounload () {
alert("ขอบคุณ")
}
</script>

คลิกที่ textbox แล้วข้อความหาย

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

แก้ไขให้ php อับโหลดไฟล์ได้เกิน 2 M

ปกติแล้ว PHP จะยอมให้เราอัพโหลดได้ไม่เกิน 2M ครับ แต่หากเราต้องการให้ PHP ยอมให้อัพโหลดไฟล์ได้ขนาดแตกต่างจากนั้นเราสามารถกำหนดได้โดยกำหนด upload_max_filesize ใน PHP.ini ครับ แต่หาก server ไม่ใช่ของเราการกำหนดคงลำบาก แต่เราก็สามารถกำหนดเองได้ โดยการกำหนในไฟล์ .htaccess ครับ แต่ทั้งนี้ server ก็ต้องยอมให้เราใช้ไฟล์นี้ได้ด้วยครับ

ขั้นตอนการกำหนด คือ สร้างไฟล์นี้บนเครื่องของเรา เป็นไฟล์ text ธรรมดา แล้วใส่ข้อความในไฟล์ว่า php_value upload_max_filesize 20M โดยที่ 20M คือขนาดของไฟล์ที่ต้องการครับ แล้วให้เปลี่ยนชื่อไฟล์ให้เป็น .htaccess แล้วก็อัพโหลดขึ้นเว็บครับ เป็นอันเสร็จพิธี อ้อ ให้อัพโหลดไฟล์นี้ไปไว้ที่ไดเร็คทอรี่ที่เรียกใช้งานการ upload หรือ root ครับ

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

หากต้องการดูค่าที่กำหนดไว้ทำได้โดยฟังก์ชั่นนี้ครับ

function get_upload_max_filesize () {
  $upload_max_filesize = ini_get("upload_max_filesize");
  if (eregi("([0-9]+)K", $upload_max_filesize, $tempregs)) $upload_max_filesize = $tempregs[1]*1024;
  if (eregi("([0-9]+)M", $upload_max_filesize, $tempregs)) $upload_max_filesize = $tempregs[1]*1024*1024;
  if (eregi("([0-9]+)G", $upload_max_filesize, $tempregs)) $upload_max_filesize = $tempregs[1]*1024*1024*1024;
  return $upload_max_filesize;
}

ค่าที่คืนกลับมาเป็น byte ครับ

include กับ require ใช้แบบไหนดี

คนเขียน PHP หลายคนคงงงกับความแตกต่างของฟังก์ชั่นเหล่านี้

include
inclue_once
require
require_once

ซึ่งจริงๆแล้ว ฟังก์ชั่นที่ 4 ก็ทำหน้าที่เดียวกันคือ รวมไฟล์อื่นๆ เข้ามาประมวลผลด้วย เหมือนเป็นไฟล์เดียวกัน

เคล็ดลับสำหรับมือใหม่ เราสามารถส่งผ่านตัวแปรจากหน้าหนึ่งไปยังหน้าที่ถูก include เข้ามา รวมถึง ส่งตัวแปรจากหน้าที่ include เข้ามายังหน้าหลักได้ด้วย

<?php
    $a = 10;
    include('path/to/file2.php');
    echo $a + $b;
?>

โค้ดด้านบนเป็นไฟล์หลัก กำหนดตัวแปร $a ไว้ เท่ากับ 10 และ เราจะส่งตัวแปรนี้ไปประมวลผลที่ file2.php ซึ่งถูก include เข้ามา ซึ่งหลังจากประมวลผลไฟล์ file2.php แล้วก็จะนำค่าตัวแปร $a มาบวกกับ ตัวแปร $b ซึ่งถูกกำหนดใน file2.php

<?php
$a = $a * 2;
$b = 80;
?>

โค้ดใน file2.php ครับ ซึ่งแนวคิดง่ายๆของ include (หรือฟังก์ชั่นอื่นๆ ด้านบน) คือเหมือนประมวลผลด้วยไฟล์เดียวกัน

include และ require แตกต่างกันอย่างไร คำตอบให้ดูที่ชื่อมันเลยครับ ทั้ง 2 คำสั่งแต่ต่างกันแค่ สิ่งที่เกิดขึ้นหากไม่พบไฟล์ที่ต้องการ

include แปลว่า รวมเข้าด้วยกัน
require แปลว่า ต้องการ

ตามความหมายของชื่อ บอกให้รู้ว่า require สำคัญกว่า include ซึ่ง require หากไม่พบไฟล์ที่ต้องการ PHP จะคืนค่า Error และ หยุดหารทำงาน ซึ่งต่างจาก include หากไม่พบไฟล์ที่ต้องการ มันจะทำแค่แสดงข้อความเตือน แต่มันจะยังถูกประมวลผลต่อไปจนจบ ซึ่งถ้าดูจากผลลัพท์ของมัน หมายความว่า

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

include_once และ require_once มีความหมายเหมือนกับ 2 คำสั่งด้านบน แตกต่างกันตรงที่ คำสั่งที่มี once จะยอมให้มีการรวมไฟล์เข้ามาได้เพียงครั้งเดียวเท่านั้น

ประเด็นเรื่องความเร็ว

include และ require จากการทดสอบ require จะทำงานได้เร็วกว่า include เล็กน้อย ซึ่งตามความเห็นของผม การใช้งานในแง่นี้ ผมแนะนำให้ดูที่จุดประสงค์ของไฟล์ที่ต้องการมากกว่า ส่วน ระหว่างที่มี once กับที่ไม่มี once คำสั่งที่มี once จะประมวลผล ช้ากว่าครับ เนื่องจากคำสั่งที่มี once จะต้องเสียเวลาในการตรวจสอบว่าไฟล์ถูกเรียกใช้งานแล้วหรือยัง ยกตัวอย่างเช่น การโหลด class ขนาดใหญ่

มีอีกประเด็นหนึ่งที่น่าสนใจ คือ หากเราจำเป็นต้อง include ไฟล์ขนาดใหญ่ และมีโอกาศที่จะ include มากกว่า 1 ครั้งแล้ว การใช้คำสั่งที่มี once จะทำงานเร็วกว่านะครับ เนื่องจาก การประมวลผลไฟล์ขนาดใหญ่ อาจใช้เวลามากกว่าการตรวจสอบว่าไฟล์ได้ถูกรวมเข้ามาหรือยัง

คำแนะนำในการเลือกใช้

ผมแนะนำว่าเราไม่ควรอกแบบให้มีการ include ไฟล์แต่ละไฟล์เกินกว่า 1 ครั้ง เนื่องจากการ include ไฟล์ในแต่ละครั้ง PHP ยังจะต้องเสียเวลาส่วนหนึ่งไปกับการตรวจสอบ PATH ที่ถูกต้องของไฟล์ก่อนการเรียกใช้เสมอ หากมีความจำเป็นจะต้องใช้หน้าที่ include เพื่อประมวลผล หลายๆครั้ง ผมแนะนำให้สร้างฟังก์ชั่นในหน้าที่ include และ include หน้าเข้ามาก่อนการประมวลผล และทำการเรียกใช้ฟังก์ชั่นหลายๆครั้ง แทนครับ
ในการ include ไฟล์ เราควรระบุ PATH ของไฟล์แบบเต็มๆ จะทำให้ PHP ไม่ต้องเสียเวลาในการค้นหาไฟล์ครับ เช่น <?php include('C:\home\website\test.php');?> ซึ่งจะเร็วกว่าการระบุแบบ <?php include('test.php');?>

เอาเมาส์ชี้แล้วเปลี่ยนสีตาราง

วิธีการทำเมาส์โอเวอร์แล้วเปลี่ยนสี แถวของตารางง่ายๆๆ จ๊ะ

อันนี้คือเปลี่ยนทั้งแถว

  
  <tr onMouseOver="this.bgColor='#F4F4F4'" onMouseOut ="this.bgColor = ''">

หากอยากเปลี่ยนเฉพาะคอลัมก็นี้เลย

  
<td  onMouseOver="this.bgColor='#F4F4F4'" onMouseOut ="this.bgColor = ''">

วันพุธที่ 4 เมษายน พ.ศ. 2555

ตรวจว่ามี วัน เดือน ปี อยู่จริงหรือเปล่า

Checkdate เป็นฟังค์ชั่นที่ใช้ในการเช็ควันที่ว่าในปีนั้นๆ มีวันที่นี้หรือไม่

รูปแบบคำสั่ง

checkdate (เดือน,วัน,ปี);

รูปแบบการใช้งาน

<?
echo checkdate (10,20,2000); //ใส่วันที่ ที่เราต้องการทราบ หลังจากนั้นถ้าได้ 1 แสดงว่ามี 0 ไม่มี

?>

คำอธิบาย error ที่พบบ่อยใน php

อธิบาย error ที่เกี่ยว PHP มักจะพบกันบ่อย ๆ

1. Parse error: parse error in c:\appserv\www\test\test.php on line 6
คือมีการพิมพ์ผิดรูปแบบ หรือไม่ถูกหลักเกฑ์ ในบรรทัดที่ 6

2.Parse error: parse error, expecting `';'' in c:\appserv\www\test\test.php on line 2
คาดการณ์ว่าอาจจะลืมเครื่องหมาย ';'' ที่ตำแหน่งบรรทัดที่ 2

3.Fatal error: Call to undefined function: explod() in c:\appserv\www\test\test.php on line 2
Call to undefined function: การเรียกใช้งานฟังก์ชั่นนี้ ยังคลุมเครืออยู่
explod() อาจจะพิมพ์ชื่อผิดหรือไม่มีฟังก์ชั่นนี้ ที่ตำแหน่งบรรทัดที่ 2

4.Warning: Wrong parameter count for explode() in c:\appserv\www\test\test.php on line 2
คาดการณ์่ว่าการใช้งานฟังก์ชั่น ผิดพลาด หรือไม่มีการส่งค่าไปให้ โดยที่เกี่ยวกับการส่งค่าให้กับฟังก์ชั่น ที่ตำแหน่งบรรทัดที่ 2

5.Parse error: parse error, expecting `T_VARIABLE' or `'$'' in c:\appserv\www\test\test.php on line 2
คาดการณ์ว่า การตั้งชื่อตัวแปร ผิดพลาด ที่บรรทัดที่ 2

6.error ที่พบ ต่อไปนี้มักจะมาพร้อมกัน
Warning: main(test/test.php): failed to open stream: No such file or directory in c:\appserv\www\test\test.php on line 2
Warning: main(test/test.php): คำเตือน เราอาจจะไม่มีชื่อไฟล์ test.php ใน ไดเร็กทรอรี่ test
failed to open stream: ทำให้ไม่สามารถเรียนกใช้ไฟล์ test.php ได้

Warning: main(): Failed opening 'test/test.php' for inclusion (include_path='.;c:\php4\pear') in c:\appserv\www\test\test.php on line 2
Warning: main(): Failed opening 'test/test.php'
คำเตือน ไม่สามารถเปิดไฟล์ test.php ได้

การตัดคำที่อยู่นอกวงเล็บออก

$x =$id;
$start= strpos($x,'>')+1; //หาจุดเริ่มต้นของคำในวงเล็บ
$end =strpos($x,'<',$start); //หาจุดสุดท้ายของคำในวงเล็บ
$word =substr($x,$start,$end-$start); // ตัดคำที่อยู่ในวงเล็บ
$newlnk =trim($word); // กรณีต้องการตัดช่องว่างทั้งข้างหน้าและข้างหลัง
echo $newlnk;

จากตัวอย่างจะตัดคำที่อยู่นอกเครื่องหมาย < และ > ออก ให้เหลือเฉพาะที่อยู่ในเครื่องหมาย < และ > เท่านั้น

วันจันทร์ที่ 26 มีนาคม พ.ศ. 2555

การเปิดหน้าเวปใหม่ภายใน frame

โค้ดตามนี้เลย

<form name="jumpy">
<select name="example" size="1" onChange="gone()">

<option value="http://www.yahoo.com" selected>Yahoo.com</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.lycos.com">Lycos</option>
<option value="http://www.AltaVista.com">AltaVista</option>
</select>

<input type="button" name="test" value="Go!" onClick="gone()">
</form>

<script language="javascript">

</script>

การแสดงคำอธิบายในฟอร์ม

วันจันทร์ที่ 19 มีนาคม พ.ศ. 2555

เร่งความเร็วให้กับโค้ด php

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

for และ while 2 คำสั่งนี้ใช้สำหรับการวนลูป ซึ่ง while จะเร็วกว่า for ครับ
echo และ print ใช้ echo แทน print ได้เลยครับ เพราะมันทำงานอย่างเดียวกัน แต่ echo เร็วกว่า เห็นๆ
empty และ isset ทั้ง 2 ฟังก์ชั่นนี้ใช้ทดสอบตัวแปรเช่นกัน แต่ทำกลับกัน ซึ่ง empty จะเร็วกว่า isset ครับ แต่ !isset ไม่ได้เร็วกว่า empty นะครับ
while(list($key) = each($aHash)) เร็วกว่า foreach($aHash as $key)
if เร็วกว่า case เนื่องจาก if เป็นรูปแบบพื้นฐานที่สุดนั่นเอง
' (single quote) และ " (double quote) อันแรกจะเร็วกว่าเล็กน้อย เนื่องจากมันไม่ต้องตรวจหาตัวแปรภายในข้อความ
count และ sizeof ใช้สำหรับนับจำนวนแอเรย์ ซึ่ง sizeof จะเร็วกว่า count เล็กน้อย ครับ
เราไม่ควรใช้ count ภายใน loop for ครับ เนื่องจากจะทำให้ PHP คำนวณขนาดของตัวแปรทุกครั้ง ซึ่งจะนานกว่าการอ่านจำนวนของตัวแปร เตรียมไว้ก่อนส่งเข้า for

<?php
   // fast
   $size = count($x);
   for ($i = 0 ; $i < $size; $i++) {
   }

   // slow
   for ($i = 0; $i < count($x); $i++) {
   }
?>

require และ include require จะเร็วกว่าเล็กน้อยครับ
include_once และ include (ระหว่างที่มี once กับไม่มี) ที่มี once จะเร็วกว่าครับ
การทดสอบไฟล์ว่ามีอยู่หรือไม่ก่อนการ include เร็วกว่าการใช้ @ ปิดการแจ้งข้อผิดพลาดเพื่อไม่พบไฟล์ (และหากพบไฟล์ก็ยังเร็วกว่าอยู่ดี)

<?php
   // fast
if(is_file('inc.php')) {
include('inc.php');
   }

   // slow
@include('inc.php');
?>

การปรับแต่งไฟล์ php.ini

การปรับแต่ง php.ini
1. การปรับแต่ง short_open_tag เพื่อให้การประกาศ Tag php แบบสั้นได้ เช่น
      แบบสั้น <?.........?>
     แบบยาว <?php........?>
    ให้แก้ไฟล์ php.ini ส่วนของ short_open_tag จาก Off เป็น On
     short_open_tag = On
2. การปรับแต่ง register_globals เพื่อให้การส่งค่าแบบ GET POST โดยไม่ต้องประกาศ
     ให้แก้ไฟล์ php.ini ส่วนของ register_globals = Off จาก On เป็น Off
     register_globals = Off
3. max_execution_time = 60 เป็นกำหนดเวลาในการ execute ของ script ถ้าเครื่องช้า เพิ่มเวลาให้ได้
4. Cross Site Script คือการ On ไว้ จะทำให้ผู้ไม่ประสงค์ดี สามารถ Upload ไฟล์ที่มีปัญหาขึ้นมา แล้วสั่งให้ Execute ตัวเอง ก่อนจะทำการ DoS ไปยัง Server อื่นๆ ได้
5. magic_quotes_gpc = On – เป็นค่าที่ตั้งเป็น On ไว้เสมอ เพื่อป้องกันการแทรกโค้ดเข้ามาจากหน้าเวบ
6. default_charset = “tis-620″ – แก้ไขให้เป็นภาษาไทยได้ทันทีครับ
7. file_uploads = On – ตั้งค่าเป็น On เพื่อให้สามารถทำการ Upload ผ่าน PHP Scripts ได้
    upload_tmp_dir = – หากต้องการตั้งค่า temporary Directory ให้การ Upload ก็ระบุ path ได้ที่นี่
    upload_max_filesize = 5M – ถ้ามี Ram สูง สามารถเพิ่มขนาดไฟล์ Upload ได้ ค่า Default จะเป็น 2M ทั้งนี้ขึ้นอยู่กับ Ram ที่ระบบมีอยู่ด้วย

วันเสาร์ที่ 17 มีนาคม พ.ศ. 2555

เอา scrollbar ออกจาก textarea ด้วย CSS

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>css textarea scrollbar </title>
</head>
<style type="text/css">
.no_scroll{
overflow:hidden;
}
</style>
<body>
<form id="form1" name="form1" method="post" action="">
<p>ยังไม่กำหนด CSS </p>
<p>
<textarea name="textarea" cols="40" rows="5"> </textarea>
</p>
<p>กำหนด CSS </p>
<p>
<textarea name="textarea" class="no_scroll" cols="40" rows="5"> </textarea>
</p>
</form>
</body>
</html>

วันศุกร์ที่ 16 มีนาคม พ.ศ. 2555

วันพฤหัสบดีที่ 15 มีนาคม พ.ศ. 2555

การใส่ comma ในช่อง textbox ที่เป็นตัวเลข

ทำให้ textbox รับค่าได้เฉพาะตัวเลข

<input type="text" name="number" onkeypress="checknumber()">

<script language="JavaScript">
function checknumber() {
  key=event.keyCode
  if (key<48 || key>57) {
    event.returnValue = false;
    alert("กรุณากรอกค่า number เป็นตัวเลขเท่านั้น !!");
    number.focus();
}
</script>

การใส่ icon ใน address bar

การใส่ ไอคอนลงใน Address Bar ของ Browser ให้ใส่โค้ดในส่วน HEAD ดังนี้

<HEAD>
<LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico" />
<TITLE>My Title</TITLE>
</HEAD>

ถ้าวางไอคอนบน root ของระบบให้ใช้ HREF="favicon.ico" และเปลี่ยนไอคอนเป็นชื่อ favicon.ico ด้วย แต่ถ้าวางไว้ที่โฟลเดอร์อื่นหรือใช้ชื่ออื่น ให้อ้าง HREF รวม path ด้วยเช่น HREF="http://www.mydomain.com/myicon.ico"

ให้ใช้ ไอคอนขนาด 16*16 พิกเซลเท่านั้น สามารถสร้างได้จากโปรแกรมสร้าง icon ทั่วไปครับ

โค้ดจาก http://msdn.microsoft.com/library/default.asp?url=/workshop/Author/dhtml/howto/ShortcutIcon.asp

วันพุธที่ 14 มีนาคม พ.ศ. 2555

การทำ input ให้อ่านได้อย่างเดียว

ทำช่อง input ให้อ่านได้อย่างเดียว
<input name="name" type="text" size="20" maxlength="25" value='อ่านอย่างเดียว' readonly="true">

วันจันทร์ที่ 12 มีนาคม พ.ศ. 2555

ตรวจสอบเลขบัตรประจำตัวประชาชน

โค้ดตามนี้เลยครับ
<script language="javascript">

function checkID(id) {

if(id.length != 13) return false;

for(i=0, sum=0; i < 12; i++)

sum += parseFloat(id.charAt(i))*(13-i);

if((11-sum%11)%10!=parseFloat(id.charAt(12))) return false;

return true;

}

function checkForm() {

if(!checkID(document.form1.txtID.value))

alert('เลขประชาชนไม่ถูกต้อง');

}

</script>

การดึงข้อมูล แบบ real time

เป็นการดึงข้อมูลแบบ real time ซึ่งจะเป็นการกำหนดเวลาให้หน้าเวปมีการเปลี่ยนแปลงตามเวลาที่เรากำหนดโดยใช้ jquery ช่วย
โค้ด
ใช้โค้ดนี้เมื่อต้องการแสดงผล
<div id="showData"></div>
โค้ด ajax เพื่อเรียกใช้งาน

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
setInterval(function(){ // เขียนฟังก์ชัน javascript ให้ทำงานทุก ๆ 30 วินาที
// 1 วินาที่ เท่า 1000
// คำสั่งที่ต้องการให้ทำงาน ทุก ๆ 3 วินาที
var getData=$.ajax({ // ใช้ ajax ด้วย jQuery ดึงข้อมูลจากฐานข้อมูล
url:"gdata.php",
data:"rev=1",
async:false,
success:function(getData){
$("div#showData").html(getData); // ส่วนที่ 3 นำข้อมูลมาแสดง
}
}).responseText;
},3000);
});
</script>
ส่วนอันนี้คือไฟล์ที่ต้องการแสดงผล

<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
if($_GET['rev']==1){
echo date("Y-m-d H:i:s");
exit;
}
?>

การสร้างเมนูหลายภาษา

เป็นตัวอย่างง่ายๆ ในการสร้างเวป 2 ภาษาน่ะครับ
index.php ไฟล์หลักสำหรับทดสอบการแสดง

<?php
// ส่วนกำหนดสำหรับการเรียกใช้เมนูภาษา ตามที่ผู้ใช้เลือก กรณีเริ่มต้น จะเป็นภาษาอังกฤษ
$pathLang=(!isset($_COOKIE['ck_lang']) || $_COOKIE['ck_lang']=="")?"en":$_COOKIE['ck_lang'];
include($pathLang."/index.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>

<div style="margin:auto;width:600px;">
<br />
<a href="javascript:setLang('th');">Thai</a>
<a href="javascript:setLang('en');">Eng</a>
<br />
<br />
<br />
<a href="#"><?=_Home?></a> |
<a href="#"><?=_About_Us?></a> |
<a href="#"><?=_Contact_Us?></a>

</div>

<script type="text/javascript">
function setLang(langID){ //ฟังก์ชัน javascript สำหรับกำหนด ตัวแปร cookie ภาษา
var days=365; // กำหนดจำนวนวันที่ต้องการให้จำค่า
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = "ck_lang=" +langID+ "; expires=" + expires + "; path=/";
window.location.reload()
}
</script>

</body>
</html>

อันนี้หน้าเวปภาษาอังกฤษ

<?php
define("_Home","Home");
define("_About_Us","About Us");
define("_Contact_Us","Contact Us");
?>

อันนี้หน้าเวปภาษาไทย

<?php
define("_Home","หน้าแรก");
define("_About_Us","เกี่ยวกับเรา");
define("_Contact_Us","ติดต่อเรา");
?>

วันศุกร์ที่ 9 มีนาคม พ.ศ. 2555

การแสดงข้อมูลให้เห็นในหน้าจอ แต่ไม่เห็นตอนสั่งพิมพ์

หากเราต้องการแสดงข้อมูลให้เห็นเฉพาะในหน้าจออย่างเดียว แต่เวลาสั่งพิมพ์งานไม่ต้องการให้พิมพ์ออกมา สามารถแก้ปัญหาได้โดย
โค้ด

<STYLE type=text/css>

#printable { display: block; }

@media print
{
#non-printable { display: none; }
#printable { display: block; }
}

</STYLE>

<DIV id=non-printable>
<CENTER><FONT color=red><B>สิ่งที่จะให้แสดงออกมาทางหน้าจอ แต่ว่าไม่เห็นเวลา Print หน้านี้ออกมา</B></FONT></CENTER>
</DIV>
<BR>
<DIV id=printable>
<CENTER><FONT color=blue><B>สิ่งที่จะให้แสดงออกมาทางหน้าจอ และจะเห็นเวลา Print หน้านี้ออกมาด้วย</B></FONT></CENTER>
</DIV>

ซ่อนหรือแสดงข้อมูลในตาราง

เป็นโค้ดที่ใช้ซ่อนหรือแสดงข้อมูลในตาราง โดยคลิกเลือกที่ checkbox
โค้ด

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
</head>

<body>

<table width="100%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td width="14%" valign="top"><input name="cb1" type="checkbox" id="cb1" onClick="if(this.checked){document.all.tb1.style.display='none';}else{document.all.tb1.style.display='';}" value="1"></td>
<td width="86%">
<table width="100%" border="1" cellpadding="1" cellspacing="1" id="tb1" style="display='none';">
<tr>
<td>XXXX</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>XXXX</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>XXXX</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top"><input name="cb2" type="checkbox" id="cb2" value="2" onClick="if(this.checked){document.all.tb2.style.display='none';}else{document.all.tb2.style.display='';}"></td>
<td><table width="100%" border="1" cellpadding="1" cellspacing="1" id="tb2" style="display='none';">
<tr>
<td width="19%">XXXX</td>
<td width="81%"><input type="text" name="textfield4"></td>
</tr>
<tr>
<td>XXXX</td>
<td><input type="text" name="textfield5"></td>
</tr>
<tr>
<td>XXXX</td>
<td><input type="text" name="textfield6"></td>
</tr>
</table>
  </td>
</tr>
</table>
</form>

</body>
</html>

การแสดงและซ่อนข้อความ

สามารถเลือกที่จะแสดง หรือซ่อนข้อความได้โดยการคลิกเลือกที่ checkbox
โค้ด

<html>

<body>
<form action="page.cgi" method="post" name="form1" onSubmit="JavaScript:return fncSubmit();">
<input name="txt1" type="text" id="txt1" value="Value">
<input name="rdo1" type="radio" value="Y" checked onClick="javaScript:if(this.checked){document.all.txt1.style.display='';}">
Show
<input name="rdo1" type="radio" value="N" onClick="javaScript:if(this.checked){document.all.txt1.style.display='none';}">
Hide
<br>
<br>
<input name="chk1" type="checkbox" id="chk1" value="Y" checked>
Checkbox
<input name="rdo2" type="radio" value="Y" checked onClick="javaScript:if(this.checked){document.all.chk1.style.display='';}">
Show
<input name="rdo2" type="radio" value="N" onClick="javaScript:if(this.checked){document.all.chk1.style.display='none';}">
Hide<br>
<br>
<table width="196" border="1" id="tbName">
<tr>
<td> </td>
</tr>
</table>
<input name="rdo3" type="radio" value="Y" checked onClick="javaScript:if(this.checked){document.all.tbName.style.display='';}">
Show
<input name="rdo3" type="radio" value="N" onClick="javaScript:if(this.checked){document.all.tbName.style.display='none';}">
Hide<br>
<br>
<span id="spName">Text</span>
<input name="rdo4" type="radio" value="Y" checked onClick="javaScript:if(this.checked){document.all.spName.style.display='';}">
Show
<input name="rdo4" type="radio" value="N" onClick="javaScript:if(this.checked){document.all.spName.style.display='none';}">
Hide<br>
<br>
<input name="btnSubmit" type="submit" value="Submit" onClick="JavaScript:this.disabled=true;">
</form>
</body>
</html>

การตรึงแนวหัว และคอลัมภ์ของตาราง

เป็นโค้ดสำหรับการตรึงแนวห้วตาราง และคอลัมภ์พร้อม ๆ กันทำให้การดูข้อมูลในตารางดูได้ง่ายขึ้นลองทำดูนะครับ
โค้ด

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
<style type="text/css">

.tableBoxOuter {
width:100%;height:90%; // adjust size of table
background: #FFFFFF;
}

.scrolltable td, th {
font-size: 12px;
margin:0em;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 4px;
padding-left: 4px;
table-layout: automatic;
white-space: nowrap;
}

</style>

<script type="text/javascript">
/* Copyright Richard Cornford 2004 */
var finalizeMe = (function(){
var global = this,base,safe = false,svType = (global.addEventListener && 2)||(global.attachEvent && 3)|| 0;
function addFnc(next, f){function t(ev){if(next)next(ev);f(ev);};t.addItem = function(d){if(f != d.getFunc()){if(next){next.addItem(d);}else{next = d;}}return this;};t.remove = function(d){if(f == d){f = null;return next;}else if(next){next = next.remove(d);}return this;};t.getFunc = function(){return f;};t.finalize = function(){if(next)next = next.finalize();return (f = null);};return t;};
function addFunction(f){if(base){base = base.addItem(addFnc(null, f));}else{base = addFnc(null, f);}};
function ulQue(f){addFunction(f);if(!safe){switch(svType){case 2:global.addEventListener("unload", base, false);safe = true;break;case 3:global.attachEvent("onunload", base);safe = true;break;default:if(global.onunload != base){if(global.onunload)addFunction(global.onunload);global.onunload = base;}break;}}};
ulQue.remove = function(f){if(base)base.remove(f);};
function finalize(){if(base){base.finalize();switch(svType){case 3:global.detachEvent("onunload", base);break;case 2:global.removeEventListener("unload", base, false);break;default:global.onunload = null;break;}base = null;}safe = false;};
ulQue(finalize);return ulQue;
})();

var InitializeMe = (function(){
var global = this,base = null,safe = false;
var listenerType = (global.addEventListener && 2)||(global.attachEvent && 3)|| 0;
function getStackFunc(next, funcRef, arg1,arg2,arg3,arg4){function l(ev){funcRef((ev?ev:global.event), arg1,arg2,arg3,arg4);if(next)next = next(ev);return (funcRef = null);};l.addItem = function(d){if(next){next.addItem(d);}else{next = d;}};return l;};
return (function(funcRef, arg1,arg2,arg3,arg4){if(base){base.addItem(getStackFunc(null, funcRef, arg1,arg2,arg3,arg4));}else{base = getStackFunc(null, funcRef, arg1,arg2,arg3,arg4);}if(!safe){switch(listenerType){case 2:global.addEventListener("load", base, false);safe = true;break;case 3:global.attachEvent("onload", base);safe = true;break;default:if(global.onload != base){if(global.onload){base.addItem(getStackFunc(null, global.onload));}global.onload = base;}break;}}});
})();
var queryStrings = (function(out){
if(typeof location != 'undefined'){
var temp = location.search||location.href||'';
var nvp, ofSet;
if((ofSet = temp.indexOf('?')) > -1){
temp = temp.split("#")[0];
temp = temp.substring((ofSet+1), temp.length);
var workAr = temp.split('&');
for(var c = workAr.length;c--;){
nvp = workAr[c].split('=');
if(nvp.length > 1){out[nvp[0]] = nvp[1];}
}
}
}
return out;
})({});

var TimedQue = (function(){
var base, timer;
var interval = 60;
var newFncs = null;
function addFnc(next, f){function t(){next = next&&next();if(f()){return t;}else{f = null;return next;}}t.addItem = function(d){if(next){next.addItem(d);}else{next = d;}return this;};t.finalize = function(){return ((next)&&(next = next.finalize())||(f = null));};return t;}
function tmQue(fc){if(newFncs){newFncs = newFncs.addItem(addFnc(null, fc));}else{newFncs = addFnc(null, fc);}if(!timer){timer = setTimeout(tmQue.act, interval);}}
tmQue.act = function(){var fn = newFncs, strt = new Date().getTime();if(fn){newFncs = null;if(base){base.addItem(fn);}else{base = fn;}}base = base&&base();if(base||newFncs){var t = interval - (new Date().getTime() - strt);timer = setTimeout(tmQue.act, ((t > 0)?t:1));}else{timer = null;}};
tmQue.act.toString = function(){return 'TimedQue.act()';};
tmQue.finalize = function(){timer = timer&&clearTimeout(timer);base = base&&base.finalize();newFncs = null;};
return tmQue;
})();

var getElementWithId = (function(){if(document.getElementById){return (function(id){return document.getElementById(id);});}else if(document.all){return (function(id){return document.all[id];});}return (function(id){return null;});})();

function getSimpleExtPxIn(el){
var temp, temp2, tick = 0, getBorders = retFalse, doCompStyle = retFalse,defaultView,objList = [];
function retFalse(){return false;}
retFalse.elTest = retFalse;
retFalse.iY = retFalse.iX = retFalse.y = retFalse.x = retFalse.w = retFalse.h = retFalse.bb = retFalse.bt = retFalse.bl = retFalse.br = 0;
function retThis(){return retThis;}
function gCompStyleBorders(p, el){doCompStyle(p, defaultView.getComputedStyle(el, '' ));}
function doComputedStyleFloat(p, cs){p.bt = (cs.getPropertyCSSValue('border-top-width').getFloatValue(5));p.bl = (cs.getPropertyCSSValue('border-left-width').getFloatValue(5));p.br = (cs.getPropertyCSSValue('border-right-width').getFloatValue(5));p.bb = (cs.getPropertyCSSValue('border-bottom-width').getFloatValue(5));}
function doComputedStyleValue(p, cs){p.bt = Math.ceil(parseFloat(s.getPropertyValue('border-top-width')))|0;p.bl = Math.ceil(parseFloat(s.getPropertyValue('border-left-width')))|0;p.br = Math.ceil(parseFloat(s.getPropertyValue('border-right-width')))|0;p.bb = Math.ceil(parseFloat(s.getPropertyValue('border-bottom-width')))|0;}
function gClientBorders(p, el){if(el.clientWidth||el.clientHeight){p.bb = (el.offsetHeight - (el.clientHeight + (p.bt = el.clientTop|0)))|0;p.br = (el.offsetWidth - (el.clientWidth + (p.bl = el.clientLeft|0)))|0;}}
function getInterfaceObj(el){var lastTick = NaN;var offsetParent = getSimpleExtPxInFn(el.offsetParent)||retFalse;function p(doTick){if(doTick){tick = (1+tick)%0xEFFFFFFF;}if(tick != lastTick){lastTick = tick;offsetParent();getBorders(p, el);p.iY = (p.y = (offsetParent.iY + (el.offsetTop|0))) + p.bt;p.iX = (p.x = (offsetParent.iX + (el.offsetLeft|0))) + p.bl;p.w = el.offsetWidth|0;p.h = el.offsetHeight|0;}return p;}p.elTest = function(elmnt){return (elmnt == el);};p.iY = p.iX = p.w = p.h = p.y = p.x = p.bb = p.bt = p.bl = p.br = 0;return (objList[objList.length] = p);}
function getSimpleExtPxInFn(el){if((!el)||(el == document)){return retFalse;}for(var c = objList.length;c--;){if(objList[c].elTest(el)){return objList[c];}}return getInterfaceObj(el);}
function setSpecialObj(el){var lastTick = NaN;function p(doTick){if(doTick){tick = (1+tick)%0xEFFFFFFF;}return p;}p.elTest = function(elmnt){return (elmnt == el);};p.iY = p.iX = p.w = p.h = p.y = p.x = p.bb = p.bt = p.bl = p.br = 0;objList[objList.length] = p;}
if((typeof el.offsetParent != 'undefined')&&(typeof el.offsetTop == 'number')&&(typeof el.offsetWidth == 'number')){if((typeof el.clientTop == 'number')&&(typeof el.clientWidth == 'number')){getBorders = gClientBorders;}else if((defaultView = document.defaultView)&&defaultView.getComputedStyle &&(temp = defaultView.getComputedStyle(el, '' ))&&(((temp.getPropertyCSSValue)&&(temp2 = temp.getPropertyCSSValue('border-top-width'))&&(temp2.getFloatValue)&&(doCompStyle = doComputedStyleFloat))||((temp.getPropertyValue)&&(doCompStyle = doComputedStyleValue)))){getBorders = gCompStyleBorders;temp2 = temp = null;}if(document.documentElement){setSpecialObj(document.documentElement);}if(document.body){setSpecialObj(document.body);}return (getSimpleExtPxIn = getSimpleExtPxInFn)(el);}else{retThis.elTest = retFalse;retThis.iY = retThis.iX = retThis.y = retThis.x = retThis.w = retThis.h = retThis.bb = retThis.bt = retThis.bl = retThis.br = NaN;return (getSimpleExtPxIn = retThis);}
}

function getNewFILCFncStac(fnc){function getNewFnc(f){var next = null;function t(a){next = next&&next(a);return (f(a))?t:next;}t.finalize = function(){next = next&&next.finalize();return (f = null);};t.addItem = function(d){if(f != d){if(next){next.addItem(d);}else{next = getNewFnc(d);}}return this;};return t;}var base = getNewFnc(fnc);fnc = function(a){base = base&&base(a);};fnc.addItem = function(d){if(base){base.addItem(d)}else{base = getNewFnc(d);}};fnc.finalize = function(){return (base = base&&base.finalize());};return fnc;}

function GlobalEventMonitor(eventName, functinRef){
var finalize, global = this;
var monitors = {};
var onName = ['on',''];
function mainMonitor(eventName, functinRef){
var monitor = monitors[eventName];
if(monitor){
monitor(functinRef);
}else{
setEventMonitor(eventName, functinRef);
}
}
function setListener(eventName, longName, fncStack){
global.addEventListener(eventName, fncStack, false);
return true;
}
function setListener_aE(eventName, longName, fncStack){
global.attachEvent(longName, fncStack);
return true;
}
function oldHandler(f){return (function(e){f(e);return true;});}
function retFalse(){return false;}
function setEventMonitor(eventName, functinRef){
var fncStack, longName;
onName[1] = eventName;
longName = onName.join('');
function main(funcRef){
if(funcRef){
fncStack.addItem(funcRef);
globalCheck();
}
}
function globalCheck(){
if(global[longName] != fncStack){
if(global[longName]){
fncStack.addItem(oldHandler(global[longName]));
}
global[longName] = fncStack;
}
}
fncStack = getNewFILCFncStac(functinRef);
if(setListener(eventName, longName, fncStack)){
globalCheck = retFalse;
}else{
globalCheck();
}
finalize.addItem(fncStack.finalize);
monitors[eventName] = main;
functinRef = null;
}
if(!global.addEventListener){
if(global.attachEvent){
setListener = setListener_aE;
}else{
setListener = retFalse;
}
}
finalizeMe((finalize = getNewFILCFncStac(
function(){
finalize = monitors = null;
})
));
(GlobalEventMonitor = mainMonitor)(eventName, functinRef);
functinRef = null;
}

var tableScroll = (function(){
var global = this, finalise, tableList = {};
var notOnScroll = true, notAbort = true;
var overrideStyles = {
margin:[{keys:['margin','marginBottom','marginLeft','marginRight','marginTop'],value:'0px'}],
padding:[{keys:['padding','paddingBottom','paddingLeft','paddingRight','paddingTop'],value:'0px'}],
border:[
{keys:['border','borderBottom','borderLeft','borderRight','borderTop'],value:'0px none #FFFFFF'},
{keys:['borderWidth','borderLeftWidth','borderRightWidth','borderBottomWidth','borderTopWidth'],value:'0px'},
{keys:['borderStyle','borderRightStyle','borderLeftStyle','borderBottomStyle','borderTopStyle'],value:'none'}
],
overflow:[{keys:['overflow'],value:'hidden'}],
positionRel:[{keys:['position'],value:'relative'}],
positionAbs:[{keys:['position'],value:'absolute'}],
top:[{keys:['top'],value:'0px'}],
left:[{keys:['left'],value:'0px'}],
zIndex:[{keys:['zIndex'],value:2}]
};
function setStyleProps(styleObj){
var data, dArray;
for(var c = 1;c < arguments.length;c++){
if((data = overrideStyles[arguments[c]])){
for(var d = data.length;d--;){
dArray = data[d].keys;
for(var e = dArray.length;e--;){
styleObj[dArray[e]] = data[d].value;
}
}
}
}
return true;
}
function setClass(el,val){
if(el.setAttribute){el.setAttribute('class',val);}
return (el.className = val);
}
function retFalse(){return false;}
function TableScroll(id){
var midAbsDiv, parent, vHeaderAbsStyle, vHeaderRelStyle, hHeaderAbsStyle, hHeaderRelStyle;
var midAbsDivStyle, midAbsinerDivStyle, inRelDivStyle, outRelDivDim;
var lastScrollTop = NaN, lastScrollLeft = NaN, lastWidth = NaN, lastHeight = NaN, tableDim, table = getElementWithId(id);
var midRelinerDivStyle, midRelinerDiv, testCellDim;
function position(){
var nh,nw,size,th,tw,cellWidth,celHeight,st = midAbsDiv.scrollTop, sl = midAbsDiv.scrollLeft, h = outRelDivDim(true).h, w = outRelDivDim.w;
if((size = ((w != lastWidth)||(h != lastHeight)))||(st != lastScrollTop)||(sl != lastScrollLeft)){
hHeaderRelStyle.left = (((cellWidth = (testCellDim().x - tableDim().iX)) + (lastScrollLeft = sl)) * -1)+'px';//position
vHeaderRelStyle.top = (((celHeight = (testCellDim.y - tableDim.iY)) + (lastScrollTop = st)) * -1)+'px';
if(size){
vHeaderRelStyle.width = vHeaderAbsStyle.width = midAbsDivStyle.left = hHeaderAbsStyle.left = (cellWidth+'px');
hHeaderRelStyle.height = hHeaderAbsStyle.height = midAbsDivStyle.top = vHeaderAbsStyle.top = (celHeight+'px');
inRelDivStyle.left = (cellWidth * -1)+'px';
inRelDivStyle.top = (celHeight * -1)+'px';
midRelinerDivStyle.width = midAbsinerDivStyle.width = ((tw = tableDim.w) - cellWidth)+'px';
midRelinerDivStyle.height = midAbsinerDivStyle.height = ((th = tableDim.h) - celHeight)+'px';
midAbsDivStyle.height = vHeaderAbsStyle.height = (((nh = ((lastHeight = h) - celHeight)) > celHeight)?nh:celHeight)+'px';
midAbsDivStyle.width = hHeaderAbsStyle.width = (((nw = ((lastWidth = w) - cellWidth)) > cellWidth)?nw:cellWidth)+'px';
hHeaderRelStyle.width = inRelDivStyle.width = tw + 'px';
vHeaderRelStyle.height = inRelDivStyle.height = th + 'px';
}
}
return notOnScroll;
}
function onScroll(){
notOnScroll = false;
position();
}
function onSize(){
position();
return true;
}
finalise.addItem(function(){
testCellDim = midRelinerDivStyle = midRelinerDiv =
midAbsinerDivStyle = tableDim = vHeaderAbsStyle = vHeaderRelStyle = hHeaderAbsStyle = hHeaderRelStyle = inRelDivStyle = outRelDivDim = midAbsDiv = parent = table = null;
})
if(
table&&
(typeof table.scrollTop == 'number')&&
(typeof table.offsetHeight == 'number')&&
table.tagName&&
table.appendChild&&
table.cloneNode&&
table.getAttribute&&
table.getElementsByTagName&&
(parent = table.parentNode)&&
parent.insertBefore
){
InitializeMe(function(){
var newTable, testCell;
var vHeaderAbs, vHeaderRel, hHeaderAbs, hHeaderRel,outRelDiv, midAbsinerDiv, inRelDiv;
if(
(notAbort)&&
(testCell = table.getElementsByTagName('td')[0])&&
(newTable = table.cloneNode(true))&&
(outRelDiv = document.createElement('DIV'))&&
(setClass(outRelDiv, 'tableBoxOuter'))&&
(midAbsDiv = document.createElement('DIV'))&&
(midRelinerDiv = document.createElement('DIV'))&&
(midAbsinerDiv = document.createElement('DIV'))&&
(inRelDiv = document.createElement('DIV'))&&
(vHeaderAbs = document.createElement('DIV'))&&
(vHeaderRel = document.createElement('DIV'))&&
(hHeaderAbs = document.createElement('DIV'))&&
(hHeaderRel = document.createElement('DIV'))&&
(setStyleProps(outRelDiv.style, 'positionRel', 'padding'))&&
(midAbsDivStyle = midAbsDiv.style)&&
(setStyleProps(midAbsDivStyle, 'positionAbs', 'padding', 'margin', 'border', 'zIndex'))&&
(midRelinerDivStyle = midRelinerDiv.style)&&
(setStyleProps(midRelinerDivStyle, 'positionRel', 'padding', 'margin', 'border', 'top', 'left'))&&
(midAbsinerDivStyle = midAbsinerDiv.style)&&
(setStyleProps(midAbsinerDivStyle, 'positionAbs', 'overflow', 'padding', 'margin', 'border', 'top', 'left'))&&
(inRelDivStyle = inRelDiv.style)&&
(setStyleProps(inRelDivStyle, 'positionRel', 'padding', 'margin', 'border', 'top', 'left'))&&
(vHeaderAbsStyle = vHeaderAbs.style)&&
(setStyleProps(vHeaderAbsStyle, 'positionAbs', 'overflow', 'padding', 'margin', 'border', 'top', 'left', 'zIndex'))&&
(vHeaderRelStyle = vHeaderRel.style)&&
(setStyleProps(vHeaderRelStyle, 'positionRel', 'padding', 'margin', 'border', 'top', 'left'))&&
(hHeaderAbsStyle = hHeaderAbs.style)&&
(setStyleProps(hHeaderAbsStyle, 'positionAbs', 'overflow', 'padding', 'margin', 'border', 'top', 'left', 'zIndex'))&&
(hHeaderRelStyle = hHeaderRel.style)&&
(setStyleProps(hHeaderRelStyle, 'positionRel', 'padding', 'margin', 'border', 'top', 'left'))&&
(setStyleProps(table.style, 'margin'))&&
(midAbsDiv.appendChild(midRelinerDiv))&&
(midRelinerDiv.appendChild(midAbsinerDiv))&&
(midAbsinerDiv.appendChild(inRelDiv))&&
(outRelDiv.appendChild(midAbsDiv))&&
(vHeaderAbs.appendChild(vHeaderRel))&&
(hHeaderAbs.appendChild(hHeaderRel))&&
(outRelDiv.appendChild(vHeaderAbs))&&
(outRelDiv.appendChild(hHeaderAbs))&&
(parent.insertBefore(outRelDiv, table))&&
(!isNaN((outRelDivDim = getSimpleExtPxIn(outRelDiv)).w))&&
(inRelDiv.appendChild(table))&&
(!isNaN((testCellDim = getSimpleExtPxIn(testCell)).w))&&
(!isNaN((tableDim = getSimpleExtPxIn(table)).w))&&
(hHeaderRel.appendChild(newTable))&&
(newTable = table.cloneNode(true))&&
(vHeaderRel.appendChild(newTable))
){
midAbsDivStyle.overflow = 'scroll';
if(midAbsDiv.addEventListener){
midAbsDiv.addEventListener('scroll', onScroll, false);
}else if(midAbsDiv.attachEvent){
midAbsDiv.attachEvent('onscroll', onScroll);
}else{
midAbsDiv.onscroll = onScroll;
}
GlobalEventMonitor('resize', onSize);
position();
TimedQue(position);
}else{
notAbort = false;
}
});
}else{
notAbort = false;
}
return true;
}
function main(){
var id;
for(var c = 0;c < arguments.length;c++){
id = arguments[c];
if(notAbort&&!tableList[id]){
tableList[id] = TableScroll(id);
}
}
}
if(
(!global.queryStrings||!queryStrings['noTableScroll'])&&
global.setTimeout&&
global.document&&
document.createElement
){
finalizeMe((finalise = getNewFILCFncStac(function(){
finalise = tableList = null;
})));
return main;
}else{
return retFalse;
}
})();
</script>
</head>

<body>
<table class=scrolltable id=mainTable width="100%" border="1" cellspacing="1" cellpadding="2">
<thead><tr>
<th rowspan="2">a</th>
<th colspan="3">b</th>
<th colspan="2">f</th>
<th rowspan="2">i</th>
</tr>
<tr>
<th>c</th>
<th>d</th>
<th>e</th>
<th>g</th>
<th>h</th>
</tr></thead>
<tr>
<th>1</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>2</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>3</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>4</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>5</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>6</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>7</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>8</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>9</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>10</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>11</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>12</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>13</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>14</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>15</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>16</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>17</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>18</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>19</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>20</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>21</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>22</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>23</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>24</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>25</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>26</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>27</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>28</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>29</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>30</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>31</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>32</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>33</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>34</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>35</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>36</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th><p>37</p> </th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>38</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>39</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>40</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>41</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>42</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>43</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>44</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>45</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>46</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>47</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>48</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
if(typeof tableScroll == 'function'){tableScroll('mainTable');}
</script>