บทความ PHP AJAX CSS Javascript MySql jQueryhttp://www.ninenik.comรวมบทความ PHP Ajax css javascript jQuery เว็บไซต์สำเร็จรูป CMSProth-THSun, 05 Feb 2012 17:53:43 +0700Copyright ninenik.comCMSPro เว็บไซต์สำเร็จรูปhttp://www.ninenik.com/images/logo_ninenik.gifhttp://www.ninenik.comแสดง icons กำหนดรูปเอง ให้จุดเริ่มเต้น และสิ้นสุดของเส้นทาง ใน google map อย่างง่ายhttp://www.ninenik.com/แสดง_icons_กำหนดรูปเอง_ให้จุดเริ่มเต้น_และสิ้นสุดของเส้นทาง_ใน_google_map_อย่างง่าย-430.html ประยุกต์จากเนื้อหา 

DirectionsService DirectionsRenderer ค้นหา และสร้าง เส้นทางใน google map
http://www.ninenik.com/content.php?arti_id=340
 
โดยอยู่ภายใต้เงื่อนไข คือจุดเริ่มต้น และสิ้นสุด จะไม่สามารถลากเพื่อ เปลี่ยนเส้นทางได้
 
ตัวอย่าง
 
 
From:
To:
From:
To:
ระยะทางข้อความ ระยะทางตัวเลข เมตร
ระยะเวลาข้อความ ระยะเวลาตัวเลข วินาที
* ระยะทางโดยประมาณ ระยะเวลา กรณีขับรถ โดยประมาณ

 

 
โค้ดทั้งหมด
<!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>Google Map API 3 - 01</title>
<style type="text/css">
html { height: 100% }
body { 
	height:100%;
	margin:0;padding:0;
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	width:550px;
	height:400px;
	margin:auto;
	margin-top:50px;
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
From: 
<input name="namePlace" type="text" id="namePlace" size="60" />
<br />
To:
<input name="toPlace" type="text" id="toPlace" size="60" />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
<input type="button" name="iClear" id="iClear" value="Clear" />
  <hr />
<!--  <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
From: 
<input name="namePlaceGet" type="text" id="namePlaceGet" size="60" />
<br />
To:
<input name="toPlaceGet" type="text" id="toPlaceGet" size="60" /><br />
ระยะทางข้อความ  
<input name="distance_text" type="text" id="distance_text" value="" size="17" />
ระยะทางตัวเลข 
<input name="distance_value" type="text" id="distance_value" value="0" size="17" />
เมตร<br />
ระยะเวลาข้อความ
<input name="duration_text" type="text" id="duration_text" size="15" />
ระยะเวลาตัวเลข
<input name="duration_value" type="text" id="duration_value" value="0" size="17" />
วินาที
<input type="submit" name="button" id="button" value="บันทึก" />  
  <br />
  * ระยะทางโดยประมาณ ระยะเวลา กรณีขับรถ โดยประมาณ
  <p id="myconsole"></p>
</form>  
</div> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
<script type="text/javascript">
var directionShow; // กำหนดตัวแปรสำหรับใช้งาน กับการสร้างเส้นทาง
var directionsService; // กำหนดตัวแปรสำหรับไว้เรียกใช้ข้อมูลเกี่ยวกับเส้นทาง
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Latlng; // กำหนดตัวแปรสำหรับเก็บจุดเริ่มต้นของเส้นทางเมื่อโหลดครั้งแรก
var initialTo; // กำหนดตัวแปรสำหรับเก็บจุดปลายทาง เมื่อโหลดครั้งแรก
var searchRoute; // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น ให้สามารถใช้งานจากส่วนอื่นๆ ได้
var makeMarker; // 
var icons;
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	
	// Start/Finish icons
	icons = {
		start: new GGM.MarkerImage(
		// URL
		'http://google-maps-icons.googlecode.com/files/walking-tour.png',
		// (width,height)
		new GGM.Size( 44, 32 ),
		// The origin point (x,y)
		new GGM.Point( 0, 0 ),
		// The anchor point (x,y)
		new GGM.Point( 22, 32 )
		),
		end: new GGM.MarkerImage(
		// URL
		'http://google-maps-icons.googlecode.com/files/spring-hot.png',
		// (width,height)
		new GGM.Size( 44, 32 ),
		// The origin point (x,y)
		new GGM.Point( 0, 0 ),
		// The anchor point (x,y)
		new GGM.Point( 22, 32 )
		)
	};
		
	directionShow=new  GGM.DirectionsRenderer({suppressMarkers:true});
//	directionShow=new  GGM.DirectionsRenderer({
//		draggable:true,
//		markerOptions:{
//			  draggable: true,
//			  raiseOnDrag: false,			 
//			  dragCrossMove:true
//		}
//	});	
	
	directionsService = new GGM.DirectionsService();
	// กำหนดจุดเริ่มต้นของแผนที่
	my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
	// กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก
	initialTo=new GGM.LatLng(13.8129355,100.7316899); 
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0];
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 13, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
	};
	map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	directionShow.setMap(map); // กำหนดว่า จะให้มีการสร้างเส้นทางในแผนที่ที่ชื่อ map
	
	if(map){ // เงื่่อนไขถ้ามีการสร้างแผนที่แล้ว
		 searchRoute(my_Latlng,initialTo); // ให้เรียกใช้ฟังก์ชัน สร้างเส้นทาง
	}
	
	// กำหนด event ให้กับเส้นทาง กรณีเมื่อมีการเปลี่ยนแปลง 
	GGM.event.addListener(directionShow, 'directions_changed', function() {
		var results=directionShow.directions; // เรียกใช้งานข้อมูลเส้นทางใหม่ 
			
		// นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน
		var addressStart=results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
		var addressEnd=results.routes[0].legs[0].end_address;// สถานที่ปลายทาง
		var distanceText=results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
		var distanceVal=results.routes[0].legs[0].distance.value;// ระยะทางตัวเลข
		var durationText=results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
		var durationVal=results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข		
		// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
		$("#namePlaceGet").val(addressStart);
		$("#toPlaceGet").val(addressEnd);
		$("#distance_text").val(distanceText);
		$("#distance_value").val(distanceVal);
		$("#duration_text").val(durationText);
		$("#duration_value").val(durationVal);		
	});


}
$(function(){
	// ส่วนของฟังก์ชัน สำหรับการสร้างเส้นทาง
	searchRoute=function(FromPlace,ToPlace){ // ฟังก์ชัน สำหรับการสร้างเส้นทาง
		if(!FromPlace && !ToPlace){ // ถ้าไม่ได้ส่งค่าเริ่มต้นมา ให้ใฃ้ค่าจากการค้นหา
			var FromPlace=$("#namePlace").val();// รับค่าชื่อสถานที่เริ่มต้น
			var ToPlace=$("#toPlace").val(); // รับค่าชื่อสถานที่ปลายทาง
		}
		// กำหนด option สำหรับส่งค่าไปให้ google ค้นหาข้อมูล
		var request={
			origin:FromPlace, // สถานที่เริ่มต้น
			destination:ToPlace, // สถานที่ปลายทาง
			travelMode: GGM.DirectionsTravelMode.DRIVING // กรณีการเดินทางโดยรถยนต์
		};
		// ส่งคำร้องขอ จะคืนค่ามาเป็นสถานะ และผลลัพธ์
		directionsService.route(request, function(results, status){
			if(status==GGM.DirectionsStatus.OK){ // ถ้าสามารถค้นหา และสร้างเส้นทางได้
				directionShow.setDirections(results); // สร้างเส้นทางจากผลลัพธ์


//				console.log(directionShow);
//				console.log(results.routes[0].legs[0]);
//				directionShow.markerOptions.icon=icons.start;				
//				directionShow.markerOptions.icon=icons.end;		
				var leg = results.routes[0].legs[0];
				makeMarker(leg.start_location, icons.start, "title" );
				makeMarker(leg.end_location, icons.end, 'title' );				
				
				// นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน 
				var addressStart=results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
				var addressEnd=results.routes[0].legs[0].end_address;// สถานที่ปลายทาง
				var distanceText=results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
				var distanceVal=results.routes[0].legs[0].distance.value;// ระยะทางตัวเลข
				var durationText=results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
				var durationVal=results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข		
				// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
				$("#namePlaceGet").val(addressStart);
				$("#toPlaceGet").val(addressEnd);
				$("#distance_text").val(distanceText);
				$("#distance_value").val(distanceVal);
				$("#duration_text").val(durationText);
				$("#duration_value").val(durationVal);		
				// ส่วนการกำหนดค่านี้ จะกำหนดไว้ที่ event direction changed ที่เดียวเลย ก็ได้
			}else{
				// กรณีไม่พบเส้นทาง หรือไม่สามารถสร้างเส้นทางได้
				// โค้ดตามต้องการ ในทีนี้ ปล่อยว่าง
			}
		});
	}
	
	// ส่วนควบคุมปุ่มคำสั่งใช้งานฟังก์ชัน
	$("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace 
		searchRoute();	// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
	});

	$("#namePlace,#toPlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
		if(event.keyCode==13 && $(this).val()!=""){	// 	ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter 
			searchRoute();		// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
		}		
	});
	
	$("#iClear").click(function(){
		$("#namePlace,#toPlace").val(""); // ล้างค่าข้อมูล สำหรับพิมพ์คำค้นหาใหม่
	});


	makeMarker=function(position,icon,title){
		 new GGM.Marker({
//			  draggable: true,
//			  raiseOnDrag: false,			 
//			  dragCrossMove:true,
			  position: position,
			  map: map,
			  icon: icon,
			  title: title
		 });
	}

	
});
$(function(){
	// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
	// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
	// v=3.2&sensor=false&language=th&callback=initialize
	//	v เวอร์ชัน่ 3.2
	//	sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
	//	language ภาษา th ,en เป็นต้น
	//	callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize	
	$("<script/>", {
	  "type": "text/javascript",
	  src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>
 
]]>Thu, 26 Jan 2012 14:18:19 +0700แนวทางการประยุกต์ การซ่อน แสดงเนื้อหาสำหรับล็อกอิน อย่างง่าย ด้วย jQueryhttp://www.ninenik.com/แนวทางการประยุกต์_การซ่อน_แสดงเนื้อหาสำหรับล็อกอิน_อย่างง่าย_ด้วย_jQuery-429.html ตัวอย่างโค้ดสำหรับการซ่อน แสดงเนื้อหา ประยุกต์แสดงส่วนสำหรับล็อกอิน

ไว้ส่วนบนของเว็บไซต์ แสดง หรือซ่อนเมื่อคลิกที่ลิ้งค์ โดยใช้คำสั่ง slideToggle ของ jQuery
สามารถนำไปดัดแปลง css และการจัดวางตำแหน่งต่างๆ ได้ตามต้องการ
 
ตัวอย่าง
 
http://www.ninenik.com/demo/jquery_slide_down_up.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>slde down up</title>
<style type="text/css">
body{
	padding:0px;
	margin:0px;	
}
div#login_div{
	position:relative;
	margin:auto;
	display:none;
	width:100%;	
	height:150px;
	background-color:#FFFFCC;
}
div#main_div{
	position:relative;
	display:block;
	margin:auto;
	width:970px;
	height:1000px;	
	background-color:#FFCCCC;	
}
</style>

