บทความ PHP AJAX CSS Javascript MySql jQuery

ทบทวน คุณสมบัติ สี color และ พื้นหลัง background property ของ CSS

Fri, 19 Mar 2010 11:54:16 +0700

CSS มีคุณสมบัติ ในการกำหนด สี color และ พื้นหลัง background ให้กับ html element ได้ โดยพื้นหลัง background อาจเป็นได้ทั้งสี color หรือ รูปภาพ images โดยหากเป็นรูปภาพ ยังสามารถกำหนด ตำแหน่งของ พื้นหลัง, การกำหนด การซ้ำ, และรวมทั้ง การตรึงพื้นหลัง หรือกำหนดให้เลื่อนตามการเลื่อน ของ scrollbar ได้อีกด้วบ

คุณสมบัติ color property
color
กำหนดเป็นค่าสี เช่น red #FF000 rgb(255,0,0) หรือ เป็นลักษณะ ค่าสีแบบ การถ่ายทอด inherit
ค่าเริ่มต้น ขึ้นอยู่กับแต่ละ บราวเซอร์
สามารถกำหนดได้กับ html elements ทุกตัว
สามารถถ่ายทอดได้
ไม่สามารถ กำหนด เป็น เปอร์เซ็นต์ได้
นำเสนอโดย การแสดงผล
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

ตัวอย่าง
ข้างล่างเป็นตัวอย่าง การกำหนดค่าสี แดง ให้กับ em tag element ในรูปแบบ ที่แตกต่างกัน

em { color: red }              /* กำหนดโดยการใช้ชื่อของสี */
em { color: rgb(255,0,0) }     /* กำหนดแบบ RGB อยู่ในช่วง 0 - 255  */

คุณสมบัติ Background Property
การกำหนดพื้นหลัง background สามารถกำหนดได้ทั้งสี color หรือ รูปภาพ images ตามรูปแบบของ box model
พื้นหลัง background นั้นหมายถึง พื้นหลังพื้นที่ของ เนื้อหา content ,พื้นที่ของระยะห่างจากขอบใน padding,และพื้นที่ของขอบ border โดยที่ ขอบ border สามารถกำหนด คุณสมบัติสี และรูปแบบด้วยคุณสมบัติ border property
ส่วนสำหรับ พื้นที่ของระยะห่างจากขอบนอก จะไม่รวมในพื้นหลัง background แต่จะมีลักษณะ โปร่งใส transparent

คุณสมบัติ Background properties จะไม่สามารถถ่ายทอดได้ แต่กรณีที่ element ที่อยู่เหนือกว่า หรือ parent element มีการกำหนด Background properties ดังนั้น เมื่อ ค่าเริ่มต้นของพื้นหลัง background เป็นแบบโปร่งใส transparent จึงทำให้มองเห็นพื้นหลังของ parent element

การกำหนดพื้นหลัง แนะนำให้กำหนดไว้ใน body แทนการกำหนดใน html
ตัวอย่าง

คุณสมบัติ 'background-color'
Value:   | transparent | inherit
สามารถกำหนดค่าเป็น ค่าสี หรือ โปร่่งใส transparent หรือ ลักษณะการถ่ายทอด
Initial:   transparent
ค่าเริ่มต้นเป็น โปร่งใส
Applies to:   all elements
สามารถกำหนดได้กับ elements ทุกตัว
Inherited:   no
ไม่สามารถถ่ายทอดได้
Percentages:   N/A
ไม่สามารถกำหนดค่า เปอร์เซ็นต์ได้
Media:   visual
นำเสนอ โดยการแสดงผล
Computed value:   as specified
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

คุณสมบัติ background-color ใช้สำหรับกำหนดค่าสีพื้นหลังของ element

ตัวอย่าง:

