WWW.CODE-FATHER.COM ยินดีต้อนรับทุกๆท่าน

บทความทั้งหมด วิธีใช้งานโปรแกรม PHP CODE FATHER V.2016 Register - ลงทะเบียนโปรแกรม Contact Us - ติดต่อเรา About Us - เกี่ยบกับเรา รับเขียนเว็บ โปรเจ็ค PHP vs MySQL
ติดต่อเข้ามาได้เลยนะครับ ราคากันเอง ไม่เคยทิ้งงาน
งานแก้ งานด่วน งานเร่งสอบถามกันก่อนได้ครับผม...
103446Code Login Logout Php การทำระบบล๊อกอิน ล๊อกเอ้า และป้องกันการลักไก่ แบบละเอียดที่สุด 39372Code Send Email by PHP การส่งอีเมล์ด้วย พีเอสพี 42145Captcha Security Code PHP ใส่รหัสยืนยันก่อนโพสป้องกันการสแปมเว็บเราดีกว่า 70464Php Code Insert to Mysql การเพิ่มข้อมูลใหม่เข้าสู่ฐานข้อมูล 47500PHP CODE FATHER โปรแกรมสร้างโปรเจ็ค PHP + Mysql สร้างโค้ดโปรแกรม php mysql insert update add edit delete ง่ายๆ 34306Download Free Program Php Code Father V.2010 ดาวน์โหลดโปรแกรมฟรี 32230ดาวน์โหลดคู่มือ วิธีใช้งานโปรแกรม Php Code Father V.2010 59203Function Confirm Delete JavaScript การยืนยันก่อนลบข้อมูล ง่าย ๆ แต่สำคัญ 31975PHP Function ECHO Exit ฟังก์ชั่นเล็ก ๆ ที่ไม่ธรรมดา เครื่องมือ DEBUG ชั้นยอด 10384PHP CODE FATHER V.2010 ตัวเต็ม Full ขั้นตอนการสมัครและรายละเอียดการลงทะเบียนใช้งานโปรแกรม 81310Code Search PHP In Mysql Database By Fields การค้นหาข้อมูลในฐานข้อมูล ตามชื่อฟิลด์ 28848แก้ปัญหาการใช้งานฟังก์ชั่น substr ใน php ตัดข้อความภาษาไทยแล้วกลายเป็นภาษาต่างดาว 37651การดาวน์โหลดไฟล์+เทคนิคการตั้งชื่อไฟล์เป็นภาษาไทย PHP Code Download File Thai 46351PHP Function Date Thai การแปลงวันที่จาก ค.ศ. เป็น พ.ศ. วันที่แบบไทย ๆ สำหรับคนไทย 41832การแทรก PHP ใน Javascript เรื่องกล้วย ๆ ที่อาจจะต้องได้ใช้ 38903การแทรก Javascript ใน PHP เรื่องกล้วย ๆ ที่จำเป็นต้องรู้ 53985Php Code Upload File การอัพโหลดไฟล์และการตรวจสอบประเภทของไฟล์ภาพและอื่น ๆ 15441 Single Quote SQL Query Insert update แก้ปัญหาเวลาข้อมูลที่มีเครื่องหมายฟันเดี่ยว (single quote) แล้วไม่ได้ ไม่ผ่าน 14183การใช้งานฟังก์ชั่น substring() ใน javascript และการตรวจสอบจำนวนเงินกับการสั่งซื้ออัลบั้มออนไลน์ 118210คำสั่ง sql Select from Where ,Like ,Order By ที่จำเป็นต้องใช้และต้องใช้บ่อย ๆ 50237code update php to mysql database คำสั่งปรับปรุงข้อมูลในฐานข้อมูล 47260php function number_format ใส่จุดทศนิยมและเครื่องหมายคอมม่าให้ตัวเลข เงิน 40725ง่าย ๆ php auto id การสร้างเลขที่อัตโนมัติก่อนเพิ่มข้อมูลใหม่ 54482Code Redirect URL ด้วย php และ javascript การส่งผู้ใช้ไปหน้าที่เราต้องการ 53234ง่าย ๆ การทำวันที่แบบ List ให้เลือก วัน เดืือน ปี Select Option List Date 96115Code PHP Popup การป๊อปอัพหน้าต่างใหม่โดยใช้ Javascript 51128เทคนิค...การทำให้ Textbox กรอกหรือป้อนได้เฉพาะตัวเลขด้วย Javascript ง่ายๆ 45560Step 1 สร้างเว็บบอร์ดแบบบ้านๆ ด้วย PHP Webboard Script 36383เทคนิคการแสดงและซ่อน div, table และอื่น ๆ ด้วย Javascript Show and Hide DIV or TABLE 52238Step 2 ฐานข้อมูล สร้างเว็บบอร์ดแบบบ้านๆ ด้วย PHP Webboard Script 91374ปัญหาการแสดงผลตารางบน Internet Explorer เพี้ยน Table ie7 Error 22196การเชื่อมต่อฐานข้อมูล PHP+MySQL และวิธีแก้ไขปัญหาภาษาไทยผิดเพี้ยน กลายเป็นภาษาต่างดาว 35936วิธีแก้ปัญหา Internal Server Error ตอนรัน PHP กับ Apache Server MSQL 35435แปลงตัวเลขให้เป็นตัวอักษรภาษาไทย PHP Code Thai BathText 38358php easy calculator เครื่องคิดเลขอย่างง่าย บวก ลบ คูณ หาร 32535php easy calculator with Ajax เครื่องคิดเลขอย่างง่าย บวก ลบ คูณ หาร ภาคต่อ 184452ทำระบบล๊อกอินอย่างง่าย ด้วย PHP Login with Mysql Data Base 12558Step 3 โค้ดเว็บบอร์ดแบบง่าย ๆ พร้อมใช้งาน PHP Webboard Script 42880โค้ดการเลือกจังหวัด อำเภอ ตำบล ด้วย Ajax vs Code PHP select Provicne Umphur District 77114(ภาคต่อ แก้ไข อัพเดท) โค้ดการเลือกจังหวัด อำเภอ ตำบล ด้วย Ajax Code PHP select Provicne Umphur District with Edit 26681แก้ปัญหาPHP อัพขึ้น Host แล้วใช้งานไม่ได้ ไม่ส่งค่าตัวแปรแต่ที่เครื่อง localhost ใช้ได้ 163852PHP Random Number+String สุ่มตัวเลขตัวอักษรหรือตัวหนังสือไม่ซ้ำอย่างง่าย 127602โค้ดระบบแบ่งหน้า เพิ่ม ลบ แก้ไข และค้นหาตามรายชื่อฟิลด์ในหน้าเดียว 80395ติ๊กถูก Checkbox ยอมรับเงื่อนไขแล้วปุ่ม submit ขึ้นให้คลิก 19702แก้ปัญหา warning session_start() function.session-start cannot send session cache limiter 37118การใช้งานโปรแกรม php code father สร้างไฟล์ php แสดงข้อมูล เพิ่ม ลบ แก้ไข ค้นหา แบ่งหน้า 346132ฝึกเขียนโค้ด php โปรแกรมจำลองการถอนเงินจากตู้ ATM 203415สอนเขียน PHP แบบฮาๆ ตอน 1 ติดตั้งโปรแกรมพร้อมใช้งานเบื้องต้น 72342การแบ่งหน้า Boostrap Pagination PHP+MySql ง่าย ๆแบบจับมือทำ 28737Easy Code PHP Check Device โค้ดตรวจสอบประเภทอุปกรณ์ที่กำลังใช้งานเว็บไซต์ 10123สอน PHP สร้าง Webboard ตอน 1 สร้างฐานข้อมูล Mysql 14491สอน PHP Webboard ตอน#2 เชื่อมต่อฐานข้อมูล Connect Mysql DataBase 198907สอน PHP Webboard ตอน#3 ระบบล๊อกอิน Login เข้าสู่ระบบ 29497มาแล้วครับ PHP CODE FATHER V.2016 ร่วมกับ Boostrap 104735วิธีแก้ปัญหา Xampp เข้า phpMyadmin ไม่ได้ 35497สอนเขียนโค้ด PHP แบบจับมือทำ #1 เชื่อมฐานข้อมูลและแสดงผลข้อมูล
1# เทคนิคการแสดงและซ่อน div, table และอื่น ๆ ด้วย Javascript Show and Hide DIV or TABLE
เทคนิคการแสดงและซ่อน div, table และอื่น ๆ ด้วย Javascript Show and Hide DIV or TABLE
หลาย ๆ คนคงจะเคยเห็น หรือ พบเจอเว็บใหญ่ ๆ ที่เขาใ้ช้เทคนิคนี้กันบ้างแล้ว
ตัวอย่างที่เห็นบ่อยที่สุดก็คือ ที่เว็บวีดีโอยอดฮิต อย่าง Youtube เมื่อเวลาเราคลิกที่ปุ่ม Share vdo
จะมีส่วนของโค้ดที่จะให้ก๊อปเลื่อนลงไป โดยที่ไม่ต้องรีเฟรชหน้าใหม่
ทำให้สะดวก และ ง่ายกับการใช้งานของผู้ใช้งาน

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

