ResizeObserverEntry.borderBoxSize - Web APIs
the array is necessary to support elements that have multiple fragments, which occur in multi-column scenarios. each object in the array contains two properties: blocksize the length of the observed element's border box in the block dimension. ...
...n, or width. inlinesize the length of the observed element's border box in the inline dimension. for boxes with a horizontal writing-mode, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height. note: for more explanation of writing modes and block and inline dimensions, read handling different text directions. ...
...ize the length of the observed element's border box in the inline dimension. for boxes with a horizontal writing-mode, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height. note: for more explanation of writing modes and block and inline dimensions, read handling different text directions. ...
...And 2 more matches

MoveResize - Archive of obsolete content
moving a popup once a popup is open, it can be moved using the popup's moveto method. void moveto(in long left, in long top); the left argument is the horizontal screen position and the top argument is the vertical screen position. this method will change the left and top attributes to match the supplied arguments, so if these attributes are persisted the values will be restored when the window is displayed again. ...
...than the available space on the screen; in this situation, the menu may be moved such that it will fit on screen. for instance, instead of appearing below the menu label, the menu popup might appear above the label. you can see this effect in a xul application by moving a window near the bottom of the screen and clicking a menu or button that has a menu. ...
...d of appearing below the menu label, the menu popup might appear above the label. you can see this effect in a xul application by moving a window near the bottom of the screen and clicking a menu or button that has a menu. if a popup is still too large, it will be resized to fit on the screen. ...
...tion by moving a window near the bottom of the screen and clicking a menu or button that has a menu. if a popup is still too large, it will be resized to fit on the screen. arrows will appear on the ends of the menu to allow a user to scroll through the items. a popup can be resized manually using the popup's sizeto method. ...

GlobalEventHandlers.onresize - Web APIs
the onresize property of the globaleventhandlers interface is an eventhandler that processes resize events. the resize event fires after the window has been resized. syntax window.onresize = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. ...
... the onresize property of the globaleventhandlers interface is an eventhandler that processes resize events. the resize event fires after the window has been resized. syntax window.onresize = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. ...
...operty of the globaleventhandlers interface is an eventhandler that processes resize events. the resize event fires after the window has been resized. syntax window.onresize = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. ...
...ction expression. the function receives a focusevent object as its sole argument. examples window size logger <p>resize the browser window to fire the <code>resize</code> event.</p> <p>window height: <span id="height"></span></p> <p>window width: <span id="width"></span></p> const heightoutput = document.queryselector('#height'); const widthoutput = document.queryselector('#width'); function resize() { heightoutput.textcontent = window.innerheight; widthoutput.textcontent = window.innerwidth; } window.onresize = resize; specification specification status comment html living standardthe definition of 'onresize' in that specification. living standard ...

resizer.element - Archive of obsolete content
...
... ...
... ...

resizeafter - Archive of obsolete content
« xul reference home resizeafter type: one of the values below this attribute indicates which element to the right or below the splitter should be resized when the splitter is repositioned. closest the element immediately to the right or below the splitter resizes. farthest the element that is the farthest away from the splitter to the right or below the splitter resizes. grow the elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size. flex the closest flexible element resizes. ...
... the right or below the splitter resizes. farthest the element that is the farthest away from the splitter to the right or below the splitter resizes. grow the elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size. flex the closest flexible element resizes. ...

resizer.type - Archive of obsolete content
...
... ...

mozbrowserresize
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserresize event is fired when a browser <iframe> viewport is resized in some way. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. ...
...a custom object. details the details property returns an anonymous javascript object with the following properties: width a number representing the new width of the <iframe> viewport, in device pixels. height a number representing the new height of the <iframe> viewport, in device pixels. ...

MozBeforeResize - Archive of obsolete content
general info specification mozilla specific interface event bubbles no cancelable no target window default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...

resizebefore - Archive of obsolete content
« xul reference home resizebefore type: one of the values below this attribute indicates which element to the left or above the splitter should be resized when the splitter is repositioned. closest the element immediately to the left or above the splitter resizes. farthest the element that is the farthest away from the splitter to the left or above the splitter resizes. flex the closest flexible element resizes. ...

resizer.dir - Archive of obsolete content
« xul reference home dir type: one of the values below the direction that the window is resized. left resized to the left. right resized to the right. top resized up. bottom resized down. bottomstart resized down and toward the start of the line (toward the left for left-to-right locales, toward the right for right-to-left locales). bottomend resized down and toward the end of the line (toward the right for left-to-right locales, toward the left for right-to-left locales). bottomleft resized down and to the left. bottomright resized down and to the right. topleft resized up and to the left. topright resized up and to the right. see also dir ...

ResizeObserver.disconnect() - Web APIs
the disconnect() method of the resizeobserver interface unobserves all observed element or svgelement targets. syntax resizeobserver.disconnect(); parameters none. return value void. exceptions none. examples btn.addeventlistener('click', () => { resizeobserver.disconnect(); }) specifications specification status comment resize observerthe definition of 'disconnect()' in that specification. editor's draft initial definition. ...

SVGElement: resize event - Web APIs
the resize event is fired when an svg document is being resized. this event is only applicable to outermost svg elements and is dispatched after the resize operation has taken place. this basically implements the standard resize dom event. bubbles no cancelable no interface svgevent event handler property onresize examples svgelem.addeventlistener('resize', () => { console.log('svg resized.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'event changes in svg2' in that specification. candidate recommendation initial definition ...

Window.resizeTo() - Web APIs
the window.resizeto() method dynamically resizes the window. syntax window.resizeto(width, height) parameters width an integer representing the new outerwidth in pixels (including scroll bars, title bars, etc). height an integer value representing the new outerheight in pixels (including scroll bars, title bars, etc). example this function resizes the window so that it takes up one quarter of the available screen. see the screen.availwidth and screen.availheight properties. function quarter() { window.resizeto( window.screen.availwidth / 2, window.screen.availheight / 2 ); } specification specification status comment css object model (cssom) view modulethe definition of 'window.resizeto()' in that specification. working draft ...

Index - Web APIs
eventtarget() api, constructor, dom, dom events, eventtarget the eventtarget() constructor creates a new eventtarget object instance. 1275 eventtarget.addeventlistener() api, accessouterdata, dom, detecting events, event handlers, event listener, eventtarget, javascript, method, passingdata, receiving events, reference, addeventlistener, attachevent, events, mselementresize the eventtarget method addeventlistener() sets up a function that will be called whenever the specified event is delivered to the target. 1276 eventtarget.attachevent() no summary! 1277 eventtarget.dispatchevent() api, dom, dom element methods, gecko, method dispatches an event at the specified eventtarget, (synchronously) invoking the affected eve...
...nt, property, reference the onpointerup property of the globaleventhandlers mixin is an eventhandler that processes pointerup events. 1536 globaleventhandlers.onreset api, dom, event handler, globaleventhandlers, property, reference the onreset property of the globaleventhandlers mixin is an eventhandler that processes reset events. 1537 globaleventhandlers.onresize api, dom, event handler, globaleventhandlers, property, reference, onresize the onresize property of the globaleventhandlers interface is an eventhandler that processes resize events. 1538 globaleventhandlers.onscroll api, event handler, globaleventhandlers, html dom, property, reference the onscroll property of the globaleventhandlers mixin is an eventhandler that ...
...el. 2606 mutationevent api, deprecated, interface, mutationevent, reference, events the mutationevent interface provides event properties that are specific to modifications to the document object model (dom) hierarchy and nodes. 2607 mutationobserver api, dom, dom reference, interface, mutationobserver, needscontent, needsupdate, reference, mutation, observers, resize the mutationobserver interface provides the ability to watch for changes being made to the dom tree. it is designed as a replacement for the older mutation events feature which was part of the dom3 events specification. 2608 mutationobserver.mutationobserver() api, changes, constructor, dom, dom changes, dom reference, dom tree, mutation observer api, mutationobserver, observ...
...And 23 more matches

cursor - CSS: Cascading Style Sheets
wed the requested action will not be carried out. grab something can be grabbed (dragged to be moved). grabbing something is being grabbed (dragged to be moved). resizing & scrolling all-scroll something can be scrolled in any direction (panned). bug 275174: on windows, all-scroll is the same as move. ...
...not be carried out. grab something can be grabbed (dragged to be moved). grabbing something is being grabbed (dragged to be moved). resizing & scrolling all-scroll something can be scrolled in any direction (panned). bug 275174: on windows, all-scroll is the same as move. col-resize the item/column can be resized horizontally. ...
...something is being grabbed (dragged to be moved). resizing & scrolling all-scroll something can be scrolled in any direction (panned). bug 275174: on windows, all-scroll is the same as move. col-resize the item/column can be resized horizontally. often rendered as arrows pointing left and right with a vertical bar separating them. row-resize the item/row can be resized vertically. often rendered as arrows pointing up and down with a horizontal bar separating them. ...
...And 19 more matches

Splitters - Archive of obsolete content
« previousnext » we'll now look at how to add splitters to a window. splitting a box there may be times when you want to have two sections of a window where the user can resize the sections. an example is the mozilla browser window, where you can change the size of the sidebar panel by dragging the bar in-between the two frames. you can also hide the sidebar by clicking the notch. splitter element this feature is accomplished using an element called a splitter. it creates a skinny bar between two sections which allows these sections to be resized. you can place a splitter anywhere you want and it will allow resizing of the elements that come before it and the elements that come after it in the same box. when a splitter is placed inside a horizontal box, it will allow resiz...
...it will allow resizing of the elements that come before it and the elements that come after it in the same box. when a splitter is placed inside a horizontal box, it will allow resizing horizontally. when a splitter is placed inside a vertical box, it will allow resizing vertically. the syntax of a splitter is as follows: <splitter id="identifier" state="open" collapse="before" resizebefore="closest" resizeafter="closest"> the attributes are as follows: id the unique identifier of the splitter. state indicates the state of the splitter. set this to open, the default, to have the split panel initially open, or set it to collapsed to have one of the panels shrunk down (collapsed) and the other occupying all of the space. collapse this indicates which side of ...
...) and the other occupying all of the space. collapse this indicates which side of the panel should collapse when the splitter notch (or grippy) is clicked or set into a collapsed state. set this to before for the element before the splitter, or after for the element after the splitter. if you set this to none, which is also the default, the splitter grippy does not collapse when clicked. resizebefore when the splitter is dragged, the elements to the left (or above) resize. this attribute indicates which element should resize. set this to closest to have the element immediately to the left of the splitter resize. set this to farthest to have the element that is the farthest away from the splitter to the left resize. (the first element in the box). the default value is closest. resiz...
...And 11 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
: 1.6em; } .ui-dropdown-list > div:hover { background: #3490d2; color:#fff; border-radius: 2px; cursor: pointer; } /* * color picker tool */ body { width: 100%; height: 100%; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } body[data-dragging="true"] { } /** * resize handle */ .resize-handle { width: 10px; height: 10px; background: url("images/resize.png") center center no-repeat; position: absolute; bottom: 0; right: 0; } [data-resize='both']:hover { cursor: nw-resize !important; } [data-resize='width']:hover { cursor: w-resize !important; } [data-resize='height']:hover { cursor: n-resize !important; } /** * main container */ #container { ...
... var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { document.removeeventlistener("mousemove", slidermotion); setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mouseup", slideend); document.addeventlistener("mousemove", slidermotion); }); var slideend = function slideend(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }; var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta =...
...unction(e) { e.stoppropagation(); }); } var color = uicolorpicker.color; var hsvcolor = uicolorpicker.hsvcolor; var uicomponent = (function uicomponent() { function makeresizable(elem, axis, callback, endfunc) { var valuex = 0; var valuey = 0; var action = 0; var callback = typeof callback === "function" ? ...
...And 8 more matches

Using Spacers - Archive of obsolete content
rent platforms may have special requirements on the user interface. if adding support for multiple languages, the text for one language may require more room than another. applications that need to support multiple platforms and languages usually have their windows laid out with lots of space to allow for this. some platforms and user interface toolkits provide components that are smart enough to resize and re-position themselves to fit the needs of the user. (java uses layout managers for example.) xul provides the capability for elements to position and resize automatically. as we've seen, the find files window has appeared in a size that will fit the elements inside it. each time we add something, the window gets bigger. xul uses a layout system called the 'box model'. we'll talk more about t...
...for now, just know that the window element is a type of box. before we get into detail about boxes, we'll introduce another xul element that is useful for layout, the spacer. a spacer is very simple and only requires one attribute, which will be explained in a moment. ...
...f box. before we get into detail about boxes, we'll introduce another xul element that is useful for layout, the spacer. a spacer is very simple and only requires one attribute, which will be explained in a moment. the simplest spacer looks like the following: <spacer flex="1"/> a spacer is used to place blank space into a window. its most useful ability is that it can grow or shrink as the user resizes the window. this would be how one would place buttons on the right or bottom of a window and have them stick to the right or bottom edge no matter what size the window is. as we'll see, you can use a series of spacers to create a number of layout effects. in this syntax above, the spacer has one attribute, called flex. this is used to define the flexibility of the spacer. in the case above, the ...
...And 6 more matches

splitter - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element which should appear before or after an element inside a container. when the splitter is dragged, the sibling elements of the splitter are resized. if a grippy is placed inside the splitter, one sibling element of the splitter is collapsed when the grippy is clicked. more information is available in the xul tutorial. ...
...utes | properties | methods | related ] an element which should appear before or after an element inside a container. when the splitter is dragged, the sibling elements of the splitter are resized. if a grippy is placed inside the splitter, one sibling element of the splitter is collapsed when the grippy is clicked. more information is available in the xul tutorial. attributes collapse, resizeafter, resizebefore, state, substate style classes tree-splitter examples <!-- this bar has some styling associated with it. ...
...ppy is placed inside the splitter, one sibling element of the splitter is collapsed when the grippy is clicked. more information is available in the xul tutorial. attributes collapse, resizeafter, resizebefore, state, substate style classes tree-splitter examples <!-- this bar has some styling associated with it. the vbox is used to hold the .png image that a user clicks on to resize the search bar.--> <splitter tooltiptext="resize the search box" oncommand="alert('the splitter was dragged')"> <vbox id="example_vbox" /> </splitter> attributes collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked. if this attribute is not specified, the splitter will not cause a collapse. you should put a grippy elemen...
...And 6 more matches

Index - Archive of obsolete content
code snippets non-modal notification and further interaction with users 173 autocomplete code snippets, form fill, satchel no summary! 174 bookmarks code snippets, developing mozilla, extensions, places no summary! 175 boxes code snippets make the box style="display: block" and the wrapping behavior will occur when the box is resized: 176 canvas code snippets canvas, code snippets, graphics no summary! 177 cookies add-ons, code snippets, cookies, extensions no summary! 178 customizing the download progress bar no summary! 179 delayed execution code snippets no summary! 180 dialogs and prompts add-ons, code snippets, extensions...
... summary! 1038 readonly xul attributes, xul reference no summary! 1039 ref xul attributes, xul reference no summary! 1040 rel xul attributes, xul reference no summary! 1042 removeelement xul attributes, xul reference no summary! 1043 reserved dom, deprecated, events no summary! 1044 resizeafter xul attributes, xul reference no summary! 1045 resizebefore xul attributes, xul reference no summary! 1046 resizer.dir xul attributes, xul reference no summary! 1047 resizer.element xul attributes, xul reference no summary! 1048 resizer.type xul, xul attribute no summary! 1049 right ...
...tes, xul reference, popup no summary! 1066 showpopup xul attributes, xul reference no summary! 1067 size xul attributes, xul reference no summary! 1068 sizemode xul attributes, xul reference this attribute is used to save and restore the state of a window (together with the persist attribute) and for css styles (e.g. to hide the resizer grippy on maximized windows). 1069 sizetopopup xul attributes, xul reference no summary! 1070 smoothscroll xul attributes, xul reference no summary! 1071 sort xul attributes, xul reference no summary! 1072 sortactive xul attributes, xul reference no summary! 1073 sortdirection xul attributes, xul r...
...And 5 more matches

Event reference
t being composed. compositionend the composition of a passage of text has been completed or canceled. view events event name fired when fullscreenchange an element was toggled to or from fullscreen mode. fullscreenerror it was impossible to switch to fullscreen mode for technical reasons or because the permission was denied. resize the document view has been resized. scroll the document view or an element has been scrolled. clipboard events event name fired when cut the selection has been cut and copied to the clipboard copy the selection has been copied to the clipboard paste the item from the clipboard has been pasted keyboard events...
... value change events broadcast checkboxstatechange hashchange input radiostatechange readystatechange valuechange uncategorized events invalid message message open show less common and non-standard events abortable fetch events event name fired when abort a dom request is aborted, i.e. using abortcontroller.abort(). ...
...nt push api a pushsubscription has expired. ratechange event html5 media the playback rate has changed. readystatechange event html5 and xmlhttprequest the readystate attribute of a document has changed. repeatevent timeevent svg a smil animation element is repeated. reset event dom l2, html5 a form is reset. resize uievent dom l3 the document view has been resized. resourcetimingbufferfull performance resource timing the browser's resource timing buffer is full. result speechrecognitionevent web speech api the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app. ...
...And 5 more matches

Manipulating documents - Learn web development
ill convert to strings automatically when you want to print them to the screen. in this example we will solve a common problem — making sure your application is as big as the window it is viewed in, whatever size it is. this is often useful in situations like games, where you want to use as much of the screen area as possible to play the game in. to start with, make a local copy of our window-resize-example.html and bgtile.png demo files. open it and have a look — you'll see that we've got a <div> element covering a small part of the screen, which has got a background tile applied to it. we'll use that to represent our app ui area. first of all, let's grab a reference to the div, and then grab the width and height of the viewport (the inner window, where your document is displayed) and ...
...t ones: div.style.width = winwidth + 'px'; div.style.height = winheight + 'px'; save and try refreshing your browser — you should now see the div become as big as your viewport, whatever size of screen your are using. if you now try resizing your window to make it bigger, you'll see that the div stays the same size — we are only setting it once. ...
...style.width = winwidth + 'px'; div.style.height = winheight + 'px'; save and try refreshing your browser — you should now see the div become as big as your viewport, whatever size of screen your are using. if you now try resizing your window to make it bigger, you'll see that the div stays the same size — we are only setting it once. ...
...And 3 more matches

Border-radius generator - CSS: Cascading Style Sheets
er: 3px solid #c60; background: #fff; position: relative; } .radius { width: 50%; height: 50%; border: 1px solid #ccc; display: none; position: absolute; z-index: 1; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .handle { width: 16px; height: 16px; position: absolute; z-index: 2; } .handle-top-left { top: -12px; left: -12px; cursor: se-resize; background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat; } .handle-top-right { top: -12px; right: -12px; cursor: sw-resize; background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat; } .handle-bottom-right { bottom: -12px; right: -12px; cursor: nw-resize; background: url("https://mdn.mozillademos.org/files/...
...ckground: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat; } .handle-top-right { top: -12px; right: -12px; cursor: sw-resize; background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat; } .handle-bottom-right { bottom: -12px; right: -12px; cursor: nw-resize; background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat; } .handle-bottom-left { bottom: -12px; left: -12px; cursor: ne-resize; background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat; } .radius-container { position: absolute; display : block; z-index: 1; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* top left */ #t...
... var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mousemove", slidermotion); }); document.addeventlistener("mouseup", function(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }); var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity ...
...And 3 more matches

Color picker tool - CSS: Cascading Style Sheets
ound-color: #379b4a; cursor: pointer; } /* * color picker tool */ body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; box-shadow: 0 0 5px 0 #999; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } /** * resize handle */ .resize-handle { width: 10px; height: 10px; background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat; position: absolute; bottom: 0; right: 0; } [data-resize='both']:hover { cursor: nw-resize !important; } [data-resize='width']:hover { cursor: w-resize !important; } [data-resize='height']:hover { cursor: n-resize !important; } [data-hid...
...1px solid rgba(255, 255, 255, 0.3); } #canvas .sample:hover { cursor: move; } #canvas .sample[data-active='true']:after { content: ""; position: absolute; background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; width: 100%; height: 12px; top: -12px; z-index: 2; } #canvas .sample:hover > * { cursor: pointer; display: block !important; } #canvas .sample .resize-handle { display: none; } #canvas .sample .pick { width: 10px; height: 10px; margin: 5px; background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat; position: absolute; top: 0; left: 0; display: none; } #canvas .sample .delete { width: 10px; height: 10px; margin: 5px; background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat; ...
... var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { document.removeeventlistener("mousemove", slidermotion); setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mouseup", slideend); document.addeventlistener("mousemove", slidermotion); }); var slideend = function slideend(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }; var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta =...
...And 3 more matches

Notes on HTML Reflow - Archive of obsolete content
from the network, or some script manipulates the dom. an incremental reflow is targeted at a single frame in the frame hierarchy. during an incremental reflow, a frame can assume that none of the constraints computed "from above" (for example, available width) have changed; instead, something "within" the frame has changed, which may have bottom-up impact to the frame hierarchy. resize, when the containing boundary for the frame hierarchy changes. during a resize reflow, the frame can assume that none of the frame's internal state (e.g., a text frame's text) has changed; instead, a top-down change in the layout constraints has occurred. stylechange, when the entire frame hierarchy must be traversed to recover from stylistic change; for example, a change in the default font si...
...xt frame's text) has changed; instead, a top-down change in the layout constraints has occurred. stylechange, when the entire frame hierarchy must be traversed to recover from stylistic change; for example, a change in the default font size. dirty, when a container frame has consolidated several individual incremental reflows that have been targeted at its child frames. ...
... a style change reflow is performed when the presentation shell's global stylistic information is changed; e.g., addition or removal of a style sheet, a change to the shell's default font. a dirty reflow is never performed directly from the presentation shell. ...
...And 2 more matches

Index - Archive of obsolete content
no summary! 307 readonly xul attributes, xul reference no summary! 308 ref xul attributes, xul reference no summary! 309 rel xul attributes, xul reference no summary! 311 removeelement xul attributes, xul reference no summary! 312 reserved dom, deprecated, events no summary! 313 resizeafter xul attributes, xul reference no summary! 314 resizebefore xul attributes, xul reference no summary! 315 resizer.dir xul attributes, xul reference no summary! 316 resizer.element xul attributes, xul reference no summary! 317 resizer.type xul, xul attribute no summary! 318 right ...
...ibutes, xul reference, popup no summary! 335 showpopup xul attributes, xul reference no summary! 336 size xul attributes, xul reference no summary! 337 sizemode xul attributes, xul reference this attribute is used to save and restore the state of a window (together with the persist attribute) and for css styles (e.g. to hide the resizer grippy on maximized windows). 338 sizetopopup xul attributes, xul reference no summary! 339 smoothscroll xul attributes, xul reference no summary! 340 sort xul attributes, xul reference no summary! 341 sortactive xul attributes, xul reference no summary! 342 sortdirection xul attributes, xul refere...
...tems xul, xul popup guide the menuitem element has a number of features beyond just being a label for a menu command. 603 menumodification xul, xul popup guide menus have a number of methods which may be used to add and remove items. 604 menus xul, xul popup guide a menu provides a list of commands that the user can carry out. 605 moveresize xul, xul popup guide no summary! 606 openclose xul, xul popup guide popups and menus may be opened and closed by a script. 607 panels xul, xul popup guide a panel is a popup which can support any type of content. it is used when supporting temporary popup displays for selecting or entering data. 608 popupevents xul, xul popup guid...
...And 2 more matches

Element Positioning - Archive of obsolete content
axheight this specifies the maximum height that the element can be. the values are always measured in pixels. you can also use the corresponding css properties, min-width, min-height, max-width and max-height. these properties are only useful for flexible elements. by setting a maximum height, for example, a stretchy button will only grow to a certain maximum height. you will still be able to resize the window beyond that point but the button will stop growing in size. the box the button is inside will also continue to grow, unless you set a maximum height on the box also. if two buttons are equally flexible, normally both will share the amount of extra space. if one button has a maximum width, the second will still continue to grow and take all of the remaining space. if a box has a maxim...
...or textboxes so that the font can change and the textboxes would always be a suitable size, even if the font is very large. example 6 the description element is constrained to have a maximum width of 50 pixels. the text inside will wrap to the next line, after fifty pixels. our find files dialog let's add some of these styles to the find files dialog. ...
...it will be drawn as if it extends past the edge of the window. notice in the image that the text input has grown to extend to the full size of the window. box packing let's say you have a box with two child elements, both of which are not flexible, but the box is flexible. ...
...And 2 more matches

Window - Web APIs
these are documented in the javascript reference and the dom reference. in a tabbed browser, each tab is represented by its own window object; the global window seen by javascript code running within a given tab always represents the tab in which the code is running. that said, even in a tabbed browser, some properties and methods still apply to the overall window that contains the tab, such as resizeto() and innerheight. generally, anything that can't reasonably pertain to a tab pertains to the window instead. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectra...
...rint dialog to print the current document. window.prompt() returns the text entered by the user in a prompt dialog. window.requestanimationframe() tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. window.requestidlecallback() enables the scheduling of tasks during a browser's idle periods. window.resizeby() resizes the current window by a certain amount. window.resizeto() dynamically resizes window. window.scroll() scrolls the window to a particular place in the document. window.scrollby() scrolls the document in the window by the given amount. window.scrollbylines() scrolls the document by the given number of lines. window.scrollbypages() scrolls the current document by the speci...
...unt. window.scrollbylines() scrolls the document by the given number of lines. window.scrollbypages() scrolls the current document by the specified number of pages. window.scrollto() scrolls to a particular set of coordinates in the document. window.setimmediate() executes a function after the browser has finished other heavy tasks window.setresizable() toggles a user's ability to resize a window. window.sizetocontent() sizes the window according to its content. window.stop() this method stops window loading. window.updatecommands() updates the state of commands of the current chrome window (ui). methods implemented from elsewhere eventtarget.addeventlistener() register an event handler to a specific event type on the window. eventtarget.dispatchevent() used to ...
...And 2 more matches

Border-image generator - CSS: Cascading Style Sheets
dding: 0 0 20px 0; font-family: "segoe ui", arial, helvetica, sans-serif; /*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/ border: 1px solid #eee; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } body[data-move='x'] { cursor: w-resize !important; } body[data-move='y'] { cursor: s-resize !important; } #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } [data-draggable='true']:hover { cursor: move; } [data-draggable='true']:hover > * { cursor: default; } /******************************************************************************/ /*******************...
...x solid rgba(0, 0, 0, 0.3); position: absolute; } #subject .guideline:hover { background-color: #f00; } #subject .guideline[data-active] { background-color: #f00; z-index: 10; } #subject .guideline[data-axis='x'] { width: 1px; height: 100%; top: -1px; } #subject .guideline[data-axis='y'] { width: 100%; height: 1px; left: -1px; } #subject .guideline[data-axis='x']:hover { cursor: w-resize; } #subject .guideline[data-axis='y']:hover { cursor: s-resize; } #subject .relative { position: relative; font-size: 12px; } #subject .tooltip, #subject .tooltip2 { width: 40px; height: 20px; line-height: 20px; font-size: 12px; text-align: center; position: absolute; opacity: 0.5; transition: opacity 0.25s; } #subject .tooltip { background: #eee; border-radius: 2px; border: 1...
... #subject .tooltip2[data-info='left'] { bottom: -30px; right: -20px; } /* preview */ #preview { width: 30%; height: 50%; background-color: #fff; text-align: center; overflow: hidden; position: absolute; z-index: 10; left: 60%; top: 15%; border-radius: 2px; border-image-width: 20px; border-image-repeat: round; border-style: solid; box-shadow: 0 0 3px 0 #bababa; } #preview .resize-handle { width: 10px; height: 10px; background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat; position: absolute; bottom: 0; right: 0; } #preview .resize-handle:hover { cursor: nw-resize; } /* * general controls menu */ #general-controls { padding: 10px 30px; background-color: #fff; opacity: 0.95; color: #888; /*border-radius: 2px;*/ box-sha...
...And 2 more matches

Space Manager Detailed Design - Archive of obsolete content
frame * * @param aframe the frame used to identify the region. ...
... resize the rectangular region associated with aframe by the specified * deltas. the height change always applies to the bottom edge or the existing * rect. you specify whether the width change applies to the left or right edge * * returns ns_ok if successful, ns_error_invalid_arg if there is no region * tagged with aframe */ enum affectededge {leftedge, rightedge}; nsresult resizerectregion(nsiframe* aframe, nscoord adeltawidth, nscoord adeltaheight, affectededge aedge = rightedge); /** * offset the region associated with aframe by the specified amount. * * returns ns_ok if successful, ns_error_invalid_arg if there is no region * tagged with aframe */ nsresu...
...on is tagged with a frame * * @param aframe the frame used to identify the region. ...
...espace); /** * resize the rectangular region associated with aframe by the specified * deltas. the height change always applies to the bottom edge or the existing * rect. you specify whether the width change applies to the left or right edge * * returns ns_ok if successful, ns_error_invalid_arg if there is no region * tagged with aframe */ enum affectededge {leftedge, rightedge}; nsresult resizerectregion(nsiframe* aframe, nscoord adeltawidth, nscoord adeltaheight, affectededge aedge = rightedge); /** * offset the region associated with aframe by the specified amount. * * returns ns_ok if successful, ns_error_invalid_arg if there is no region * tagged with aframe */ nsresult offsetregion(nsif...

Trees - Archive of obsolete content
« previousnext » xul provides a way to create tabular or hierarchical lists using a tree. the tree one of the more complex elements in xul is the tree. a tree may be used to display rows of text in columns. it can be used with rows either in a flat list or arranged into a hierarchy. a tree also allows the user to rearrange, resize and hide individual columns. some examples of trees include the list of messages in a mail application, or the bookmarks window in mozilla. in some ways, a tree has some similarities with the listbox. both can be used to create tables of data with multiple rows and columns, and both may contain column headers. the tree also supports nested rows, whereas the listbox does not. however, listboxes may contain any type of content, whereas trees may only...
...wing sections. there are also two elements used to define the columns to be displayed in the tree. tree this is the outer element of a tree. treecols this element is a placeholder for a set of treecol elements. treecol this is used to declare a column of the tree. by using this element, you can specify additional information about how the data in the columns are sorted and if the user can resize the columns. you should always place an id attribute on a column, as mozilla uses the ids to identify the columns when rearranging and hiding them. this is no longer required in mozilla 1.8 and later, but it is still a good idea to use ids on columns. treechildren this contains the main body of the tree where the individual rows of data will be displayed. example tree with two columns exampl...
... the columns flexible if your tree is flexible, so that the columns stretch as the tree does. in this example, the second column will be approximately twice as wide as the first column. all of the columns should be placed directly inside a treecols element. in this case we haven't specified a view to supply the tree's data, so we'll only see column headers and an empty tree body. you may have to resize the window to see anything since there isn't any data to display. since the tree has been marked as flexible, the body will stretch to fit the available space. making a tree flexible is quite commonly done, as it is often the case that the data in the tree is the most significant information displayed, so it makes sense to make the tree grow to fit. however, you may specify a specific number of r...
...the second column will appear twice as wide due to the larger flexibility. a single row has been added to demonstrate what the table would look like with a row. in a real implementation, the rows would be added by a script as the search was performed, or a custom view would be created to hold t...

Table Reflow Internals - Archive of obsolete content
h reflows it children, etc. the reflowee returns a reflow status which indicates if it is complete, and thus not have to continue (split) breaking status (in the case of some inline frames) if there is truncation (it can't fit in the space and can't split). this is just a convience mechanism. kinds of reflows initial - reflowee's first reflow must be of this type (reflower's responsibility). resize - reflowee gets a change in available space only. similar to initial, except it can reoccur. incremental - has a reflow path (tree) where each node has a command with a target frame, reflow command types are: dirty - something changed inside a target (e.g. it gains, loses children) style changed - a target changed stylisticly (recall, size is a style property) content changed - a target's conten...
...ctual heights of its rows and cells from the pass 2 reflow. if the table has a style height, it allocates extra height to its row groups, rows and cells. in each pass, row groups reflow rows which reflow cells which reflow cell blocks. ...
...s if the table is already balanced, pass 1 constrains the width (like a normal pass 2) based on the current column widths. the pass 2 will get skipped if the table doesn't need to rebalance. nested table reflowed with an unconstrained width (i.e. an ancestor is doing a pass 1 reflow) will only do a pass 1 reflow on its children outer table caches last avail width and avoids reflowing children if resize reflow is the same as previous table caches max element, preferred widths in case they are requested and it isn't rebalanced cell caches prior avail width. if this doesn't change, the row may not have to reflow the cell table incremental reflow outer table is a target when a caption is added or removed (dirty) or the table or caption margin changes (style changed). caption is a target when it c...
...low list which the reflower owns. when the reflower's continuation gets reflowed, it takes c and its siblings as children and reflows them. if the reflowee is complete, truncated (it didn't fit), not at the top of page, the reflower should put the reflowee on its overflow list and return an incomplete status. intro to paginated reflow special assumptions there are only initial and (possibly) resize reflows. incremental and style change reflows are not allowed. multiple resize reflows may be necessary (e.g. a child is truncated and gets reflowed on a subsequent page) but they should not change the available width from the last time. multiple resize reflows may require special handling if a frame split previously. it may need to "pull up" children from a continuation. table paginated reflo...