h1 { background-color: #F00 }

คุณสมบัติ 'background-image'
Value:   | none | inherit
กำหนดค่าเป็น ตำแหน่งของรูปภาพ หรือ กำหนดไม่แสดง none หรือ กำหนดเป็นแบบการถ่ายทอด
Initial:   none
ค่าเริ่มต้น คื่อไม่มี หรือไม่แสดง none
Applies to:   all elements
สามารถกำหนดได้กับ elements ทุกตัว
Inherited:   no
ไม่สามารถถ่ายทอดได้
Percentages:   N/A
ไม่สามารถ กำหนดเป็น เปอร์เซ้นต์ได้
Media:   visual
นำเสนอโดยการแสดงผล
Computed value:   absolute URI or none
ค่าจากการคำนวณ ไม่มีหรือขึ้นอยู่กับค่าสัมบูรณ์ URI

คุณสมบัติ background-image ใช้สำหรับกำหนดพื้นหลังที่ เป็นรูปภาพ
การกำหนดทั้ง background-image และ background-color จะทำให้กรณีที่ background-image ไม่มีรูปพื้นหลัง
ก็จะแสดงเป็นค่าสี แทนจากคุณสมบัติ background-color ได้

ตัวอย่าง:

body { background-image: url("ninenik.png") }
p { background-image: none }

คุณสมบัติ 'background-repeat'
Value:   repeat | repeat-x | repeat-y | no-repeat | inherit
สามารถกำหนดค่าเป็น
repeat
ซ้ำในแนวตั้งและแนวนอน
repeat-x
ซ้ำเฉพาะในแนวนอนเท่านั้น
repeat-y
ซ้ำเฉพาะในแนวตั้งเท่านั้น
no-repeat
ไม่ต้องซ้ำ แสดงแค่รูปพื้นหลังแค่รูปเดียว
Initial:   repeat
ค่าเริ่มต้น เป็น ซ้ำในแนวตั้งและแนวนอน
Applies to:   all elements
สามารถกำหนดได้กับทุก elements
Inherited:   no
ไม่มีคุณสมบัติการถ่ายทอด
Percentages:   N/A
ไม่มีการกำหนดค่าเป็น เปอร์เซ็นต์
Media:   visual
นำเสนอ ด้วยการแสดงผล
Computed value:   as specified
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

ถ้ามีการกำหนดพื้นหลังเป็นรูปภาพ ก็จะสามารถกำหนดคุณสมบัติการแสดงผลรูปภาพซ้ำโดยใช้ background-repeat

ตัวอย่าง:

body { 
  background: white url("ninenik.png");
  background-repeat: repeat-y;
  background-position: center;
}

คุณสมบัติ 'background-attachment'
Value:   scroll | fixed | inherit
สามารถกำหนดค่าเป็น เลื่อน sxroll ตามการเลื่อนของ scrollbar หรือ ตรึง fixed หรือ ตามการถ่ายทอด
Initial:   scroll
ค่าเริ่มต้น เลื่อน sxroll ตามการเลื่อนของ scrollbar
Applies to:   all elements
สามารถกำหนดได้กับทุก elements
Inherited:   no
ไม่สามารถถ่ายทอดได้
Percentages:   N/A
ไม่มีการกำหนดค่า เปอร์เซ็นต์
Media:   visual
นำเสนอ โดยการแสดงผล
Computed value:   as specified
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

ถ้ามีการกำหนดพื้นหลังเป็นรูปภาพ เมื่อมีการกำหนดคุณสมบัติ background-attachment เป็น fixed รูปพื้นหลัง
จะไม่เลื่อนตาม การเลื่อนของ scrollbar

ตัวอย่าง:

body { 
  background: red url("ninenik.png");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

คุณสมบัติ 'background-position'
Value:   [ [ | | left | center | right ] [ | | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
สามารถกำหนดค่าเป็น เปอร์เช็นต์ หรือค่า อิงตำแหน่งด้านซ้าย ตรงกลาง แงละ ด้านขวา ตามด้วย เปอร์เซ็นต์ หรือค่า
อิงตำแหน่่งด้านบน ตรงกลาง หรือด้านล่าง หรือตามการถ่ายทอด
Initial:   0% 0%
ค่าเริ่มต้น 0% 0% หรือ left top
Applies to:   all elements
สามารถกำหนดได้กับทุก elements
Inherited:   no
ไม่มีการถ่ายทอด
Percentages:   refer to the size of the box itself
เปอร์เซ็นต์กำหนดอิงตาม ขนาดของรูปพื้นหลังนั้นๆ
Media:   visual
นำเสนอด้วยการแสดงผล
Computed value:   for the absolute value, otherwise a percentage
ค่าจากการคำนวณ กำหนดโดยตรง หรือ เป็นเปอร์เซ็นต์

ถ้ามีการกำหนดพื้นหลังเป็นรูปภาพ หากไม่มีการกำหนด background-position ค่าที่ได้จะเป็นค่าเริ่มต้น หากมีการ
กำนหดค่าเดียว ค่าที่สองจะเป็น center หรือตรงกลางโดยอัตโนมัติ หากค่าหนึ่งค่าใดอย่างน้อยหนึ่งค่า ไม่ได้กำหนด
เป็นลักษณะ keyword เช่น left center หรือ top จะได้่ว่า ค่าแรกแสดงถึงตำแหน่งในแนวนอน และอีกค่าจะแสดงถึง
ตำแหน่งในแนวตั้ง และค่าที่กำหนดสามารถเป็นตัวเลขติดลบ ได้

top มีค่าท่ากับ '0%' สำหรับตำแหน่งในแนวตั้ง
right มีค่าท่ากับ '100%' สำหรับตำแหน่งในแนวนอน
bottom มีค่าท่ากับ '100%' สำหรับตำแหน่งในแนวตั้ง
left มีค่าท่ากับ '0%' สำหรับตำแหน่งในแนวนอน
center มีค่าท่ากับ '50%' สำหรับตำแหน่งในแนวนอน

ตัวอย่าง:

body { background: url("ninenik.jpeg") right top }    /* 100%   0% */
body { background: url("ninenik.jpeg") top center }   /*  50%   0% */
body { background: url("ninenik.jpeg") center }       /*  50%  50% */
body { background: url("ninenik.jpeg") bottom }       /*  50% 100% */

คุณสมบัติ 'background'
Value:   [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
กำหนดค่าตามแต่ละคุณสมบัติ
Initial:   see individual properties
ค่าเริ่มต้น ขึ้นอยู่กับแต่ละคุณสมบัติ
Applies to:   all elements
สามารถกำหนดได้กับทุก elements
Inherited:   no
ไม่สามารถถ่ายทอดได้
Percentages:   allowed on 'background-position'
ค่าเปอร์เซ็นต์ใช้กับ คุณสมบัติ background-position
Media:   visual
นำแสดง ด้วยการแสดงผล
Computed value:   see individual properties
ค่าจากการคำนวณ ขึ้นอยู่กับแต่ละคุณสมบัติ

คุณสมบัติ 'background' เป็นการคุณสมบัติแบบสั้น shorthand ที่รวมเอาทุกคุณสมบัติมารวมกัน

ตัวอย่าง

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

การเก็บข้อมูลวันที่ ในฐานข้อมูล กับคำสั่ง sql ในการค้นหา

Thu, 18 Mar 2010 01:23:07 +0700

การกำหนดประเภทของ field ในตารางฐานข้อมูลเป็น date หรือ datetime ทำให้เราสามารถ
จัดการข้อมูลเกี่ยวกับวันที่ได้ดังต่อไปนี้
รูปแบบข้อมูล
date = 0000-00-00 ,
ปี 4 หลัก เช่น 2010 ,2011 เป็นต้น
เดือน 2 หลัก , เช่น 01 ถึง 12
วันที่ 2 หลัก เช่น 01 ถึง 31

datetime = 0000-00-00 00:00:00
ปี 4 หลัก เช่น 2010 ,2011 เป็นต้น
ดือน 2 หลัก , เช่น 01 ถึง 12
วันที่ 2 หลัก เช่น 01 ถึง 31
ชั่วโมง 2 หลัก เช่น 00 ถึง 23
นาที 2 หลัก เช่น 00 ถึง 59
วินาที 2 หลัก เช่น 00 ถึง 59

ตัวอย่างเงื่อนไขการค้นหาข้อมูลเกี่ยวกับวันที่
ตาราง test_date
/// date_id ///     /// date_time //
1                        2009-04-13
2                        2009-12-01
3                        2010-03-01
4                        2010-03-01
5                         2010-04-12
6                         2010-04-13

1.ต้องการข้อมูลรายการในปี 2009

SELECT * FROM test_date WHERE date_time like '2009%'

2.ต้องการหาข้อมูลของเดือน เมษายน (04) ของทุกปี

SELECT * FROM test_date WHERE substr(date_time,6,2)='04'

3.ต้องการหาข้อมูลของเดือน มีนาคม (03) ปี 2010

SELECT * FROM test_date WHERE date_time like '2010-03%'

4.ต้องการหาข้อมูลช่วงตั้งแต่วันที่ 2009-12-01 ถึง 2010-03-31

SELECT * FROM test_date WHERE (date_time between '2009-12-01' and '2010-03-31')

5.ต้องการหาข้อมูลช่วงของเดือนธันวาคมปี 2009 ถึง กุมภาพันธ์ ปี 2010

SELECT * FROM test_date WHERE (date_time between 'date_format('2009-12-01','%Y-%m-01')' and 'date_sub(date_add(date_format('2010-02-12','%Y-%m-01'),interval 1 month),interval 1 day)')

ประยุกต์ แปลเนื้อหา ในเว็บไซต์ด้วย google translater api สำหรับ php

Tue, 02 Mar 2010 16:34:53 +0700

ดาวน์โหลด

http://www.ninenik.com/download/gTranslate.rar

ประกอบด้วยไฟล์

1.example.php ไฟล์ตัวอย่างรวม

2.example_curl.php ไฟล์การใช้งานผ่านฟังก์ชัน curl

3.Gtranslate.php ไฟล์ class สำหรับเรียกใช้งาน

4.languages.ini ไฟล์ภาษาสำหรับการสนับสนุนหลายภาษา

การแปลงภาษาไทยเป็นอังกฤษใช้ th_to_en

และภาษาอังกฤษเป็นไทยใช้ en_to_th

กรณ๊อื่นๆ ใช้ตัวย่อตามภาษาที่ต้องการ

สร้างฟังก์ชัน สำหรับนำไปประยุกต์ใช้

setRequestType('curl');
	echo $gt->th_to_en($str); // ไทยเป็นอังกฤษ หากอังกฤษเป็นไทยกำหนดเป็น en_to_th

} catch (GTranslateException $ge)
 {
    echo $ge->getMessage();
 }
}
?>

ตัวอย่างการเรียกใช้งาน

เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย

Wed, 24 Feb 2010 10:30:51 +0700

ตัวอย่างต่อไปนี้เป็นแนวทางสำหรับนำไปปรับใช้ ในการทำระบบ add to cart ด้วย ajax

ตัวอย่าง

HTML Code

jQuery Code

สร้าง Horizontal Accordion แนวนอน ด้วย jQuery อย่างง่าย

Fri, 19 Feb 2010 09:34:01 +0700

ตัวอย่าง

CSS ตัวอย่าง

HTML Code ตัวอย่าง

jQuery Code ตัวอย่าง

ประยุกต์ สร้าง FTP Function สำหรับการจัดการไฟล์ผ่าน FTP Protocal

Wed, 10 Feb 2010 02:28:08 +0700

สร้างไฟล์ php สำหรับ ftp function บันทึกเป็น config_ftp.php ไว้เรียกใช้

=3){
			ftp_chdir($conn_id,$fullPath);		
			foreach($contents as $key=>$value){
				if(!is_dir(basename($value))){
					ftp_site($conn_id, 'CHMOD 0777 '.$value);
					ftp_delete($conn_id,$value);
				}
			}
			ftp_chdir($conn_id,$parentDir);		
			if(ftp_rmdir($conn_id,$nameDir)) {    
				return true;   
			}else{   
				if(ftp_site($conn_id, 'CHMOD 0777 '.$fullPath)){       
					if(ftp_rmdir($conn_id,$nameDir)) {    
						return true;   
					}else{   
						return false;    
					}   
				}else{   
					return false;    
				}          
			}      	
		}else{
			if(ftp_rmdir($conn_id,$nameDir)) {    
				return true;   
			}else{   
				if(ftp_site($conn_id, 'CHMOD 0777 '.$fullPath)){       
					if(ftp_rmdir($conn_id,$nameDir)) {    
						return true;   
					}else{   
						return false;    
					}   
				}else{   
					return false;    
				}          
			}      		
		}
    }      
}   
  
