ตย. CSS ซ่อนปุ่ม Print ตอนสั่งพิมพ์หน้าเว็บ (hidden tag after click print web page using css)

ใน  workshop  นี้จะพาทำตัวอย่างการสร้าง CSS ในการซ่อนปุ่มพิมพ์หรือปริ้นหน้าเว็บแบบง่ายๆ โดยใช้ media print และ display none กรณีเราต้องการสร้างหน้าพิมพ์บนเว็บไซต์ของเรา บางทีสั่งพิมพ์จะมีการติด tag ที่เราไม่ต้องการมาด้วย เช่น เมนูต่างๆ (ลิ้งค์)  เพราะฉะนั้น workshop นี้จะมีโค้ดสำหรับแก้ปัญหานี้ครับ มาดูตัวอย่างการทำงานและโค้ดกันครับ

ตัวอย่างการทำงาน

เมื่อคลิก print ที่เป็นปุ่มสีน้ำเงิน หน้าแสดงการพิมพ์ ปุ่ม  print จะหายไป

 

Code CSS ที่ใช้

Code ปุ่ม Print ที่มีการใส่ id=”hid” เพื่อซ่อนตอนสั่งพิมพ์ ปล.เอาไปใส่ Tag อื่นๆ ก็ได้นะครับ ไม่จำเป็นต้อง <button> </button> เสมอไป


ขอแนะนำระบบโหวต/เลือกตั้งออนไลน์

สนใจ inbox มาที่ https://www.facebook.com/sornwebsites/ (ไม่แพงจ้า)


Full Code ตัวอย่าง  *มีคอมเม้นในโค้ดเพิ่มเติม  &  *Save เป็น .html แล้ว Run ได้เลยนะจ้ะ

ลองเอาไปประยุกต์ใช้ดูนะครับ

 

 


 

 

 

 

แฟนเพจ : https://www.facebook.com/sornwebsites/

 

ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com และทีมงานได้ที่

ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์  บวรเลิศสุธี   เลขที่  878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์  บวรเลิศสุธี เลขที่ 406-359094-1

————————————————————————————

ธนาคารกสิกร สาขาเออร์เบิร์น สแควร์ ประชาชื่น
ชื่อบัญชี นายพิศิษฐ์  บวรเลิศสุธี เลขที่ 048-1-17571-2

 

 

มีความสนใจเทคโนโลยีที่ใช้พัฒนาเว็บไซต์ และอยากแบ่งปันความรู้ด้านการพัฒนาเว็บไซต์และอื่นๆอีกมากมาย…

(Visited 409 times, 36 visits today)