Visual Viewport API - Web APIs
nch zoom level of the device? current browsers vary in how they handle this. the visual viewport lets web developers solve this by positioning elements relative to what's shown on screen. to access a window's visual viewport, you can obtain a visualviewport object from the window.visualviewport property. the object includes a set of properties describing the viewport. it also adds two events, onresize and onscroll, that fire whenever the visual viewport changes. these events allow you to position elements relative to the visual viewport that would normally be anchored to the layout viewport. accessing the api window.visualviewport read only a read-only reference to the window's visualviewport object. if this property doesn't exist, the api is unsupported. interfaces visualviewport ...
...nchored to the layout viewport. accessing the api window.visualviewport read only a read-only reference to the window's visualviewport object. if this property doesn't exist, the api is unsupported. interfaces visualviewport represents the visual viewport for a given window. a window's visualviewport object provides information about the viewport's position and size, and receives the resize and event:visualviewport:scroll events you can onitor to know when chances occur to the window's viewport. example the code below is based on the sample the specification, though it adds a few things that make it function better. it shows a function called viewporthandler(). when called it queries the offsetleft and height properties for values it uses in a css translate() method. you invoke t...
...(). when called it queries the offsetleft and height properties for values it uses in a css translate() method. you invoke this function by passing it to both event calls. one thing that may not be clear in this example is the use of the pendingupdate flag and the call to requestanimationframe(). the pendingupdate flag serves to prevent multiple invocations of the transfrom that can occur when onresize and onscroll fire at the same time. using requestanimationframe() ensures that the transform ocurrs before the next render. let pendingupdate = false; function viewporthandler(event) { if (pendingupdate) return; pendingupdate = true; requestanimationframe(() => { pendingupdate = false; var layoutviewport = document.getelementbyid('layoutviewport'); // since the bar is positi...
...style.left and style.top if you // use width: 100% instead. bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' }) } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specification. draft initial definition. ...

Block formatting context - Developer guides
border:1px solid black; padding: 10px; } exclude external floats in the following example, we are using display:flow-root and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new bfc must not overlap the margin box of any floats in the same block formatting context as the element itself. ...
... display:flow-root and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new bfc must not overlap the margin box of any floats in the same block formatting context as the element itself. ...
... note that flexbox is a more efficient way to implement muti columns layout in morden ...
... note that flexbox is a more efficient way to implement muti columns layout in morden css. margin colla...

CSS3 - Archive of obsolete content
this module . support for icons, defined by the css icon property simultaneously with the new icon value of the css content property. at risk: due to insufficient browser support, standardization of the icon property and the icon value may be postponed to css4. support for the css outline-offset property giving more control on the position of the outline. support for the css resize property allowing web authors to control if and how elements should be resized. support for the css text-overflow property defining how text overflows, if needed. at risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for <string> values may be postponed to the next iteration of this module. the ability to define the hotspot of a c...
...text-overflow property defining how text overflows, if needed. at risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for <string> values may be postponed to the next iteration of this module. the ability to define the hotspot of a cursor as well as the new none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out, extending the cursor property. the ability to specify the sequential navigation order (that is the tabbing order ) using the css nav-index, nav-up, nav-right, nav-left, nav-down properties. at risk: due to insufficient browser support, standardization of the navigation properties may be postponed to the next iteration...
...l notation allowing the use of part of the page as image. the cross-fade() functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images. the conic-gradient() and repeating-conic-gradient() functional notation describing a new type of gradient. the image-rendering property that allow to define how resize of the object should be handled. modules in the rewriting phase modules that are in the rewriting phase are outdated and require to be rewritten. the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. alternative syntaxes are tested and often implemented. css generated content module level 3 working draft abandoned modules ...

Features of a Window - Archive of obsolete content
a.org/keymaster/gatekeeper/there.is.only.xul"> in this example, the window will open with a width of 400 pixels and a height of 450 pixels. even if there aren't enough elements to fit this size, the window will still open at this size and there will be blank space in the remaining area. if there are too many elements, the window will not be large enough to fit the elements. the user will have to resize the dialog. you have to be careful when specifying a width and height that the window is not too small or too big. you should also consider that a user might be using a different theme or locale. note that you must specify both the width and the height. if you only specify one, the other will be set to 0. to have the window set its size automatically, leave both the width and height out. the wi...
... window is not too small or too big. you should also consider that a user might be using a different theme or locale. note that you must specify both the width and the height. if you only specify one, the other will be set to 0. to have the window set its size automatically, leave both the width and height out. the width and height only specify the initial size of the window. the user may still resize the window to another size, assuming that the window is resizable. other window features the flags below can be passed as part of the third argument to the window.open function. your operating system may not support all of them. you can also use any of the pre-existing flags, which you should find in a javascript reference. you may disable a feature by setting it to 'no', for example 'dialog=no...
...opened. dependent the window will always appear relative to the window that opened it. if the window that opened the new window is moved, the new window is moved relative to it. dialog the window is a dialog box, which may appear differently. modal the dialog is modal. the window that opened the modal window can't be interacted with until the modal window is closed. resizable the user can resize the window. see also window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name. if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">window.open() next, we'll look at how to open secondary dialogs. « previousnext » ...

nsIAccessibleEvent
0016 a menu from the menu bar has been closed. event_menupopup_start 0x001a 0x0017 a pop-up menu has been displayed. event_menupopup_end 0x001b 0x0018 a pop-up menu has been closed. event_capture_start 0x001c 0x0019 a window has received mouse capture. event_capture_end 0x001d 0x001a a window has lost mouse capture. event_movesize_start 0x001e 0x001b a window is being moved or resized. event_movesize_end 0x001f 0x001c the movement or resizing of a window has finished. event_contexthelp_start 0x0020 0x001d a window has entered context-sensitive help mode. event_contexthelp_end 0x0021 0x001e a window has exited context-sensitive help mode. event_dragdrop_start 0x0022 0x001f an application is about to enter drag-and-drop mode. event_dragdrop_end 0x0023 0x0020...
... event_hyperlink_number_of_anchors_changed 0x0052 0x004e the number of anchors associated with this hyperlink object has changed. event_hyperlink_selected_link_changed 0x0053 0x004f the hyperlink selected stat...
... event_dom_destroy 0x0002 an object has been destroyed. event_dom_significant_change 0x0003 an object's properties or content have changed significantly so that the type of object has really changed, and therefore the accessible should be destroyed or recreated. event_asynch_sho...

HTMLBodyElement - Web APIs
to be called when the pageshow event is raised. windoweventhandlers.onpopstate is an eventhandler representing the code to be called when the popstate event is raised. windoweventhandlers.onrejectionhandled an eventhandler representing the code executed when the rejectionhandled event is raised, indicating that a promise was rejected and the rejection has been handled. globaleventhandlers.onresize is an eventhandler representing the code to be called when the resize event is raised. windoweventhandlers.onstorage is an eventhandler representing the code to be called when the storage event is raised. windoweventhandlers.onunhandledrejection an eventhandler representing the code executed when the unhandledrejection event is raised, indicating that a promise was rejected but the rejection...
... the unload event is raised. specifications specification status comment html living standardthe definition of 'htmlbodyelement' in that specification. living standard technically, the event-related properties onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onlanguagechange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload, have been moved to windoweventhandlers. htmlbodyelement implements this interface. html 5.1the definition of 'htmlbodyelement' in that specification. recommendation html5the definition of 'htmlbodyelement' in that specification. recommendation the following properties are now obsolete: alink, bgcolor, background, link, text, and vlink. ...
...ion. recommendation html5the definition of 'htmlbodyelement' in that specification. recommendation the following properties are now obsolete: alink, bgcolor, background, link, text, and vlink. the following properties have been added: onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload. document object model (dom) level 2 html specificationthe definition of 'htmlbodyelement' in that specification. obsolete no change from document object model (dom) level 1 specification. document object model (dom) level 1 specificationthe definition of 'htmlbodyelement' in that specification. obsolete initial definition. ...

VisualViewport - Web APIs
urns the width of the visual viewport in css pixels. visualviewport.height read only returns the height of the visual viewport in css pixels. visualviewport.scale read only returns the pinch-zoom scaling factor applied to the visual viewport. events listen to these events using addeventlistener() or by assigning an event listener to the relevant oneventname property of this interface. resize fired when the visual viewport is resized. also available via the visualviewport.onresize property. scroll fired when the visual viewport is scrolled. also available via the visualviewport.onscroll property. examples hiding an overlaid box on zoom this example, taken from the visual viewport readme, shows how to write a simple bit of code that will hide an overlaid box (which might conta...
... this example, taken from the visual viewport readme, shows how to write a simple bit of code that will hide an overlaid box (which might contain an advert, say) when the user zooms in. this is a nice way to improve the user experience when zooming in on pages. a live sample is also available. var bottombar = document.getelementbyid('bottombar'); var viewport = window.visualviewport; function resizehandler() { if (viewport.scale > 1.3) bottombar.style.display = "none"; else bottombar.style.display = "block"; } window.visualviewport.addeventlistener('resize', resizehandler); simulating position: device-fixed this example, also taken from the visual viewport readme, shows how to use this api to simulate position: device-fixed, which fixes elements to the visual viewport. a l...
...o this by setting style.left and style.top if you // use width: 100% instead. bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way can result in the fixed element flickering during scrolling. specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specification. draft initial definition. ...

WebGL best practices - Web APIs
target systems to get a reliable estimate. now adjust all internal caching in the application (webglbuffers, webgltextures, etc.) to obey a maximum size, computed by this constant multiplied by the number of pixels covered by the current browser window. this requires estimating the number of bytes consumed by each texture, for example. the cap also must typically be updated as the browser window resizes, and older resources above the limit must be purged. keeping the application's vram usage under this cap will help to avoid out-of-memory errors and associated instability. consider rendering to a smaller backbuffer size a common (and easy) way to trade off quality for speed is rendering into a smaller backbuffer, and upscaling the result. consider reducing canvas.width and height and keeping...
...idth * devicepixelratio, this will cause moire artifacts with non-integer values of devicepixelratio, as is common with ui scaling on windows, as well as zooming on all platforms. instead, we can use non-integer values for css's top/bottom/left/right to fairly reliably 'pre-snap' our canvas to whole integer device coordinates. demo: https://jdashg.github.io/misc/webgl/device-pixel-presnap.html resizeobserver and 'device-pixel-content-box' on supporting browsers (chromium?), resizeobserver can be used with 'device-pixel-content-box' to request a callback that includes the true device pixel size of an element. this can be used to build an async-but-accurate function: window.getdevicepixelsize = window.getdevicepixelsize || async function(elem) { await new promise(fn_resolve => { cons...
...ice-pixel-content-box' on supporting browsers (chromium?), resizeobserver can be used with 'device-pixel-content-box' to request a callback that includes the true device pixel size of an element. ...

WebGL model view projection - Web APIs
* operator. the results view on jsfiddle at this point the w value of the transformed point is still 1.0. the cube still doesn't have any perspective. the next section will take this setup and modify the w values to provide some perspective. exercises shrink down the box using the scale matrix and position it in different places within clip space. try moving it outside of clip space. resize the window and watch as the box skews out of shape. add a rotatez matrix. divide by w an easy way to start getting some perspective on our model of the cube is to take the z coordinate and copy it over to the w coordinate. normally when converting a cartesian point to homogeneous it becomes (x,y,z,1), but we're going to set it to something like (x,y,z,z). in reality we want to make sure that ...
...ide is facing the camera) and occlusion culling using hidden-surface determination (removing polygons which can't be seen because they're entirely blocked by polygons that are closer to the lens). perspective projection matrix up to this point, we've built up our own 3d rendering setup, step by step. however the current code as we've built it has some issues. for one, it gets skewed whenever we resize our window. another is that our simple projection doesn't handle a wide range of values for the scene data. most scenes don't work in clip space. it would be helpful to define what distance is relevant to the scene so that precision isn't lost in converting the numbers. finally it's very helpful to have a fine-tuned control over what points get placed inside and outside of clip space. in the prev...
...ss and less in the scene. the objects are distorted much less by perspective and objects seem much closer to the camera aspectratio the scene's aspect ratio, which is equivalent to its width divided by its height. in these examples, that's the window's width divided by the window height. the introduction of this parameter finally solves the problem wherein the model gets warped as the canvas is resized and reshaped. nearclippingplanedistance a positive number indicating the distance into the screen to a plane which is perpendicular to the floor, nearer than which everything gets clipped away. this is mapped to -1 in clip space, and should not be set to 0. farclippingplanedistance a positive number indicating the distance to the plane beyond which geometry is clipped away. this is mapped to...

Window.innerHeight - Web APIs
l bar, if present. the value of innerheight is taken from the height of the window's layout viewport. the width can be obtained using the innerwidth property. syntax let intviewportheight = window.innerheight; value an integer value indicating the window's layout viewport height in pixels. the property is read only and has no default value. to change the width of the window, call one of its resize methods, such as resizeto() or resizeby(). usage notes to obtain the height of the window minus its horizontal scroll bar and any borders, use the root <html> element's clientheight() property instead. both innerheight and innerwidth are available on any window or any object that behaves like a window, such as a tab or frame. example assuming a frameset var intframeheight = window.innerheig...
... to get the outer height of a window, i.e. the height of the whole browser window, see window.outerheight. graphical example the following figure shows the difference between outerheight and innerheight. specification specification status comment css object model (cssom) view modulethe definition of 'window.innerheight' in that specific...
... will return the height of the frame viewport within the frameset var intframesetheight = parent.innerheight; // will return the height of the viewport of the closest frameset var intouterframesetheight = top.innerheight; // will return the height of the viewport of the outermost frameset fixme: link to an interactive demo here to change the size of a window, see window.resizeby() and window.resizeto(). to get the outer height of a window, i.e. the height of the whole browser window, see window.outerheight. graphical example the following figure shows the difference between outerheight and innerheight. specification specification status comment css object model (cssom) view modulethe definition of 'window.innerheight' in that specification. working draf...

aspect-ratio - CSS: Cascading Style Sheets
atio of the viewport. syntax the aspect-ratio feature is specified as a <ratio> value representing the width-to-height aspect ratio of the viewport. it is a range feature, meaning you can also use the prefixed min-aspect-ratio and max-aspect-ratio variants to query minimum and maximum values, respectively. examples the example below is contained in an <iframe>, which creates its own viewport. resize the <iframe> to see aspect-ratio in action. html <div id='inner'> watch this element as you resize your viewport's width and height. </div> css /* minimum aspect ratio */ @media (min-aspect-ratio: 8/5) { div { background: #9af; /* blue */ } } /* maximum aspect ratio */ @media (max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* exact aspect ratio, put it a...
...io */ @media (min-aspect-ratio: 8/5) { div { background: #9af; /* blue */ } } /* maximum aspect ratio */ @media (max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* exact aspect ratio, put it at the bottom to avoid override*/ @media (aspect-ratio: 1/1) { div { background: #f9a; /* red */ } } _example used iframe and dataurl to enable this iframe could resize html <label id="wf" for="w">width:165</label> <input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> <label id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { bac...
...bel id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> watch this element as you resize your viewport's width and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.onchange=h.oninput=function(){ outer.style.height=h.value+"px" hf.textcontent="height:"+h.value } result specifications specific...

Resizing background images with background-size - CSS: Cascading Style Sheets
by doing so, you can scale the image upward or downward as desired. tiling a large image let's consider a large image, a 2982x2808 firefox logo image. we want (for some reason likely involving horrifyingly bad site design) to tile four copies of this image into a 300x300-pixel element. to do this, we can use a fixed background-size value of 150 pixels. ...
... the corresponding side of the container. try resizing the example below to see this in action. html <div class="bgsizecontain"> <p>try resizing this element!</p> </div> css .bgsizecontain { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result cover the cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container. try resizing the example below to see this in action. html <div class="bgsizecover"> <p>try resizing this element!</p> </div> css .bgsize...
...ual to the corresponding size of the container. try resizing the example below to see this in action. ...

Browser detection using the user agent - HTTP
what you want to do for screen size is not slash off information on smaller screens. that will only annoy people because it will force them to use the desktop version. rather, try to have fewer columns of information in a longer page on smaller screens while having more columns with a shorter page on larger screen sizes. this effect can b...
...mic. the user can flip their mobile device on its side, changing the width and height of the page. or, there might be some weird flip-phone-like device thing in the future where flipping it out extends the screen. do not be the developer having a headache over how to deal with the flip-phone-like device thing. never be satisfied with your webpage until you can open up the dev tools side panel and resize the screen while the webpage looks smooth, fluid, and dynamically resized. the simplest way to do this is to separate all the code that moves content around based on screen size to a single function that is called when the page is loaded and at each resize event thereafter. if there is a lot calculated by this layout function before it determines the new layout of the page, then consider debounci...
...ges); } : function(){}; var destroymediaquery = iswebkit ? function(mq) { for (var i=0,len=mql.length|0; i<len; i=i+1|0) if (mql[i][0] === mq) mql.splice(i, 1); mq.removelistener(whenmediachanges); } : listentomediaquery; var orientationchanged = false; addeventlistener("orientationchange", function(){ orientationchanged = true; }, passive_listener_option); addeventlistener("resize", settimeout.bind(0,function(){ if (orientationchanged && !mediaqueryupdated) for (var i=0,len=mql.length|0; i<len; i=i+1|0) mql[i][1]( mql[i][0] ); mediaqueryupdated = orientationchanged = false; },0)); which part of the user agent contains the information you are looking for? as there is no uniformity of the different part of the user agent string, this is the tric...

Adding windows and dialogs - Archive of obsolete content
s block their parent window until action is taken on them. an alert window is an example of this. modal windows should be avoided when possible because they interrupt the user's browsing and can become annoying very quickly. this feature should only be used when there's no way to continue without having the user do something. never open modal windows at startup. resizable. indicates the user can resize the window or not. in general, windows should not be resizable unless they display dynamically generated content from a datasource, such as lists or trees that may need resizing to have a better view of the content. to open a new dialog, use the function window.opendialog, an extension of the open function. it allows you to send a set of optional parameters that can be used to communicate with ...
...u should avoid returning false, though, specially with the cancel button. dialogs in general should be easy to dismiss. your dialogs shouldn't have fixed dimensions because of potential localization problems. dialogs are sized to their contents and will generally work fine. however, there are cases where the dialog contents are generated or expanded dynamically by your code, and you'll need to resize them appropriately. the window.sizetocontent function is what you need in this case. input controls most additional xul windows and dialogs in extensions are some kind of input form. let's look into the most commonly used form elements and how to use them in your xul windows. there isn't much we need to add from what the xul tutorial explains, so go ahead and read the following sections: i...

In-Depth - Archive of obsolete content
complete list): none - (!important may be needed) will override the operating system default. use this when you want one or two controls to look different from the operating systems defaults. ...
...list): none - (!important may be needed) will override the operating system default. use this when you want one or two controls to look different from the operating systems defaults. ...

jspage - Archive of obsolete content
cument.id(o,r); }q.push(o);}o=o[l];}return(p)?new elements(q,{ddup:false,cash:!r}):null;};var e={html:"innerhtml","class":"classname","for":"htmlfor",defaultvalue:"defaultvalue",text:(browser.engine.trident||(browser.engine.webkit&&browser.engine.version<420))?"innertext":"textcontent"}; var b=["compact","nowrap","ismap","declare","noshade","checked","disabled","readonly","multiple","selected","noresize","defer"];var k=["value","type","defaultvalue","accesskey","cellpadding","cellspacing","colspan","frameborder","maxlength","readonly","rowspan","tabindex","usemap"]; b=b.associate(b);hash.extend(e,b);hash.extend(e,k.associate(k.map(string.tolowercase)));var a={before:function(m,l){if(l.parentnode){l.parentnode.insertbefore(m,l); }},after:function(m,l){if(!l.parentnode){return;}var n=l.nextsibling...
...ar b in c){this.cloneevents(d,b); }}else{if(c[a]){c[a].keys.each(function(e){this.addevent(a,e);},this);}}return this;}});element.nativeevents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.relatedtarget;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.haschild(c)); };element.events=new hash({mouseenter:{base:"mouseover",condition:a},mouseleave:{base:"mouseout",condition:a},mousewheel:{base:(browser.e...

Things I've tried to do with XUL - Archive of obsolete content
hat don't work (hopefully with explanations), and workarounds for both of the above. feel free to add your own xul experiences here. how do i use percentage-based height/width with xul? short answer: you can't easily, at least not yet. this means that creating any sort of visual display (not necessarily "ui"; my use case is for creating a calendar time display) that sizes sanely when the user resizes the window is unfortunately very difficult. (to add insult, xul layout code *explicitly* trims off '%' from width/height, thus treating it as pixels.) for reference, i'd like the following to give a vbox that resizes along with the window, with the green, red, and blue inside boxes always maintaining a 30%-20%-50% ratio to the height of the parent vbox. <vbox flex="1"> <box height="30%" flex="...
...ww.mozilla.org/docs/dom/domr...entheight.html); no equivalent exists for xul. enn: most people would use the box object width and height properties, or do you want something else? vlad: the boxobject width/height are the actual width and height of the box, regardless of the actual visible portion of the box (clipped by the window borders, for example). this is assuming no scrolling is going on. 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). you have no way of finding out what the clipped size is, so you can neve...

Adding more elements - Archive of obsolete content
"is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog. a spacer has been added in between each element to separate them. these spacers have been given an explicit width of 10 pixels each. you will notice that if the window is resized, the textbox grows but the other components do not. you will also notice that the label was removed. if you resize the window vertically, the elements do not change size. this is because they are inside horizontal boxes. in might be more appropriate if the find and cancel buttons always stayed along the bottom of the window. this is easy to do by adding a spacer in between the two horizontal box...
...the first spacer adds extra spacing in between the title label and the search criteria elements. it might look nicer if there was a border around the search criteria. there are two ways to do this. we could use the css border property or we could use the groupbox element. this first method would require that we se...

Box Model Details - Archive of obsolete content
y element. we've added them to buttons and textboxes, but we can also add them to spacers or boxes. in addition, the flex attribute can be applied to any element. example 1 : source view <hbox flex="1"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> in the example above, all three elements will resize themselves as they are all flexible. the two buttons indicate a minimum width of 100 pixels. the buttons will never be smaller than this size but they may grow larger. here the window should appear just over 200 pixels wide. that's enough for the two buttons. because all three elements are flexible, but they don't need any more room, the flexibility adds no extra space. as shown in the image,...
...abel="find"/> </vbox> </window> here, two vertical boxes are created, one for the textbox and the other for the check box and button. the left box has a flexiblity that is 3 times greater than the right one so it will always receive 3 times as much of the extra space when the window size is increased. the right box enforces a minimum width of 150 pixels. the textbox is flexible so it will resize as the window resizes. the textbox also enforces a minimum width of 100 pixels. the check box appears in the right box along with its label. just below the check box is a spacer. the spacer will grow and shrink but not exceed 30 pixels. the result is that the check box and the find button will be spaced apart from each other by some space of no more than 30 pixels. the second box has an alignment...

XUL Reference - Archive of obsolete content
opmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) t...
...d grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker da...

XUL accessibility guidelines - Archive of obsolete content
y that your application is functional and pleasant looking using user-defined font and color settings. do this by changing system display settings to an accessible theme (such as the high-contrast theme on windows, available via left-alt + left-shift + printscreen). confirm that text is emphasized correctly and that color is not used as a sole means to convey meaning. ensure that when windows are resized, the application adjusts gracefully. human computer interaction as you use an application you expect a certain amount of control and feedback. provide users with clear instruction and feedback, and allow users to correct errors. some users with disabilities have difficulties with quick responses. allow users adequate time to perform tasks. instruction provide users with help documentation. e...
... pass fail system defaults system settings are maintained. system settings are not maintained. color color alone is not used to convey meaning and sufficient contrast exists between font color and background color. color alone is used to convey meaning, or font and background color do not provide sufficient contrast. flex visual elements and containers resize gracefully. visual elements and containers do not resize gracefully. human computer interaction checkpoint pass fail instruction help documentation is provided including a description of keyboard shortcuts. help documentation is not provided or is incomplete. alerts alerts are displayed using the alert scripting function or the notificationbox ...

Other form controls - Learn web development
is 2. wrap specifies how the control wraps text. the values are soft (the default value), which means the text submitted is not wrapped but the text rendered by the browser is wrapped; hard (the cols attribute must be specified when using this value), which means both the submitted and rendered texts are wrapped, and off, which stops wrapping. controlling textarea resizability the ability to resize a <textarea> is controlled with the css resize property. its possible values are: both: the default — allows resizing horizontally and vertically. horizontal: allows resizing only horizontally. vertical: allows resizing only vertically. none: allows no resizing. block and inline: experimental values that allow resizing in the block or inline direction only (this varies depending on the d...
... horizontal: allows resizing only horizontally. vertical: allows resizing only vertically. none: allows no resizing. block and inline: experimental values that allow resizing in the block or inline direction only (this varies depending on the directionality of your text; read handling different text directions if you want to find out more.) play with the interactive example at the top of the resize reference page for a demonstration of how these work. drop-down controls drop-down controls are a simple way to let users select from many different options without taking up much space in the user interface. html has two forms of drop down content: the select box, and the autocomplete box. in both cases the interaction is the same — once the control is activated, the browser displays a list ...

Styling web forms - Learn web development
s, textarea:focus { background : rgba(0,0,0,.1); border-radius: 5px; } now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won't typically look the same using the defaults. tweaking the textareas <textarea> elements default to being rendered as an inline-block element. the two important things here are the resize and overflow properties. while our design is a fixed-size design, and we could use the resize property to prevent users from resizing our multi-line text field, it is best to not prevent users from resizing a textarea if they so choose. the overflow property is used to make the field render more consistently across browsers. some browsers default to the value auto, while some default to the value...
...a if they so choose. the overflow property is used to make the field render more consistently across browsers. some browsers default to the value auto, while some default to the value scroll. ...

Drawing graphics - Learn web development
chieve this using the onload event handler, which will only be invoked when the image has finished loading. add the following block below the previous one: image.onload = function() { ctx.drawimage(image, 50, 50); } if you load your example in the browser now, you should see the image embeded in the canvas. but there's more! what if we want to display only a part of the image, or to resize it? we can do both with the more complex version of drawimage(). update your ctx.drawimage() line like so: ctx.drawimage(image, 20, 20, 185, 175, 50, 50, 185, 175); the first parameter is the image reference, as before. parameters 2 and 3 define the coordinates of the top left corner of the area you want to cut out of the loaded image, relative to the top-left corner of the image its...
... to cut out from the original image we loaded. parameters 6 and 7 define the coordinates at which you want to draw the top-left corner of the cut-out portion of the image, relative to the top-left corner of the canvas. parameters 8 and 9 define the width and height to draw the cut-out area of the image. in this case, we have specified the same dimensions as the original slice, but you could resize it by specifying different values. the final example should look like so: note: the finished code is available on github as 5_canvas_images.html. loops and animations we have so far covered some very basic uses of 2d canvas, but really you won't experience the full power of canvas unless you update or animate it in some way. after all, canvas does provide scriptable images! if you a...

JS_malloc
xt *cx, void *p, size_t oldbytes, size_t newbytes); char * js_strdup(jscontext *cx, const char *s); void js_free(jscontext *cx, void *p); name type description cx jscontext * pointer to a js context. if allocation fails, an error is reported in this context. p void * (js_realloc and js_free only) pointer to a previously allocated region of memory to resize or deallocate. nbytes size_t (js_malloc and js_realloc only) amount of space, in bytes, to allocate. s const char * (js_strdup only) pointer to a null-terminated string. s must not be null. description js_malloc allocates a region of memory nbytes in size. on success, js_malloc returns a pointer to the beginning of the region. as with the standard c function ma...
...re in the same runtime. implementation note: currently these four functions are implemented using the corresponding standard c functions. do not make assumptions based on this implementation detail. future releases may implement these functions differently. js_realloc code sample realloc is famously tricky to use correctly. here is an example of proper code: /* * `p` points to the memory area to resize. * we want to resize it to `newsize` bytes. */ void *p2 = js_realloc(cx, p, newsize); if (p2 == null) { if (p != null) js_free(cx, p); p = null; return null; } p = p2; see also mxr id search for js_malloc mxr id search for js_realloc mxr id search for js_strdup mxr id search for js_free ...

Gecko events
enu from the menu bar has been closed. is supported: yes event_menupopup_start a pop-up menu has been displayed. is supported: yes event_menupopup_end a pop-up menu has been closed. is supported: yes event_capture_start a window has received mouse capture. is supported: no event_capture_end a window has lost mouse capture. is supported: no event_movesize_start a window is being moved or resized. is supported: no event_movesize_end the movement or resizing of a window has finished is supported: no event_contexthelp_start a window has entered context-sensitive help mode is supported: no event_contexthelp_end a window has exited context-sensitive help mode is supported: no event_dragdrop_start an application is about to enter drag-and-drop mode is supported: yes event_dragdrop_en...
...event_table_row_reorder event_table_column_description_changed a table's column description changed. event_table_column_header_changed a table's column header changed. event_table_column_insert event_table_column_delete event_table_column_reorder event_window_activate event_window_deactivate event_window_destroy event_window_maximize event_window_minimize event_window_resize event_window_restore event_hyperlink_end_index_changed the ending index of this link within the containing string has changed. event_hyperlink_number_of_anchors_changed the number of anchors assoicated with this hyperlink object has changed. event_hyperlink_selected_link_changed the hyperlink selected state changed from selected to unselected or from unselected to selected. event_hyperte...

nsIDOMWindowInternal
if the name doesn't exist, then a new window is opened and the specified resource is loade...
...if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">open(in domstring url, i...

Edit Shape Paths in CSS - Firefox Developer Tools
editing. options can be accessed by activating the shape path editor with a regular click on the icon, and you can use the context menu (ctrl/cmd + click) to access additional functionality. circle() if the value of shape-outside is circle(), you are creating a circle basic shape. clicking on the shapes icon next to the value of circle() will highlight the shape, and also give you the option to resize the circle or move its center. if you move or resize the circle past the margin box, the edges become clipped by it. in the rules panel you can see the values for circle() change as you edit the shape. you can then copy these values back into your stylesheet to create the new, tweaked shape path. ellipse() if the value of shape-outside is ellipse() then you are using the ellipse basic shape.
...e the values for circle() change as you edit the shape. you can then copy these values back into your stylesheet to create the new, tweaked shape path. ellipse() if the value of shape-outside is ellipse() then you are using the ellipse basic shape. the ellipse() value works in much the same way as circle() in the shape path editor. an ellipse is a squashed circle and therefore has the option to resize horizontally and vertically when you click on the shapes icon. inset() if the value of shape-outside is inset() then you are using the inset basic shape, which enables the creation of offset values pulling the content in from the margin box. each side of the rectangle can be targeted after clicking on the shapes icon to activate the shape path editor, and dragging each side will update the v...

HTMLImageElement.height - Web APIs
d for an image of a clock using the srcset attribute. one is 200px wide and the other is 400px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 300px. <p>image height: <span class="size">?</span>px (resize to update)</p> <img src="/files/17373/clock-demo-200px.png" alt="clock" srcset="/files/17373/clock-demo-200px.png 200w, /files/17374/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 300px"> javascript the javascript code looks at the height to determine the height of the image given the width at which it's currently drawn. var clockimage = document.querys...
...00px) 200px, 300px"> javascript the javascript code looks at the height to determine the height of the image given the width at which it's currently drawn. var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updateheight = event => { output.innertext = clockimage.height; }; window.addeventlistener("load", updateheight); window.addeventlistener("resize", updateheight); result this example may be easier to try out in its own window. specifications specification status comment html living standardthe definition of 'htmlimageelement.height' in that specification. living standard browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute...