// ฟังก์ชันสำหรับเปลี่ยนชื่อ Directory หรือ Folder   
function ftpRenameDir($conn_id,$parentDir,$nameDir,$newNameDir){         
    $fullPath=$parentDir.$nameDir;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    ftp_chdir($conn_id,$parentDir);    
    if($isDir){   
        if(ftp_rename($conn_id,$nameDir,$newNameDir)) {    
            return true;   
        }else{   
            if(ftp_site($conn_id, 'CHMOD 0777 '.$fullPath)){       
                if(ftp_rename($conn_id,$nameDir,$newNameDir)) {    
                    return true;   
                }else{   
                    return false;    
                }   
            }else{   
                return false;    
            }          
        }      
    }      
}   
    

// ฟังก์ชันสำหรับกำหนด permissions     ไฟล์    
function ftpChmodFile($conn_id, $permissions,$parentDir,$nameDir,$fileName){           
	$fullPath=$parentDir.$nameDir;    
    $fullPathFile=$parentDir.$nameDir."/".$fileName;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    if($isDir){   
        if(ftp_site($conn_id, 'CHMOD '.$permissions.' '.$fullPathFile) !== false){         
            return true;         
        }else{      
            return false;         
        }          
    }           
}     	

// ฟังก์ชันสำหรับเปลี่ยนชื่อ ไฟล์ 
function ftpRenameFile($conn_id,$parentDir,$nameDir,$fileName,$new_fileName){         
    $fullPath=$parentDir.$nameDir;    
	$fullPathFile=$parentDir.$nameDir."/".$fileName;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    if($isDir){   
        if(ftp_rename($conn_id,$fileName,$new_fileName)) {    
            return true;   
        }else{   
            if(ftp_site($conn_id, 'CHMOD 0777 '.$fullPathFile)){       
                if(ftp_rename($conn_id,$fileName,$new_fileName)) {    
                    return true;   
                }else{   
                    return false;    
                }   
            }else{   
                return false;    
            }          
        }      
    }      
}   	