</head>

<body>
<div id="login_div">
ส่วนของเนื้อหาสำหรับล็อกอิน
</div>
<div id="main_div">
<div id="login_anchor">
<a id="login_anchor_a" href="#">เข้าสู่ระบบ / สมัครสมาชิก</a>
</div>

</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
<script type="text/javascript">    
$(function(){    
	$("#login_anchor_a").click(function(){
		$("#login_div").slideToggle();
	});
});    
</script> 
</body>
</html>
 
]]>Mon, 23 Jan 2012 09:47:58 +0700รู้จัก และใช้งาน DATEDIFF() ใน mysql ฟังก์ชัน เทียบช่วงเวลาที่เหลือhttp://www.ninenik.com/รู้จัก_และใช้งาน_DATEDIFF()_ใน_mysql_ฟังก์ชัน_เทียบช่วงเวลาที่เหลือ-428.html datediff() เป็น ฟังก์ชันเกี่ยวกับวันที่ของ mysql ใช้สำหรับหาค่าต่างของวันที่สองวันที่

 
ตัวอย่าง
 
SELECT DATEDIFF("2012-01-12",NOW()) 
// วันที่ปัจจุบันคือ 2012-01-11 คือค่า NOW()
// ค่าที่ได้จะเท่ากับ 1 ได้จาก วันที่แรก ลบด้วย วันที่ที่สอง
// 2012-01-12  ลบ ด้วย 2012-01-11 คือได้ค่าต่างกัน 1 วัน
// อธิบายได้ว่า วันที่แรกมากกว่าวันที่ที่สอง 1 วัน
 
 
ตัวอย่างถ้ากำหนดวันที่แรก น้อยกว่าวันที่ที่สอง ค่าที่ได้จะติดลบ
 
SELECT DATEDIFF(NOW(),"2012-01-12") 
// วันที่ปัจจุบันคือ 2012-01-11 คือค่า NOW()
// ค่าที่ได้จะเท่ากับ -1 ได้จาก วันที่แรก ลบด้วย วันที่ที่สอง
// 2012-01-11  ลบ ด้วย 2012-01-12 คือได้ค่าต่างกัน 1 วัน แต่มีเครื่องหมาย - 
// (ติดลบกำหนดว่า วันที่แรกน้อยกว่าวันที่ที่สองอยู่ 1 วัน)
 
 
 