HTMLImageElement.width - Web APIs
ed for an image of a clock using the srcset attribute. one is 200px wide and the other is 400px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 400px. ...
...ass="size">?</span>px (resize to update)</p> <img src="/files/16864/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 400px"> javascript the javascript code looks at the width to determine the width of the image at the moment. this is done in the window's load and resize event handlers, in order to always provide this information. var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updatewidth = event => { output.innertext = clockimage.width; }; window.addeventlistener("load", updatewidth); window.addeventlistener("resize", updatewidth); result this example may be easier to try out in its own window. specif...

Window.outerHeight - Web APIs
to get the inner height of a window, i.e. the height of the page being displayed, see window.innerheight. ...
... to get the inner height of a window, i.e. the height of the page being displayed, see window.innerheight. ...

Window.outerWidth - Web APIs
to get the inner width of a window, i.e. ...
... to get the inner width of a window, i.e. ...

Web APIs
olution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api interfaces this is a list of all the interfaces (that is, types of objects) that a...
...ts rtcstatsicecandidatepairstate rtcstatsreport rtcstatstype rtctrackevent rtctrackeventinit radionodelist range readablebytestreamcontroller readablestream readablestreambyobreader readablestreambyobrequest readablestreamdefaultcontroller readablestreamdefaultreader relativeorientationsensor renderingcontext report reportingobserver reportingobserveroptions request requestdestination resizeobserver resizeobserverentry response rsahashedimportparams rsahashedkeygenparams rsaoaepparams rsapssparams s svgaelement svgaltglyphdefelement svgaltglyphelement svgaltglyphitemelement svgangle svganimatecolorelement svganimateelement svganimatemotionelement svganimatetransformelement svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svg...