// ฟังก์ชันสำหรับหาขนาดไฟล์
function ftpFileSize($conn_id,$parentDir,$nameDir,$fileName){         
    $fullPath=$parentDir.$nameDir;    
	$fullPathFile=$parentDir.$nameDir."/".$fileName;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    if($isDir){   
        if(ftp_size($conn_id,$fileName)!=-1) {    
            return ftp_size($conn_id,$fileName);
        }else{   
			return  false;
        }      
    }      
}   	
	
// ฟังก์ชันสำหรับหา ว่ามีไฟล์ชื่อนี้หรือไม่
function ftpIsFile($conn_id,$parentDir,$nameDir,$fileName){         
    $fullPath=$parentDir.$nameDir;    
	$fullPathFile=$parentDir.$nameDir."/".$fileName;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    if($isDir){   
        if(ftp_size($conn_id,$fileName)!=-1) {    
            return true;
        }else{   
			return  false;
        }      
    }      
}  	
	
// ฟังก์ชันสำหรับอัพโหลดไฟล์
function ftpUploadFile($conn_id,$parentDir,$nameDir,$fileName,$uploadFile){         
    $fullPath=$parentDir.$nameDir;    
	$fullPathFile=$parentDir.$nameDir."/".$fileName;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    if($isDir){   
		if(ftp_put($conn_id, $fileName,$uploadFile,FTP_ASCII)){
			if(ftp_site($conn_id, 'CHMOD 0777 '.$fullPathFile)){
				return true;
			}else{
				return false;
			}			
		}else{
			return false;
		}
    }      
}   		
	
