Search completed in 0.96 seconds.
resizer - Archive of obsolete content
if you place a custom resizing button inside the
resizer, the user will be able to
resize the window by dragging it.
... the
resizer will send a command event after the
resize is complete.
... note: starting in gecko 2.0, you can also specify a target element using the element attribute, to use the
resizer to
resize the specified element instead of the window.
...And 15 more matches
resize - CSS: Cascading Style Sheets
the
resize css property sets whether an element is resizable, and if so, in which directions.
... syntax /* keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline; /* global values */
resize: inherit;
resize: initial;
resize: unset; the
resize property is specified as a single keyword value from the list below.
... both the element displays a mechanism for allowing the user to
resize it, which may be
resized both horizontally and vertically.
...And 10 more matches
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.
...And 8 more matches
Window: resize event - Web APIs
the
resize event fires when the document view (window) has been
resized.
... bubbles no cancelable no interface uievent event handler property on
resize in some earlier browsers it was possible to register
resize event handlers on any html element.
... it is still possible to set on
resize attributes or use addeventlistener() to set a handler on any element.
...And 8 more matches
ResizeObserver - Web APIs
the
resizeobserver interface reports changes to the dimensions of an element's content or border box, or the bounding box of an svgelement.
...
resizeobserver avoids infinite callback loops and cyclic dependencies that are often created when resizing via a callback function.
...implementations should, if they follow the specification, invoke
resize events before paint and after layout.
...And 7 more matches
Resize Observer API - Web APIs
the
resize observer api provides a performant mechanism by which code can monitor an element for changes to its size, with notifications being delivered to the observer each time the size changes.
...the window
resize event), then figure out what the new dimensions or other features of the element after a
resize using element.getboundingclientrect or window.getcomputedstyle, for example.
... the
resize observer api provides a solution to exactly these kinds of problems, and more besides, allowing you to easily observe and respond to changes in the size of an element’s content or border box in a performant way.
...And 7 more matches
ResizeObserverEntry - Web APIs
the
resizeobserverentry interface represents the object passed to the
resizeobserver() constructor's callback function, which allows you to access the new dimensions of the element or svgelement being observed.
... properties
resizeobserverentry.borderboxsize read only an object containing the new border box size of the observed element when the callback is run.
...
resizeobserverentry.contentboxsize read only an object containing the new content box size of the observed element when the callback is run.
...And 6 more matches
Window.resizeBy() - Web APIs
the window.
resizeby() method
resizes the current window by a specified amount.
... syntax window.
resizeby(xdelta, ydelta) parameters xdelta is the number of pixels to grow the window horizontally.
... example // shrink the window window.
resizeby(-200, -200); notes this method
resizes the window relative to its current size.
...And 4 more matches
ResizeObserver() - Web APIs
the
resizeobserver constructor creates a new
resizeobserver object, which can be used to report changes to the content or border box of an element or the bounding box of an svgelement.
... syntax var
resizeobserver = new
resizeobserver(callback) parameters callback the function called whenever an observed
resize occurs.
... the function is called with two parameters: entries an array of
resizeobserverentry objects that can be used to access the new dimensions of the element after each change.
...And 3 more matches
ResizeObserverEntry.contentRect - Web APIs
the contentrect read-only property of the
resizeobserverentry interface returns a domrectreadonly object containing the new size of the observed element when the callback is run.
... note that this is better supported than
resizeobserverentry.borderboxsize or
resizeobserverentry.contentboxsize, but it is left over from an earlier implementation of the
resize observer api, is still included in the spec for web compat reasons, and may be deprecated in future versions.
... syntax var contentrect =
resizeobserverentry.contentrect; value a domrectreadonly object containing the new size of the element indicated by the target property.
...And 3 more matches
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.
...And 2 more matches
ResizeObserverEntry.contentBoxSize - Web APIs
the contentboxsize read-only property of the
resizeobserverentry interface returns an array containing the new content box size of the observed element when the callback is run.
... syntax var mycontentboxsize =
resizeobserverentry.contentboxsize; value an object containing the new content box size of the observed element.
... examples the following snippet is taken from the
resize-observer-border-radius.html (see source) example.
...And 2 more matches
ResizeObserverEntry.target - Web APIs
the target read-only property of the
resizeobserverentry interface returns a reference to the element or svgelement that is being observed.
... syntax var element =
resizeobserverentry.target; var svgelement =
resizeobserverentry.target; value an element or svgelement representing the element being observed.
... examples the following snippet is taken from the
resize-observer-border-radius.html (see source) example.
...And 2 more matches
VisualViewport.onresize - Web APIs
the on
resize event handler of the visualviewport interface is called when a viewport is
resized, i.e.
... when the
resize event is fired.
... syntax visualviewport.on
resize = function(e) { ...
...And 2 more matches
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.
MoveResize - Archive of obsolete content
moving and resizing a popup menus and popups have methods which may be used to move and
resize them.
... if a popup is still too large, it will be
resized to fit on the screen.
... a popup can be
resized manually using the popup's sizeto method.
... void sizeto(in long width, in long height); here is an example which
resizes a popup to be 200 pixels wide and 300 pixels high: popup.sizeto(200, 300); ...
GlobalEventHandlers.onresize - Web APIs
the on
resize property of the globaleventhandlers interface is an eventhandler that processes
resize events.
... the
resize event fires after the window has been
resized.
... syntax window.on
resize = functionref; value functionref is a function name or a function expression.
... 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.on
resize =
resize; specification specification status comment html living standardthe definition of 'on
resize' in that specification.
ResizeObserver.observe() - Web APIs
the observe() method of the
resizeobserver interface starts observing the specified element or svgelement.
... syntax
resizeobserver.observe(target, options); parameters target a reference to an element or svgelement to be observed.
... examples the following snippet is taken from the
resize-observer-text.html (see source) example: const
resizeobserver = new
resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) +...
... 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } });
resizeobserver.observe(divelem); an observe() call with an options object would look like so:
resizeobserver.observe(divelem, { box : 'border-box' }); specifications specification status comment
resize observerthe definition of 'observe()' in that specification.
ResizeObserverEntry.borderBoxSize - Web APIs
the borderboxsize read-only property of the
resizeobserverentry interface returns an array containing the new border box size of the observed element when the callback is run.
... syntax var myborderboxsize =
resizeobserverentry.borderboxsize; value an array containing objects with the new border box size of the observed element.
... examples const
resizeobserver = new
resizeobserver(entries => { for (let entry of entries) { if(entry.borderboxsize && entry.borderboxsize.length > 0) { entry.target.style.borderradius = math.min(100, (entry.borderboxsize[0].inlinesize/10) + (entry.borderboxsize[0].blocksize/10)) + 'px'; } else { entry.target.style.borderradius = math.min(100,...
... (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } });
resizeobserver.observe(document.queryselector('div')); specifications specification status comment
resize observerthe definition of 'target' in that specification.
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 on
resize 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.
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).
... example this function
resizes the window so that it takes up one quarter of the available screen.
... 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.
ResizeObserver.disconnect() - Web APIs
the disconnect() method of the
resizeobserver interface unobserves all observed element or svgelement targets.
... syntax
resizeobserver.disconnect(); parameters none.
... examples btn.addeventlistener('click', () => {
resizeobserver.disconnect(); }) specifications specification status comment
resize observerthe definition of 'disconnect()' in that specification.
ResizeObserver.unobserve() - Web APIs
the unobserve() method of the
resizeobserver interface ends the observing of a specified element or svgelement.
... examples the following snippet is taken from the
resize-observer-text.html (see source) example: const
resizeobserver = new
resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } });
resizeobserver.observe(divelem); checkbox.addeventlistener('change...
...', () => { if(checkbox.checked) {
resizeobserver.observe(divelem); } else {
resizeobserver.unobserve(divelem); } }); specifications specification status comment
resize observerthe definition of 'unobserve()' in that specification.
VisualViewport: resize event - Web APIs
the
resize event of the visualviewport interface is fired when the visual viewport is
resized.
... bubbles no cancelable no interface event event handler property on
resize examples you can use the
resize event in an addeventlistener method: visualviewport.addeventlistener('
resize', function() { ...
... }); or use the on
resize event handler property: visualviewport.on
resize = function() { ...
mozbrowserresize
the mozbrowser
resize event is fired when a browser <iframe> viewport is
resized in some way.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowser
resize", function( event ) { console.log("the new window size is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequire...
Index - Web APIs
1275 eventtarget.addeventlistener() api, accessouterdata, dom, detecting events, event handlers, event listener, eventtarget, javascript, method, passingdata, receiving events, reference, addeventlistener, attachevent, events, mselement
resize the eventtarget method addeventlistener() sets up a function that will be called whenever the specified event is delivered to the target.
... 1537 globaleventhandlers.on
resize api, dom, event handler, globaleventhandlers, property, reference, on
resize the on
resize property of the globaleventhandlers interface is an eventhandler that processes
resize events.
... 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.
...And 20 more matches
Splitters - Archive of obsolete content
splitting a box there may be times when you want to have two sections of a window where the user can
resize the sections.
...it creates a skinny bar between two sections which allows these sections to be
resized.
... 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.
...And 16 more matches
Index - Archive of obsolete content
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!
... 1044
resizeafter xul attributes, xul reference no summary!
... 1045
resizebefore xul attributes, xul reference no summary!
...And 11 more matches
splitter - Archive of obsolete content
when the splitter is dragged, the sibling elements of the splitter are
resized.
... 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.
...And 10 more matches
Using Spacers - Archive of obsolete content
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.
...the boxes will be positioned and
resized based on specifications that you can define.
...And 9 more matches
Index - Archive of obsolete content
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!
...And 8 more matches
cursor - CSS: Cascading Style Sheets
col-
resize the item/column can be
resized horizontally.
... row-
resize the item/row can be
resized vertically.
... n-
resize some edge is to be moved.
...And 6 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 =...
...callback : null; endfunc = endfunc || function(e) {}; var
resizestart = function
resizestart(e) { e.stoppropagation(); e.preventdefault(); if (e.button !== 0) return; valuex = e.clientx - elem.clientwidth; valuey = e.clienty - elem.clientheight; document.body.setattribute('data-
resize', axis); document.addeventlistener('mousemove', mousemove); document.addeventlistener('mouseup',
resizeend); }; var mousemove = func...
...And 5 more matches
Event reference
resize the document view has been
resized.
... svg events svgabort svgerror svgload svg
resize svgscroll svgunload svgzoom database events abort blocked complete error success upgradeneeded versionchange script events afterscriptexecute beforescriptexecute menu events dommenuitemactive dommenuiteminactive window events close popup events popuphidden popuphiding popupshowing popupshown tab events visibilitychange battery events chargingchange chargingtimechange dischargingt...
...
resize uievent dom l3 the document view has been
resized.
...And 5 more matches
Element Positioning - Archive of obsolete content
you will still be able to
resize the window beyond that point but the button will stop growing in size.
...we'll make it so that the textbox will
resize to fit the entire window.
...if the user
resizes the dialog to be very small, the text input will not shrink past 15 ems.
...And 4 more matches
Window - Web APIs
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.
... window.
resizeby()
resizes the current window by a certain amount.
... window.
resizeto() dynamically
resizes window.
...And 4 more matches
Table Reflow Internals - Archive of obsolete content
resize - reflowee gets a change in available space only.
...table reflow example <table width=300> <tr> <td>foo</td> <td>bar zap</td> </tr> </table> key: r = reflow reason, 0 (initial), 2 (
resize) a = avail w, h c = computed w, h d = desired w, h me = max elem w debugging frame reflow gives instructions for turning this on: tblo 030176cc r=0 a=8940,uc c=0,0 cnt=429 tbl 030178c4 r=0 a=8940,uc c=4470,uc cnt=430 rowg 03017a7c r=0 a=uc,uc c=uc,uc cnt=431 row 03017c08 r=0 a=uc,uc c=uc,uc cnt=432 cell 03017da8 r=0 a=uc,uc c=uc,uc cnt=433 block 03017e08 r=0 a=uc...
...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.
...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/...
...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 */ #top-left { top: 0; left: 0; } #top-left .radius { border-top-left-radius: 100%; top: 0; left: 0; } /* top right */ #top-right { top: 0; right: 0; } #top-right .radius { border-top-right-radius: 100%; top: 0; right: 0; } /* bottom right */ #bottom-right { bottom: 0; right: 0; } #bottom-right .radius { border-bottom-right-radius: 100%; bottom: 0; right: 0; } /* bottom left *...
... 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
Notes on HTML Reflow - Archive of obsolete content
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.
... initial, incremental,
resize, and style change reflows may each be performed as an immediate "global" reflow from the presentation shell: an initial reflow is performed when the presentation shell is initialized to flow the shell's initial frame hierarchy.
...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
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 2 more matches
Logical properties for sizing - CSS: Cascading Style Sheets
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.
...And 2 more matches
Space Manager Detailed Design - Archive of obsolete content
must not be null * @param aunavailablespace the bounding rect of the unavailable space * @return ns_ok if successful * ns_error_failure if there is already a region tagged with aframe */ nsresult addrectregion(nsiframe* aframe, const nsrect& aunavailablespace); /** *
resize the rectangular region associated with aframe by the specified * deltas.
...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.
...must not be null * @param aunavailablespace the bounding rect of the unavailable space * @return ns_ok if successful * ns_error_failure if there is already a region tagged with aframe */ nsresult addrectregion(nsiframe* aframe, const nsrect& aunavailablespace); /** *
resize the rectangular region associated with aframe by the specified * deltas.
...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.
Trees - Archive of obsolete content
a tree also allows the user to rearrange,
resize and hide individual columns.
...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 may have to
resize the window to see anything since there isn't any data to display.
...l id="name" label="filename" flex="1"/> <treecol id="location" label="location" flex="2"/> <treecol id="size" label="size" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="mozilla"/> <treecell label="/usr/local"/> <treecell label="2520 bytes"/> </treerow> </treeitem> </treechildren> </tree> <splitter collapse="before"
resizeafter="grow"/> we've added a tree with three columns for the filename, the location and the file size.
Manipulating documents - Learn web development
to start with, make a local copy of our window-
resize-example.html and bgtile.png demo files.
... how about we use an event so that the div
resizes as we
resize the window?
... the window object has an event available on it called
resize, which is fired every time the window is
resized — let's access that via the window.on
resize event handler and rerun our sizing code each time it changes.
... add the following to the bottom of your code: window.on
resize = function() { winwidth = window.innerwidth; winheight = window.innerheight; div.style.width = winwidth + 'px'; div.style.height = winheight + 'px'; } note: if you get stuck, have a look at our finished window
resize example (see it live also).
VisualViewport - Web APIs
resize fired when the visual viewport is
resized.
... also available via the visualviewport.on
resize property.
... 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.
... 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.
Visual Viewport API - Web APIs
it also adds two events, on
resize and onscroll, that fire whenever the visual viewport changes.
...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.
...the pendingupdate flag serves to prevent multiple invocations of the transfrom that can occur when on
resize and onscroll fire at the same time.
... 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.
aspect-ratio - CSS: Cascading Style Sheets
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.
...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...
...kground: %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 specification status comment media queries level 4the definition of 'aspect-ratio' in that specification.
Browser detection using the user agent - HTTP
r agent sniffing var ua = navigator.useragent; hastouchscreen = ( /\b(blackberry|webos|iphone|iemobile)\b/i.test(ua) || /\b(android|windows phone|ipad|ipod)\b/i.test(ua) ); } } if (hastouchscreen) document.getelementbyid("examplebutton").style.padding="1em"; as for the screen size, simply use window.innerwidth and window.addeventlistener("
resize", function(){ /*refresh screen size dependent things*/ }).
...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.
...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?
CSS3 - Archive of obsolete content
support for the css
resize property allowing web authors to control if and how elements should be
resized.
... 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 image-rendering property that allow to define how
resize of the object should be handled.
Things I've tried to do with XUL - Archive of obsolete content
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.
...
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).
Adding more elements - Archive of obsolete content
you will notice that if the window is
resized, the textbox grows but the other components do not.
...if you
resize the window vertically, the elements do not change size.
...abel="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> <spacer style="height: 10px" flex="1"/> <hbox> now when the dialog is
resized, the two buttons will move so that they are always along the bottom of the dialog.
Styling web forms - Learn web development
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.
...in our case, it's better to be sure every one will use auto: textarea { display : block; padding : 10px; margin : 10px 0 0 -10px; width : 100%; height : 90%; border-right: 1px solid; /*
resize : none; */ overflow: auto; } styling the submit button the <button> element is really convenient to style with css; you can do whatever you want, even using pseudo-elements: button { padding : 5px; font : bold .6em sans-serif; border : 2px solid #333; border-radius: 5px; background : none; cursor : pointer; transform : rotate(-1.5deg); } button:after { content ...
JS_malloc
p void * (js_realloc and js_free only) pointer to a previously allocated region of memory to
resize or deallocate.
...here is an example of proper code: /* * `p` points to the memory area to
resize.
... * we want to
resize it to `newsize` bytes.
nsIAccessibleEvent
event_movesize_start 0x001e 0x001b a window is being moved or
resized.
...nt_table_column_insert 0x0046 0x0042 event_table_column_delete 0x0047 0x0043 event_table_column_reorder 0x0048 0x0044 event_window_activate 0x0049 0x0045 event_window_create 0x004a 0x0046 event_window_deactivate 0x004b 0x0047 event_window_destroy 0x004c 0x0048 event_window_maximize 0x004d 0x0049 event_window_minimize 0x004e 0x004a event_window_
resize 0x004f 0x004b event_window_restore 0x0050 0x004c event_hyperlink_end_index_changed 0x0051 0x004d the ending index of this link within the containing string has changed.
...olumn_insert 0x0114 event_atk_table_column_delete 0x0115 event_atk_table_column_reorder 0x0116 event_atk_link_selected 0x0117 event_atk_window_activate 0x0118 event_atk_window_create 0x0119 event_atk_window_deactivate 0x0120 event_atk_window_destroy 0x0121 event_atk_window_maximize 0x0122 event_atk_window_minimize 0x0123 event_atk_window_
resize 0x0124 event_atk_window_restore 0x0125 event_dom_create 0x0001 an object has been created.
Edit Shape Paths in CSS - Firefox Developer Tools
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.
...an ellipse is a squashed circle and therefore has the option to
resize horizontally and vertically when you click on the shapes icon.
HTMLBodyElement - Web APIs
globaleventhandlers.on
resize is an eventhandler representing the code to be called when the
resize event is raised.
... living standard technically, the event-related properties onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onlanguagechange, onload, onmessage, onoffline, ononline, onpopstate, on
resize, onstorage, and onunload, have been moved to windoweventhandlers.
... the following properties have been added: onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onload, onmessage, onoffline, ononline, onpopstate, on
resize, onstorage, and onunload.
HTMLImageElement.width - Web APIs
<p>image width: <span class="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.
HTMLVideoElement.videoHeight - Web APIs
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.
... 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("
resize", ev => { let w = v.videowidth; let h = v.videoheight; if (w && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero.
HTMLVideoElement.videoWidth - Web APIs
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.
... 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("
resize", ev => { let w = v.videowidth; let h = v.videoheight; if (w && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero.
WebGL best practices - Web APIs
the cap also must typically be updated as the browser window
resizes, and older resources above the limit must be purged.
... 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 => { const observer = new
resizeobserver(entries => { for (const cur of entries) { const dev_size = cur.devicepixelcontentboxsize; const ret = { width: dev_size[0].inlinesize, height: dev_size[0].blocksize, }; fn_resolve(ret); observer.disconnect(); return; } throw 'device-pixel-content-box not observed for elem ' + elem; }); observer.observe(elem, {box: 'device-pixel-content-box'}); }); }; please refer to the specification for more details.
WebGL model view projection - Web APIs
resize the window and watch as the box skews out of shape.
...for one, it gets skewed whenever we
resize our window.
...the introduction of this parameter finally solves the problem wherein the model gets warped as the canvas is
resized and reshaped.
self.createImageBitmap() - Web APIs
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.
Resizing background images with background-size - CSS: Cascading Style Sheets
the background-size css property lets you
resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image.
... 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.
... html <div class="bgsizecover"> <p>try resizing this element!</p> </div> css .bgsizecover { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; width: 160px; height: 160px; border: 2px solid; color: pink;
resize: both; overflow: scroll; } result see also background-size background scaling of svg backgrounds ...
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
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.
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","no
resize","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...
Box Model Details - Archive of obsolete content
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 textbox is flexible so it will
resize as the window
resizes.
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...
Sizing items in CSS - Learn web development
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.
Styling links - Learn web development
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.
Other form controls - Learn web development
controlling textarea resizability the ability to
resize a <textarea> is controlled with the css
resize property.
... 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.
Drawing graphics - Learn web development
what if we want to display only a part of the image, or to
resize it?
...in this case, we have specified the same dimensions as the original slice, but you could
resize it by specifying different values.
Browser API
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.) mozbrowser
resize sent when the browser <iframe>'s window size has changed.
...this can occur on
resize and when the page size changes (while loading for example.) mozbrowserscrollviewchange sent when asynchronous scrolling (i.e.
PR_Realloc
resizes allocated memory on the heap.
... syntax #include <prmem.h> void *pr_realloc ( void *ptr, pruint32 size); parameters ptr a pointer to the existing memory block being
resized.
Gecko events
is supported: no event_movesize_start a window is being moved or
resized.
...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.
NS_CStringGetMutableData
adatalength [in] the number of characters to
resize the string's internal buffer to or pr_uint32_max to return the buffer as-is.
...this value will be zero if the function failed to
resize its internal buffer to the size requested.
Network request list - Firefox Developer Tools
the mouse pointer changes to a
resize icon when you move it over the border of a 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.
BaseAudioContext.createBuffer() - Web APIs
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.
Pixel manipulation with canvas - Web APIs
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.
EventTarget.addEventListener() - Web APIs
the attachevent() method could be paired with the on
resize event to detect when certain elements in a web page were
resized.
... the proprietary mselement
resize event, when paired with the addeventlistener method of registering event handlers, provides similar functionality as on
resize, firing when certain html elements are
resized.
HTMLImageElement.height - Web APIs
<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.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.
SVGElement - Web APIs
resize fired when an svg document is being
resized.
... also available via the on
resize property.
Basic concepts behind Web Audio API - Web APIs
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.
Window.innerHeight - Web APIs
to change the width of the window, call one of its
resize methods, such as
resizeto() or
resizeby().
...= self.innerheight; // 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().
Window.open() - Web APIs
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.
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 r
resize 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...
CSS Tutorials - CSS: Cascading Style Sheets
scaling background images css allows you to
resize images used as an element's background.
... css flexible boxes layouts this new layout allow you to give boxes flexibility, allowing them to be
resized smoothly.
object-fit - CSS: Cascading Style Sheets
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.
... none the replaced content is not
resized.
scroll-snap-type-x - CSS: Cascading Style Sheets
if content is added, moved, deleted or
resized the scroll offset will be adjusted to maintain the resting on that snap point.
...if content is added, moved, deleted or
resized the scroll offset may be adjusted to maintain the resting on that snap point.
scroll-snap-type-y - CSS: Cascading Style Sheets
if content is added, moved, deleted or
resized the scroll offset will be adjusted to maintain the resting on that snap point.
...if content is added, moved, deleted or
resized the scroll offset may be adjusted to maintain the resting on that snap point.
scroll-snap-type - CSS: Cascading Style Sheets
if content is added, moved, deleted or
resized the scroll offset will be adjusted to maintain the resting on that snap point.
...if content is added, moved, deleted or
resized the scroll offset may be adjusted to maintain the resting on that snap point.
scale() - CSS: Cascading Style Sheets
the scale() css function defines a transformation that
resizes an element on the 2d plane.
... because the amount of scaling is defined by a vector, it can
resize the horizontal and vertical dimensions at different scales.
scale3d() - CSS: Cascading Style Sheets
the scale3d() css function defines a transformation that
resizes an element in 3d space.
... because the amount of scaling is defined by a vector, it can
resize different dimensions at different scales.
Used value - CSS: Cascading Style Sheets
example this example computes and displays the used width value of three elements (updates on
resize): html <div id="no-width"> <p>no explicit width.</p> <p class="show-used-width">..</p> <div id="width-50"> <p>explicit width: 50%.</p> <p class="show-used-width">..</p> <div id="width-inherit"> <p>explicit width: inherit.</p> <p class="show-used-width">..</p> </div> </div> </div> css #no-width { width: auto; } #width-50 { width: 50%; } #width-inher...
...n updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.textcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-50"); updateusedwidth("width-inherit"); } updateallusedwidths(); window.addeventlistener('
resize', updateallusedwidths); result difference from computed value css 2.0 defined only computed value as the last step in a property's calculation.
Block formatting context - Developer guides
html <section> <div class="float">try to
resize this outer float</div> <div class="box"><p>normal</p></div> </section> <section> <div class="float">try to
resize this outer float</div> <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div> </section> css section { height:150px; } .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-...
...color: aliceblue; border: 5px solid steelblue; } .float { float: left; overflow: hidden; /* required by
resize:both */
resize: both; margin-right:25px; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .75); border: 1px solid black; padding: 10px; } rather than inline-blocks with width:<percentage>, in this case we don't have to specify the width of the right div.
The building blocks of responsive design - Progressive web apps (PWAs)
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.
... 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.
SVG Event Attributes - SVG: Scalable Vector Graphics
attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, on
resize, onscroll, onunload document element event attributes oncopy, oncut, onpaste 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, onlo...
...ad, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, on
resize, 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, on
resize, 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...
...n, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, on
resize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfocusin, onfocusout ...
Boxes - Archive of obsolete content
make the box style="display: block" and the wrapping behavior will occur when the box is
resized: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox style="display: block"> <label value="aaa"/> <label value="bbb"/> <label value="ccc"/> <label value="ddd"/> <label value="eee"/> <label value="fff"/> <label value="ggg"/> <label value="hhh"/> <label value="iii"/> <label value="jjj"/...
Label and description - Archive of obsolete content
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.
Sidebar - Archive of obsolete content
terface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); mainwindow.document.getelementbyid("sidebar-box").width=newwidth; } or function setsidebarwidth(newwidth) { window.top.document.getelementbyid("sidebar-box").width=newwidth; } you can also disable the ability to
resize it manually, using the mouse, by hiding the sidebar's splitter element.
Events - Archive of obsolete content
archived event pages domsubtreemodifiedmozaudioavailablemozbefore
resizemozorientationcachedchargingchangechargingtimechangecheckingdischargingtimechangedownloadingerrorlevelchangenoupdateobsoleteprogressupdateready ...
In-Depth - Archive of obsolete content
button, checkbox-container, checkbox, dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio,
resizer,
resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, ...
Venkman Introduction - Archive of obsolete content
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.
Elements - Archive of obsolete content
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.
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...
OpenClose - Archive of obsolete content
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.
Document Object Model - Archive of obsolete content
<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.
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 ...
Scrolling Menus - Archive of obsolete content
example - scrolling list of buttons the following example shows how to create a scrolling list of buttons (you will need to
resize the window to see the arrow buttons): example 1 : source view <arrowscrollbox orient="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> ...
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: ...
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...
:-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
supported 8.1.9 submit supported 8.1.10 select partial @selection does not work, select inside repeat may not work correctly, select that mixes itemsets with items may show them in the wrong order 282840; 371595; 372127; 8.1.11 select1 partial there are some
resize issues, select/deselect/valuechange firing in wrong order.
Scaling - Game development
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.
Flexbox - Learn web development
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.
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 ...
Perceived performance - Learn web development
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.
Accessibility API cross-reference
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".
Accessibility Features in Firefox
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.
Debugging Frame Reflow
other reflow reasons are: incremental reflow
resize reflow style change reflow dirty reflow the available width is 9180 twips.
Debugging Table Reflow
it can be invoked by set gecko_block_debug_flags=reflow the available options are: reflow really-noisy-reflow max-element-size space-manager verify-lines damage-repair lame-paint-metrics lame-reflow-metrics disable-
resize-opt these options can be combined with a comma separated list messages generated by the reflow switch: block(div)(1)@00be5ac4: reflowing dirty lines computedwidth=9000 computedheight=1500 this message is generated inside of nsresult nsblockframe::reflowdirtylines(nsblockreflowstate& astate) it first shows the block id and address and then the computed width and height from the htmlreflowst...
mozbrowserscrollareachanged
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.
MozScrolledAreaChanged
the mozscrolledareachanged event is fired when the document view has been scrolled or
resized.
Chrome-only Events reference
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.
Introduction to Layout in Mozilla
(tables, blocks, xul boxes) reflow “global” reflows initial,
resize, style-change processed immediately via presshell method incremental reflows targeted at a specific frame dirty, content-changed, style-changed, user-defined nshtmlreflowcommand object encapsulates info queued and processed asynchronously, nsipressshell::appendreflowcommand, processreflowcommands incremental reflow recursively descend to target ...
What every Mozilla translator should know
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.
Basics
notice how the mathematics appear in the main flow of text and respond as you
resize the window.
How to embed the JavaScript engine
// 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.
Gecko Roles
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.
Gecko states
state_offscreen scrolled off state_sizeable the object can be
resized.
XPCOM hashtable guide
good hashtable implementations will automatically
resize the hashtable in memory if extra space is needed, or if too much space has been allocated.
Detailed XPCOM hashtable guide
good hashtable implementations will automatically
resize the hashtable in memory if extra space is needed, or if too much space has been allocated.
nsIAccessibleRole
for example, a user clicks and drags a sizing grip in the lower-right corner of a window to
resize it.
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(...
nsIDOMWindowInternal
al] in domstring amessage, [optional] in domstring ainitial, [optional] in domstring atitle, [optional] in unsigned long asavepassword) void focus() void blur() void back() void forward() void home() void stop() void print() void moveto(in long xpos, in long ypos) void moveby(in long xdif, in long ydif) void
resizeto(in long width, in long height) void
resizeby(in long widthdif, in long heightdif) void scroll(in long xscroll, in long yscroll) nsidomwindow window interface's open() method loads the specified resource into the browsing context (window, <iframe> or tab) with the specified name.
nsIDocShell
allowwindowcontrol boolean specifies whether or not content is allowed to control the window (that is, to
resize or move the window).
Filelink Providers
note: the setup dialog window should
resize itself automatically in order to fit the content of the iframe without scrollbars.
Creating a Custom Column
don't forget to add in a splitter before the column to ensure that the user can easily
resize and drag our column around.
Flash Activation: Browser Comparison - Plugins
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.
Responsive Design Mode - Firefox Developer Tools
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.
Style Editor - Firefox Developer Tools
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.
Console messages - Firefox Developer Tools
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.
Using the CSS Painting API - Web APIs
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.
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.on
resize = 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
hue and chroma of the top layer.', 'preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.' ].reverse(); var width = 320; var height = 340; main program when the page loads, this code runs to set up and run the example: window.onload = function() { // lum in srgb var lum = { r: 0.33, g: 0.33, b: 0.33 }; //
resize canvas canvas1.width = width; canvas1.height = height; canvas2.width = width; canvas2.height = height; lightmix() colorsphere(); runcomposite(); return; }; and this code, runcomposite(), handles the bulk of the work, relying on a number of utility functions to do the hard parts.
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
enableobjectresizing enables or disables the
resize handles on images, tables, and absolutely-positioned elements and other resizable objects.
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
icking = false; function dosomething(scroll_pos) { // do something with the scroll position } window.addeventlistener('scroll', function(e) { last_known_scroll_position = window.scrolly; if (!ticking) { window.requestanimationframe(function() { dosomething(last_known_scroll_position); ticking = false; }); ticking = true; } }); see more, similar examples on the
resize event page.
Document - Web APIs
globaleventhandlers.on
resize is an eventhandler representing the code to be called when the
resize event is raised.
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
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.
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: scroll event - Web APIs
= false; function dosomething(scroll_pos) { // do something with the scroll position } window.addeventlistener('scroll', function(e) { last_known_scroll_position = window.scrolly; if (!ticking) { window.requestanimationframe(function() { dosomething(last_known_scroll_position); ticking = false; }); ticking = true; } }); note: you can find more examples on the
resize event page.
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") {...
MediaTrackConstraints - Web APIs
resizemode a constraindomstring object specifying a mode or an array of modes the ua can use to derive the resolution of a video track.
MediaTrackSettings - Web APIs
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.
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() mselement
resize document.mselementsfromrect() msisstatichtml navigator.mslaunchuri() mslaunchuricallback element.msmatchesselector() msprotocols msputpropertyenabled mswriteprofilermark ...
MouseEvent.altKey - Web APIs
on some linux variants, for example, a left mouse click combined with the alt key is used to move or
resize windows.
MutationObserver - Web APIs
mutation observer & customize
resize event listener & demo https://codepen.io/webgeeker/full/yjrzgg/ example the following example was adapted from this blog post.
sourceCapabilities - Web APIs
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.
Window.captureEvents() - Web APIs
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.
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
notes switching between regular window and full screen will fire the "
resize" event on the corresponding window.
Window.innerWidth - Web APIs
to change the window's width, use one of the window methods for resizing windows, such as
resizeby() or
resizeto().
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.releaseEvents() - Web APIs
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.
Window.showModalDialog() - Web APIs
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.
height - CSS: Cascading Style Sheets
examples html <div>watch this element as you
resize your viewport's height.</div> css /* exact height */ @media (height: 360px) { div { color: red; } } /* minimum height */ @media (min-height: 25rem) { div { background: yellow; } } /* maximum height */ @media (max-height: 40rem) { div { border: 2px solid blue; } } result specifications specification status comment media queries level 4t...
width - CSS: Cascading Style Sheets
examples html <div>watch this element as you
resize your viewport's width.</div> css /* exact width */ @media (width: 360px) { div { color: red; } } /* minimum width */ @media (min-width: 35rem) { div { background: yellow; } } /* maximum width */ @media (max-width: 50rem) { div { border: 2px solid blue; } } result specifications specification status comment media queries level 4the defi...
CSS Basic User Interface - CSS: Cascading Style Sheets
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.
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.
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...
Media queries - CSS: Cascading Style Sheets
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).
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():required
resize<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...
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...
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 r
resize 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
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.
<img>: The Image Embed element - HTML: Hypertext Markup Language
<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.
<textarea> - HTML: Hypertext Markup Language
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.
Global attributes - HTML: Hypertext Markup Language
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, on
resize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
Closures - JavaScript
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.
Lazy loading - Web Performance
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
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.
begin - SVG: Scalable Vector Graphics
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.
cursor - SVG: Scalable Vector Graphics
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.
end - SVG: Scalable Vector Graphics
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 .
media - SVG: Scalable Vector Graphics
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.
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, on
resize, 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...