รูปประกอบ

1.ตอนยังไม่คลิก หรือ เปิดมาทีแรก
2.เมื่อคลิกที่ปุ่มก็จะแสดงส่วนที่ซ่อนไว้ขึ้นมาให้ผู้ใช้เห็น และใช้งาน
3.เมื่อคลิกอีกที จะทำการซ่อนกลับคืนเหมือนเดิม

โค้ด
</html>
<meta http-equiv="content-Type" content="text/html; charset=TIS-620">
<script language="JavaScript"> 
function fncShow(ctrl){ // ฟังก์ชั่นสำหรับ แสดง (Show) ส่งค่า id ของ DIV หรือ Table TD TR
document.getElementById(ctrl).style.display = ''; //สั่งให้แสดง
document.getElementById('embed_button').innerHTML ='<input type="submit" name="Submit" value="Hide Embed" onClick="JavaScript:fncHide(\'embed_div\');">'; // หลังจากสั่งให้แสดงเสร็จ ก็ทำการเปลี่ยนสถานะของปุ่มเป็น "ซ่อน"
}
 
function fncHide(ctrl){ // ฟังก์ชั่นสำหรับ ซ่อน ส่งค่า id ของ DIV หรือ Table TD TR
document.getElementById(ctrl).style.display = 'none'; //สั่งให้แสดง
document.getElementById('embed_button').innerHTML ='<input type="submit" name="Submit" value="Show Embed" onClick="JavaScript:fncShow(\'embed_div\');">';  // หลังจากสั่งให้ซ่อนแล้ว ก็ทำการเปลี่ยนสถานะของปุ่มเป็น "แสดง"
}
</script>