// ฟังก์ชันสำหรับลบ ไฟล์
function ftpRemoveFile($conn_id,$parentDir,$nameDir,$fileName){         
    $fullPath=$parentDir.$nameDir;    
	$fullPathFile=$parentDir.$nameDir."/".$fileName;    
	$isDir=ftp_chdir($conn_id,$fullPath);
    if($isDir){   
		if(ftp_delete($conn_id,$fileName)){
			return true;
		}else{
           if(ftp_site($conn_id, 'CHMOD 0777 '.$fullPathFile)){       
                if(ftp_delete($conn_id,$fileName)) {    
                    return true;   
                }else{   
                    return false;    
                }   
            }else{   
                return false;    
            }    		
		}
    }      
}   	
	
// ฟังก์ชันปิดการเชื่อมต่อ Server ผ่าน FTP         
function ftpClose($conn_id){         
    ftp_close($conn_id);         
}         
?>

ตัวอย่างการใช้งาน

ทบทวน javascript ฟังก์ชั่น ให้กรอกเฉพาะภาษาอังกฤษเท่านั้น

Wed, 03 Feb 2010 00:54:49 +0700

Javascript Code

การใช้งาน

หมุน สลับ แบนเนอร์ในแนวนอน ด้วย jQuery อย่างง่าย