Logical properties for sizing - CSS: Cascading Style Sheets
ing the example below to vertical-rl, as with the first example, to see the effect it has. i am using min-height in the first example and min-block-size in the second. max-width and max-height example finally you can use max-inline-size and max-block-size as logical replacements for max-width and max-height. try playing with the below example in the same way as before. logical keywords for resize the resize property sets whether or not an item can be resized and has physical values of horizontal and vertical. the resize property also has logical keyword values. using resize: inline allows resizing in the inline dimension and resize: block allow resizing in the block dimension. the keyword value of both for the resize property works whether you are thinking physically or logically. it se...
...ical. the resize property also has logical keyword values. using resize: inline allows resizing in the inline dimension and resize: block allow resizing in the block dimension. the keyword value of both for the resize property works whether you are thinking physically or logically. it sets both dimensions at once. try playing with the below example. note that currently the logical values for resize are only supported by firefox. ...

CSS Tutorials - CSS: Cascading Style Sheets
't written one single line of css? — this is for you. it explains the fundamental concepts of the language and guides you in writing basic stylesheets. using multiple backgrounds backgrounds are fundamental for nice styling: css allows you to set several of them on each box. this tutorial explains how they interact and how to achieve nice effects. scaling background images css allows you to resize images used as an element's background. this tutorial describes how to achieve this in a simple way. media queries the size of the screens, or the kind of devices like touchscreens or printed sheets vary greatly nowadays. media queries are the fundamental building blocks in achieving web sites that render everywhere in their best quality. understanding z-index controlling superposition of box...
...to use for people without too much experience. css multi-column layouts css3 introduces a new layout allowing you to easily define multiple columns in an element. though multi-column text is not that common on devices like screens, this is particularly useful on printed pages, or for indexes. css flexible boxes layouts this new layout allow you to give boxes flexibility, allowing them to be resized smoothly. it is a powerful way to describe complex interfaces. ...

object-fit - CSS: Cascading Style Sheets
you can alter the alignment of the replaced element's content object within the element's box using the object-position property. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax the object-fit property is specified as a single keyword chosen from the list of values below. ...
...e content box. if the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit. fill the replaced content is sized to fill the element’s content box. the entire object will completely fill the box. if the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit. none the replaced content is not resized. scale-down the content is sized as if none or contain were specified, whichever would result in a smaller concrete object size. formal definition initial valuefillapplies toreplaced elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax fill | contain | cover | none | scale-down examples setting object-fit for an image html <section> <h2>object-fit: fill<...

Used value - CSS: Cascading Style Sheets
es (e.g., background) are consistent with those of their component properties (e.g., background-color or background-size) and with position and float. note: the getcomputedstyle() dom api returns the resolved value, which may either be the computed value or the used value, depending on the property. ...
...then, css 2.1 introduced the distinct definition of used value. an element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. for css properties that don't depend on layout (e.g., display, font-size, or l...

The building blocks of responsive design - Progressive web apps (PWAs)
to fill them. in the snapshot example, we ended up with slightly different code: x-card:nth-child(1) video, x-card:nth-child(2) img { width: 100%; … } this is because in our case, we do in fact want the video and image to stretch to always fill their containers no matter what — a subtle but important difference from max-width — and therefore always be the same size. the video always resizes dynamically, but the screen captures taken from it do not, so upon resizing the screen it was possible to end up with a messy layout with different sized elements when using max-width: 100%, such as: media queries fluid grids are a great start, but you'll notice that at certain points (known as breakpoints) the layout starts to break down. at these points you'll want to change the layout to ...
...can swap out image src values with javascript depending on browser features, circumventing browser preloading issues. this is promising, but doesn't work very well across older browsers. picturefill a javascript-based polyfill for <picture>, which works nicely, but it does require a lot of custom markup. adaptive images a server-side solution, which records the viewport size in a cookie, then resizes images via a combination of php and .htaccess to a more appropriate size, if appropriate. this doesn't require markup or scripting, but has a number of limitations. svg and other vector graphics for some image requirements (not photographs, but icons and user interface elements are a good fit), a good solution is to use vector graphics. because vector images are calculated based on mathematic...

SVG Event Attributes - SVG: Scalable Vector Graphics
g supports that as an event attribute, following the same requirements as for html event attributes. the global event attributes are available on all svg elements. other event attributes are available on a case by case basis for each elements. all event attribute are not animatable. ...
...ndragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfocusin, onfocusout ...

SVG Attribute reference - SVG: Scalable Vector Graphics
ttributename animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedow...
...ndragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfocusin, onfocusout ...

panel - Archive of obsolete content
e width of the panel in pixels. optional. height number the height of the panel in pixels. optional. position object the position of the panel. optional. see panel's options for further details. focus boolean set to false to prevent taking the focus away when the panel is shown. hide() stops displaying the panel. resize(width, height) resizes the panel. parameters width : number the new width of the panel in pixels. height : number the new height of the panel in pixels. on(type, listener) registers an event listener with the panel. parameters type : string the type of event to listen for. listener : function the listener function that handles the event. removelistener(type, listener) unregisters a...

Boxes - Archive of obsolete content
wrapping contents in html you can use a div as a container and when the div changes size, the contents will wrap or adjust the layout. this does not happen with xul box (or hbox and vbox) by default. however, you can easily add this capability with a style change. ...

Label and description - Archive of obsolete content
tead of -pre-wrap. you may wish to use both for backward compatibility. <description style="white-space: pre;">i am your father's brother's nephew's cousin's former roommate. what's that make us? absolutely nothing!</description> text can also be made to wrap by inserting an <html:br/> element regardless of the css style, but this creates a hard-break that does not change as parent elements resize. <description>i am your father's brother's nephew's cousin's former roommate.<html:br/> what's that make us?<html:br/> absolutely nothing!</description> using labels as anchors its possible to make a label look and act like an html <a> tag: <label class="text-link" href="http://whatever.com" value="click here to go to whatever"/> "text-link" is a built-in, predefined class. note: if runni...

Sidebar - Archive of obsolete content
for this snippet to work, you have to declare mainwindow as in the previous code block then write: mainwindow.document.getelementbyid("sidebar-splitter").hidden = true; be aware that if you change the splitter's hidden attribute, you need to reset it to a safe value when your sidebar is closed, or replaced by another sideb...

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
n you want to include many options in your toolbar and you don't want it to be too cluttered. the other types, checkbox and radio are useful when you have buttons that change state when the user clicks on them. read more about this in the type attribute specification. keep in mind some users have small screens with low resolution. if you shrink the firefox window, you'll notice that the content resizes until it reaches its minimum size and begin to be cropped (cut), making ui elements disappear. you should test that your toolbar resizes gracefully and doesn't force firefox to crop content before it's strictly necessary. when you need something more elaborate than a button in your toolbar, you can use the toolbaritem element instead. this element is nothing more than a wrapper, so you can hav...

Adding sidebars - Archive of obsolete content
erent from other xul windows or overlays. one minor difference is that the xul sidebar should be defined using the « xul reference « root element instead of window or dialog. the load event is fired every time the sidebar is opened, and unload every time it's closed, so you can use those for initialization and clean up . another, more important difference to take into account is that users can resize the sidebar to their liking, and in most cases, the sidebar is going to be fairly narrow. you should design the content of your sidebar carefully, so that it is usable and appealing regardless of width. there are ways to limit the size boundaries of your sidebar with css or even disable resizing altogether, but none of those are good practices. forcing sidebars to have a fixed size can cause acce...

Events - Archive of obsolete content
archived event pages domsubtreemodifiedmozaudioavailablemozbeforeresizemozorientationcachedchargingchangechargingtimechangecheckingdischargingtimechangedownloadingerrorlevelchangenoupdateobsoleteprogressupdateready ...

Source code directories overview - Archive of obsolete content
specification from the independent jpeg group. js contains c code for tokenizing, parsing, interpretting and executing javascript scripts. this code originated in mozilla classic. l10n contains code for building localizations. layout contains the c interfaces and code for the layout engine. the layout engine decides how to divide up the "window real estate" among all the pieces of content. it resizes and aligns pieces of content according to the css1 and css2 (cascading style sheets), alignment styles and the content itself. it does not actually render the content; it just assigns different pieces of the window to various content items. this is known as "reflowing" the content. this code is also known by the names, "nglayout" and "gecko." lib contains c code used for reference by developers...

Making it into a static overlay - Archive of obsolete content
attribute to the statusbarpanel element: insertbefore. this attribute identifies another statusbarpanel element within statusbar before which our element should appear. thus it allows us to define the exact position of our element relative to the other statusbarpanel elements within statusbar. if insertbefore is omitted, the element will be added as the last child of statusbar, usually before the resizer grippy. we could instead have used an insertafter attribute to place the element after another. to use this overlay instead of our changes to navigator.xul we need to remove our changes, then add a reference to the overlay to the top of navigator.xul: ... <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" ...

Drag and Drop Example - Archive of obsolete content
obal/content/nsdraganddrop.js"/> <script src="chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> an additional script file dragboard.js is included which will contain the code we will write ourselves. the board will be created using a stack element. we'll use some style properties to set the width and height of the stack. a maximum size is also specified so that it doesn't resize when new elements are dragged onto it. the board will need to respond to the dragdrop event so that an element is created when the user drags onto it. <stack id="board" style="width:300px; height: 300px; max-width: 300px; max-height: 300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> the board only...

Block and Line Layout Cheat Sheet - Archive of obsolete content
owed has been given ns_unconstrainedsize as its available width in the nshtmlreflowstate. brs_unconstrainedheight this flag is set in the nsblockreflowstate constructor when the frame being reflowed has been given ns_unconstrainedsize as its available height in the nshtmlreflowstate. if set, ns_unconstrainedsize is passed to nslinelayout as the available height. brs_shrinkwrapwidth brs_needresizereflow related to brs_shrinkwrapwidth. set if we need to force a resize reflow when computing the final size. e.g., because...why? brs_isinlineincrreflow this flag is set in nsblockframe::reflow() if we detect that we're incrementally reflowing a linebox that contains inline frames. in this case, we can avoid some of the work that occurs during reflow. brs_nowrap this flag is set in the nsblo...

Layout System Overview - Archive of obsolete content
te your own code, document it. much of the existing code <b>isn’t very well documented</b>. in the process of figuring things out, try and document your discoveries. if you’d like to contribute, let us know. </p> there is one block that corresponds to the <p> element, and then a number of lines of text that correspond to the text. as the width of the block changes (due to the window being resized, for example) the length of the lines within it changes, and thus more or less text appears on each line. the block is responsible for managing the lines. note that lines may contain only inline elements, whereas block may contain both inline elements and other blocks.other layout models: xul in addition to managing css-defined formatting, the layout system provides a way to integrate other layo...

Overview of how downloads work - Archive of obsolete content
loading files in mozilla. one way is to encounter a file with an unknown content type, the other is to choose "save link target as" from the context menu of a link. things like file|save page as, save image as, etc. are all part of the second codepath. this document describes both codepaths (see below for the second one). click on the images to display them "stand-alone" in the browser, which may resize them to fit the browser window. downloads via the helper app service this diagram is an uml sequence diagram, and was created using dia. get the .dia file here: mozilla_downloads.dia downloads via "save link target as" and friends this diagram is an uml sequence diagram, and was created using dia. get the .dia file here: mozilla_downloads_path2.dia original document information autho...