แนวทางการนำไปใช้งาน
 
การลบรายการที่เลยวันที่กำหนดมาแล้ว 3 วัน
 
DELETE FROM table WHERE DATEDIFF(date_field,NOW())>=3 
// คำสั่งลบรายการที่ วันที่ date_field มากกว่าวันที่ปัจจุบัน ตั้งแต่ 3 วันขึ้นไป
//  (date_field คือวันที่ที่ใช้ตรวจสอบ มีรูปแบบ 0000-00-00 เช่น 2012-01-05)
// การทำงานคือ หลังจาก 3 วันนับจากวันที่กำหนด date_field รายการนั้นๆ ก็จะถูกลบ
 
 
 
 
การเลือกรายการที่วันที่ ก่อนครบกำหนด 7 วัน 
 
SELECT * FROM table WHERE DATEDIFF(NOW(),date_field)=-7 
// คำสั่งเลือกรายการ ที่จะครบกำหนดวันที่ date_field ในอีก 7 วัน
// (date_field คือวันที่ที่ใช้ตรวจสอบ มีรูปแบบ 0000-00-00 เช่น 2012-01-05)
// ในกรณีนี้ date_field คือวันที่ที่จะครบกำหนด
// การทำงานคือ ถ้าอีก 7 วันนับจากวันนี้ จนถึงวันที่ครบกำหนด date_field รายการก็จะถูกนำมาแสดง
 
]]>Wed, 11 Jan 2012 15:40:10 +0700ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู http://www.ninenik.com/ใช้_jQuery_กับ_CSS_สร้างเมนูย่อย_แนวนอน_รูปแบบคล้ายแท็บเมนู_-427.html ตัวอย่าง และโค้ดต่อไปนี้ เป็นแนวทางสำหรับสร้างเมนู สำหรับเว็บไซต์ โดยจะมีเมนูย่อยแสดง

เมื่อเลื่อนเมาส์ไปที่เมนูหลักของเมนูย่อยนั้น สามารถนำไปประยุกต์ หรือปรับแต่ง css ให้สวยงาม
ได้ตามต้องการ  
 
ตัวอย่าง
 
 
โค้อตัวอย่างทั้งหมด
 
<!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>
<style type="text/css">
body{
	font: Tahoma, Thonburi;	
	font-size:12px;
}
/* CSS ส่วนแถบแนวทั้งหมดของเมนูหลัก */
ul#top_nav_menu{
	position:relative;
	display:block;
	width:900px;
	height:35px;
	padding:0px;
	margin:0px;
	list-style:none;	
	background-color:#99CCCC;
	overflow:visible;
	line-height:35px;
}
/* css ส่วนของเมนูหลัก */
ul#top_nav_menu li{
	background-color:#FFCC33;
	position:relative;
	display:block;
	float:left;
	height:35px;
	padding:0px 15px;
	margin:0px;
	list-style:none;	
}
ul#top_nav_menu li a{
	text-decoration:none;	
	text-transform:uppercase;
}
/* css ส่วนของแถบแนวทั้งหมดของเมนูย่อย */
ul#top_nav_menu li ul{
	background-color:#CC99CC;	
	position:absolute;
	clear:both;
	float:left;
	top:35px;
	left:0px;
	display:none;
	height:35px;
	width:900px;	
	padding:0px;
	margin:0px;
	list-style:none;		
}
/* css ส่วนของเมนูย่อย */
ul#top_nav_menu li ul li{
	position:relative;
	background-color:#CCCC66;	
	float:left;
	display:block;
	height:35px;
	padding:0px 15px;
	margin:0px;
	list-style:none;	
}
</style>
</head>

<body>


<div>

<ul id="top_nav_menu">
		<li><a href="#">Home</a></li>
		<li>
			<a href="#">Project Info</a>
			<ul>
				<li><a href="#"><span>Concept</span></a></li>
				<li><a href="#"><span>Fact Sheet</span></a></li>
				<li><a href="#"><span>Facilities</span></a></li>
				<li><a href="#"><span>Floor Plan</span></a></li>
				<li><a href="#"><span>Unit Layout</span></a></li>
				<li><a href="#" target="_blank"></a></li>
			</ul>
		</li>
		<li><a href="#">Location</a></li>
		<li><a href="#">Gallery</a></li>
		<li><a href="#">Promotion</a></li>
		<li><a href="#">Buyer's Guide</a></li>
		<li><a href="#">Siri Service</a></li>
		<li>
        <a href="#">Contact us</a>
 			<ul>
				<li><a href="#"><span>Concept</span></a></li>
				<li><a href="#"><span>Fact Sheet</span></a></li>
				<li><a href="#"><span>Facilities</span></a></li>
				<li><a href="#"><span>Floor Plan</span></a></li>
			</ul>       
        </li>
	</ul>
</div>    
    
    
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>  
<script type="text/javascript">  
$(function(){  
	$("ul#top_nav_menu li").hover(function(){	
		var offsetLeft=$(this).position().left;
		$(this).find("ul").css("left",-offsetLeft+"px").delay(300).slideDown(100);
	},function(){
		$(this).find("ul").stop(true,true).slideUp(100);
	});
});  
</script>    
</body>
</html>
 
]]>Fri, 16 Dec 2011 16:47:47 +0700การใช้งาน css จัดตำแหน่ง ซ้อนข้อความบนรูปภาพอย่างง่ายhttp://www.ninenik.com/การใช้งาน_css_จัดตำแหน่ง_ซ้อนข้อความบนรูปภาพอย่างง่าย-426.html ตัวอย่างโค้ดและคำแนะนำต่อไปนี้ เป็นวิธีการใช้งาน css ในการกำหนดตำแหน่ง

ของข้อมูลที่ต้องการแสดง ซ้อนทับ บนรูปภาพที่ต้องการ โดยสามารถนำไปประยุกต์
เพิ่มเติมให้เหมาะกับรูปแบบตามต้องการได้
 
ตัวอย่าง
 
ซ้อนทับ ชิดขอบบน

ซ้อนทับ ชิดขอบซ้าย

ซ้อนทับ ชิดขอบล่าง

ซ้อนทับ ชิดขอบขวา
 
ตัวอย่างโค้ดทั้งหมด
 
<!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>