Tue, 02 Feb 2010 02:37:51 +0700

ตัวอย่าง

CSS code ตัวอย่าง

HTML code ตัวอย่าง

jQuery ตัวอย่าง

การใช้งาน method delay() ใน jQuery 1.4

Mon, 01 Feb 2010 15:09:05 +0700

.delay()
ใช้สำหรับหน่วงเวลาในการเรียกใช้งานฟังก์ชันที่อยู่ในลำดับ queue

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

.delay( duration, [ queueName ] )

ค่าในปีกกาสี่เหลี่ยมเป็นตัวเลือกเพิ่มเติมหรือ option จะกำหนดค่าหรือไม่กำหนดก็ได้

duration คือ เวลาสำหรับการหน่วง โดย 1000 เท่ากับ 1 วินาที ค่ายิ่งมากหมายถึงการเรียกใช้ฟังก์ชั่นถัดไปจะยิ่งช้าลง

สามารถกำหนดเป็นข้อความ fast (มีค่าเท่ากับ 200) หรือ slow (มีค่าเท่ากับ 600)

queueName คือ ข้อความที่แสดงชื่อของ queue หากไม่กำหนด ค่าเริ่มต้นจะเป็น fx

CSS code ตัวอย่าง

HTML code ตัวอย่าง

Div A
Div B

jQuery code ตัวอย่าง

ตัวอย่าง

คำธิบายตัวอย่าง

divA และ divB มีการเคลื่อนไหวเกิดขึ้นสองช่วง

ช่วงที่ 1 divA และ divB เคลื่อนออกจากด้านซ้ายเดิมเท่ากับ 300 pixels ภายในเวลา 1200 มิลลิวินาทีหรือ 1 วินาที่ 200 มิลลิวินาที

ช่วงที่ 2 divA และ divB จะเคลื่อนกลับมายังตำแหน่งเดิมภายในเวลา 1200 มิลลิวินาทีหรือ 1 วินาที่ 200 มิลลิวินาทีเท่าเดิม

แต่กรณีความแตกต่างของ divA เมื่อมีการเรียกใช้ method .delay() จะทำให้การเคลื่อนไหวใน ช่วงที่ 2 ของ divA ช้ากว่าของ divB เท่ากับจำนวนเวลาที่กำหนด จากตัวอย่่าง เท่ากับ 600 มิลลิวินาที

การใช้งาน jQuery.contains() ใน jQuery 1.4

Wed, 27 Jan 2010 18:53:39 +0700

jQuery.contains()
ใช้สำหรับตรวจสอบว่ามี DOM 0bject หนึ่งอยู่ในอีก DOM Object หนึ่งหรือไม่ เช่น มีแท็ก li อยู่ในแท็ก div หรือไม่

รูปแบบการใช้งาน
jQuery.contains( container, contained )
หรือ
$.contains( container, contained )
คืนค่าเป็น true หรือ false (จากการทดสอบ จะคืนค่าเป็น 16 ถ้าเป็นจริง และเป็น 0 ถ้าเป็นเท็จ)
container คือ DOM Object ที่มี DOM Object ตัวอื่นอยู่ภายใน หรือ ตัวที่คลุม DOM Object ตัวอื่นอยู่
contained คือ DOM Object ที่บรรจุอยู่ใน DOM Object ตัวอื่น

CSS Code ตัวอย่าง

HTML Code ตัวอย่าง



list 1
list 2
list 3

jQuery Code ตัวอย่าง

ตัวอย่าง

การใช้งาน method .clearQueue() ใน jQuery 1.4 javascript library เวอร์ชั่นล่าสุด

Tue, 26 Jan 2010 23:50:09 +0700

ดาวน์โหลดไฟล์ js เวอร์ฃั่นล่าสุดได้ที่เว็บไซต์ http://jquery.com/

.clearQueue()
ใช้สำหรับยกเลิกฟังก์ชั่นใดๆ ก็ตามที่อยู่ใน method .queue()
รูปแบบการใช้งาน
.clearQueue( [ queueName ] )
queueName คือ ข้อความที่แสดงชื่อของ queue หากไม่กำหนด ค่าเริ่มต้นจะเป็น fx