<table width="100%">
  <tbody><tr>
    <td width="7%" id="embed_button"><input type="submit" name="Submit" value="Show Embed" onclick="JavaScript:fncShow('embed_div');"></td>
  </tr>
  <tr id="embed_div" style="display:none; "><!-- จุดที่เราต้องการจะแสดง หรือ ซ่อน ในตัวอย่างนี้คือ TR ของ Table -->
    <td>
Embed this VDO&nbsp;&nbsp;:<input type="text" id="code_embed" value="" code-father.com"="" src="http://www.code-father.com&gt;" width="450" height="180" frameborder="0" allowfullscreen="">
<br>
Link to this page&nbsp;&nbsp;: <input name="textfield" type="text" size="50" value="http://www.code-father.com" onclick="this.focus(); this.select();">
</td><!-- เนื้อหาที่ต้องการแสดงให้กับผู้ใช้งานได้เห็น -->
  </tr>
</tbody></table>
</html>
***********************************
ขออธิบายขยายความเพิ่มเติมกันอีกสักนิด ถึงกระบวนการทำงานของบทความนี้นะครับ
  1. เมื่อเปิดมาทีแรก จะเห็นเพียงแค่ปุ่ม "Show Embed" เพื่อให้คลิก เริ่มแรกจะยังไม่แสดงส่วนเนื้อหาให้ผู้ใช้ได้เห็น
    ตามคำสั่ง   id="embed_div" style="display:none; "> เพราะต้องการให้คลิกก่อนจึงจะแสดงผล
  2. เมื่อคลิกที่ปุ่ม "Show Embed" ระบบจะส่งค่า id ของ TR ไปยังฟังก์ชั่น ด้วยคำสั่ง   onclick="JavaScript:fncShow('embed_div');"
  3. ที่ฟังก์ชั่น  fncShow ก็จะสั่งให้แสดงผล ด้วยคำสั่ง  document.getElementById(ctrl).style.display = ''; และทำการเปลี่ยนปุ่ม "Show Embed" เป็น "Hide Embed" เพื่อให้ผู้ใช้ได้คลิกปิดได้หากไม่ต้องการ
  4. เพียงแค่นี้ผู้ใช้ก็จะสามารถเห็นข้อมูลที่เราซ่อนไว้ได้ และหากต้องการปิด หรือ ซ่อน ก็คลิกที่ปุ่ม "Hide Embed" 
ยิ่งอธิบายก็เหมือนจะทำให้เรื่องง่าย ๆ กลายเป็นเรื่องยาก ยังไงก็ไม่รู้
ลองก๊อปโค้ดไปทดสอบดูกันเลย จะได้เห็นผลกับตาว่ามันทำงานได้จริงหรือเปล่า

*** หากสังเกตุดี ๆ หลายคนอาจจะสงสัยว่า ตรงฟังก์ชั่น ทำไมตัวหนึ่งใช้ส่งค่าเข้าไป แต่อีกตัวหนึ่งไม่เห็นส่งค่าเ้ข้าไปหล่ะ
document.getElementById(ctrl).style.display = ''; //สั่งให้แสดง
document.getElementById('embed_button').innerHTML ='';

 ตรงสีเขียว ๆ นั่นหล่ะครับ คือ ม้นใช้ได้ทั้งสองแบบ ขึ้นอยู่กับลักษณะการใช้งาน หากใช้งานแค่จุดเดียว หรือ ฟอร์มเดียว
เราก็ไม่จำเป็นต้องส่งค่าตัวแปร จะง่ายกว่า โดยระบุค่า ID เข้าไปเลย

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