ทักทายครับ

สวัสดีครับ หลังจากที่ blog นี้หยุดการอัพเดททบความเกี่ยวกับโค้ดในการใช้ทำเวปไปนานไม่ว่าจะเป็น code php, html, javascript, css, ajax เนื่องจากผมไม่ค่อยมีเวลาจนลืม blog นี้ไปเลย นึกขึ้นได้ตอนปีใหม่ ไปค้นหาใน google แล้วตกใจ เนื่องจาก blog นี้ไปอยู่ลำดับที่ 1 ของการค้นหา ไม่เชื่อลองดู เลยขอถือโอกาสเริ่มต้นใหม่ในช่วงปีใหม่นี้เริ่มอัพเดทบทความตั้งแต่ตอนนี้เป็นต้นไป หวังเป็นอย่างยิ่งว่าจะมีผู้ติดตามบทความของผมต่อไปน่ะครับ ปล.ท่านใดสนใจลงโฆษณาสามารถติดต่อได้ที่ hotcodephp@gmail.com

27 เม.ย. 2555

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

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

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

<br />
<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)""><br />
<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)"><br />
<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><br />
<p>This free script provided by<br />
<br />
<a href="http://javascriptkit.com">JavaScript<br />
Kit</a></p><br />

Read more >>

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

<br />
<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><br />
<iframe id="uploadtarget" name="uploadtarget" style="display=none"></iframe><br />
<form name="myform" action="upload.php" method="post" enctype="multipart/form-data" onsubmit="return clickupload();" target="uploadtarget"><input name="fileupload" type="file"><br />
<br />
<font color="red" size="2">Not over 200 KB (Gif, Jpg, Pdf, Doc, Docx, Tiff)</font><br />
<br />
<input id="btn" name="btn" type="submit" value="Upload"><br />
<input name="txt" style="display=none"> <br />
</form>

2. upload.php

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

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

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

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

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

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

Read more >>

25 เม.ย. 2555

การทำ menu แบบ spinmenu

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

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

<br /> <html><br /> <head><br /> <br /> <script type="text/javascript" src="spinmenu.js"></script><br /> </head><br /> <br /> <body><br /> <p>Example Spin Menu:</p><br /> <br /> <br /> <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><br /> <br /> <p align="left"><font face="arial" size="-2">This free script provided by<br /> <br /> <a href="http://javascriptkit.com">JavaScript Kit</a></font></p><br /> </body><br />

2. spinmenu.js

<br /> <br /> 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"><br /> <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()}};<br /> <br /> 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;<br /> }<br />

Read more >>

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 ได้ แต่นอกนั้นก็นับว่ามันทำงานกับภาษาไทยได้ดีครับ

Read more >>

20 เม.ย. 2555

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

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

Javascript Code

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

</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. 
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 3.autocomplete.gif

Read more >>

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

จะมีวิธีอยู่ 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
?>

Read more >>

17 เม.ย. 2555

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

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

<script language="JavaScript1.2">

</script>

Read more >>