<style type="text/css">
.holder_wrap{
	position:relative;
	margin:auto;
	display:block;
	height:120px; /* กำหนดความสูงส่วนพื้นที่คลุมเนื้อหาทั้งหมด */
}
.holder_wrap_img{
	position:absolute;/* กำหนดการจัดตำแหน่งส่วนพื้นที่คลุมเนื้อหารุปและข้อความซ้อนทับ */
}
.holder_wrap_img img{
	position:relative; /* กำหนดการจัดตำแหน่งของรูป */
}
/* css ซ้อนทับ ชิดขอบบน */
.inner_position_top{
	position:absolute;
	display:block;	
	background-color:#CC99FF;	
	height:50px; /* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ */
	width:100%; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	top:0px; /* css กำหนดชิดด้านบน  */
	z-index:999;
}
/* css ซ้อนทับ ชิดขอบด้านซ้าย */
.inner_position_left{
	position:absolute;
	display:block;	
	background-color:#99FFCC;	
	height:100%;/* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	width:50px; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ */
	top:0px; /* css กำหนดชิดด้านบน  */
	left:0px; /* css กำหนดชิดซ้าย  */
	z-index:999;
}
/* css ซ้อนทับ ชิดขอบล่าง */
.inner_position_bottom{
	position:absolute;
	display:block;	
	background-color:#FFCCCC;	
	height:50px; /* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ */
	width:100%; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	bottom:0px; /* css กำหนดชิดด้านล่าง  */
	z-index:999;	
}
/* css ซ้อนทับ ชิดขอบด้านขวา */
.inner_position_right{
	position:absolute;
	display:block;	
	background-color:#FFFF99;	
	height:100%;/* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	width:50px; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ */
	top:0px; /* css กำหนดชิดด้านบน  */
	right:0px; /* css กำหนดชิดขวา  */
	z-index:999;
}
</style>
</head>

<body>



<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_top">
ซ้อนทับ ชิดขอบบน
</div>
</div>
</div>

<br style="clear:both;float:left;" />


<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_left">
ซ้อนทับ ชิดขอบซ้าย
</div>
</div>
</div>

<br style="clear:both;float:left;" />


<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_bottom">
ซ้อนทับ ชิดขอบล่าง
</div>
</div>
</div>

<br style="clear:both;float:left;" />

<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_right">
ซ้อนทับ ชิดขอบขวา
</div>
</div>
</div>




</body>
</html>
 
]]>Tue, 06 Dec 2011 16:32:39 +0700แนวทางการสร้างเมนูหลายภาษา อย่างง่ายด้วย php และ javascripthttp://www.ninenik.com/แนวทางการสร้างเมนูหลายภาษา_อย่างง่ายด้วย_php_และ_javascript-425.html ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางอย่างง่าย สำหรับนำไปประยุกต์ใช้งานการสร้างเว็บไซต์ เมนูหลายภาษา

โดยอาศัยการใช้การกำหนดตัวแปรแบบ Constants ด้วยคำสั่ง define() ใน php 
สำหรับการปรับแต่งหรือความต้องการที่เหนือกว่านี้ จำเป็นต้องอาศัยพื้นฐาน หรือทักษะอื่นๆ เพิ่มเติม
ประกอบในการนำไปประยุกต์ใช้งาน
 
ดูตัวอย่างได้ที่
http://www.ninenik.com/demo/multilang/
 
ตัวอย่างไฟล์ จะมีแค่ 3 ไฟล์ 2 โฟลเดอร์
1.index.php ไฟล์หลักสำหรับทดสอบการแสดง
2.en/index.php ไฟล์สำหรับเมนูภาษาอังกฤษ
3.th/index.php  ไฟล์สำหรับเมนูภาษาไทย
 
 
1.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>
 
2.en/index.php ไฟล์สำหรับเมนูภาษาอังกฤษ
<?php
define("_Home","Home");
define("_About_Us","About Us");
define("_Contact_Us","Contact Us");
?>
 
3.th/index.php  ไฟล์สำหรับเมนูภาษาไทย
<?php
define("_Home","หน้าแรก");
define("_About_Us","เกี่ยวกับเรา");
define("_Contact_Us","ติดต่อเรา");
?>
 
 
 
ดาวโหลดไฟล์ตัวอย่าง อย่างง่าย ได้ที่
http://www.ninenik.com/download/multilang.rar
]]>Wed, 09 Nov 2011 11:59:58 +0700การเชื่อมต่อ facebook และ ล็อกอิน แบบ popup ด้วย php sdk v.3.1.1http://www.ninenik.com/การเชื่อมต่อ_facebook_และ_ล็อกอิน_แบบ_popup_ด้วย_php_sdk_v.3.1.1-424.html แนวทางการประยุกต์ การเชื่อมต่อ facebook ด้วย php sdk v.3.1.1 แบบสร้าง ล็อกอิน

แบบ popup window ด้วย javascript
 
โดยจะเป็นการประยุกต์ใช้งานจากเนื้อหาเดิม ตามลิ้งค์ด้านล่าง
 
http://www.ninenik.com/content.php?arti_id=423
 
รูปแบบการทำงานคือ เมื่อทำการคลิกที่ลิ้งค์ สำหรับล็อกอินด้วย facebook ก็จะเปิดหน้า popup
สำหรับกรอกชื่อผู้ใช้ หรือรหัสผ่าน กรณียังไม่ได้ล็อกอิน facebook อยู่ หลังจาก ล็อกอินเสร็จแล้ว
จะลิ้งค์ไปอีกหน้าหนึ่ง สำหรับสร้างค่า session และเช็ค สถานะการล็อกอิน ของผู้ใช้งาน 
แล้วปิดหน้า popup นั้นลง พร้อมกับรีโหลดหน้าหลัก เป็นต้น
 
ดาวน์โหลดไฟล์ทดสอบ ไปปรับใช้ได้ที่
http://www.ninenik.com/fb/fb3.1.1popup.rar
 
หรือทดสอบตัวอย่างก่อนโหลด
http://www.ninenik.com/fb/fb3.1.1/test_login_popup.php
 
ไฟล์โค้ดตัวอย่าง ที่เกี่ยวข้อง
 