เมื่อมีการเรียกใช้ method .clearQueue() จะทำให้ฟังก์ชั่นใดๆ ก็ตามที่อยู่ใน method .queue() จะถูกยกเลิก หากเรียกใช้งาน .clearQueue() โดยไม่ได้กำหนดค่่า อาร์กิวเมนต์ หรือ queueName จะเป็นการยกเลิก ฟังก์ชั่นทั้งหมดจาก queueName ที่ชื่อ fx ชื่องเป็นค่าเริ่มต้น

CSS code ตัวอย่าง

HTML code ตัวอย่าง

jQuery Code ตัวอย่าง

ยกเลิกการ animate แต่ฟังก์ชันใน method .queue() ยังคงอยู่ และทำงาน
ยกเลิกการ animate และฟังก์ชันใน method .queue() ถูกยกเลิก
การ animate ยังคงอยู่ แต่ฟังก์ชันใน method .queue() ถูกยกเลิก
ยกเลิกการ animate และฟังก์ชันใน method .queue() ถูกยกเลิก

รู้จัก property position ของ css ให้มากขึ้น ด้วย ตัวอย่าง และคำอธิบาย

Thu, 14 Jan 2010 04:48:29 +0700

div.exampleDiv1

div.exampleDiv1{

}

div.exampleDiv2

div.exampleDiv1{

}

Span

Div1 Left: Top:
Div2 Left: Top:
Div3

position:static; เป็นค่าเริ่มต้น จะกำหนดหรือไม่กำหนดก็ได้ ปกติถ้ากำหนดจะใช้เมื่อทำการ override หรือกรณีต้องการล้างค่าที่กำหนดก่อนหน้า จากค่าอื่นเช่น fixed , absolute หรือ relative
position:static; จะไม่รองรับการกำหนดค่า left , top, right และ bottom
position:relative;เป็นการกำหนดตำแหน่งที่อิงความสัมพันธ์กับตำแหน่งเดิม เช่น div1 กำหนด position เป็น relative และกำหนด left:20px; ผลลัพธ์คือ div1 จากเลื่อนออกจากตำแหน่งเดิมทางซ้าย 20 pixels
ข้อมูลหรือเนื้อหาที่อยู่ใน element ที่กำหนด position เป็น relative สามารถที่จะเลื่อนและอยู่วางซ้อนเหนือ elements ตัวอื่นได้ แต่จะเกิดพื้นที่ว่างจากเนื้อหาหรือข้อมูลขึ้นในตำแหน่งเดิม
position:relative;จะใช้บ่อยสำหรับบรรจุบล็อกของ elements ที่กำหนด position เป็น absolute
position:absolute; จะกำหนดตำแหน่งโดยอิงกับตำแหน่ง parent ตัวแรก ที่กำหนด position เป็นค่าอื่นที่ไม่ใช่ static
ตัวอย่าง ถ้า div1 อยู่ใน div2 หมายถึง div2 เป็น parent ของ div1
```
    
    

    
    
```
ถ้า div1 อยู่ใน div2 และ div2 อยู่ใน div3 หมายถึง div2 และ div3 เป็น parent ของ div1
```
    
    
    

    
    
    
```
หาก div3 มีการกำหนด position เป็น relative,absolute หรือ fiexd (ยกเว้น static)
และเมื่อกำหนด div1 position เป็น absolute ดังนั้นตำแหน่างของ div1 จะอิงความสัมพันธ์
กับตำแหน่งของ div3 ซึ่งเป็น parent ตัวแรกที่เข้าเงื่อนไข

กรณีไม่มี parent ใดๆ ที่เข้าเงื่อนไข ตำแหน่งของ div1 ที่กำหนด position เป็น absolute จะอิงกับ หรือ ขอบด้านในของบราวเซอร์

position:absolute; สามารถที่จะซ้อนทับกันได้ โดยใช้ร่วมกับ z-index เพื่อกำหนดตำแหน่งบน ล่าง
position:fixed; .ใช้กำหนดตำแหน่งของ element โดยอิงความสัมพันธ์กับตำแหน่งขอบด้านในของบราวเซอร์ และจะไม่เคลื่อนเมื่อมีการเลื่อน scrollbar
ถ้ากำหนด position ของ div1 เป็น fixed และกำหนด left:45px;top;100px; ตำแหน่งของ div1 จะขยับออกจากด้านซ้ายของขอบด้านในของเบราวเซอร์ 45 pixels และขยับออกจากด้านบนของขอบด้านในของบราวเซอร์เท่ากับ 100 pixels

ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย

Mon, 04 Jan 2010 20:22:41 +0700

การดึง ข้อมูลจาก xml ไฟล์มาใช้ในเว็บ จะใช้ข้อมูลประมาณ 3 - 4 ข้อมูล ได้แก่

1.หัวข้อ title

2.ลิ้งค์ที่อยู่ url

3.รูปภาพประกอบ image

4.วันที่ date

แต่ในที่นี่จะแสดงตัวอย่างการดึงข้อมูล 2 ข้อมูลมาแสดง คือ หัวข้อ title และ ลิ้งค์ที่อยู่ url

โดยสามารถทำตามขั้นตอน ได้ดังต่อไปนี้

1.สรัางไฟล์ php เรียก ข้อมูล xml มาแสดง ชื่อ gXML.php

2.HTML code ในไฟล์สำหรับ แสดงข้อมูล

3.Javascript Code สำหรับดึงข้อมูล

CSS สำหรับกำหนดคุณสมบัติลายน้ำ ในที่ใช้รูปจาก google สำหรับทดสอบ สามารถแทนรูปภาพอื่นได้

HTML Code ตัวอย่าง

Javascript Code

จัดรูปแบบ การแบ่งคอลัมน์ column ของ ตาราง สำหรับแสดงข้อมูล ด้วย php

Wed, 23 Dec 2009 00:00:00 +0700

การนำข้อมูลมาแสดง โดยจัดรูปแบบ แบ่งเป็น column สามารถทำโดยการใช้ css จัดรูปแบบ หรือ การใช้ตาราง table

หากสามารถจัดรูปแบบ column โดยการใช้ css จะเป็นการดีมาก

http://www.ninenik.com/เทคนิค_CSS_แสดงข้อมูลแบ่งเป็น_คอลัมน์_แทนการใช้ตาราง_Table-229.html

แต่หากต้องการความรวดเร็วสามารถใช้ในรูปแบบของตาราง table

ขั้นตอนการจัดคอลัมน์ ด้วยตาราง

1.กำหนดจำนวนคอลัมน์ที่ต้องการ ในที่นี้ใช้ 4 คอลัมน์

2.สร้างตาราง 1 x 4 กำหนดความกว้างตาราง ตามต้องการ (1 แถว x 4 คอลัมน์)

3.แทรก php โค้ตดังตัวอย่างต่อไปนี้ (กรณีดึงจากฐานข้อมูล)

0 && $remainCol!=$numCol)?"":""?>

//	คำอธิบาย
//	บรรทัดที่ 6 หาจำนวน รายการทั้งหมดที่แสดง
//	บรรทัดที่ 7 กำหนดจำนวนคอลัมน์ ตามจำนวนที่ต้องการแสดง
//	บรรทัดที่ 8 คำนวนหาจำนวนคอลัมน์ที่เหลือ กรณีข้อมูลแสดงไม่ครบทุกคอลัมน์ในแต่ละแถว
//	บรรทัดที่ 11 15 18 และ 21 เงื่อนไขสำหรับแสดงข้อมูลแต่ละ คอลัมน์ 
//	สังเกตว่า เงือนไขสำหรับคอลัมน์แรก  ใช้  เงื่อนไข $i%$numCol==1
//	และเงื่อนไขสำหรับคอลัมน์ต่อๆ ไปจะเป็น $i%$numCol==2 , $i%$numCol==3 ..... ไปเรื่อย ๆ 
//	จนถึง เงื่อนไขคอลัมน์สุดท้ายจะต้องกำหนดเป็น $i%$numCol==0 เสมอ
//	บรรทัดที่ 26 เงื่อนไขสำหรับกรณ๊ข้อมูลแสดงไม่ครบทุกคอลัมน์

4.เมื่อสามารถแสดงคอลัมน์ข้อมูลได้แล้ว ก็ทำการจัดรูปแบบข้อมูลที่ต้องการแสดง ในแต่ละคอลัมน์ตามต้องการ

โดยอาจแทรกตารางเข้าไปในแต่ละคอลัมน์ เพื่อจัดรูปแบบก็ได้