New Skin Notes - Archive of obsolete content
a's are non-existant), suggest min-width:some-em-size; width: 88%; and max-width set to 95% or something like that. --callek i tried this, but it gets totally screwed up in ie for some reason. i'll try again, but can't guarantee this will be fixed for the initial upgrades. --dria took two days, but i finally got this sorted out. when the skin is updated on test/docs, editform textarea should be resizeable in all browsers. yay! --dria wordpress skins need footer information. -- dria when a page is redirected, need to say-so and what it was redirected from, (see document for an example of such.) this is only an issue in mw1.5 so far. devmo skin vs cavendish skin --callek i can probably pull-off this patch if needed (quickly), so dria or others do not have to hunt up "how". --callek add...

Space Manager High Level Design - Archive of obsolete content
ce manager indirectly to get the available space to reflow a child block or inline frame into. the block frame uses a helper method on the nsblockreflowstate class to do the actual computation of available space based on the data in the space manager. here is how it works for reflowing an inline frame within a block (this also occurs for reflowing a block frame and, partially, for preparing for a resize reflow). nsblockframe first frees all float information for the line that is being reflowed. getavailablespace is called on the blockreflowstate the blockreflowstate calls getavailablespace on its blockbanddata instance (which was setup in the blockreflowstate's constructor based on the space manager passed in and computed content area). blockbanddata then gets the band data from the space m...

Venkman Introduction - Archive of obsolete content
tion allows the user to type the first portion of a command, and press tab twice to see possible completions. if only one command matches, it will be auto-completed on the first tab. view customization venkman offers nearly complete control over the arrangement and display of views within the application. the debugger is built on top of an application framework that allows you to drag and drop, resize, and toggle all the available views, and even to create new views or modules for the debugger if you choose—though this latter is an advanced topic and a subject for a future article. to remove a view from venkman, simply click the close button at the top right of that view. when the view again becomes necessary—for example, when you open a source file from the loaded scripts view and want t...

Elements - Archive of obsolete content
for example, use the value 'xul:button' to create an element that is displayed like a button. the part before the colon is a namespace prefix so you must declare the xul namespace as well. not all tags have a unique display type. the following xul display types may be used: browser, button, checkbox, description, editor, grippy, iframe, image, label, menu, menuitem, menubar, progressmeter, radio, resizer, scrollbar, scrollbox, spacer, splitter, titlebar, treechildren and treecol. you may also use a number of html, mathml and svg tags. the 'display' attribute does not work unless the extends attribute is set, see bug bug 119389. in that case, put the value of the display attribute into the extends attribute. inheritstyle - the inheritstyle attribute indicates whether style rules from the documen...

dir - Archive of obsolete content
ents, the elements are placed left to right or top to bottom in the order they appear in the xul code. reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). for other elements, they are placed right to left or bottom to top. this is reverse of the order in which they appear in the xul code. see also resizer.dir ...

fixed - Archive of obsolete content
« xul reference home fixed type: boolean if true, the size of the column in the tree cannot be adjusted by the user. any splitter to either side will resize those columns while keeping the fixed column at a constant size. if false or not specified, the user can adjust the size of the column, typically by dragging the column header with the mouse. ...

sizemode - Archive of obsolete content
e type: one of the values below the state of the window. it can have one of the following values: maximized the window is maximized, and occupies the full size of the screen. normal the window appears in a normal state at the desired size. this attribute is used to save and restore the state of a window (together with the persist attribute) and for css styles (e.g. to hide the resizer grippy on maximized windows). note: when a window is minimized, the sizemode attribute is not updated. this is done so that if a window is closed while minimized, its persisted sizemode attribute wouldn't be minimized. setting this attribute does not change the window state. use window.maximize(), window.restore(), or window.minimize() to change the window state. to get the window state from ...

Attribute (XUL) - Archive of obsolete content
nd ontextentered ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabs...

moveToAlertPosition - Archive of obsolete content
...

OpenClose - Archive of obsolete content
opened, and functions the same as the corresponding argument for the openpopup method. in the following example, the popup is opened at horizontal positon 100 and vertical position 200: popup.openpopupatscreen(100, 200, false); note that if the supplied coordinates would cause the popup to be partially or completely off screen, the popup will be moved such that it is fully visible, and may be resized if necessary. closing a popup with the hidepopup method a popup menu is closed by the user pressing the escape key or by clicking somewhere outside the popup. for closing menupopups that use the menu tag, the button tag and the toolbarbutton tag, see closing menus above. to close a popup with a script, use the popup's hidepopup method. it takes no arguments. popup.hidepopup(); determining...

tree-splitter - Archive of obsolete content
...

Box Objects - Archive of obsolete content
ng css padding and borders. css margins are excluded. *note that x, y refers to the portion of the element that is just inside any borders, which is inconsistent with the other four boxobject position and size references, which include borders as part of the element. the values are always the position and sizes as currently displayed, so the values will be different if the element is moved or resized. for example, a flexible element will change in size and the box object dimensions will update accordingly. the following example shows this. example 1 : source view <button label="click me" oncommand="alert('the width is ' + this.boxobject.width);"/> you can use the width and height attributes of the element to specify the element's width and height, respectively. note that retrieving...

Document Object Model - Archive of obsolete content
rol whether an element is visible or not. we'll change the progress meter so that its initially hidden. also, we'll add an id attribute so that we can refer to it in a script to show and hide it. while we're at it, let's also hide the splitter and results tree as we only need to show them after a search is performed. <tree id="results" hidden="true" flex="1"> . . . <splitter id="splitbar" resizeafter="grow" hidden="true"/> <hbox> <progressmeter id="progmeter" value="50%" style="margin: 4px;" hidden="true"/> we've added the hidden attribute and set the value to true. this causes the element to be hidden when it first appears. next, let's add a function that is called when the find button is pressed. we'll put scripts in a separate file findfile.js. in the last section, we added...

Grids - Archive of obsolete content
<button label="browse..."/> </hbox> </row> </rows> </grid> notice in the image how the first column of elements containing the labels has only a single element in each row. the second column contains a box in its second row, which in turn contains two elements, a textbox and a button. you could add additional nested boxes or even another grid inside a single cell. if you resize the window of the last example, you will see that the textboxes resize, but no other elements do. this is because of the flex attributes added to the textboxes and the second column. the first column does not need to be flexible as the labels do not need to change size. the initial width of a column is determined by the largest element in the column. similarly, the height of a row is determined ...

List Controls - Archive of obsolete content
ell label="mary ellen" /> <listcell label="candle maker" /> </listitem> <listitem> <listcell label="roger" /> <listcell label="swashbuckler" /> </listitem> </listbox> in this example, the flex attribute is used to make the column flexible. this attribute will be described in a later section, but here it allows the column to fill all of the remaining space horizontally. you can resize the window to see that the column stretches as the window does. if you shrink the size horizontally, the labels on the cells will crop themselves automatically using an ellipsis. you can use the crop attribute on the cells or items set to the value none to disable the ellipsis. drop-down lists drop-down lists can be created in html using the select element. the user can see a single choice in a...

Localization - Archive of obsolete content
location" label="&results.location;" flex="2"/> <treecol id="size" label="&results.size;" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="mozilla"/> <treecell label="/usr/local"/> <treecell label="&bytes.before;2520&bytes.after;"/> </treerow> </treeitem> </treechildren> </tree> <splitter id="splitbar" resizeafter="grow" style="display: none;"/> <spacer class="titlespace"/> <hbox> <progressmeter id="progmeter" value="50%" style="display: none;"/> <spacer flex="1"/> <button id="find-button" label="&button.find;" oncommand="dofind()"/> <button id="cancel-button" label="&button.cancel;" oncommand="window.close();"/> </hbox> </vbox> </window> each text string has ...

More Tree Features - Archive of obsolete content
n headers around to rearrange the order of the columns. a user will also likely want to change the column widths. you can do this by placing a splitter element in between each treecol element. a small notch will appear in between each column header which the user may drag to change the width of a column. you can use the style class tree-splitter to hide the notch, although the column may still be resized. you can set a minimum or maximum width of a column using the minwidth or maxwidth attributes. you can set the hidden attribute on a column to true to have the column hidden by default. the user can choose to show the column by selecting it from the drop-down on the end of the header row. remembering state of columns as with all elements, the persist attribute can be used to save the sta...

Scrolling Menus - Archive of obsolete content
scrolling box with arrows. the arrowscrollbox can be used anywhere a regular box can be used. you don't have to use it in menus. it is always a vertical box and may contain any elements inside it. you could use it to implement a list when you don't want it to be a drop-down. ...

Tree Box Objects - Archive of obsolete content
ve number to go down and a negative number to go up. the scrollbypages() function scrolls by a number of pages and is called automatically when the user presses the page up or page down keys while the tree is focused. a page is equal to the number of visible rows. for example if the tree shows 10 rows at a time, a page will be equivalent to 10 rows. this is a convenient method since when the user resizes a flexible tree, the page size will grow and shrink, so you don't need to calculate the page size manually. this isn't too hard to calculate manually anyway since the tree box object also provides a getpagelength() function which returns the number of rows in a page. in the scrolling example above, getpagelength() would return four. note that in firefox 1.0 and mozilla 1.7 and earlier, the get...

Using Remote XUL - Archive of obsolete content
ts src attribute contains the url of the page being displayed in the iframe. we set this value to the mozilla.org home page by default so that page loads into the iframe when we first load the xul document. the iframe's flex attribute tells the browser to stretch the iframe to fill the space available to it. without it, the iframe's size would be a fixed default and wouldn't change when the user resized their window. [optionally show what this looks like] the value of the flex attribute determines the extent to which the element will stretch relative to other flexible elements. an element with a flex of "2" is twice as flexible as an element with a flex of "1", so the first element might show up as twice as wide as the second. in our case, the iframe will be the only flexible element in our d...

Accessibility/XUL Accessibility Reference - Archive of obsolete content
discovered accessibility issues yet: arrowscrollbox bbox box grippy hbox menuseparator overlay page script spacer splitter stringbundle stringbundleset vbox window elements not processed yet: action binding bindings broadcaster broadcasterset conditions content dialog dialogheader editor listcell member observes preference preferences prefpane prefwindow resizer richlistbox richlistitem resizer rule scrollbar scrollbox scrollcorner separator template textnode titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip treeseparator triple wizard wizardpage cases to revisit: ...

dialog - Archive of obsolete content
eldialog() return type: no return value cancels the dialog and closes it, similar to pressing the cancel button. centerwindowonscreen() return type: no return value centers the dialog on the screen. getbutton( type ) return type: button element returns the button element in the dialog corresponding to the given type. movetoalertposition() return type: no return value moves and resizes the dialog to a position and size suitable for an alert box. related elements dialogheader ...

elements - Archive of obsolete content
tor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner separator spacer splitter stack statusbar statusbarpanel stringbundle stringbundleset t tab tabbrowser tabbox tabpanel tabpanels tabs template textnode textbox titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolb...

treecol - Archive of obsolete content
ditable cell, a text field appears in which the user can edit the contents of the cell. the tree must also be marked as editable in order for this to work. individual treecell elements in the column may be marked editable="false" in order to disable editing. fixed type: boolean if true, the size of the column in the tree cannot be adjusted by the user. any splitter to either side will resize those columns while keeping the fixed column at a constant size. if false or not specified, the user can adjust the size of the column, typically by dragging the column header with the mouse. hidden type: boolean if set to true, the element is not displayed. this is similar to setting the css display property to 'none'. hideheader type: boolean set this to true to indicate that ...

window - Archive of obsolete content
e type: one of the values below the state of the window. it can have one of the following values: maximized the window is maximized, and occupies the full size of the screen. normal the window appears in a normal state at the desired size. this attribute is used to save and restore the state of a window (together with the persist attribute) and for css styles (e.g. to hide the resizer grippy on maximized windows). note: when a window is minimized, the sizemode attribute is not updated. this is done so that if a window is closed while minimized, its persisted sizemode attribute wouldn't be minimized. setting this attribute does not change the window state. use window.maximize(), window.restore(), or window.minimize() to change the window state. to get the window state from ...

Specifying Startup Chrome Window - Archive of obsolete content
a single instance main window by default, each time the user launches the application xulrunner opens the window specified by toolkit.defaultchromeuri. an application wishing to have only one main window should set the toolkit.singletonwindowtype preference and specify the windowtype attribute on the main application window. specifying window features by default, the main window is opened as a resizeable, non-dialog chrome window. this default can be changed by setting the toolkit.defaultchromefeatures preference. ...

Extentsions FAQ - Archive of obsolete content
defined? dom can only be accessed from the main thread. also, check out this site to learn how to set up a proxy: http://www.mozilla.org/projects/xpcom/proxies.html how to test a tab has been closed or not? you can capture the even of tab closing. you can get the tab that is being closed. this should be enough for you. is it possible to fix the size exactly at 16x16 pixels avoiding any resize? simply position the image and it will no longer be stretched to the size of the stack. <image left="0" top="0"> would seem to suffice. could there be more than two images to reflect more than two states?does the rules in the css file have to be in any particular order (if two rules match, which is chosen)? i have two states switching images in the tool bar and would have no problem implemen...

:-moz-system-metric(scrollbar-thumb-proportional) - Archive of obsolete content
this selector is intended for use mainly by theme developers. ...

:-moz-system-metric() - Archive of obsolete content
rt-forward) css pseudo-class will match an element if the computer's user interface includes a forward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-thumb-proportional)the :-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.:-moz-system-metric(touch-enabled)the :-moz-system-metric(touch-enabled) css pseudo-class will match an element if the device on which the content is being rendered offers a supported touch-screen interface.:-moz-system-metric(windows-default-theme)the :-moz-system-metric(windows-default-theme) css pseudo-class matches an element ...

Implementation Status - Archive of obsolete content
getting a few issues with in/out of range notifications. 282840; 303351; 333464; 333529; 352398; 8.2.1 choices supported 8.2.2 item supported 8.2.3 value supported 8.3.1 filename ...

Bounding volume collision detection with THREE.js - Game development
nding box, which shows the bounding box's shape, and can passed to the previously seen setfromobject method in order to have a bounding box matching the mesh. boxhelper is the recommended way to handle 3d collisions with bounding volumes in three.js. you will miss sphere tests, but the tradeoffs are well worth it. the advantages of using this helper are: it has an update() method that will resize its bounding box mesh if the linked mesh rotates or changes its dimensions, and update its position. it takes into account the child meshes when computing the size of the bounding box, so the original mesh and all its children are wrapped. we can easily debug collisions by rendering the meshes that boxhelper creates. by default they are created with a linebasicmaterial material (a three.js mate...

Scaling - Game development
n be scaled: no_scale — nothing is scaled. exact_fit — scale the canvas to fill all the available space both vertically and horizontally, without preserving the aspect ratio. show_all — scales the canvas, but keeps the aspect ratio untouched, so images won't be skewed like in the previous mode. there might be black stripes visible on the edges of the screen, but we can live with that. resize — creates the canvas with the same size as the available width and height, so you have to place the objects inside your game dynamically; this is more of an advanced mode. user_scale — allows you to have custom dynamic scaling, calculating the size, scale and ratio on your own; again, this is more of an advanced mode the other two lines of code in the preload() function are responsible for...

Sizing items in CSS - Learn web development
nd 20vw. the box contains a letter a, which has been given a font-size of 10vh. if you change the vh and vw values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. to see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <iframe> that contains the example shown above is its viewport). open the example, resize the browser window, and observe what happens to the size of the box and text. sizing things according to the viewport can be useful in your designs. for example, if you want a full-page hero section to show before the rest of your content, making that part of your page 100vh high will push ...

Flexbox - Learn web development
px; } article:nth-of-type(3) { flex: 2 200px; } this basically states "each flex item will first be given 200px of the available space. after that, the rest of the available space will be shared out according to the proportion units." try refreshing and you'll see a difference in how the space is shared out. the real value of flexbox can be seen in its flexibility/responsiveness — if you resize the browser window, or add another <article> element, the layout continues to work just fine. flex: shorthand versus longhand flex is a shorthand property that can specify up to three different values: the unitless proportion value we discussed above. this can be specified individually using the flex-grow longhand property. a second unitless proportion value — flex-shrink — that comes i...

Positioning - Learn web development
he distance the element should be from each of the containing element's sides. so in this case, we are saying that the absolutely positioned element should sit 30px from the top of the "containing element", and 30px from the left. (in this case, the "containing element" is the initial containing block. see the section below for more information) note: you can use top, bottom, left, and right to resize elements if you need to. try setting top: 0; bottom: 0; left: 0; right: 0; and margin: 0; on your positioned elements and see what happens! put it back again afterwards... note: yes, margins still affect positioned elements. margin collapsing doesn't, however. note: you can see the example at this point live at 3_absolute-positioning.html (see source code). positioning contexts which ele...

Styling links - Learn web development
thand instead of the individual properties. we set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top. we also use background-size to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes. this does however only work with ie 9 and later, so if you need to support those older browsers, you'll just have to resize the image and insert it as is. finally, we set some padding-right on the links to make space for the background image to appear in, so we aren't overlapping it with the text. a final word — how did we select just...