ไฟล์ test_login_popup.php
<?php
include("fb_connect_popup.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" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample FB Login Popup</title>
</head>

<body>
<?php
//pre($fb_user);
?>
<h1>php-sdk 3.1.1</h1>

<?php if($fb_user){ // ถ้ามีการล็อกอิน facebook อยู่แล้ว แสดงลิ้งค์สำหรับ logout ?>
	<a href="<?=$logoutUrl?>">Logout</a>
<?php }else{ //  ถ้ายังไม่ได้ล็อกอิน แสดงลิ้งค์สำหรับ Login ?>
    <div>
    Login using OAuth 2.0 handled by the PHP SDK:
    <a href="javascript:popup('<?=$loginUrl?>','',500,350);">Login with Facebook</a>
    </div>
<?php } ?>


    <h3>PHP Session</h3>
    <pre><?php print_r($_SESSION); ?></pre>

<?php if($fb_user){ // ถ้ามีการล็อกอิน facebook อยู่แล้ว แสดงข้อมูลของคนๆ นั้น ?>
      <h3>You</h3>
      <img src="https://graph.facebook.com/<?=$fb_user?>/picture">

      <h3>Your User Object (/me)</h3>
      <?php 
	  pre($fb_userData); 
	  ?>
      
<?php }else{ //  ถ้ายังไม่ได้ล็อกอิน  ?>
      <strong><em>You are not Connected.</em></strong>

<?php } ?>


<script type="text/javascript">
function popup(url,name,windowWidth,windowHeight){    
	myleft=(screen.width)?(screen.width-windowWidth)/2:100;	
	mytop=(screen.height)?(screen.height-windowHeight)/2:100;	
	properties = "width="+windowWidth+",height="+windowHeight;
	properties +=",scrollbars=yes, top="+mytop+",left="+myleft;   
	window.open(url,name,properties);
}
</script>
</body>
</html>
 
 
ไฟล์ fb_connect_popup.php
<?php
session_start(); // กำหนดไว้ กรณีอาจได้ใช้ตัวแปร session
include("inc/facebook.php"); //  เรียกใช้งานไฟล์ php-sdk สำหรับ facebook
//
$facebook = new Facebook(array(
  'appId'  => 'xxxxxx', // appid ที่ได้จาก facebook
  'secret' => 'xxxxxxxx',  // app secret ที่ได้จาก facebook
  'fileUpload' => true, // เปิดใช้ในส่วนของการอัพโหลดรูปได้
  'cookie' => true, // อนุญาตใช้งาน cookie  
));
// สร้างฟังก์ชันไว้สำหรัดทดสอบ การแสดงผลการใช้งาน
function pre($varUse){
	echo "<pre>";
	print_r($varUse);
	echo "</pre>";
}
// Get User ID
$fb_user = $facebook->getUser();
if($fb_user){
  try{
    // Proceed knowing you have a logged in user who's authenticated.
    $fb_userData=$facebook->api('/me');
  }catch(FacebookApiException $e) {
    error_log($e);
    $user=null;
  }
}
if(isset($_GET['logout'])){ // ทำการ logout อย่างสมบูรณ์
	$facebook->destroySession(null); 	// ล่างค่า session ของ facebook
	header("Location:".$_SERVER['PHP_SELF']); //ลิ้งค์ไปหน้าที่ต้องการเมื่อ logout เรียบร้อยแล้ว
}
// Login or logout url will be needed depending on current user state.
if($fb_user){
  $logoutUrl = $facebook->getLogoutUrl(array(
  	"next"=>"http://www.ninenik.com/fb/fb3.1.1/test_login_popup.php?logout"
  ));
} else{
  $loginUrl = $facebook->getLoginUrl(array(
  	"redirect_uri"=>"http://www.ninenik.com/fb/fb3.1.1/fb_checklogin.php",
	"display"=>"popup",
	"scope"=>"offline_access,publish_stream,email" // คั่นแต่ละค่าด้วย ,(comma
  ));
}
?>
 
 
ไฟล์ fb_checklogin.php
<?php
include("fb_connect_popup.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>Check Login</title>
</head>

<body>
<script type="text/javascript">
window.opener.location.reload();
window.close();
</script>
</body>
</html>
 
 
]]>Fri, 14 Oct 2011 11:49:11 +0700แนะนำการใช้งาน การเชื่อมต่อ facebook ด้วย php sdk v.3.1.1http://www.ninenik.com/แนะนำการใช้งาน_การเชื่อมต่อ_facebook_ด้วย_php_sdk_v.3.1.1-423.html ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางการเชื่อมต่อกับ facebook ด้วย php sdk 

เวอร์ชั่น 3.1.1จะมีไฟล์สำหรับให้โหลด ไปทดสอบตามลิ้งค์ ด้านล่าง
 
http://www.ninenik.com/fb/fb3.1.1.rar
 
หรือ ดูตัวอย่างก่อนโหลดได้ที่ 
http://www.ninenik.com/fb/fb3.1.1/test_login.php
 
ในเว็บจะมีบทความ ที่เกี่ยวกับ การเชื่อมต่อกับ facebook หลายเนื้อหา แต่บางรายการ
ก็เป็นไปแบบไม่อัพเดท หรือ มีการพัฒนาเพิ่มเติมมาใหม่แล้ว ตัวเก่าอาจจะผิดเพี้ยน หรือใช้งานไม่ได้
หากเพิ่งเริ่มศึกษา แนะนำให้ค้นหาบทความ แล้วดูวันที่ของเนื้อหา และตัวอย่างที่นำมาประกอบ
ก่อนพิจารณาไปนำใช้ใช้งาน
 
ส่วนสำหรับแก้ไขจะอยู่ในไฟล์ fb_connect.php
 
<?php
session_start(); // กำหนดไว้ กรณีอาจได้ใช้ตัวแปร session
include("inc/facebook.php"); //  เรียกใช้งานไฟล์ php-sdk สำหรับ facebook
//
$facebook = new Facebook(array(
  'appId'  => 'xxxxxx', // appid ที่ได้จาก facebook
  'secret' => 'xxxxx',  // app secret ที่ได้จาก facebook
  'fileUpload' => true, // เปิดใช้ในส่วนของการอัพโหลดรูปได้
  'cookie' => true, // อนุญาตใช้งาน cookie  
));
// สร้างฟังก์ชันไว้สำหรัดทดสอบ การแสดงผลการใช้งาน
function pre($varUse){
	echo "<pre>";
	print_r($varUse);
	echo "</pre>";
}
// Get User ID
$fb_user = $facebook->getUser();
if($fb_user){
  try{
    // Proceed knowing you have a logged in user who's authenticated.
    $fb_userData=$facebook->api('/me');
  }catch(FacebookApiException $e) {
    error_log($e);
    $user=null;
  }
}
if(isset($_GET['logout'])){ // ทำการ logout อย่างสมบูรณ์
	$facebook->destroySession(null); 	// ล่างค่า session ของ facebook
	header("Location:".$_SERVER['PHP_SELF']); //ลิ้งค์ไปหน้าที่ต้องการเมื่อ logout เรียบร้อยแล้ว
}
// Login or logout url will be needed depending on current user state.
if($fb_user){
  $logoutUrl = $facebook->getLogoutUrl(array(
  	"next"=>"http://www.ninenik.com/fb/fb3.1.1/test_login.php?logout"
  ));
} else{
  $loginUrl = $facebook->getLoginUrl(array(
  	"redirect_uri"=>"http://www.ninenik.com/fb/fb3.1.1/test_login.php",
	"display"=>"popup",
	"scope"=>"offline_access,publish_stream,email" // คั่นแต่ละค่าด้วย ,(comma
  ));
}
?>
 
]]>Thu, 13 Oct 2011 16:57:42 +0700การแสดงข้อมูลใน iframe ตามตำแหน่งที่ต้องการด้วย css อย่างง่ายhttp://www.ninenik.com/การแสดงข้อมูลใน_iframe_ตามตำแหน่งที่ต้องการด้วย_css_อย่างง่าย-422.html การแสดงข้อมูลใน iframe ตามตำแหน่งที่ต้องการด้วย css อย่างง่าย

 
ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางสำหรับการแสดงผลข้อมูลใน iframe โดยเราสามารถเลือกจะให้
ข้อมูลในส่วนใด ของ iframe แสดงผลตามต้องการ
 
