Search completed in 1.27 seconds.
34 results for "clientWidth":
Your results are loading. Please wait...
Element.clientWidth - Web APIs
the element.clientwidth property is zero for inline elements and elements with no css; otherwise, it's the inner width of an element in pixels.
... when clientwidth is used on the root element (the <html> element), (or on <body> if the document is in quirks mode), the viewport's width (excluding any scrollbar) is returned.
... this is a special case of clientwidth.
...And 4 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
*******************************************/ // updates properties of ui elements /*************************************************************************/ colorpicker.prototype.updatecolor = function updatecolor(e) { var x = e.pagex - this.picking_area.offsetleft; var y = e.pagey - this.picking_area.offsettop; // width and height should be the same var size = this.picking_area.clientwidth; if (x > size) x = size; if (y > size) y = size; if (x < 0) x = 0; if (y < 0) y = 0; var value = 100 - (y * 100 / size) | 0; var saturation = x * 100 / size | 0; if (this.picker_mode === 'hsv') this.color.sethsv(this.color.hue, saturation, value); if (this.picker_mode === 'hsl') this.color.sethsl(this.color.hue, saturation, value); this.color_picker.style.left = x + 'p...
...htness', value); this.notify('saturation', saturation); this.notify('red', this.color.r); this.notify('green', this.color.g); this.notify('blue', this.color.b); this.notify('hexa', this.color.gethexa()); notify(this.topic, this.color); }; colorpicker.prototype.updatehueslider = function updatehueslider(e) { var x = e.pagex - this.hue_area.offsetleft; var width = this.hue_area.clientwidth; if (x < 0) x = 0; if (x > width) x = width; var hue = ((359 * x) / width) | 0; this.updatesliderposition(this.hue_picker, x - 1); this.sethue(hue); }; colorpicker.prototype.updatealphaslider = function updatealphaslider(e) { var x = e.pagex - this.alpha_mask.offsetleft; var width = this.alpha_mask.clientwidth; if (x < 0) x = 0; if (x > width) x = width; this.color.a =...
...; this.notify('hexa', this.color.gethexa()); notify(this.topic, this.color); }; /*************************************************************************/ // update positions of various ui elements /*************************************************************************/ colorpicker.prototype.updatepickerposition = function updatepickerposition() { var size = this.picking_area.clientwidth; var value = 0; if (this.picker_mode === 'hsv') value = this.color.value; if (this.picker_mode === 'hsl') value = this.color.lightness; var x = (this.color.saturation * size / 100) | 0; var y = size - (value * size / 100) | 0; this.color_picker.style.left = x + 'px'; this.color_picker.style.top = y + 'px'; }; colorpicker.prototype.updatesliderposition = function updatesl...
...And 6 more matches
Box-shadow generator - CSS: Cascading Style Sheets
topic) { var slider = sliders[topic]; if (slider === null || slider === undefined) return; if (slider.value - slider.step >= slider.min) { slider.value -= slider.step; setvalue(topic, slider.value) notify.call(slider); } } // this = slider object var updateslider = function updateslider(e) { var node = this.node; var pos = e.pagex - node.offsetleft; var width = node.clientwidth; var delta = this.max - this.min; var offset = this.pointer.clientwidth + 4; // border width * 2 if (pos < 0) pos = 0; if (pos > width) pos = width; var value = pos * delta / width | 0; var precision = value % this.step; value = value - precision + this.min; if (precision > this.step / 2) value = value + this.step; if (this.snap) pos = (value - this.min) * width / delt...
...a; this.pointer.style.left = pos - offset/2 + "px"; this.value = value; node.setattribute('data-value', value); notify.call(this); } var setvalue = function setvalue(topic, value) { var slider = sliders[topic]; if (value > slider.max || value < slider.min) return; var delta = slider.max - slider.min; var width = slider.node.clientwidth; var offset = slider.pointer.clientwidth; var pos = (value - slider.min) * width / delta; slider.value = value; slider.pointer.style.left = pos - offset / 2 + "px"; slider.node.setattribute('data-value', value); notify.call(slider); } var setmousetracking = function setmousetracking(elem, callback) { elem.addeventlistener("mousedown", function(e) { callback(e); document.addeventlistener("mousemove", callback); }); d...
...picker; var hue_selector; var alpha_selector; var pick_object; var info_rgb; var info_hsv; var info_hexa; var output_color; var color = new color(); var subscribers = []; var updatecolor = function updatecolor(e) { var x = e.pagex - gradient_area.offsetleft; var y = e.pagey - gradient_area.offsettop; // width and height should be the same var size = gradient_area.clientwidth; if (x > size) x = size; if (y > size) y = size; if (x < 0) x = 0; if (y < 0) y = 0; var value = 100 - (y * 100 / size) | 0; var saturation = x * 100 / size | 0; color.sethsv(color.hue, saturation, value); // should update just // color pointer location updateui(); notify("color", color); } var updatehue = function updatehue(e) { var x = e.page...
...And 4 more matches
Color picker tool - CSS: Cascading Style Sheets
******************/ // updates properties of ui elements /*************************************************************************/ colorpicker.prototype.updatecolor = function updatecolor(e) { var x = e.pagex - this.picking_area.offsetleft; var y = e.pagey - this.picking_area.offsettop; var picker_offset = 5; // width and height should be the same var size = this.picking_area.clientwidth; if (x > size) x = size; if (y > size) y = size; if (x < 0) x = 0; if (y < 0) y = 0; var value = 100 - (y * 100 / size) | 0; var saturation = x * 100 / size | 0; if (this.picker_mode === 'hsv') this.color.sethsv(this.color.hue, saturation, value); if (this.picker_mode === 'hsl') this.color.sethsl(this.color.hue, saturation, value); this.color_picker.style.left = x - pi...
...htness', value); this.notify('saturation', saturation); this.notify('red', this.color.r); this.notify('green', this.color.g); this.notify('blue', this.color.b); this.notify('hexa', this.color.gethexa()); notify(this.topic, this.color); }; colorpicker.prototype.updatehueslider = function updatehueslider(e) { var x = e.pagex - this.hue_area.offsetleft; var width = this.hue_area.clientwidth; if (x < 0) x = 0; if (x > width) x = width; // todo 360 => 359 var hue = ((359 * x) / width) | 0; // if (hue === 360) hue = 359; this.updatesliderposition(this.hue_picker, x); this.sethue(hue); }; colorpicker.prototype.updatealphaslider = function updatealphaslider(e) { var x = e.pagex - this.alpha_area.offsetleft; var width = this.alpha_area.clientwidth; if (x < 0) x ...
...; this.notify('hexa', this.color.gethexa()); notify(this.topic, this.color); }; /*************************************************************************/ // update positions of various ui elements /*************************************************************************/ colorpicker.prototype.updatepickerposition = function updatepickerposition() { var size = this.picking_area.clientwidth; var value = 0; var offset = 5; if (this.picker_mode === 'hsv') value = this.color.value; if (this.picker_mode === 'hsl') value = this.color.lightness; var x = (this.color.saturation * size / 100) | 0; var y = size - (value * size / 100) | 0; this.color_picker.style.left = x - offset + 'px'; this.color_picker.style.top = y - offset + 'px'; }; colorpicker.prototype.upda...
...And 3 more matches
Border-radius generator - CSS: Cascading Style Sheets
er.prototype.setradius = function setradius(value) { this.radius.style.display = 'block'; this.size = 2 * value; this.node.style.width = this.size + units[this.unitr]; this.node.style.height = this.size + units[this.unitr]; this.updateborderradius(); } radiuscontainer.prototype.setunitx = function setunitx(value) { this.unitx = value; if (this.unitx === 0) this.maxw = 2 * subject.clientwidth; if (this.unitx === 1) this.maxw = 200; inputslidermanager.setunit(this.topic + '-w', units[this.unitx]); inputslidermanager.setmax(this.topic + '-w', this.maxw / 2); } radiuscontainer.prototype.setunity = function setunity(value) { this.unity = value; if (this.unity === 0) this.maxh = 2 * subject.clientheight; if (this.unity === 1) this.maxh = 200; inputslidermanager.setunit(thi...
...s.topic + '-h', units[this.unity]); inputslidermanager.setmax(this.topic + '-h', this.maxh / 2); } radiuscontainer.prototype.setunitr = function setunitr(value) { this.unitr = value; if (this.unitr === 0) this.maxr = 2 * math.min(subject.clientheight , subject.clientwidth); if (this.unitr === 1) this.maxr = 200; inputslidermanager.setunit(this.topic, units[this.unitr]); inputslidermanager.setmax(this.topic, this.maxr / 2); } radiuscontainer.prototype.updateunits = function updateunits(unit) { if (this.rounded) { this.setunitr(this.unitr); return; } if (unit === 0) this.setunitx(this.unitx); if (unit === 1) this.setunity(this.unity); } radiuscontainer.prototype.composeborderradius = function composeborderradius () { if (this.rounded === true) { ...
... this.updateheight(); } if (deltax || deltay) this.updateborderradius(); } /** * tool manager */ var tool = (function tool() { var preview; var preview_ui; var radius_containers = []; var border_width = 3; var borders1 = [null, null, null, null]; var borders2 = [0, 0, 0, 0]; var updateuiwidth = function updateuiwidth(value) { var pwidth = subject.parentelement.clientwidth; var left = (pwidth - value) / 2; subject.style.width = value + "px"; for (var i = 0; i < 4; i++) radius_containers[i].updateunits(0); } var updateuiheight = function updateuiheight(value) { var pheight = subject.parentelement.clientheight; var top = (pheight - value) / 2; subject.style.height = value + "px"; subject.style.top = top - border_width + "px"; for (v...
...And 2 more matches
Things I've tried to do with XUL - Archive of obsolete content
html elements have the non-standard clientwidth/clientheight properties (see http://www.mozilla.org/docs/dom/domr...entheight.html); no equivalent exists for xul.
... resize event problems going with the inability to obtain the clientwidth/clientheight of xul elements, it's impossible to handle the "resize" event yourself to grow/shrink content as needed -- as you grow the content, when you shrink the window, the content will simply be clipped (because now it has a bigger size than the window).
...an ugly workaround for this problem might include nesting an invisible html-element in order to access its "clientwidth" method: <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> ...
...var available_width = document.getelementbyid("invisible_element").clientwidth; ...
Browser Detection and Cross Browser Support - Archive of obsolete content
note that gecko 1.0 (netscape 7) and later implement the proprietary internet explorer feature clientwidth while netscape 6 did not.
... in this example, netscape 7 and internet explorer 5+ will automatically use clientwidth while netscape navigator 4, netscape 6, compuserve 7 and opera will use innerwidth.
... if (windowref.document.body && typeof(windowref.document.body.clientwidth) == 'number') { // gecko 1.0 (netscape 7) and internet explorer 5+ width = windowref.document.body.clientwidth; } else if (typeof(windowref.innerwidth) == 'number') { // navigator 4.x, netscape 6.x, compuserve 7 and opera width = windowref.innerwidth; } example 2 - object based feature detection cross browser support this example also illustrates the use of feature detection and shows the complications that can arise from the non standard implementations in other browsers.
Document.width - Web APIs
WebAPIDocumentwidth
instead, use document.body.clientwidth.
... see element.clientwidth.
... syntax pixels = document.width; example function init() { alert("the width of the document is " + document.width + " pixels."); } alternatives document.body.clientwidth /* width of <body> */ document.documentelement.clientwidth /* width of <html> */ window.innerwidth /* window's width */ specification html5 ...
Viewport concepts - CSS: Cascading Style Sheets
if you query the width or height of the window and document in chrome or firefox, you may get: document.documentelement.clientwidth /* 1200 */ window.innerwidth /* 1200 */ window.outerwidth /* 1200 */ document.documentelement.clientheight /* 800 */ window.innerheight /* 800 */ window.outerheight /* 900 */ there are several dom properties that can help you query viewport size, and other similar lengths: the document element's element.clientwidth is the inner width of a document in css pixels, including padding (but not ...
... when zoomed in, both firefox and chrome report the new css pixel size for innerwidth and clientwidth.
...when zoomed in you may get: document.documentelement.clientwidth /* 800 */ window.innerwidth /* 800 */ window.outerwidth /* 800 in firefox, 1200 in chrome */ document.documentelement.clientheight /* 533 */ window.innerheight /* 533 */ window.outerheight /* 596 in firefox, 900 in chrome */ the viewport was originally 1200 x 800 pixels.
Property - Archive of obsolete content
« xul reference accessible accessibletype accesskey align allnotifications allowevents alwaysopenpopup amindicator applocale autocheck autofill autofillaftermatch boxobject browsers builder builderview buttons canadvance cangoback cangoforward canrewind checked checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi customtoolbar...
... useraction value valuenumber view webbrowserefind webnavigation webprogress width wizardpages wraparound year yearleadingzero related dom element properties dom:element.attributes dom:element.baseuri dom:element.childelementcount dom:element.childnodes dom:element.children dom:element.clientheight dom:element.clientleft dom:element.clienttop dom:element.clientwidth dom:element.clonenode dom:element.firstchild dom:element.firstelementchild dom:element.lastchild dom:element.lastelementchild dom:element.localname dom:element.namespaceuri dom:element.nextelementsibling dom:element.nextsibling dom:element.nodename dom:element.nodetype dom:element.nodevalue dom:element.ownerdocument dom:element.parentnode dom:element.prefix dom:ele...
Video and Audio APIs - Learn web development
= math.floor(media.currenttime - minutes * 60); let minutevalue; let secondvalue; if (minutes < 10) { minutevalue = '0' + minutes; } else { minutevalue = minutes; } if (seconds < 10) { secondvalue = '0' + seconds; } else { secondvalue = seconds; } let mediatime = minutevalue + ':' + secondvalue; timer.textcontent = mediatime; let barlength = timerwrapper.clientwidth * (media.currenttime/media.duration); timerbar.style.width = barlength + 'px'; } this is a fairly long function, so let's go through it step by step: first of all, we work out the number of minutes and seconds in the htmlmediaelement.currenttime value.
... the length we should set the inner <div> to is worked out by first working out the width of the outer <div> (any element's clientwidth property will contain its length), and then multiplying it by the htmlmediaelement.currenttime divided by the total htmlmediaelement.duration of the media.
Element.scrollWidth - Web APIs
the width is measured in the same way as clientwidth: it includes the element's padding, but not its border, margin or vertical scrollbar (if present).
...if the element's content can fit without a need for horizontal scrollbar, its scrollwidth is equal to clientwidth this property will round the value to an integer.
Element - Web APIs
WebAPIElement
element.clientwidth read only returns a number representing the inner width of the element.
... working draft added the following properties: scrolltop, scrollleft, scrollwidth, scrollheight, clienttop, clientleft, clientwidth, and clientheight.
WebGLRenderingContext - Web APIs
this is done by assigning the width and height properties of the canvas to the values of the clientwidth and clientheight properties, respectively.
...y { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to get webgl context.
Canvas size and WebGL - Web APIs
this is done by assigning the width and height properties of the canvas to the values of the clientwidth and clientheight properties, respectively.
...y { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to get webgl context.
jspage - Archive of obsolete content
bottom=k.top+k.height;return k;},computeposition:function(h){return{left:h.x-e(this,"margin-left"),top:h.y-e(this,"margin-top")}; },setposition:function(h){return this.setstyles(this.computeposition(h));}});native.implement([document,window],{getsize:function(){if(browser.engine.presto||browser.engine.webkit){var i=this.getwindow(); return{x:i.innerwidth,y:i.innerheight};}var h=a(this);return{x:h.clientwidth,y:h.clientheight};},getscroll:function(){var i=this.getwindow(),h=a(this); return{x:i.pagexoffset||h.scrollleft,y:i.pageyoffset||h.scrolltop};},getscrollsize:function(){var i=a(this),h=this.getsize();return{x:math.max(i.scrollwidth,h.x),y:math.max(i.scrollheight,h.y)}; },getposition:function(){return{x:0,y:0};},getcoordinates:function(){var h=this.getsize();return{top:0,left:0,bottom:h.y,right:h.
Responsive images - Learn web development
note: when testing this with a desktop browser, if the browser fails to load the narrower images when you've got its window set to the narrowest width, have a look at what the viewport is (you can approximate it by going into the browser's javascript console and typing in document.queryselector('html').clientwidth).
Looping code - Learn web development
{ margin: 0; } button { position: absolute; top: 5px; left: 5px; } </style> </head> <body> <button>update</button> <canvas></canvas> <script> const btn = document.queryselector('button'); const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); let width = document.documentelement.clientwidth; let height = document.documentelement.clientheight; canvas.width = width; canvas.height = height; function random(number) { return math.floor(math.random()*number); } function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), ra...
Performance best practices for Firefox front-end engineers
return elem.clientwidth; }); requestanimationframe(() => { otherelem.style.width = `${width}px`; }); } please see the section on promisedocumentflushed in detecting and avoiding synchronous style flushes for more information on how to use the api.
Determining the dimensions of elements - Web APIs
if you need to know how much space the actual displayed content takes up, including padding but not including the border, margins, or scrollbars, you want to use the element.clientwidth and element.clientheight properties: how big is the content?
Detecting device orientation - Web APIs
lid #ccc; border-radius: 10px; } .ball { position: absolute; top : 90px; left : 90px; width : 20px; height: 20px; background: green; border-radius: 100%; } now, if we move our device, the ball will move accordingly: var ball = document.queryselector('.ball'); var garden = document.queryselector('.garden'); var output = document.queryselector('.output'); var maxx = garden.clientwidth - ball.clientwidth; var maxy = garden.clientheight - ball.clientheight; function handleorientation(event) { var x = event.beta; // in degree in the range [-180,180] var y = event.gamma; // in degree in the range [-90,90] output.innerhtml = "beta : " + x + "\n"; output.innerhtml += "gamma: " + y + "\n"; // because we don't want to have the device upside down // we constrain the x...
Index - Web APIs
WebAPIIndex
1106 element.clientwidth api, cssom view, needsmarkupwork, property, reference the element.clientwidth property is zero for inline elements and elements with no css; otherwise, it's the inner width of an element in pixels.
Multi-touch interaction - Web APIs
nt2 = i; } if (point1 >=0 && point2 >= 0) { // calculate the difference between the start and move coordinates var diff1 = math.abs(tpcache[point1].clientx - ev.targettouches[0].clientx); var diff2 = math.abs(tpcache[point2].clientx - ev.targettouches[1].clientx); // this threshold is device dependent as well as application specific var pinch_threshhold = ev.target.clientwidth / 10; if (diff1 >= pinch_threshhold && diff2 >= pinch_threshhold) ev.target.style.background = "green"; } else { // empty tpcache tpcache = new array(); } } } touch start handler the touchstart event handler caches touch points to support 2-touch gestures.
VisualViewport - Web APIs
for an <iframe>, visual viewport metrics like visualviewport.width always correspond to layout viewport metrics like document.documentelement.clientwidth.
Basic scissoring - Web APIs
canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { paragraph.innerhtml = "failed to get webgl context.
Boilerplate 1 - Web APIs
</canvas> css body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } javascript function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl...
Hello GLSL - Web APIs
{ gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl...
Hello vertex attributes - Web APIs
new float32array([0.0]), gl.static_draw); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } window.addeventlistener("beforeunload", cleanup, true); function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl...
Raining rectangles - Web APIs
th - rect.size[0]), gl.drawingbufferheight ]; rect.velocity = 1.0 + 6.0*math.random(); rect.color = getrandomvector(); gl.clearcolor(rect.color[0], rect.color[1], rect.color[2], 1.0); function getrandomvector() { return [math.random(), math.random(), math.random()]; } } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl...
Scissor animation - Web APIs
gl.drawingbufferheight ]; // random velocity between 1.0 and 7.0 velocity = 1.0 + 6.0*math.random(); color = getrandomcolor(); gl.clearcolor(color[0], color[1], color[2], 1.0); } } function getrandomcolor() { return [math.random(), math.random(), math.random()]; } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl...
Textures from code - Web APIs
r(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0, 0.0]), gl.static_draw); gl.vertexattribpointer(0, 2, gl.float, false, 0, 0); } function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl...
Adding 2D content to a WebGL context - Web APIs
const fieldofview = 45 * math.pi / 180; // in radians const aspect = gl.canvas.clientwidth / gl.canvas.clientheight; const znear = 0.1; const zfar = 100.0; const projectionmatrix = mat4.create(); // note: glmatrix.js always has the first argument // as the destination to receive the result.
Window.innerWidth - Web APIs
WebAPIWindowinnerWidth
usage notes if you need to obtain the width of the window minus the scrollbar and borders, use the root <html> element's clientwidth property instead.
Border-image generator - CSS: Cascading Style Sheets
{ elem.style.left = e.clientx - offsetleft + 'px'; elem.style.top = e.clienty - offsettop + 'px'; }; elem.addeventlistener('mousedown', dragstart, false); }; var previewcontrol = function previewcontrol() { var dragging = false; var valuex = null; var valuey = null; var dragstart = function dragstart(e) { if (e.button !== 0) return; valuex = e.clientx - preview.clientwidth; valuey = e.clienty - preview.clientheight; dragging = true; document.addeventlistener('mousemove', mousedrag); }; var dragend = function dragend(e) { if (e.button !== 0 || dragging === false) return; document.removeeventlistener('mousemove', mousedrag); dragging = false; }; var mousedrag = function mousedrag(e) { inputslidermanager.setvalue('preview-width', e...