Advanced form styling - Learn web development
defaults. we've managed to get the basic look of the boxes looking pretty uniform and consisent. the datalist control is <input type="text"> anyway, so we knew this wouldn't be a problem. two things are slightly more problematic. first of all, the select's "arrow" icon that indicates it is a dropdown differs across browsers. it also tends to change if you increase the size of the select box, or resize in an ugly fashion. to fix this in our example we first used our old friend appearance: none to get rid of the icon altogether: select { -webkit-appearance: none; appearance: none; } we then created our own icon using generated content. we put an extra wrapper around the control, because ::before/::after don't work on <select> elements (this is because generated content is placed relative t...

Example - Learn web development
label span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } fieldset { width: 250px; box-sizing: border-box; margin-left: 136px; border: 1px solid #999; } button { margin: 20px 0 0 124px; } label { position: relative; } label em { position: absolute; right: 5px; top: 20px; } result ...

Example - Learn web development
sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1px solid #999; } input:focus, textarea:focus { /* to give a little highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ height: 5em; /* to allow users to resize any textarea vertically it works only on chrome, firefox and safari */ resize: vertical; } .button { /* to position the buttons to the same position of the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra magin represent the same space as the space between the labels and their text fields */ margin-left: .5em; } result ...

Add a hitmap on top of an image - Learn web development
15" href="page-3.html" alt="rectangle example" /> </map> step 3: make sure it works for everybody you aren’t done until you test image maps rigorously on many browsers and devices. try following links with your keyboard alone. try turning images off. if your image map is wider than about 240px, you’ll need to make further adjustments to make your website responsive. it's not enough to resize the image for small screens, because the coordinates stay the same and no longer match the image. if you must use image maps, you may want to look into matt stow's jquery plugin. alternatively, dudley storey demonstrates a way to use svg for an image map effect, along with a subsequent combined svg-raster hack for bitmap images. learn more <img> <map> <area> online image map editor advic...

Introduction to events - Learn web development
ndow, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the html document loaded in the current tab, or the entire browser window. there are many different types of events that can occur. for example: the user selects a certain element or hovers the cursor over a certain element. the user chooses a key on the keyboard. the user resizes or closes the browser window. a web page finishes loading. a form is submitted. a video is played, paused, or finishes. an error occurs. you can gather from this (and from glancing at the mdn event reference) that there are a lot of events that can be responded to. each available event has an event handler, which is a block of code (usually a javascript function that you as a programmer c...

Perceived performance - Learn web development
ake the page feel like it is still loading and is bad for perceived performance. content reflowing is especially bad for user experience when not initiated by user interaction. if some assets are going to be slower to load than others, with elements loading after other content has already been painted to the screen, plan ahead and leave space in the layout for them so that content doesn't jump or resize, especially after the site has become interactive. avoid font file delays font use can both help and harm user experience. selecting the right fonts is an art form, and can greatly improve the user experience. fonts can also harm user experience, especially if the fonts used need to be imported, and if the importing is not optimal, or if comic sans is used (kidding). flicker of unstyled text a...

Accessibility API cross-reference
an attribute) for a button that is "consistent". the button is inconsistent when it will act on a group of objects (such as a list of mail messages) that are not in the same state. n/a n/a sensitive don't speak for this item, it will take care of text-to-speech on its own selfvoicing n/a n/a object can be resized n/a resizable resizable this object and all of its ancestors are visible n/a showing showing this text object can only contain 1 line of text n/a single_line single_line tells accessibility aid "don't add event listener - this object doesn't generate any". for example, could be used ...

Accessibility Features in Firefox
bing through many links to get there. caret browsing allows you to move through web content one letter a time. you can even select web content and copy it to the clipboard. -- all with the keyboard detailed advanced javascript control: mozilla gives you the ability to fine tune what javascript is allowed to do while you browse. for example, you can disable functions that websites use to move or resize windows, or to remove your status bar, to disable right-click contextual menus, change the status bar text, etc. you can furthermore control javascript capabilities to remove scrollbars, toolbars or system buttons like minimize, close and maximize by editing the about:config related properties or by editing accordingly the user.js file as explained in this "disable other javascript window feature...

Debugging Frame Reflow
=0 a=8940,uc c=uc,uc cnt=885 text 02d7c130 d=0,0 block 02d7b210 d=8940,390 area 02d7afe4 d=9180,630 canvas 00b97c6c d=9180,4470 scroll 00b97ee0 d=9180,4470 scroll 00b97ee0 d=9180,4470 vp 00b97c30 d=9180,4470 the first line shows the reflow of the viewport (vp). this viewport has the address 00b97c30. it is the initial reflow: r=0. other reflow reasons are: incremental reflow resize reflow style change reflow dirty reflow the available width is 9180 twips. the available height is 4470 twips (a=9180,4470). the computed width is 9180 twips. the computed height is 4470 twips (c=9180,4470). the line count is 856 (cnt=856). below this is a line that reads: tblo 02d7b5f0 r=0 a=8940,uc c=0,0 cnt=870 here the uc shows that on initial reflow the available height for the outer ta...

Debugging Table Reflow
here especially how the maxelementsize (mes) and desired size are propagated. block reflow another way to debug the reflow process is implemented inside nsblockframe.cpp. ...

mozbrowserscrollareachanged
this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserscrollareachanged event is fired when the available scrolling area in the browser <iframe> changes. this can occur on resize and when the page size changes (while loading for example.) general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles...

Browser API
zbrowsermetachange sent when a <meta> elelment is added to, removed from or changed in the browser <iframe>'s content. mozbrowseropenwindow sent when window.open() is called within a browser <iframe>. mozbrowseropentab sent when a new tab is opened within a browser <iframe> as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.) mozbrowserresize sent when the browser <iframe>'s window size has changed. mozbrowserscroll sent when the browser <iframe> content scrolls. mozbrowserscrollareachanged sent when the available scrolling area in the browser <iframe> changes. this can occur on resize and when the page size changes (while loading for example.) mozbrowserscrollviewchange sent when asynchronous scrolling (i.e. apcz) starts or st...

MozScrolledAreaChanged
note: while you can poll the values of document.scrollwidth and document.scrollheight to watch for changes to the document size, reading these properties can trigger document reflow, which can make them computationally expensive. this event, introduced in gecko 1.9.2, is fired whenever either or both of these values change. ...

Chrome-only Events reference
sometimes in other privileged circumstances, eg. ua widgets). mozbeforepaintgecko 2.0 adds a new method for performing javascript controlled animations that synchronize not only with one another, but also with css transitions and smil animations being performed within the same window.mozscrolledareachangedthe mozscrolledareachanged event is fired when the document view has been scrolled or resized. smartcard-insertthe smartcard-insert event is fired when the insertion of a smart card has been detectedsmartcard-removethe smartcard-remove event is fired when the removal of a smart card has been detected. ...

Introduction to Layout in Mozilla
ern parent frame initializes child reflow state (available w, h); places child frame (x, y); invokes child’s reflow method child frame computes desired (w, h), returns via reflow metrics parent frame sizes child frame and view based on child’s metrics n.b. ...

What every Mozilla translator should know
o the bug: content type: patch mark the approval1.9.xxx with ? asking for approval (use the appropriate branch) if you get the approval you will see who_is_ap:approval1.8.xxx+ now, you can upload the changes approved to the cvs server. when you commit the changes you must write in the comment the bug number, what you have changed and who has approved. for example: bug 12345, fix typos and resize prefwindow, a=l10n as soon as you have committed, put the bug in fixed state and write fixed1.8.xxx in the keyword field you have to verify in the next build that the changes have been successful. if so, change the state of the bug to verified and write verified1.8.xxx in the keyword field tinderbox in tinderbox you can see the result of the build process. once you have made some changes ...

Basics
orm rather complicated expressions lim n → n ( 1 + 1 n ) n − e n , k = ∂ 2 z ∂ x 2 ∂ 2 z ∂ y 2 - ( ∂ 2 z ∂ x ∂ y ) 2 ( 1 + ( ∂ z ∂ x ) 2 + ( ∂ z ∂ y ) 2 ) 2 , write vector equations y = a ⁢ x + b , etc. notice how the mathematics appear in the main flow of text and respond as you resize the window. you can also make displayed equations, such as the following ones: x → maps to y = f n ⁡ ( x ) = ( 1 + 1 x n ) n ∫ a b f ( x ) d x = b - a 6 [ f ( a ) + 4 f ( a + b 2 ) + f ( b ) ] - ( b - a ) 5 4 ! 5 ! f ( 4 ) ( η ) , a ≤ η ≤ b | x | = { - x if x < 0 x otherwise you can also typeset 2d m...

PR_Realloc
size the size of the new memory block. returns an untyped pointer to the allocated memory, or if the allocation attempt fails, null. call pr_geterror() to retrieve the error returned by the libc function realloc(). description this function attempts to enlarge or shrink the memory block addressed by ptr to a new size. the contents of the specified memory remains the same up to the smaller of its old size and new size, although the new memory block's address can be different from the original address. ...

How to embed the JavaScript engine
y_functions[] = { js_fn("doit", doit, doit_minargs, 0), /* etc... */ js_fs_end }; js_fs_end terminates the table. and say: ok = js_definefunctions(cx, global, my_functions); how to call javascript functions from c first, create arguments for the call, here i create arguments with 2 items: // [spidermonkey 24] js::autovaluearray is not defined. // js::autovaluevector argv(cx); // argv.resize(2); js::autovaluearray<2> argv(cx); argv[0].setint32(1); argv[1].setint32(2); then call the function: // [spidermonkey 24] pass arguments length and the 'jsval *' pointer. // js_callfunctionname(cx, global, "func", 2, argv.begin(), rval.address()); js_callfunctionname(cx, global, "func", argv, &rval); example say the click event is for the top-most or focused ui element at position (x, y): ...

JS::AutoVectorRooter
st t &val) inserts an element val at the position specified by p. void infallibleappend(const t &v) appends an element v to the array. for use when space has already been reserved. void popback() pops an element from the array. t popcopy() pops an element from the array and returns it. bool growby(size_t inc) grows the array by inc. bool resize(size_t newlength) resizes the array to newlength. void clear() clears all elements. bool reserve(size_t newlength) reserves the array with newlength. js::mutablehandle<t> operator[](size_t i) returns to the i-th element as js::mutablehandle&lt;t&gt;. js::handle<t> operator[](size_t i) const returns to the i-th element as js::handle&lt;t&gt;. ...

Gecko Roles
mac os x) from which menus are selected by the user. role_scrollbar represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. for example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it role_sound represents a system sound, which is associated with various system events. role_cursor represents the system mouse pointer. role_caret represents the system caret. role_alert represents an alert or a condition that a user should be notified about. assistive technologies typically respond to the role by reading the entire onscreen contents of container...

Gecko states
state, they should check to see if state_offscreen is also set. if this second state is defined, then clients can communicate the information about the object to users. for example, a list box can have both state_invisible and state_offscreen set. in this case, the client application can communicate all items in the list to users. state_offscreen scrolled off state_sizeable the object can be resized. for example, a user could change the size of a window by clicking the border with a mouse and dragging the mouse. state_moveable indicates that the object can be moved. for example, a user can click on the titlebar for the object and drag the object to a new location. state_selfvoicing the object or child uses text-to-speech (tts) technology for description purposes. a speech-based accessib...

XPCOM hashtable guide
are packed structures, so there is no wasted space. some: hashtables are not packed structures; depending on the implementation, there may be significant wasted memory. in their implementation, hashtables take the key and apply a mathematical hash function to randomize the key and then use the hash to find the location in the hashtable. good hashtable implementations will automatically resize the hashtable in memory if extra space is needed, or if too much space has been allocated. when should i use a hashtable? hashtables are useful for sets of data that need swift random access; with non-integral keys or non-contiguous integral keys; or where items will be frequently added or removed. hashtables should not be used for sets that need to be sorted; very small datasets (le...

Detailed XPCOM hashtable guide
are packed structures, so there is no wasted space. some: hashtables are not packed structures; depending on the implementation, there may be significant wasted memory. in their implementation, hashtables take the key and apply a mathematical hash function to randomize the key and then use the hash to find the location in the hashtable. good hashtable implementations will automatically resize the hashtable in memory if extra space is needed, or if too much space has been allocated. when should i use a hashtable? hashtables are useful for sets of data that need swift random access; with non-integral keys or non-contiguous integral keys; or where items will be frequently added or removed. hashtables should not be used for sets that need to be sorted; very small datasets (le...

nsIAccessibleRole
the user. the role is used by xul:menubar or role="menubar". role_scrollbar 3 represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip 4 represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. for example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it. role_sound 5 represents a system sound, which is associated with various system events. role_cursor 6 represents the system mouse pointer. role_caret 7 represents the system caret. the role is supported for caret. role_alert 8 represents an alert or a condition that a user should be notified about. assistive technologies typically respond to the role by reading the entire on screen co...

nsIAccessibleStates
ck to see if state_offscreen is also set. if this second state is defined, then clients can communicate the information about the object to users. for example, a list box can have both state_invisible and state_offscreen set. in this case, the client application can communicate all items in the list to users. state_offscreen 0x00010000 scrolled off. state_sizeable 0x00020000 the object can be resized. for example, a user could change the size of a window by clicking the border with a mouse and dragging the mouse. state_moveable 0x00040000 the object can be moved. for example, a user can click on the titlebar for the object and drag the object to a new location. state_selfvoicing 0x00080000 the object or child uses text-to-speech (tts) technology for description purposes. a speech-based a...

nsIDOMEvent
ct 0x00004000 change 0x00008000 reset 0x00010000 submit 0x00020000 scroll 0x00040000 load 0x00080000 unload 0x00100000 xfer_done 0x00200000 abort 0x00400000 error 0x00800000 locate 0x01000000 move 0x02000000 resize 0x04000000 forward 0x08000000 help 0x10000000 back 0x20000000 text 0x40000000 alt_mask 0x00000001 control_mask 0x00000002 shift_mask 0x00000004 meta_mask 0x00000008 methods violates the xpcom interface guidelines deserialize() boolean deserialize(...

nsIDocShell
allowmetaredirects boolean attribute stating if refresh based redirects can be allowed. allowplugins boolean whether to allow plugin execution. allowsubframes boolean attribute stating if it should allow subframes (framesets/iframes) or not. allowwindowcontrol boolean specifies whether or not content is allowed to control the window (that is, to resize or move the window). default is true, which lets content control the window. apptype unsigned long the type of application that created this window. types are defined in constants. busyflags unsigned long current busy state for docshell. valid states are defined in constants. read only. canexecutescripts boolean whether this docshell can execute scrip...

nsIWebBrowserChrome
status_script 1 flag for setstatus() status_script_default 2 flag for setstatus() status_link 3 flag for setstatus() chrome_default 1 value for the chromeflags attribute. chrome_window_borders 2 value for the chromeflags attribute. chrome_window_close 4 value for the chromeflags attribute. chrome_window_resize 8 value for the chromeflags attribute. chrome_menubar 16 value for the chromeflags attribute. chrome_toolbar 32 value for the chromeflags attribute. chrome_locationbar 64 value for the chromeflags attribute. chrome_statusbar 128 value for the chromeflags attribute. chrome_personal_toolbar 256 value for the chromeflag...

NS_CStringGetMutableData
« xpcom api reference summary the ns_cstringgetmutabledata function gives the caller write access to the string's internal buffer. #include "nsstringapi.h" pruint32 ns_cstringgetmutabledata( nsacstring& astring, pruint32 adatalength, char** adata ); parameters astring [in] a nsacstring instance to modify. adatalength [in] the number of characters to resize the string's internal buffer to or pr_uint32_max to return the buffer as-is. adata [out] upon return, if the function was successful, then *adata references the string's internal buffer. return values this function returns the number of characters contained in the string's internal buffer (excluding any null-terminator). this value will be zero if the function failed to resize its internal buffer to the size requested. rema...

Filelink Providers
r port number. a provider implementation can choose what information it gets from the user from the setup dialog by pointing the settingsurl attribute of their nsimsgcloudfileprovider implementation to a chrome url for an xhtml page that contains a form with the extra information. that url is then loaded into an iframe directly beneath the provider menulist. note: the setup dialog window should resize itself automatically in order to fit the content of the iframe without scrollbars. custom settings fields to handle custom settings, the settings xhtml page should contain a form with the id "provider-form", with its onsubmit attribute set to "return false;". example: <form id="provider-form" onsubmit="return false;"> <label for="username">username:</label> <input id="username" type="text...

Creating a Custom Column
need to connect a column to the current columns that exist. looking in messenger.xul reveals that the columns reside inside a tree with the id "threadtree" whose columns (treecols) reside in "threadcols". to attach our column we add another treecol tag ("colreplyto") with the settings that we would like to use. don't forget to add in a splitter before the column to ensure that the user can easily resize and drag our column around. our replyto_col_overlay.xul should now contain something similar to this: <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="threadtree"> <treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colreplyto" persist="hidden ordinal width" curren...

Flash Activation: Browser Comparison - Plugins
e the choice to allow flash just for the current session, or to remember their choice: site authoring tips if a flash element is very small, hidden, or covered by other content, users will probably not notice that flash is required and will become confused. even if the plugin element will eventually be hidden, pages should create the plugin element so that it's visible on the page, and should resize or hide it only after the user has activated the plugin. this can be done by calling a javascript function when the plugin is activated: function plugincreated() { // we don't need to see the plugin, so hide it by resizing var plugin = document.getelementbyid('myplugin'); plugin.height = 0; plugin.width = 0; plugin.callpluginmethod(); } the html, by default, specifies the flash object...

Drawing and Event Handling - Plugins
using the windows api call dptolp when you output text. setting the window the browser calls the npp_setwindow function to set the window in which a plug-in draws or returns an error code. this window is valid for the life of the instance, or until npp_setwindow is called again with a different value. subsequent calls to npp_setwindow for a given instance usually mean that the window has been resized. if either window or window->window is null, the plug-in must not perform any additional graphics operations on the window and should free any associated resources. nperror npp_setwindow(npp instance, npwindow *window); the instance parameter represents the current plug-in. the window parameter is a pointer to the drawing target for the plug-in. for windowless plug-ins, the platform-specific...

Measure a portion of the page - Firefox Developer Tools
...

Network request list - Firefox Developer Tools
rk request columns you can toggle columns on and off by right-clicking on the table header and choosing the specific column from the context menu. a reset columns command is available on the context menu to reset the columns to their initial configuration. you can also change the width of the columns to help make the information you are looking for easier to view. the mouse pointer changes to a resize icon when you move it over the border of a column. you can drag to manually set the size of column. starting in firefox 76 you can double-click a column divider to resize the column to the left of it to fit its contents. the reset columns command on the context menu also resets the width of the columns to the default values. clicking the column header label sorts the request list by that colu...

Use the Inspector API - Firefox Developer Tools
by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload. bindable events using on: markuploaded called when the left panel has been refreshed, after page change. ready called on first markuploaded. pseudoclass called after toggle of a pseudoclass. layout-change "low-priority change event for things like paint and resize." ...

Responsive Design Mode - Firefox Developer Tools
he first time, you are given a warning message that tells you these reloads are no longer automatic, and informed about how you can make them automatic. for example: developer toolbox with rdm you can show or hide the developer tools toolbox independently of toggling responsive design mode itself: while responsive design mode is enabled, you can continue browsing as you normally would in the resized content area. device selection just above the viewport there is a label "no device selected"; click this to see a list of device names. select a device, and responsive design mode sets the following properties to match the selected device: screen size device pixel ratio (the ratio of device physical pixels to device-independent pixels) touch event simulation additionally, firefox sets t...

Style Editor - Firefox Developer Tools
le is defined. click an item to jump to that rule in the sheet. the condition text of the rule is greyed-out if the media query doesn’t currently apply. the media sidebar works especially well with responsive design view for creating and debugging responsive layouts: from firefox 46 onwards, if an @media rule contains a screen size in a condition, then it is made clickable: clicking it then resizes the screen to that size using the responsive design view: creating and importing style sheets you can create a new style sheet by clicking the new button in the toolbar. then you can just start entering css into the new editor and watch as the new styles are applied in real time just like changes to the other sheets. you can load a style sheet from disk and apply it to the page by clicking ...

Console messages - Firefox Developer Tools
each message is labeled "reflow" and shows the time taken to execute the reflow. if the reflow is a synchronous reflow triggered from javascript, it also shows a link to the line of code that triggered the reflow. click the link to open the file in the debugger. synchronous and asynchronous reflows if a change is made that invalidates the current layout — for example, the browser window is resized or some javascript modifies an element's css — the layout is not recalculated immediately. instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). in this way the browser can save up a collection of invalidating changes and recalculate their effect at once. however, if some javascript code reads a style...

BaseAudioContext.createBuffer() - Web APIs
f you use this call, you will get a mono buffer (one channel), that, when played back on an audiocontext running at 44100hz, will be automatically *resampled* to 44100hz (and therefore yield 44100 frames), and last for 1.0 second: 44100 frames / 44100hz = 1 second. note: audio resampling is very similar to image resizing: say you've got a 16 x 16 image, but you want it to fill a 32x32 area: you resize (resample) it. the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, and the resized image takes up less space. resampled audio is exactly the same — you save space, but in practice you will be unable to properly reproduce high frequency content (treble sound). now let's look at a more complex createbuffer() example, in which we create a th...

Using the CSS Painting API - Web APIs
not seem very exciting, as you could recreate them in a few different ways with existing css properties, e.g. by positioning some decorative generated content with ::before, or including background: linear-gradient(yellow, yellow) 0 15px / 200px 20px no-repeat; what makes the css painting api so interesting and powerful is that you can create complex images, passing variables, that automatically resize. let's take a look at a more complex paint example. registerpaint('headerhighlight', class { static get inputproperties() { return ['--highcolour']; } static get contextoptions() { return {alpha: true}; } paint(ctx, size, props) { /* set where to start the highlight & dimensions */ const x = 0; const y = size.height * 0.3; const blockwidth = size.width * 0.33; const highlighth...

Basic animations - Web APIs
m() * (innerwidth - 2 * r) + r; var y = math.random() * (innerheight - 2 * r) + r; var t = new ob(innerwidth / 2,innerheight / 2,5,"red",math.random() * 200 + 20,2); a.push(t); } //cn.style.backgroundcolor = "#700bc8"; c.linewidth = "2"; c.globalalpha = 0.5; resize(); anim() } window.onresize = function() { resize(); } function resize() { cn.height = innerheight; cn.width = innerwidth; for (var i = 0; i < 101; i++) { var r = 30; var x = math.random() * (innerwidth - 2 * r) + r; ...

Compositing example - Web APIs
function createcanvas() { var canvas = document.createelement("canvas"); can...

Pixel manipulation with canvas - Web APIs
; grayscalebtn.addeventlistener('click', grayscale); } zooming and anti-aliasing with the help of the drawimage() method, a second canvas and the imagesmoothingenabled property, we are able to zoom into our picture and see the details. we get the position of the mouse and crop an image of 5 pixels left and above to 5 pixels right and below. then we copy that one over to another canvas and resize the image to the size we want it to. in the zoom canvas we resize a 10×10 pixel crop of the original canvas to 200×200. zoomctx.drawimage(canvas, math.min(math.max(0, x - 5), img.width - 10), math.min(math.max(0, y - 5), img.height - 10), 10, 10, 0, 0, 200, 200); because anti-aliasing is enabled by default, we might want to disable the smo...

Document: DOMContentLoaded event - Web APIs
n">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textconte...

Document.execCommand() - Web APIs
olutepositioneditor enables or disables the grabber that allows absolutely-positioned elements to be moved around. the grabber is disabled by default since firefox 64 (bug 1490641). enableinlinetableediting enables or disables the table row/column insertion and deletion controls. the controls are disabled by default since firefox 64 (bug 1490641). enableobjectresizing enables or disables the resize handles on images, tables, and absolutely-positioned elements and other resizable objects. the handles are disabled by default since firefox 64 (bug 1490641). fontname changes the font name for the selection or at the insertion point. this requires a font name string (like "arial") as a value argument. fontsize changes the font size for the selection or at the insertion point. this requires a...

Document: readystatechange event - Web APIs
n">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textconte...

Document: scroll event - Web APIs
specifications specification status css object model (cssom) view module working draft ...

Document - Web APIs
t is raised. globaleventhandlers.onprogress is an eventhandler representing the code to be called when the progress event is raised. globaleventhandlers.onratechange is an eventhandler representing the code to be called when the ratechange event is raised. globaleventhandlers.onreset is an eventhandler representing the code to be called when the reset event is raised. globaleventhandlers.onresize is an eventhandler representing the code to be called when the resize event is raised. globaleventhandlers.onscroll is an eventhandler representing the code to be called when the scroll event is raised. globaleventhandlers.onseeked is an eventhandler representing the code to be called when the seeked event is raised. globaleventhandlers.onseeking is an eventhandler representing the code to...

Element: compositionend event - Web APIs
"example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => ...

Element: compositionstart event - Web APIs
"example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => ...

Element: compositionupdate event - Web APIs
"example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => ...

Element: dblclick event - Web APIs
yes cancelable yes interface mouseevent event handler property ondblclick examples this example toggles the size of a card when you double click on it. javascript const card = document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); } result specifications specification status ui eventsthe definition of 'dblclick' in that specification. working draft doc...