โค้ดตัวอย่างทั้งหมด พร้อมตัวอย่าง
 
<!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>css iframe position</title>
<style type="text/css">
body{
	background-color:#FF9;	
}
/* ส่วนกำหนดสำหรับ แสดง iframe  */
div#myiframe_position1{
	position:relative;
	margin:auto;
	display:block;	
	width:270px; /*ความกว้างส่วนของเนื้อหา iframe ที่ต้องการแสดง*/
	height:700px; /* ความสูงส่วนของเนื้อหา iframe ที่ต้องการแสดง */
	overflow:hidden;
}
/* ส่วนกำหนด สำหรับ iframe */
div#myiframe_position1 iframe{
	position:absolute;
	display:block;
	float:left;
	margin-top:-420px; /* ปรับค่าของ iframe ให้ขยับขึ้นบนตามตำแหน่งที่ต้องการ */
	margin-left:-715px; /* ปรับค่าของ iframe ให้ขยับมาด้านซ้ายตามตำแหน่งที่ต้องการ */
}
</style>
</head>

<body>



<div id="myiframe_position1">
<iframe src="http://www.ninenik.com" scrolling="no"
frameborder="0" width="1000" height="1000"></iframe>
</div>


</body>
</html>
 
ตัวอย่าง
 
 
ส่วนสำคัญ คือ การกำหนดความกว้าง และความสูงของ iframe อย่างน้อยต้องกว้างหรือสูงเท่ากับ
ขอบเขตของเนื้อหาที่ต้องการแสดง ในที่นี้ใช้ width="1000" height="1000"  หากกำหนดไม่เหมาะสม
อาจทำให้ข้อมูล iframe ไม่แสดงได้
]]>Tue, 04 Oct 2011 10:39:11 +0700แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQueryhttp://www.ninenik.com/แนวทาง_การเลื่อนแล้ว_fixed_ตำแหน่งเนื้อหาที่ต้องการ_ด้วย_jQuery-421.html ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางสำหรับการสร้างส่วนของเนื้อหาให้สามารถ fixed ตำแหน่ง

เมื่อมีการเลื่อน scrollbar ของหน้าเพจนั้น ถึงตำแหน่งที่เรากำหนด และ ส่วนของเนื้อหานั้น
จะกลับมาอยู่ตำแหน่งเดิม เมื่อการเลื่อน scrollbar หน้าเพจนั้น ไม่เข้าเงื่อนไข
 
โค้ดทั้งหมด ดูตัวอย่าง ได้จากล๊งค์ด้านล่าง
 
<!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>fixed position when scroll</title>
<style type="text/css">
html,body{
	background-color:#CCC;
	padding:0px;
	margin:0px;	
}
div.main_test{
	position:relative;
	background-color:#999;
	margin:auto;
	width:800px;	
}
div.top_sector{
	position:relative;
	display:block;
	width:100%;
	height:75px;	
	background-color:#036;
	color:#FFF;
}
/* css ส่วนของเนื้อหาที่ต้องการในตรึง เมื่อเลือน scroll ถึงตำแหน่งที่ต้องการ */
div.my_float_div{
	position:relative;
	display:block;
	width:250px;
	height:160px;
	background-color:#DCDCF5;
	color:#000;	
	padding:5px;
}
</style>
</head>

<body>

<div class="main_test">
<div class="top_sector">Top Sector</div>
<br />
<?php 
// php สร้างบรรทัดใหม่  สำหรับทดสอบ
for($i=1;$i<=10;$i++){ ?>
<?=$i?>.<br />
<?php } ?>
<div class="my_float_div">
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
</div>
<?php
// php สร้างบรรทัดใหม่  สำหรับทดสอบ
for($i=11;$i<=100;$i++){ ?>
<?=$i?>.<br />
<?php } ?>

</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
    // เงื่อนไข event เมื่อมีการเลื่อน scrollbar ในหน้าเพจ  
     $(window).scroll(function(){  
//		เมื่อเลื่อน scroll bar หน้าเพจ ถึงตำแหน่งที่มากกว่าหรือเท่ากับตำแหน่งที่ต้องการ
//		เมื่อเลื่อน scroll bar หน้าเพจ ถึงตำแหน่ง ที่ทำให้ div
//		class ชื่อ my_float_div ชิดขอบบนพอดี หาจากคำสั่ง
//		console.log($(document).scrollTop());
         if($(document).scrollTop()>270){ 
			$(".my_float_div").css({ /*  */
				'position':'fixed',
				'top':'0px'
			});
         }else{  // เลื่อนกลับมาอยู่ตำแหน่งเดิม ถ้าไม่อยู่ในเงื่อนไข
			$(".my_float_div").css({
				'position':'relative'
			});
         }  
     });  	 
});
</script>


</body>
</html>
 
 
ตัวอย่าง http://www.ninenik.com/demo/fixed_float_when_scroll.php
 
 
]]>Thu, 22 Sep 2011 10:42:48 +0700นาฬิกาเวลา จาก server อย่างง่าย http://www.ninenik.com/นาฬิกาเวลา_จาก_server_อย่างง่าย_-420.html เป็นลูกเล่นสำหรับเอาไปตกแต่งเว็บ เมื่อก่อนเห็นตามเว็บต่างๆ บ่อย แต่เดี๋ยวนี้ไม่ค่อยนิยม หันไปใช้นาฬิกาสวยๆ จาก flash
เอามาแนะนำเผื่อใครสนใจนำไปใช้งาน รูปแบบการทำงาน คือดึงเวลาจาก server เป็นเวลาตั้งต้น จากนั้นเวลาก็จะเดินไปเรื่อย

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

<!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 id="css_time_run">
<?=date("H:i:s")?>
</div>
<br />


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){


	var nowDateTime=new Date("<?=date("m/d/Y H:i:s")?>");
	var d=nowDateTime.getTime();
	var mkHour,mkMinute,mkSecond;
	 setInterval(function(){
		d=parseInt(d)+1000;
		var nowDateTime=new Date(d);
		mkHour=new String(nowDateTime.getHours());  
		if(mkHour.length==1){  
			mkHour="0"+mkHour;  
		}
		mkMinute=new String(nowDateTime.getMinutes());  
		if(mkMinute.length==1){  
			mkMinute="0"+mkMinute;  
		} 		 
		mkSecond=new String(nowDateTime.getSeconds());  
		if(mkSecond.length==1){  
			mkSecond="0"+mkSecond;  
		} 	
		var runDateTime=mkHour+":"+mkMinute+":"+mkSecond;		 
		$("#css_time_run").html(runDateTime);	 
	 },1000);


});
</script>
</body>
</html>

