<frameset> Deprecated แต่อยู่ได้ HTML5 ไม่รองรับ <frameset> แต่วันนี้ยังใช้งานได้ หาก Parent ใช้ XHTML Frameset DOCTYPE ตัวอย่าง <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd> <html> <head></head> &

ตรวจสอบ readyState ก่อนอ่าน Duration readyState= 1 โค้ดรอ metadata แล้วอ่าน duration 0) { var duration = Math.round(video.duration); $(#duration).text(duration); clearInterval(tm); } }, 1000); ต้องรอให้ metadata โหลดเสร็จ ( 0) ถึงจะได้ video.duration ที่ถูกต้อง

ข้อจำกัดของ :last-child :last-child เลือกเฉพาะ **ลูกสุดท้าย** ของ parent เท่านั้น **ไม่ใช่** ลูกสุดท้ายที่มี class เฉพาะ ตัวอย่างที่ทำงาน li:last-child { background-color: blue; } จะทำงานก็ต่อเมื่อ <li> ตัวสุดท้ายเป็นลูกสุดท้ายของ <ul> จริงๆ ตัวอย่างที่ไม่ทำงาน <div> <a><

ใช้ Pseudo-element ::after วาดสามเหลี่ยม .demo::after { content: ; position: absolute; border-top: solid 50px #e15915; /* สีสามเหลี่ยม */ border-left: solid 50px transparent; /* ซ้ายโปร่งใส */ border-right: solid 50px transparent; /* ขวาโปร่งใส */ top: 100%; /* ติ

ใช้ html2canvas() แปลง DIV เป็นรูปภาพ HTML <div id=cpimg style=padding: 25px;> <h4>Welcome</h4> </div> JavaScript html2canvas(document.querySelector(#cpimg)).then(function(canvas) { document.body.appendChild(canvas); // แสดง canvas ที่สร้างขึ้น // หรือดาวน์โหลด:

ใช้ Flexbox จัดให้คอลัมน์สูงเท่ากัน และรายการจัดตำแหน่งด้านล่าง CSS สำหรับ Wrapper และ Columns .wrap { display: flex; } .wrap .col { flex: 1 0 33%; /* ขยายเท่าๆ กัน ความกว้างพื้นฐาน 33% */ } จัดรายการให้อยู่ด้านล่าง (Vertical Align Bottom) .col .content { margin-top: auto; /* ดันเนื้อหาไ

ใช้ Custom Elements เปลี่ยน Date Time Format สามารถสร้าง Custom Element เพื่อ override รูปแบบวันที่ได้ โดยใช้ Shadow DOM ตัวอย่าง Custom Element <date-timeformatchange format=dd/mm/yyyy></date-timeformatchange> ข้อจำกัด: IE10 และเก่ากว่าไม่รองรับ Custom Elements เบราว์เซอร์รุ่นใหม่รองรับ

โค้ดสร้าง Radial Gradient พร้อม Scaling และ Rotation var canvas = document.getElementById(canvas); var ctx = canvas.getContext(2d); // สร้าง Radial Gradient var gradient = ctx.createRadialGradient( 100/horizontalScale, 100/verticalScale, 100, // วงกลมใน (x, y, r) 100/horizontalScale, 100/

สาเหตุและวิธีแก้ บางครั้ง Canvas ไม่จับ mouse events ได้เนื่องจาก compositing layer หรือ CSS transforms วิธีที่ 1: บังคับสร้าง Compositing Layer canvas { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } วิธีที่ 2: เพิ่ม Event Listener ให้ชัดเจน canvas.addEventListe

ใช้ 3 เทคโนโลยีร่วมกัน webkitdirectory บน <input type=file> - เลือกโฟลเดอร์ได้ Filesystem API - ระบบไฟล์ sandboxed บนเครื่อง client File API - อ่านไฟล์จาก input element ทำงานได้ดีใน Google Chrome ขอ Filesystem var fs, err = function(err) { throw err; }; webkitRequestFileSystem( window.T

classList และเมธอด add/remove classList คืนค่า DOMTokenList สามารถใช้ add() และ remove() ได้ แต่รับพารามิเตอร์เดียวต่อครั้ง ขยาย DOMTokenList ให้รองรับหลายคลาส DOMTokenList.prototype.addMany = function(classes) { var arr = classes.split( ); for (var i = 0, len = arr.length; i < len; i++) {

การสื่อสารระหว่าง Parent และ Child iframe ด้วย postMessage Parent สามารถฟังข้อความจาก Child ได้โดยไม่ต้องส่งข้อความเริ่มต้นก่อน โค้ดฝั่ง Parent (Listener) var eventMethod = window.addEventListener ? addEventListener : attachEvent; var eventer = window[eventMethod]; var messageEvent = eventMethod ==

รูปแบบมาตรฐานของ Checkbox <input name=your_name value=your_value type=checkbox> ตัวอย่างสมบูรณ์ <!DOCTYPE html> <html> <head> <title>Checkbox Control</title> </head> <body> <form> <input type=checkbox name=maths value=on> วิชาคณิตศา

ใช้ Flexbox สร้าง Layout เต็มหน้าจอที่มี Scroll เฉพาะส่วนเนื้อหา คุณสมบัติ flex เป็น shorthand ของ flex-grow, flex-shrink, flex-basis เทคนิคสำคัญ: ตั้ง height: 0 หรือ min-height #container article { -webkit-flex: 1 1 auto; overflow-y: auto; height: 0px; /* บังคับให้ขยายเต็มพื้นที่ที่เหลื

วิธี: ลบ Canvas เดิม และสร้าง Canvas ใหม่ การล้างแค่เนื้อหา (clearRect) อาจไม่พอ เพราะ event listeners อาจค้างอยู่ วิธีที่แน่ใจคือแทนที่ element ทั้งตัว var resetCanvas = function() { $(#results-graph).remove(); // ลบ canvas เดิม $(#graph-container).append(); // เพิ่มใหม่ canvas = d

ตัวอย่างวาดกริดบน Canvas ด้วย JavaScript // กำหนดขนาดกริดและ padding var grid_w = 200; var grid_h = 200; var grid_padding = 15; // ขนาด Canvas var canvas_w = grid_w + (grid_padding * 2) + 1; var canvas_h = grid_h + (grid_padding * 2) + 1; // สร้าง Canvas element var canvas = $().attr({width: canva

ใช้ Event onended สำหรับเล่นต่อเนื่อง เมื่อวิดีโอ/ออดิโอจบ จะยิง event onended สามารถโหลดคลิปถัดไปได้ ตัวอย่างแจ้งเตือนเมื่อจบ <video width=300 height=200 controls onended=display()> <source src=/html5/foo.ogg type=video/ogg /> </video> <script> function display() { ale

ใช้โปรแกรมแปลงวิดีโอฟรี แนะนำ Free HTML5 Video Player And Converter สำหรับแปลงวิดีโอหลายรูปแบบ ขั้นตอน เปิดโปรแกรมและเพิ่มไฟล์วิดีโอต้นทาง (รองรับ .avi, .mp4, .mov, .mkv, .flv, .webm, .ogv, .wmv, ฯลฯ) เลือกโฟลเดอร์ปลายทาง (Browse...) เลือก Preset / ธีมผู้เล่น กด Convert ไฟล์ผลลัพธ์จะถูกบันทึกที่โฟ

ตั้งค่าวิดีโอเป็นพื้นหลังเต็มหน้าจอ ใช้แท็ก <video> พร้อมแอตทริบิวต์ autoplay, muted, loop และ CSS ทำให้ครอบคลุมทั้งหน้า HTML <video autoplay muted loop id=myVideo> <source src=demo.mp4 type=video/mp4> เบราว์เซอร์ของคุณไม่รองรับ HTML5 video </video> JavaScript ควบคุม Play

Web Audio API: ควบคุมเสียง สร้างเอฟเฟกต์ วิเคราะห์ความถี่ Web Audio API ใช้สร้างและประมวลผลเสียงในเบราว์เซอร์ได้โดยตรง ตัวอย่างสร้างเสียง Sine Wave 500Hz เล่น 5 วินาที // สร้าง AudioContext (รองรับทั้ง standard และ webkit) var context = new (window.AudioContext || window.webkitAudioContext)(); // ส