Element: error event - Web APIs
class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); const badimg = document.queryselector('.bad-img'); badimg.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: loading image\n`; console.log(event) }); const im...

Element.getClientRects() - Web APIs
; } span, li, th, td { border: 1px solid green; } javascript the javascript code draws the client rects for all html elements that have css class withclientrectsoverlay assigned. function addclientrectsoverlay(elt) { /* absolutely position a div over each client rect so that its border width is the same as the rectangle's width. note: the overlays will be out of place if the user resizes or zooms. */ var rects = elt.getclientrects(); for (var i = 0; i != rects.length; i++) { var rect = rects[i]; var tablerectdiv = document.createelement('div'); tablerectdiv.style.position = 'absolute'; tablerectdiv.style.border = '1px solid red'; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var scrollleft = document.documentelement.sc...

Element: scroll event - Web APIs
specifications specification status css object model (cssom) view module working draft ...

EventTarget.addEventListener() - Web APIs
r(). for ie, we modify the preceding example to: if (el.addeventlistener) { el.addeventlistener('click', modifytext, false); } else if (el.attachevent) { el.attachevent('onclick', modifytext); } there is a drawback to attachevent(): the value of this will be a reference to the window object, instead of the element on which it was fired. the attachevent() method could be paired with the onresize event to detect when certain elements in a web page were resized. the proprietary mselementresize event, when paired with the addeventlistener method of registering event handlers, provides similar functionality as onresize, firing when certain html elements are resized. polyfill you can work around addeventlistener(), removeeventlistener(), event.preventdefault(), and event.stoppropagation() n...

FileReader: abort event - Web APIs
ent-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") {...

FileReader: load event - Web APIs
ent-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") {...

FileReader: loadend event - Web APIs
ent-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") {...

FileReader: loadstart event - Web APIs
ent-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") {...

FileReader: progress event - Web APIs
ent-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") {...

GlobalEventHandlers.ontransitioncancel - Web APIs
s and ends, to cause a text update to occur during the transition. this could also be used to trigger animations or other effects, to allow chaining of reactions. in addition, we also use a click event to make the box dissappear (display: none;), showing how it triggers the transitioncancel event to fire. html this simply creates a <div> which we'll style with css below to make into a box that resizes and changes color and such. <div class="box"></div> css the css below styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it. .box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color:...

GlobalEventHandlers.ontransitionend - Web APIs
ends and the animation begins. example in this example, we use the transitionrun and transitionend events to detect when the transition begins and ends, to cause a text update to occur during the transition. this could also be used to trigger animations or other effects, to allow chaining of reactions. html this simply creates a <div> which we'll style with css below to make into a box that resizes and changes color and such. <div class="box"></div> css the css below styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it. .box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color:...

GlobalEventHandlers - Web APIs
t is raised. globaleventhandlers.onprogress is an eventhandler representing the code to be called when the progress event is raised. globaleventhandlers.onratechange is an eventhandler representing the code to be called when the ratechange event is raised. globaleventhandlers.onreset is an eventhandler representing the code to be called when the reset event is raised. globaleventhandlers.onresize is an eventhandler representing the code to be called when the resize event is raised. globaleventhandlers.onscroll is an eventhandler representing the code to be called when the scroll event is raised. globaleventhandlers.onseeked is an eventhandler representing the code to be called when the seeked event is raised. globaleventhandlers.onseeking is an eventhandler representing the code to...

HTMLFrameSetElement - Web APIs
is raised. windoweventhandlers.onpagehide is an eventhandler representing the code to be called when the pagehide event is raised. windoweventhandlers.onpageshow is an eventhandler representing the code to be called when the pageshow event is raised. windoweventhandlers.onpopstate is an eventhandler representing the code to be called when the popstate event is raised. windoweventhandlers.onresize is an eventhandler representing the code to be called when the resize event is raised. windoweventhandlers.onstorage is an eventhandler representing the code to be called when the storage event is raised. windoweventhandlers.onunload is an eventhandler representing the code to be called when the unload event is raised. specifications specification status comment ht...

HTMLVideoElement.videoHeight - Web APIs
hat matches the target aspect ratio). the target device's resolution. any other factors required by the media format. if the element is currently displaying the poster frame rather than rendered video, the poster frame's intrinsic size is considered to be the size of the <video> element. if at any time the intrinsic size of the media changes and the element's readystate isn't have_nothing, a resize event will be sent to the <video> element. this can happen when the element switches from displaying the poster frame to displaying video content, or when the displayed video track changes. example this example creates a handler for the resize event that resizes the <video> element to match the intrinsic size of its contents. let v = document.getelementbyid("myvideo"); v.addeventlistener("res...

HTMLVideoElement.videoWidth - Web APIs
hat matches the target aspect ratio). the target device's resolution. any other factors required by the media format. if the element is currently displaying the poster frame rather than rendered video, the poster frame's intrinsic size is considered to be the size of the <video> element. if at any time the intrinsic size of the media changes and the element's readystate isn't have_nothing, a resize event will be sent to the <video> element. this can happen when the element switches from displaying the poster frame to displaying video content, or when the displayed video track changes. example this example creates a handler for the resize event that resizes the <video> element to match the intrinsic size of its contents. let v = document.getelementbyid("myvideo"); v.addeventlistener("res...

MediaTrackConstraints - Web APIs
or an array of facings which are acceptable and/or required. framerate a constraindouble specifying the frame rate or range of frame rates which are acceptable and/or required. height a constrainlong specifying the video height or range of heights which are acceptable and/or required. width a constrainlong specifying the video width or range of widths which are acceptable and/or required. resizemode a constraindomstring object specifying a mode or an array of modes the ua can use to derive the resolution of a video track. allowed values are none and crop-and-scale. none means that the user agent uses the resolution provided by the camera, its driver or the os. crop-and-scale means that the user agent can use cropping and downscaling on the camera output in order to satisfy other constr...

MediaTrackSettings - Web APIs
be determined for any reason, the value will match the vertical sync rate of the device the user agent is running on. height a long integer value indicating the current value of the height property, specifying the height of the track's video data in pixels. width a long integer value indicating the current value of the width property, specifying the width of the track's video data in pixels. resizemode a domstring indicating the current value of the resizemode property, specifying the mode used by the user agent to derive the resolution of the track. the value will be one of: "none" the track has the resolution offered by the camera, its driver or the os. "crop-and-scale" the track's resolution might be the result of the user agent using cropping or downscaling from a higher came...

MediaTrackSupportedConstraints - Web APIs
is supported in the current environment. aspectratio a boolean value whose value is true if the aspectratio constraint is supported in the current environment. framerate a boolean value whose value is true if the framerate constraint is supported in the current environment. facingmode a boolean value whose value is true if the facingmode constraint is supported in the current environment. resizemode a boolean value whose value is true if the resizemode constraint is supported in the current environment. volume a boolean value whose value is true if the volume constraint is supported in the current environment. samplerate a boolean value whose value is true if the samplerate constraint is supported in the current environment. samplesize a boolean value whose value is true if the sa...

Microsoft API extensions - Web APIs
le msstereo3dpackingmode msstereo3drendermode onmsvideoformatchanged onmsvideoframestepcompleted onmsvideooptimallayoutchanged msfirstpaint pinned sites apis mssitemodeevent mssitemodejumplistitemremoved msthumbnailclick other apis x-ms-aria-flowfrom x-ms-acceleratorkey x-ms-format-detection mscaching mscachingenabled mscapslockwarningoff event.msconverturl() mselementresize document.mselementsfromrect() msisstatichtml navigator.mslaunchuri() mslaunchuricallback element.msmatchesselector() msprotocols msputpropertyenabled mswriteprofilermark ...

MouseEvent.altKey - Web APIs
note: on macintosh keyboards, this key is also known as the option key. ...

MutationObserver - Web APIs
fications until and unless observe() is called again. observe() configures the mutationobserver to begin receiving notifications through its callback function when dom changes matching the given options occur. takerecords() removes all pending notifications from the mutationobserver's notification queue and returns them in a new array of mutationrecord objects. mutation observer & customize resize event listener & demo https://codepen.io/webgeeker/full/yjrzgg/ example the following example was adapted from this blog post. // select the node that will be observed for mutations const targetnode = document.getelementbyid('some-id'); // options for the observer (which mutations to observe) const config = { attributes: true, childlist: true, subtree: true }; // callback function to execut...

SVGElement - Web APIs
abort fired when page loading is stopped before an svg element has been allowed to load completely. also available via the onabort property. error fired when an svg element does not load properly or when an error occurs during script execution. also available via the onerror property. load fires on an svgelement when it is loaded in the browser. also available via the onload property. resize fired when an svg document is being resized. also available via the onresize property. scroll fired when an svg document view is being shifted along the x and/or y axes. also available via the onscroll property. unload fired when the dom implementation removes an svg document from a window or frame. also available via the onunload property. specifications specification stat...

sourceCapabilities - Web APIs
r lifts their finger off of a touchscreen, several uievents may be generated including touchend, mousedown, click, and focus. all of these events must have the same sourcecapabilities representing the touchscreen. a device is considered "responsible" for an event only when that interaction is part of the abstraction provided by the web platform. for example, many user agents allow a window to be resized with a mouse or a keyboard, but this detail is not exposed to the web platform in any way, and so the sourcecapabilities of a resize event will typically be null. syntax var idc = event.sourcecapabilities value an instance of inputdevicecapabilities. specifications specification status comment inputdevicecapabilitiesthe definition of 'sourcecapabilities' in that spe...

WebGLRenderingContext.viewport() - Web APIs
iewport. default value: width of the canvas. height a non-negative glsizei specifying the height of the viewport. default value: height of the canvas. return value none. errors thrown if either width or height is a negative value, a gl.invalid_value error is thrown. examples when you first create a webgl context, the size of the viewport will match the size of the canvas. however, if you resize the canvas, you will need to tell the webgl context a new viewport setting. in this situation, you can use gl.viewport. gl.viewport(0, 0, canvas.width, canvas.height); the viewport width and height are clamped to a range that is implementation dependent. to get this range, you can use the max_viewport_dims constant, which returns an int32array. gl.getparameter(gl.max_viewport_dims); // e.g. i...

Basic concepts behind Web Audio API - Web APIs
u use this call, you will get a mono buffer with just one channel), that when played back on an audiocontext running at 44100hz, will be automatically resampled to 44100hz (and therefore yield 44100 frames), and last for 1.0 second: 44100 frames/44100hz = 1 second. note: audio resampling is very similar to image resizing. say you've got a 16 x 16 image, but you want it to fill a 32x32 area. you resize (or resample) it. the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, with the resized image taking up less space. resampled audio is exactly the same: you save space, but in practice you will be unable to properly reproduce high frequency content, or treble sound. planar versus interleaved buffers the web audio api uses a planar buffer fo...

Window.captureEvents() - Web APIs
s of the specified type. syntax window.captureevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload. example <!doctype html> <html lang="en"> <head> <!-- ... --> <script> function reg() { window.captureevents(event.click); window.onclick = page_click; } function page_click() { alert('page click event detected!'); } </script> </head> <body onload="reg();"> <p>click anywhere on this page.</p> </body> </html> notes events raised in the dom by ...

Window: error event - Web APIs
class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); window.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: ${event.message}\n`; console.log(event) }); const scripterror = document.queryselector('#script-erro...

Window.fullScreen - Web APIs
ome privileges, it will not throw an exception and instead just silently fail. this is to prevent scripts designed to set this property in internet explorer from breaking. return value isinfullscreen a boolean. possible values: true: the window is in full screen mode. false: the window is not in full screen mode. notes switching between regular window and full screen will fire the "resize" event on the corresponding window. example if (window.fullscreen) { // it's fullscreen! } else { // not fullscreen! } ...

Window.innerWidth - Web APIs
interior height of the window—the height of the layout viewport—can be obtained from the innerheight property. syntax let intviewportwidth = window.innerwidth; value an integer value indicating the width of the window's layout viewport in pixels. this property is read-only, and has no default value. to change the window's width, use one of the window methods for resizing windows, such as resizeby() or resizeto(). 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. the innerwidth property is available on any window or object that behaves like a window, such as a frame or tab. example // this will return the width of the viewport var intframewidth = window.innerwidth; // this will retu...

Window: load event - Web APIs
n">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textconten...

Window.open() - Web APIs
. since your users are the ones who are supposed to use such windows (and not you, being the web author), the best is to avoid interfering with their habits and preferences. we recommend to always set the resizability and scrollbars presence (if needed) to yes to insure accessibility to content and usability of windows. this is in the best interests of both the web author and the users. how do i resize a window to fit its content? you cannot reliably because the users can prevent the window from being resized by setting dom.disable_window_move_resize to true in about:config or by editing accordingly their user.js file. in general, users usually disable moving and resizing of existing windows because allowing authors' scripts to do so has been abused overwhelmingly in the past and the rare scr...

Window.releaseEvents() - Web APIs
ents of a specific type. syntax window.releaseevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload. example window.releaseevents(event.keypress) notes note that you can pass a list of events to this method using the following syntax: window.releaseevents(event.keypress | event.keydown | event.keyup). see also window.captureevents ( ). specification this is not part of any specification. browser compatibility the compatibility table in this pa...

Window.showModalDialog() - Web APIs
of the dialog box in pixels. dialogleft: left distance of the dialog box from the left edge of the desktop. dialogwidth: width the width of the dialog box in pixels. dialogtop: top distance of the dialog box from the top edge of the desktop. resizable: {on | off | yes | no | 1 | 0 } if this argument's value is on, yes, or 1, the dialog window can be resized by the user; otherwise its size is fixed. the default value is no. scroll: {on | off | yes | no | 1 | 0 } if on, yes, or 1, the dialog window has scroll bars; otherwise its size is fixed. default is no. note: firefox does not implement the dialoghide, edge, status, or unadorned arguments. examples try out showmodaldialog(). notes showmodaldialog() was briefly standardized ...

self.createImageBitmap() - Web APIs
her none (default) or flipy. premultiplyalpha: specifies whether the bitmap's color channels should be premultiplied by the alpha channel. one of none, premultiply, or default (default). colorspaceconversion: specifies whether the image should be decoded using color space conversion. either none or default (default). the value default indicates that implementation-specific behavior is used. resizewidth: a long integer that indicates the output width. resizeheight: a long integer that indicates the output height. resizequality: specifies the algorithm to be used for resizing the input to match the output dimensions. one of pixelated, low (default), medium, or high. return value a promise which resolves to an imagebitmap object containing bitmap data from the given rectangle. exa...

ARIA: dialog role - Accessibility
focus can be dropped to the beginning of the page. for most dialogs, the expected behavior is that the dialog's tab order wraps, which means that when the user tabs through the focusable elements in the dialog, the first focusable element will be focused after the last one has been reached. in other words, the tab order should be contained within and by the dialog. if the dialog can be moved or resized, ensure that these actions must be performable by keyboard users as well as mouse users. similarly, if a dialog provides special features like toolbars or context menus, these must be reachable and operable by keyboard users as well. dialogs can be modal or non-modal. when a modal dialog appears on the screen, it's not possible to interact with any page content outside the dialog. in other word...

Perceivable - Accessibility
ontrast (aa) the color contrast between background and foreground content should be at a minimum level to ensure legibility: text and its background should have a contrast ratio of at least 4.5:1. heading (or just larger) text should have a ratio of at least 3:1. larger text is defined as at least 18pt, or 14pt bold. see color and color contrast. 1.4.4 resize text (aa) the page should be readable and usable when the text size is doubled. this means that designs should be responsive, so that when the text size is increased, the content is still accessible. 1.4.5 images of text (aa) images should not be used to present content where text would do the job. for example, if an image is mostly textual, it could be represented using text a...

::-webkit-scrollbar - CSS: Cascading Style Sheets
inting upwards and downwards). ::-webkit-scrollbar-thumb — the draggable scrolling handle. ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar. ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle. ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements. syntax syntax not found in db! examples .visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar { display: block; width: 10em; overflow: auto; height: 2em; } .invisible-scrollbar::-webkit-scrollbar { display: none; } /* demonstrate a "mostly customized" scrollbar * (won't be vis...

height - CSS: Cascading Style Sheets
ture can be used to apply styles based on the height of the viewport (or the page box, for paged media). syntax the height feature is specified as a <length> value representing the viewport height. it is a range feature, meaning that you can also use the prefixed min-height and max-height variants to query minimum and maximum values, respectively. ...

width - CSS: Cascading Style Sheets
he width css media feature can be used to test the width of the viewport (or the page box, for paged media). syntax the width feature is specified as a <length> value representing the viewport width. it is a range feature, meaning that you can also use the prefixed min-width and max-width variants to query minimum and maximum values, respectively. ...

CSS Backgrounds and Borders - CSS: Cascading Style Sheets
these styles can also decorate borders with lines or images, and make them square or rounded. ...

CSS Basic User Interface - CSS: Cascading Style Sheets
css basic user interface is a css module that lets you define the rendering and functionality of features related to the user interface. reference properties appearance box-sizing cursor ime-mode nav-down nav-left nav-right nav-up outline outline-width outline-style outline-color outline-offset resize text-overflow user-select guides using url values for the cursor property explains how a url can be used with the cursor property to produce custom cursors. specifications specification status comment css basic user interface module level 4 working draft css basic user interface module level 3 recommendation css level 2 (revision 1) recommendation initial definition. ...

Using CSS gradients - CSS: Cascading Style Sheets
d repeating-conic-gradient() functions. gradients can be used anywhere you would use an <image>, such as in backgrounds. because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. in addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly. we'll start by introducing linear gradients, then introduce features that are supported in all gradient types using linear gradients as the example, then move on to radial, conic and repeating gradients using linear gradients a linear gradient creates a band of colors that progress in a straight line. a basic linear gradient to create the most basic type of gradient, all you ne...

CSS Images - CSS: Cascading Style Sheets
css images is a module of css that defines what types of images can be used (the <image> type, containing urls, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models. reference properties image-orientation image-rendering image-resolution object-fit object-position functions linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() conic-gradient() repeating-conic-gradient() url() element() image() cross-fade() data types <gradient> <image> guides using css gradients presents a specific type of css images, gradients, and how to create and use these. implementing image sprites in css describes the common technique grouping several ima...

CSS Logical Properties and Values - CSS: Cascading Style Sheets
es for floating and positioning clear (inline-end and inline-start keywords) float (inline-end and inline-start keywords) inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start other properties caption-side (inline-end and inline-start keywords) overflow-block overflow-inline overscroll-behavior-block overscroll-behavior-inline resize (block and inline keywords) text-align (end and start keywords) deprecated properties offset-block-end (now inset-block-end ) offset-block-start (now inset-block-start ) offset-inline-end (now inset-inline-end ) offset-inline-start (now inset-inline-start ) guides basic concepts of logical properties and values logical properties for sizing logical propertie...

Layout mode - CSS: Cascading Style Sheets
bles. float layout, designed to cause an item to position itself left or right with the rest of the content in normal flow wrapping around it. positioned layout, designed for positioning elements without much interaction with other elements. multi-column layout, designed for laying content out in columns as in a newspaper. flexible box layout, designed for laying out complex pages that can be resized smoothly. grid layout, designed for laying out elements relative to a fixed grid. note: not all css properties apply to all layout modes. most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode. ...

Media queries - CSS: Cascading Style Sheets
introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions. testing media queries programmatically describes how to use media queries in your javascript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser). using media queries for accessibility learn how media queries can help users understand your website better. specifications specification status comment media queries level 5 editor's draft css conditional rules module level 3 candidate recommendation media queries level 4 candidate recommendation medi...

Mozilla CSS extensions - CSS: Cascading Style Sheets
browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbar...

CSS reference - CSS: Cascading Style Sheets
-break-afterpage-break-beforepage-break-insidepaint()paint-orderpath()pc<percentage>perspectiveperspective()perspective-originplace-contentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpxqqquotesrradradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotatex()rotatey()rotatez()row-gapsssaturate()scalescale()scale3d()scalex()scaley()scalez():scopescroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-righ...

Visual formatting model - CSS: Cascading Style Sheets
e when reading other layout specifications. in this document we define the model and introduce some of the related terms and concepts, linking to more specific pages on mdn for further details. the role of the viewport in continuous media, the viewport is the viewing area of the browser window. user agents can change the layout of the page when the viewport size changes — for example, if you resize your window, or change the orientation of a mobile device. if the viewport is smaller than the size of the document then the user agent needs to offer a way to scroll to the parts of the document that are not displayed. we most often see this as scrolling in the block dimension — vertically in a horizontal, top-to-bottom language. however, you might design something that requires scrolling in ...

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
meterchunk firefox removed in firefox 64. progresschunk firefox removed in firefox 64. progresschunk-vertical firefox removed in firefox 64. radio-container firefox removed in firefox 64. radio-label firefox removed in firefox 64. radiomenuitem firefox removed in firefox 64. resizer firefox removed in firefox 63 resizerpanel firefox removed in firefox 63. scrollbarbutton-down firefox removed in firefox 63. scrollbarbutton-left firefox removed in firefox 63. scrollbarbutton-right firefox removed in firefox 63. scrollbarbutton-up firefox removed in firefox 63. sep...

clear - CSS: Cascading Style Sheets
m element is moved below the margin edge of all relevant floats. this affects the position of later floats, since later floats cannot be positioned higher than earlier ones. the floats that are relevant to be cleared are the earlier floats within the same block formatting context. if an element contains only floated elements, its height collapses to nothing. if you want it to always be able to resize, so that it contains floating elements inside it, you need to self-clear its children. this is called clearfix, and one way to do it is to add clear to a replaced ::after pseudo-element on it. #container::after { content: ""; display: block; clear: both; } syntax /* keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* global...

flex - CSS: Cascading Style Sheets
="item none">none</div> </div> <div class="flex-container"> <div class="item initial">initial</div> <div class="item none">none</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item four">4</div> <div class="item two">2</div> <div class="item one">1</div> </div> * { box-sizing: border-box; } .flex-container { background-color: #f4f7f8; resize: horizontal; overflow: hidden; display: flex; margin: 1em; } .item { margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1b5385; color: white; font-family: monospace; font-size: 13px; } .initial { flex: initial; } .auto { flex: auto; } .none { flex: none; } .four { flex: 4; } .two { flex: 2; } .one { flex: 1; } by default flex i...

scroll-snap-type-x - CSS: Cascading Style Sheets
ll-snap-type-x: unset; syntax values none when the visual viewport of this scroll container is scrolled horizontally, it must ignore snap points. mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled horizontally. that means it snaps on that point when the scroll action finished, if possible. if content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point. proximity the visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled horizontally considering the user agent's scroll parameters. if content is added, moved, deleted or resized the scroll offset may be adjusted to maintain the resting on that snap point. formal def...

scroll-snap-type-y - CSS: Cascading Style Sheets
scroll-snap-type-y: unset; syntax values none when the visual viewport of this scroll container is scrolled vertically, it must ignore snap points. mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled vertically. that means it snaps on that point when the scroll action finished, if possible. if content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point. proximity the visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled vertically considering the user agent's scroll parameters. if content is added, moved, deleted or resized the scroll offset may be adjusted to maintain the resting on that snap point. formal defin...

scroll-snap-type - CSS: Cascading Style Sheets
ts inline axis only. both the scroll container snaps to snap positions in both of its axes independently (potentially snapping to different elements in each axis). mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. that means it snaps on that point when the scroll action finished, if possible. if content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point. proximity the visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled considering the user agent's scroll parameters. if content is added, moved, deleted or resized the scroll offset may be adjusted to maintain the resting on that snap point. formal definition init...

scale() - CSS: Cascading Style Sheets
its result is a <transform-function> data type. this scaling transformation is characterized by a two-dimensional vector. its coordinates define how much scaling is done in each direction. if both coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation). when a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. ...

scale3d() - CSS: Cascading Style Sheets
its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this scaling transformation is characterized by a three-dimensional vector. its coordinates define how much scaling is done in each direction. ...

scaleX() - CSS: Cascading Style Sheets
its result is a <transform-function> data type. it modifies the abscissa of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. scalex(-1) defines an axial symmetry, with a vertical axis passing through the origin (as specified by the transform-origin property). note: scalex(sx) is equivalent to scale(sx, 1) or scale3d(sx, 1, 1). syntax scalex(s) values s is a <number> representing the scaling factor to apply on the abscissa of each point of the element. ...

scaleY() - CSS: Cascading Style Sheets
its result is a <transform-function> data type. it modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. scaley(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the transform-origin property). note: scaley(sy) is equivalent to scale(1, sy) or scale3d(1, sy, 1). ...

scaleZ() - CSS: Cascading Style Sheets
its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this scaling transformation modifies the z-coordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. ...

<transform-function> - CSS: Cascading Style Sheets
it is used in the transform property. syntax the <transform-function> data type is specified using one of the transformation functions listed below. each function applies a geometric operation in either 2d or 3d. matrix transformation matrix() describes a homogeneous 2d transformation matrix. matrix3d() describes a 3d transformation as a 4×4 homogeneous matrix. perspective perspective() sets the distance between the user and the z=0 plane. ...

Guide to Web APIs - Developer guides
olution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api ...

Overview of events and handlers - Developer guides
tion of the events involved during page loading, such as discussed partially in this web page or in this stack overflow question. the global object window emits an event called 'load' when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed, the global object window emits an event called 'resize' when the height or the width of the browser window is changed by a user, the dom object document representing the html document emits an event called 'domcontentloaded' when the document has finished loading, the dom node objects such as div or button emit an event called 'click' when the user presses the mouse button while the mouse pointer is on top of the dom node in the html page. the ...

<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
eading permitted aria roles tab, presentation or none dom interface htmlheadingelement attributes these elements only include the global attributes. the align attribute is obsolete; don't use it. usage notes heading information may be used by user agents, for example, to construct a table of contents for a document automatically. avoid using heading tags to resize text. instead, use the css font-size property. headings use size to indicate their relative importance, but css is preferred for general-purpose resizing. avoid skipping heading levels: always start from <h1>, next use <h2> and so on. you should only use one <h1> per page. using more than one will not result in an error, but using only one is seen as a best practice. it makes logical sense — ...

<body>: The Document Body element - HTML: Hypertext Markup Language
has finished loading. onmessage function to call when the document has received a message. onoffline function to call when network communication has failed. ononline function to call when network communication has been restored. onpopstate function to call when the user has navigated session history. onredo function to call when the user has moved forward in undo transaction history. onresize function to call when the document has been resized. onstorage function to call when the storage area has changed. onundo function to call when the user has moved backward in undo transaction history. onunload function to call when the document is going away. rightmargin the margin of the right of the body. this method is non-conforming, use css margin-right property on the element ins...

<frame> - HTML: Hypertext Markup Language
nt, <iframe> may be preferred. attributes like all other html elements, this element supports the global attributes. src this attribute specifies the document that will be displayed by the frame. name this attribute is used for labeling frames. without labeling, every link will open in the frame that it’s in – the closest parent frame. see the target attribute for more information. noresize this attribute prevents resizing of frames by users. scrolling this attribute defines the existence of a scrollbar. if this attribute is not used, the browser adds a scrollbar when necessary. there are two choices: "yes" for forcing a scrollbar even when it is not necessary and "no" for forcing no scrollbar even when it is necessary. marginheight this attribute defines the height of the marg...

<img>: The Image Embed element - HTML: Hypertext Markup Language
l load (it is the one that matches 200px most closely), otherwise the other image will load. <img src="/files/16864/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 600px) 200px, 50vw"> to see the resizing in action, view the example on a separate page, so you can actually resize the content area. security and privacy concerns although <img> elements have innocent uses, they can have undesirable consequences for user security and privacy. see referer header: privacy and security concerns for more information and mitigations. accessibility concerns authoring meaningful alternate descriptions an alt attribute's value should clearly and concisely describe the image's c...

<picture>: The Picture element - HTML: Hypertext Markup Language
ontent. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlpictureelement attributes this element includes only global attributes. usage notes you can use the object-position property to adjust the positioning of the image within the element's frame, and the object-fit property to control how the image is resized to fit within the frame. note: use these properties on the child <img> element, not the <picture> element. examples these examples demonstrate how different attributes of the <source> element change the selection of the image inside <picture>. the media attribute the media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each <source> ...

<textarea> - HTML: Hypertext Markup Language
ea's first line, on another browser it may be set on the bottom of the <textarea> box. don't use vertical-align: baseline on it; the behavior is unpredictable. controlling whether a textarea is resizable in most browsers, <textarea>s are resizable — you'll notice the drag handle in the right hand corner, which can be used to alter the size of the element on the page. this is controlled by the resize css property — resizing is enabled by default, but you can explicitly disable it using a resize value of none: textarea { resize: none; } styling valid and invalid values valid and invalid values of a <textarea> element (e.g. those within, and outside the bounds set by minlength, maxlength, or required) can be highlighted using the :valid and :invalid pseudo-classes. for example, to give ...

Global attributes - HTML: Hypertext Markup Language
list of global attributes accesskey provides a hint for generating a keyboard shortcut for the current element. this attribute consists of a space-separated list of characters. the browser should use the first one that exists on the computer keyboard l...

Closures - JavaScript
font-size property of the body element, and the adjustments are picked up by other elements on the page thanks to the relative units. here's the javascript: function makesizer(size) { return function() { document.body.style.fontsize = size + 'px'; }; } var size12 = makesizer(12); var size14 = makesizer(14); var size16 = makesizer(16); size12, size14, and size16 are now functions that resize the body text to 12, 14, and 16 pixels, respectively. you can attach them to buttons (in this case hyperlinks) as demonstrated in the following code example. document.getelementbyid('size-12').onclick = size12; document.getelementbyid('size-14').onclick = size14; document.getelementbyid('size-16').onclick = size16; <a href="#" id="size-12">12</a> <a href="#" id="size-14">14</a> <a href="#" id=...

Using images in HTML - Web media technologies
. <picture> the html <picture> element contains zero or more <source> elements and one <img> element which provides versions of an image for different display/device scenarios. the browser considers each child <source> element and chooses the best match among them. css object-fit the object-fit css property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. object-position the object-position css property specifies the alignment of content in a selected replaced element within the element's box. areas of the box which aren't covered by the replaced element's object will show the element's background. background-image the background-image css property sets one or more background images for an element. guides these ar...

Critical rendering path - Web Performance
rowsers is generally 960px. on by-default full screen browsers, like your phone's browser, by setting <meta name="viewport" content="width=device-width">, the width will be the width of the device instead of the default viewport width. the device-width changes when a user rotates their phone between landscape and portrait mode. layout happens every time a device is rotated or browser is otherwise resized. layout performance is impacted by the dom -- the greater the number of nodes, the longer layout takes. layout can become a bottleneck, leading to jank if required during scrolling or other animations. while a 20ms delay on load or orientation change may be fine, it will lead to jank on animation or scroll. any time the render tree is modified, such as by added nodes, altered content, or update...

Lazy loading - Web Performance
yfill include this polyfill to provide support for older and currently incompatible browsers: loading-attribute-polyfill intersection observer api intersection observers allow the user to know when an observed element enters or exits the browser’s viewport. event handlers when browser compatibility is crucial, there are a few options: polyfill intersection observer fallback to scroll, resize or orientation change event handlers to determine if a specific element is in viewport specifications specification status comment html living standard living standard ...

Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
p { width: 300px; border: 1px solid #000; display: inline-block; } this establishes a clipping area made of a circle and rectangle, assigns it the id #clipping-path-1, then references it in the css. the clip path can be assigned to any element with the target class. you can make changes to the svg in real time and see them immediately affect the rendering of the html. for example, you can resize the circle in the clip path established above: function toggleradius() { var circle = document.getelementbyid("circle"); circle.r.baseval.value = 0.40 - circle.r.baseval.value; } example: filtering this demonstrates applying a filter to html content using svg. it establishes several filters, which are applied with css to three elements in both the normal and mouse hover states. <p clas...

begin - SVG: Scalable Vector Graphics
t. all valid events (not necessarily supported by all elements) are defined by the dom and html specifications. those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent. an optional offset value as defined in <offset-value> can be appended. <repeat-value> this value defines a qualified repeat event. the element animation start time is defined relative to the time that the repeat event is raised with the specified iteration value. a valid repeat value consists of an element id followed by a dot and the function re...

cursor - SVG: Scalable Vector Graphics
except that if the browser supports the <cursor> element, you should be able to use it with the <funciri> notation. as a presentation attribute, it also can be used as a property directly inside a css stylesheet, see css cursor for further information. usage context categories presentation attribute value [[<funciri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit animatable yes normative document svg 1.1 (2nd edition) <funciri> functional notation for a reference. the syntax for this reference is the same as the css uri. elements the following elements can use the cursor attribute container elements » ...

end - SVG: Scalable Vector Graphics
. all valid events (not necessarily supported by all elements) are defined by the dom and html specifications. those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent . an optional offset value as defined in <offset-value> can be appended. <repeat-value> this value defines a qualified repeat event. the element animation end time is defined relative to the time that the repeat event is raised with the specified iteration value. a valid repeat value consists of an element id followed by a dot and the function rep...

media - SVG: Scalable Vector Graphics
the media attribute specifies a media query that must be matched for a style sheet to apply. only one element is using this attribute: <style> html, body, svg { height: 100%; } <svg viewbox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: black; } </style> <style media="all and (min-width: 600px)"> rect { fill: seagreen; } </style> <text y="15">resize the window to see the effect</text> <rect y="20" width="200" height="200" /> </svg> usage notes value <media-query-list> default value all animatable yes <media-query-list> this value holds a media query that needs to match in order for the style sheet to be applied. if not specified, the style sheet is applied unconditionally. specificati...

requiredFeatures - SVG: Scalable Vector Graphics
org/tr/svg11/feature#basicfilter the browser supports the <filter>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <feoffset>, <fetile>, <fefuncr>, <fefuncg>, <fefuncb> and <fefunca> elements http://www.w3.org/tr/svg11/feature#documenteventsattribute the browser supports the onunload, onabort, onerror, onresize, onscroll and onzoom attributes http://www.w3.org/tr/svg11/feature#graphicaleventsattribute the browser supports the onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout and onload attributes http://www.w3.org/tr/svg11/feature#animationeventsattribute the browser supports the onbegin, onend, onrepeat and onload attributes http://w...

textLength - SVG: Scalable Vector Graphics
ngth-percentage> | <number> default value none animatable yes <length-percentage> this value specifies the width of the space the text will be adjusted to occupy as absolute length or percentage. <number> a numeric value outlines a length referring to the units of the current coordinate system. example let's create a simple example that presents text you can resize using an <input> element of type "range". css .controls { font: 16px "open sans", "arial", sans-serif; } svg let's start with the svg. it's pretty basic, with a 1000-by-300 pixel space mapped into a 10 centimeter by 3 centimeter box. <svg width="10cm" height="3cm" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="998" height="298" fill="none...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
notes tabindex attribute implemented (bug 778654) bounding-box on pointer-events not implemented (bug 945187) load, abort, error, and unload instead of svgload, svgabort, svgerror, and svgunload not implemented (bug 620002) only structurally external elements and outermost <svg> element fire load events implementation status unknown resize and scroll instead of svgresize and svgscroll implementation status unknown domactivate removed implementation status unknown focusin and focusout instead of domfocusin and domfocusout implementation status unknown keyboard events implementation status unknown mutation events removed implementation status unknown svgzoomevent removed ...

Tutorials
the viewport, and one another. we have covered the necessary prerequisites so can now dive deep into css layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox. css reference complete reference to css, with details on support by firefox and other browsers. fluid grids design layouts that fluidly resize with the browser window, while still using a typographic grid. css challenges flex your css skills, and see where you need more practice. advanced level using css transforms apply rotation, skewing, scaling, and translation using css. css transitions css transitions, part of the draft css3 specification, provide a way to animate changes to css properties, instead of having the chan...