ตัวอย่าง

 


]]>Wed, 07 Sep 2011 16:38:42 +0700ใช้งาน google chart ตัวใหม่สร้าง poll อย่างง่ายhttp://www.ninenik.com/ใช้งาน_google_chart_ตัวใหม่สร้าง_poll_อย่างง่าย-418.html อ่านวิธีการใช้งานอย่างโปรได้ด้วยตัวเองที่ 

 
http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html#Data_Format
 
โค้ตและตัวอย่างต่อไปนี้ เป็นแนวทางสำหรับรู้จัก และใช้งาน google chart สำหรับสร้าง แผนภูมิ
หรือกราฟ โดยในตัวอย่างจะเป็นการใช้กราฟ ประเภท pie chart หรือวงกลมที่แบ่งสัดส่วนของ
ข้อมูล โดยจะใช้แสดง จำนวนแต่ละประเภทของผลโหวด 
 
  ในตัวอย่าง จะใช้วิธีการบันทึกข้อมูลแบบเขียนไฟล์ทับ ข้อมูลเดิม เมื่อมีการโหวด
ส่วนกรณีสำหรับการใช้งานเชื่อมต่อกับฐานข้อมูล สามารถนำไปประยุกต์เพิ่มเติมเองได้
 
เนื้อหาจะคล้ายๆ กับ บทความเรื่อง 
สร้าง poll แบบสำรวจ ด้วย ajax ใน jQuery อย่างง่าย
http://www.ninenik.com/content.php?arti_id=280
 
แต่ในตัวอย่างใหม่จะเขียนโค้ดให้สั้นกว่า และเป็นการใช้งาน google chart เวอร์ชั่นใหม่
 
ดาวน์โหดลไฟล์ตัวอย่างได้ที่
http://www.ninenik.com/demo/jquery_poll_google_chart/jquery_poll_google_chart.rar
 
ตัวอย่างการทำงาน
http://www.ninenik.com/demo/jquery_poll_google_chart/jquery_poll_google_chart.php
 
คุณใช้ภาษาโปรแกรมใด ในการพัฒนาเว็บไซต์
PHP
ASP.NET
ASP
C#
Perl
Python
อื่นๆ
]]>Wed, 03 Aug 2011 16:47:48 +0700แทรก +1 button ในเว็บจาก google plushttp://www.ninenik.com/แทรก_+1_button_ในเว็บจาก_google_plus-417.htmlเห็นหลายๆเว็บไซต์ เขาใส่ +1 button ในเว็บกันแล้ว อยากจะเอามาใส่ในเว็บ ninenik.com บ้าง

เข้าไปอ่าน และปรับแต่งค่าต่างๆ แล้วเอาไปใส่เว็บได้เลยอย่างง่ายดายได้ที่

http://www.google.com/intl/en/webmasters/+1/button/index.html

Javascript Code แทรกไว้ก่อนแท็กปิด body หรือในแท็ก head

 

<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'th'} // สำหรับปรับแต่งภาษาไทย อังกฤษก็เปลี่ยนเป็น en
</script>



Code ที่ต้องการแสดงปุ่ม +1 ไว้ตรงตำแหน่งที่ต้องการให้แสดง

 

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="small" callback="alert('OK man');" href="http://www.ninenik.com"></g:plusone>



attrbute ภายในสำหรับปรับแต่ง
attrbute size ตอนนี้มี 4 แบบ
 - small ขนาด 15px
 - medium ขนาด 20px
 - standard ขนาด 24px โดยที่หากใช้ขนาด standard ก็ไม่ต้องกำหนด attribute size
 - Tall ขนาด 60px

attribute callback
 ใช้กำหนดสำหรับเรียกใช้ฟังก์ชัน javascript หลังจากคลิกที่ปุ่ม +1 แล้ว ว่าต้องการให้ทำอะไรเช่น
   callback="alert('OK man');"  หลังจากคลิกแล้วให้ขึ้น alert ว่า OK man

attribute count
 ใช้กำหนดหากต้องการให้แสดงจำนวนคนที่กด +1 กี่คน หรือไม่
 count="false"  ไม่แสดง
 กรณีต้องการแสดง ไม่ต้องแทรก attribute count

attribue href
 ใช้กำหนด url ของหน้าเพจนั้นๆ จะกำหนดหรือไม่ ก็ได้ หากไม่กำหนด ก็จะใช้ url ของเพจนั้นเป็นหลัก


อ่านรายละะอียดแบบเจาะลืก อย่างโปรได้ที่

http://code.google.com/apis/+1button/

]]>Sat, 16 Jul 2011 16:21:09 +0700ลูกเล่น เพิ่มช่องรับ input type file อัตโนมัติ ด้วย jQueryhttp://www.ninenik.com/ลูกเล่น_เพิ่มช่องรับ_input_type_file_อัตโนมัติ_ด้วย_jQuery-416.html ตัวอย่างต่อไปนี้ เป็นแนวทางสำหรับนำไปใช้ในการ ให้สามารถอัพโหลดไฟล์ ได้หลายๆ ไฟล์พร้อมกัน

ในที่นี่ ใช้กับการอัพโหลดรูปภาพ โดยจะมีฟังก์ชั่น ในการอัพโหลด มาในตัวอย่างด้วย
หลักการคือ เมื่อเราเลือกไฟล์ หนึ่งแล้ว เราจะสามารถเลือกไฟล์ที่ต้องการอัพโหลด เพิ่มขึ้นมาเรื่อยๆ
รวมทั้งยังสามารถยกเลิก หรือลบไฟล์ที่ได้ทำการเลือกไปแล้วออก ก่อนทำการอัพโหลด
 
โค้ดตัวอย่างเฉพาะในส่วนของ jQuery 
 
<div style="margin:auto;width:800px;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
  <table width="500" border="0" cellspacing="2" cellpadding="0">
    <tr class="css_row_upload">
      <td width="150" align="right" bgcolor="#ECECEC">Picture:: &nbsp;</td>
      <td bgcolor="#ECECEC">
      <input type="file" name="pic_upload[]" class="css_pic_upload" id="pic_upload[]" 
      onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};" />
        
        </td>
    </tr>
  </table>
  <br />
<br />
    <input type="submit" name="upPic" id="upPic" value="UPLOAD NOW" />

</form>

<hr />

