Bind Custom Event enterKey บน Input <!DOCTYPE html> <html> <head> <script src=https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js></script> <script> $(document).ready(function() { $(input).bind(enterKey, function(e) { alert

HTML Form ธรรมดา <form action= method=get> <label>ชื่อ: <input type=text name=sname></label><br> <label>วันเวลาสอบ: <input type=datetime-local name=datetime></label><br> <input type=submit value=Submit> </form> สร้าง Form ด้วย j

Matrix 3x3 ควบคุมการ Transform ทั้งหมด Canvas เก็บ Current Transformation Matrix (CTM) เริ่มต้นเป็น Identity Matrix Matrix Format [ m11 m21 dx ] [ m12 m22 dy ] [ 0 0 1 ] m11, m22 - Scale X, Y m12, m21 - Skew/Shear dx, dy - Translate X, Y เมธอดหลัก transform(a, b, c, d, e, f) - คูณ CTM

เมธอด scale(x, y) ปรับขนาดหน่วยใน Canvas Grid สร้าง Shapes ขยาย/ย่อได้ x - Horizontal Scale Factor y - Vertical Scale Factor ต้องเป็น Positive Numbers ตัวอย่าง: Uniform และ Non-uniform Scaling ctx.save(); ctx.translate(50, 50); drawSpirograph(ctx, 22, 6, 5); // Original ctx.translate(100, 0); ctx

globalCompositeOperation: กำหนดการผสมสีระหว่าง Shape ใหม่และเก่า มี 12 โหมด (Porter-Duff Compositing Operators): source-over (Default) - ใหม่ทับเก่า source-in - ใหม่แสดงเฉพาะทับเก่า source-out - ใหม่แสดงเฉพาะนอกเก่า source-atop - ใหม่ทับเก่า (เฉพาะส่วนทับ) destination-over - เก่าทับใหม่ destination

สาเหตุหลัก: CORS (Cross-Origin Resource Sharing) แก้ไขฝั่ง Client var video = document.querySelector(video); video.crossOrigin = anonymous; // ต้องตั้งก่อน set src แก้ไขฝั่ง Server (Response Header) Access-Control-Allow-Origin: * ทางเลือก: Inject HTML ด้วย jQuery $(#audio).html(); สาเหตุอื่น: Codec

Firefox ไม่รองรับ min, max, step บน type=number (รุ่นเก่า) Chrome รองรับเต็มที่ Firefox เริ่มรองรับ Validation UI ในรุ่นใหม่ (Firefox 29+) ตัวอย่าง <!DOCTYPE html> <html> <head><title>HTML input number</title></head> <body> <form action= method=get>

2 วิธีหลัก 1. CSS pointer-events: none (ง่ายที่สุด) .overlay { pointer-events: none; /* คลิกทะลุไป element ใต้ได้ */ } รองรับทุกเบราว์เซอร์สมัยใหม่ (IE11+) 2. JavaScript: Forward Event overlay.addEventListener(click, function(e) { var x = e.clientX, y = e.clientY; overlay.style.display =

เมธอด translate(x, y) ย้าย Origin (0,0) ของ Canvas ไปยังตำแหน่งใหม่ ทุกการวาดต่อไปจะอิงจุดใหม่ ตัวอย่าง: วาด Spirograph หลายตำแหน่ง function drawShape() { var canvas = document.getElementById(mycanvas); if (canvas.getContext) { var ctx = canvas.getContext(2d); ctx.fillRect(0,

สาเหตุ: Canvas Width/Height ไม่ตรงกับ CSS Size Default Canvas: width=300, height=150 (Ratio 2:1) แก้: ตั้ง Width/Height Attribute ให้ตรงกับ CSS <canvas id=mycanvas width=400 height=300></canvas> <style> #mycanvas { border: 1px solid red; width: 400px; height: 300px; } </style>

Style Spinner Buttons ด้วย Pseudo-elements ซ่อน Spinner input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } Style Spinner (แสดงแต่ปรับสไตล์) input[type=number]::-webkit-inner-spin-button { -webkit-appearanc

โปรโตคอล tel: รองรับใน Mobile เกือบทุกตัว iOS Safari Android Browser/Chrome Opera Mini/Mobile Symbian, BlackBerry, Windows Phone Feature Detection (แนะนำ) // ทดสอบสร้าง Link ดู var a = document.createElement(a); a.href = tel:+1234567890; var supportsTel = a.protocol === tel:; // หรือ User Agent S

ใช้ buffered Property (TimeRanges Object) video.buffered คืน TimeRanges Object มี Method: length - จำนวน Ranges start(index) - เริ่มต้นของ Range (วินาที) end(index) - สิ้นสุดของ Range (วินาที) ตัวอย่างแสดง Buffered Ranges var buffered = video.buffered; for (var i = 0; i < buffered.length; i++) {

iframe เป็น Replaced Element ไม่ใช่ Non-replaced Replaced Elements (iframe, img, video, input) มี Layout Behavior ต่างจาก Div/Block Elements แก้ไข: ใช้ Wrapper Div <div class=iframe-wrapper> <iframe src=...></iframe> </div> .iframe-wrapper { position: absolute; top

Track Mouse State ด้วย Flag Variable var mouseDown = false; var dragOffset = { x: 0, y: 0 }; var mainLayer = { trans: { x: 0, y: 0 } }; canvas.onmousedown = function(event) { dragOffset.x = event.clientX - mainLayer.trans.x; dragOffset.y = event.clientY - mainLayer.trans.y; mouseDown =

ตั้ง Font เป็น pt แล้ว Parse ขนาด ctx.font = 15pt Calibri; // ตั้ง Font Size เป็น pt // ดึงตัวเลขขนาดจาก Font String var height = parseInt(ctx.font.match(/\d+/), 10); // ได้ 15 // หรือใช้ Measure Text (Width เท่านั้น) var metrics = ctx.measureText(Text); var width = metrics.width; // ความกว้าง //

ใช้ Circle Overlay แสดง Radius ความแม่นยำ var lat = position.coords.latitude; var lng = position.coords.longitude; var accuracy = position.coords.accuracy; // เมตร var center = new google.maps.LatLng(lat, lng); // Marker ตำแหน่ง var marker = new google.maps.Marker({ position: center, map:

สร้าง Blob ใหม่จากช่วง Bytes ของ Blob เดิม blob.slice(start, end, contentType) คืน Blob ใหม่ที่มีข้อมูลเฉพาะช่วงที่ระบุ ตัวอย่าง: อ่านไฟล์ใหญ่ทีละ Chunk (Resumable Upload) var blob = new Blob([large file content...], {type: text/plain}); var chunkSize = 1024 * 1024; // 1MB var start = 0; function u

ใช้ Canvas 2D Context วาด Wireframe Sphere (Pseudo-3D) คำนวณจุดบนพื้นผิวทรงกลม (Latitude/Longitude) แล้ว Project มา 2D Constructor Function function Sphere(r) { this.point = []; this.color = blue; this.r = (typeof r === number) ? r : 20.0; this.vertexes = 0; for (var alpha =

แก้ด้วยการจัดการไฟล์ bxSlider ให้ถูกต้อง ดาวน์โหลด bxSlider จาก Official Website Copy โฟลเดอร์ images จาก Zip ไปวางในโฟลเดอร์ js ของโปรเจกต์ ตรวจสอบ Include Order: <link rel=stylesheet href=js/jquery.bxslider.css> <script src=js/jquery-3.2.1.min.js></script> <script src=js/jque