</div>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	
	var empty_upload='\
    <tr class="css_row_upload">\
      <td width="150" align="right" bgcolor="#ECECEC">Picture:: &nbsp;</td>\
      <td bgcolor="#ECECEC">\
      <input type="file" name="pic_upload[]" class="css_pic_upload"\
	  id="pic_upload[]" onpropertychange="if(window.event.propertyName==\'value\'){$(this).blur();};" />\
        <a href="#" class="css_remove_fileupload">Remove</a>\
        </td>\
    </tr>\
	';


	$(".css_pic_upload").live("change onpropertychange",function(){
		var file_value=$(this).val();
		console.log(file_value);
		if(file_value!=""){		
			$(this).parents("tr.css_row_upload").after(empty_upload);
		}
	});

	$(".css_remove_fileupload").live("click",function(e){
		e.preventDefault();
		$(this).parents("tr.css_row_upload").remove();		
	});	
});

</script>
ตัวอย่าง
 
Picture::  


 
โค้ดตัวอย่างทั้งหมด
 
<!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>


<br />
<br />
<br />

<div style="margin:auto;width:800px;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
  <table width="500" border="0" cellspacing="2" cellpadding="0">
    <tr class="css_row_upload">
      <td width="150" align="right" bgcolor="#ECECEC">Picture:: &nbsp;</td>
      <td bgcolor="#ECECEC">
      <input type="file" name="pic_upload[]" class="css_pic_upload" id="pic_upload[]" 
      onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};" />
        
        </td>
    </tr>
  </table>
  <br />
<br />
    <input type="submit" name="upPic" id="upPic" value="UPLOAD NOW" />

</form>

<hr />

</div>

<?php

function multiupload($img,$imglocate,$key){
	$allowed_types=array('jpg','jpeg','gif','png','swf');   
	if($img['name'][$key]!=''){
		$fileupload1=$img['tmp_name'][$key];
		$g_img=explode(".",$img['name'][$key]);
		$ext = strtolower(array_pop($g_img));  
		$file_up=time()."-".$key.".".$ext;
		echo $file_up;
		if($fileupload1!="" && in_array($ext,$allowed_types)){
				copy($fileupload1,$imglocate.$file_up);	
				chmod($imglocate.$file_up,0777);				
		}				
	}
	return $file_up; // ส่งกลับชื่อไฟล์
}

if(isset($_POST['upPic'])){
	$multiupload_pic=$_FILES['pic_upload'];
	$arr_multiupload_pic=$multiupload_pic['name'];
	if(count($arr_multiupload_pic)>0){
		foreach($arr_multiupload_pic as $key=>$value){
			$file_to_up=multiupload($multiupload_pic,"tmp_pic/",$key);
			if($file_to_up!=""){
				echo "$file_to_up<br>";
				//  นำตัวแปรชื่อไฟล์ไปบันทึกลงฐานข้อมูล หรืออื่นๆ
				
			}
		}		
	}
	
}

?>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	
	var empty_upload='\
    <tr class="css_row_upload">\
      <td width="150" align="right" bgcolor="#ECECEC">Picture:: &nbsp;</td>\
      <td bgcolor="#ECECEC">\
      <input type="file" name="pic_upload[]" class="css_pic_upload"\
	  id="pic_upload[]" onpropertychange="if(window.event.propertyName==\'value\'){$(this).blur();};" />\
        <a href="#" class="css_remove_fileupload">Remove</a>\
        </td>\
    </tr>\
	';


	$(".css_pic_upload").live("change onpropertychange",function(){
		var file_value=$(this).val();
		console.log(file_value);
		if(file_value!=""){		
			$(this).parents("tr.css_row_upload").after(empty_upload);
		}
	});

	$(".css_remove_fileupload").live("click",function(e){
		e.preventDefault();
		$(this).parents("tr.css_row_upload").remove();		
	});	
});

</script>

</body>
</html>
 
]]>Mon, 27 Jun 2011 09:36:23 +0700แก้ปัญหา event onchange ของ input type file ไม่ทำงานทันทีใน ใน IEhttp://www.ninenik.com/แก้ปัญหา_event_onchange_ของ_input_type_file_ไม่ทำงานทันทีใน_ใน_IE-415.html event onchange ของ input type file ใน IE เมื่อมีการเลือกไฟล์ที่ต้องการอัพโหลด จะไม่ทำงาน

ทันที ต้องคลิกที่ว่างหรือ focus ออกจาก input type file ก่อน คำสั่งใน event onchange จึงจะทำงาน
แต่กับ บราวเซอร์อื่นๆ จะไม่เจอปัญหานี้ 
 
วิธีการในการแก้ไขคือ ให้ แทรก attribute ชื่อ onpropertychange เข้าไปใน input type file ที่ต้องการ
ให้ทำงานทันทีเมื่อคลิกเลือกไฟล์
 
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};"
 
ตัวอย่าง
 
<input type="file" name="pic_upload2" class="css_pic_upload2" id="pic_upload2"  />
 
เมื่อแทรกแล้ว จะได้เป็น
 
<input type="file" name="pic_upload2" class="css_pic_upload2" id="pic_upload2" 
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};"   />
 
ตัวอย่างทดสอบ (ให้ทำการทดสอบรันใน IE จึงจะสามารถเข้าใจผลลัพธ์ได้)
 
ให้ทดสอบโดลการเลือก ไฟล์ใน input type file ตัวที่สองก่อน โดยหลังจากเลือกไฟล์ จะพบว่ามีการ
alert ค่าทันที เนื่องจากเราใช้วิธีการแก้ปัญหาตามคำแนะนำข้างต้น
 
จากนั้น ให้ลองเลือกไฟล์ ใน input type file ตัวแรก โดยหลังเลือกไฟล์ และไม่ได้คลิกที่ว่าง หรือที่อื่นใด
คำสั่ง alert จะไม่ทำงาน จนกระทั้งเรา คลิกที่ว่าง หรือที่อื่นใด คำสั่ง alert จึงจะทำงาน
 


 
 
 
 
ตัวอย่างโค้ดทดสอบทั้งหมด
 
<!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>

<!--
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};"

-->
<div style="margin:auto;width:800px;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">

<input type="file" name="pic_upload" class="css_pic_upload" id="pic_upload"   />

<br />
<br />

<input type="file" name="pic_upload2" class="css_pic_upload2" id="pic_upload2" 
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};"   />

</form>

<hr />

</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	
	$(".css_pic_upload").live("change",function(){
		var file_value=$(this).val();
		alert(file_value);
	});


	$(".css_pic_upload2").live("change",function(){
		var file_value=$(this).val();
		alert(file_value);
	});

});
</script>

</body>
</html>
 
 
 
 
 
 
]]>Fri, 24 Jun 2011 15:52:56 +0700