Search completed in 1.21 seconds.
Scrolling Menus - Archive of obsolete content
« previousnext » this section will describe
scrolling menus and how to use the mechanism with other elements. creating a large menu you might wonder what happens if you create a menu with a lot of commands on it, such that all the items won't fit on the screen at once. mozilla will provide a
scrolling mechanism that will allow you to scroll through the items. if the available space is too small, arrows will appear on each end of the menu. if you move the mouse over the arrows, the menu will scroll up and down. if the available space is large enough, the arrows will not appear. note that the exact behavior of the
scrolling will depend on the current theme. this behavior is automatic. you do not have to do anything in order to get
scrolling menus. it will apply to menus on menuba...
...p and down. if the available space is large enough, the arrows will not appear. note that the exact behavior of the
scrolling will depend on the current theme. this behavior is automatic. you do not have to do anything in order to get
scrolling menus. it will apply to menus on menubars, in popups or menulists. it is implemented using an arrowscrollbox element. this element can be used to create a
scrolling box with arrows. the arrowscrollbox can be used anywhere a regular box can be used. you don't have to use it in menus. it is always a vertical box and may contain any elements inside it. you could use it to implement a list when you don't want it to be a drop-down. ...
..., in popups or menulists. it is implemented using an arrowscrollbox element. this element can be used to create a
scrolling box with arrows. the arrowscrollbox can be used anywhere a regular box can be used. you don't have to use it in menus. it is always a vertical box and may contain any elements inside it. you could use it to implement a list when you don't want it to be a drop-down. ...
...And 2 more matches
Square tilemaps implementation: Scrolling maps - Game development
note: when writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article. this article also builds upon implementing static square tilemaps — you should read that too if you've not done so already. the camera the camera is an object that holds information about which section of the game world or level is currently being shown. ...
...(x,y) points to the top left corner of visible portion of the map. width and height: the size of the camera's viewport. maxx and maxy: the limit for the camera's position — the lower limit will nearly always be (0,0), and in this case the upper limit is equal to the size of the world minus the size of the camera's viewport. rendering the map there are two main differences between rendering
scrolling maps vs. static maps: partial tiles might be shown. in static maps, usually the rendering starts at the top left corner of a tile situated at the top left corner of a viewport. while rendering
scrolling tilemaps, the first tile will often be clipped. todo: show a diagram here explaining this. only a section of the map will be rendered. if the map is bigger than the viewport, we can obviou...
... to handle these issues, we need to slightly modify the rendering algorithm. let's imagine that we have the camera pointing at (5,10). that means that the first tile would be 0x0. ...
...you can take a look at a live demo, and see its source code. there's another demo available, that shows how to make the camera follow a character. ...
-webkit-overflow-scrolling - CSS: Cascading Style Sheets
the -webkit-overflow-
scrolling css property controls whether or not touch devices use momentum-based
scrolling for a given element. syntax values auto use "regular"
scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen. touch use momentum-based
scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. the speed and duration of the continued
scrolling is proportional to how vigorous the scroll gesture was. also creates a new stacking context. ...
...move your finger from the touchscreen. touch use momentum-based
scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. the speed and duration of the continued
scrolling is proportional to how vigorous the scroll gesture was. also creates a new stacking context. formal definition initial valueautoapplies to
scrolling boxesinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | touch examples html <div class="scroll-touch"> <p> this paragraph has momentum
scrolling </p> </div> <div class="scroll-auto"> <p> this paragraph does not. </p> </div> css div { width: 100%; overflow: auto; } p { width: 200%; background: #f5f9fa; border: 2px solid #eaf2f4; pa...
...on typediscrete formal syntax auto | touch examples html <div class="scroll-touch"> <p> this paragraph has momentum
scrolling </p> </div> <div class="scroll-auto"> <p> this paragraph does not. </p> </div> css div { width: 100%; overflow: auto; } p { width: 200%; background: #f5f9fa; border: 2px solid #eaf2f4; padding: 10px; } .scroll-touch { -webkit-overflow-
scrolling: touch; /* lets it scroll lazy */ } .scroll-auto { -webkit-overflow-
scrolling: auto; /* stops
scrolling immediately */ } results specifications not part of any standard. apple has a description in the safari css reference. ...
tabscrolling - Archive of obsolete content
« xul reference home tab
scrolling new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the user may cycle through the results list by pressing the tab key. if false, the default, the tab key moves the focus to the next element. ...
textbox.tabScrolling - Archive of obsolete content
« xul reference home tab
scrolling obsolete since gecko 1.9.1 type: boolean if true, the user may cycle through the results list by pressing the tab key. if false, the default, the tab key moves the focus to the next element.as of gecko 1.9.1, this attribute is now always specified in lower case. ...
Document.scrollingElement - Web APIs
the
scrollingelement read-only property of the document interface returns a reference to the element that scrolls the document. in standards mode, this is the root element of the document, document.documentelement. when in quirks mode, the
scrollingelement attribute returns the html body element if it exists and is not potentially scrollable, otherwise it returns null. syntax var element = document.
scrollingelement; example var scrollelm = document.
scrollingelement; scrollelm.scrolltop = 0; specifications specification status comment css object model (cssom) view modulethe definition of '
scrollingelement' in that specification. working draft initial definition ...
Index - Web APIs
eading from gecko's own compositor. 562 canvasrenderingcontext2d.drawwindow() api, canvas, canvasrenderingcontext2d, method, non-standard, reference the non-standard and internal only canvasrenderingcontext2d.drawwindow() method of the canvas 2d api renders a region of a window into the canvas. the contents of the window's viewport are rendered, ignoring viewport clipping and
scrolling. 563 canvasrenderingcontext2d.ellipse() api, canvas, canvasrenderingcontext2d, method, reference the canvasrenderingcontext2d.ellipse() method of the canvas 2d api adds an elliptical arc to the current sub-path. 564 canvasrenderingcontext2d.fill() api, canvas, canvasrenderingcontext2d, method, reference the canvasrenderingcontext2d.fill() method of the ca...
... of the document interface returns a promise that resolves if the access to first-party storage was granted, and rejects if access was denied. 961 document.scripts api, document, html dom, property, reference the scripts property of the document interface returns a list of the <script> elements in the document. the returned object is an htmlcollection. 962 document.
scrollingelement api, document, property, reference,
scrollingelement the
scrollingelement read-only property of the document interface returns a reference to the element that scrolls the document. in standards mode, this is the root element of the document, document.documentelement. 963 document.selectedstylesheetset api, cssom, dom, property, reference, stylesheets the sele...
...ion through the browser's user interface. 998 document: pointercancel event api, document, event, pointerevent, onpointercancel, pointercancel the pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or
scrolling. 999 document: pointerdown event api, document, event, pointerevent, reference, onpointerdown, pointerdown the pointerdown event is fired when a pointer becomes active. for mouse, it is fired when the device transitions from no buttons depressed to at least one button depressed. for touch, it is fired when physical contact is made with the digitizer. for pen, it is fired when...
...And 14 more matches
Tiles and tilemaps overview - Game development
s and rows. a high-level algorithm could be: for (var column = 0; column < map.columns; column++) { for (var row = 0; row < map.rows; row++) { var tile = map.gettile(column, row); var x = column * map.tilesize; var y = row * map.tilesize; drawtile(tile, x, y); } } you can read more about this and see an example implementation in square tilemaps implementation: static maps. ...
...evel algorithm could be: for (var column = 0; column < map.columns; column++) { for (var row = 0; row < map.rows; row++) { var tile = map.gettile(column, row); var x = column * map.tilesize; var y = row * map.tilesize; drawtile(tile, x, y); } } you can read more about this and see an example implementation in square tilemaps implementation: static maps. ...
...le, x, y); } } you can read more about this and see an example implementation in square tilemaps implementation: static maps.
scrolling tilemaps
scrolling tilemaps only show a small portion of the world at a time. they can follow a character — like in platformers or rpgs — or allow the player to control the camera — like in strategy or simulation games. positioning and camera in all
scrolling games, we need a translation between world coordinates (the position where sprites or other elements are located in the level or game world) and screen coordinates (the actual position where those elements are rendered on the screen). the world coordinates can be expressed in terms of tile position (row and column of the map) or in pixels across the map, depending on the game. to be able to trans...
...And 4 more matches
Index - Archive of obsolete content
attributes, xul reference no summary! 1087 tab.selected xul, xul attributes, xul reference no summary! 1088 tabindex xul attributes, xul reference no summary! 1089 tabmodalpromptshowing xul, xul methods, xul reference no summary! 1090 tabs.onselect xul attributes, xul reference no summary! 1091 tab
scrolling xul attributes, xul reference no summary! 1092 targets xul attributes, xul reference no summary! 1093 template xul attributes, xul reference no summary! 1094 template.container xul attributes, xul reference no summary! 1095 textbox.autofill no summary! 1096 textbox.crop xul attributes, xu...
...box.minresultsforpopup no summary! 1105 textbox.onblur xul, xul attributes, xul reference no summary! 1106 textbox.onchange xul attributes, xul reference no summary! 1107 textbox.onfocus xul, xul attributes, xul reference no summary! 1108 textbox.showcommentcolumn no summary! 1109 textbox.tab
scrolling no summary! 1110 textbox.type xul attributes, xul reference no summary! 1111 textbox.value xul attributes, xul reference no summary! 1112 textnode.value xul attributes, xul reference no summary! 1113 timeout xul attributes, xul reference no summary! 1114 timepicker.increment xul attribute...
...bject xul properties, xul reference no summary! 1578 suppressonselect xul properties, xul reference no summary! 1579 tab.control xul properties, xul reference no summary! 1580 tabcontainer xul properties, xul reference no summary! 1581 tabindex xul properties, xul reference no summary! 1582 tab
scrolling xul properties, xul reference no summary! 1583 tabbox xul, xul properties, xul reference no summary! 1584 tabbox.tabs xul properties, xul reference no summary! 1585 tabbrowser.tabs xul, xul properties, xul reference no summary! 1586 tabpanels xul properties, xul reference no summary! 1587 tabs...
...And 3 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
ete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, minresultsforpopup, nomatch, onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tab
scrolling, tab
scrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspo...
...etedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tab
scrolling, textlength, textvalue, timeout, type, useraction, value methods addsession, clearresults, getdefaultsession, getresultat, getresultcount, getresultvalueat, getsession, getsessionbyname, getsessionresultat, getsessionstatusat, getsessionvalueat, removesession, select, setselectionrange, syncsessions examples (example needed) attributes accesskey type: character this sho...
...te a communicator 4.x style autocomplete textbox. the default value is true. size type: integer the number of characters that can be displayed in the textbox. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. ...
...And 3 more matches
Scroll-linked effects
the definition of a scroll-linked effect is an effect implemented on a webpage where something changes based on the scroll position, for example updating a positioning property with the aim of producing a parallax
scrolling effect. this article discusses scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.
scrolling effects explained often
scrolling effects are implemented by listening for the scroll event and then updating elements on the page in some way (usually the css position or transform property.) you can find a sampling of such effects at css scroll api: use cases. these effects work well in browsers where the
scrolling is done synchronously on the browser's main thread. however, most browsers now support some sort of asynchronou...
... effects are implemented by listening for the scroll event and then updating elements on the page in some way (usually the css position or transform property.) you can find a sampling of such effects at css scroll api: use cases. these effects work well in browsers where the
scrolling is done synchronously on the browser's main thread. however, most browsers now support some sort of asynchronous
scrolling in order to provide a consistent 60 frames per second experience to the user. in the asynchronous
scrolling model, the visual scroll position is updated in the compositor thread and is visible to the user before the scroll event is updated in the dom and fired on the main thread. this means that the effects implemented will lag a little bit behind what the user sees the scroll position to be. thi...
... is visible to the user before the scroll event is updated in the dom and fired on the main thread. this means that the effects implemented will lag a little bit behind what the user sees the scroll position to be. this can cause the effect to be laggy, janky, or jittery — in short, something we want to avoid. below are a couple of examples of effects that would not work well with asynchronous
scrolling, along with equivalent versions that would work well: example 1: sticky positioning here is an implementation of a sticky-positioning effect, where the "toolbar" div will stick to the top of the screen as you scroll down. <body style="height: 5000px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top...
...And 3 more matches
position - CSS: Cascading Style Sheets
perspective and filter contributing to containing block formation.) its final position is determined by the values of top, right, bottom, and left. this value always creates a new stacking context. in printed documents, the element is placed in the same position on every page. ...
...this effectively inhibits any "sticky" behavior (see the github issue on w3c csswg). ...
...this effectively inhibits any "sticky" behavior (see the github issue on w3c csswg). ...
...And 2 more matches
Index - Archive of obsolete content
xul attributes, xul reference no summary! 356 tab.selected xul, xul attributes, xul reference no summary! 357 tabindex xul attributes, xul reference no summary! 358 tabmodalpromptshowing xul, xul methods, xul reference no summary! 359 tabs.onselect xul attributes, xul reference no summary! 360 tab
scrolling xul attributes, xul reference no summary! 361 targets xul attributes, xul reference no summary! 362 template xul attributes, xul reference no summary! 363 template.container xul attributes, xul reference no summary! 364 textbox.autofill no summary! 365 textbox.crop xul attributes, xul ref...
... textbox.minresultsforpopup no summary! 374 textbox.onblur xul, xul attributes, xul reference no summary! 375 textbox.onchange xul attributes, xul reference no summary! 376 textbox.onfocus xul, xul attributes, xul reference no summary! 377 textbox.showcommentcolumn no summary! 378 textbox.tab
scrolling no summary! 379 textbox.type xul attributes, xul reference no summary! 380 textbox.value xul attributes, xul reference no summary! 381 textnode.value xul attributes, xul reference no summary! 382 timeout xul attributes, xul reference no summary! 383 timepicker.increment xul attributes, xu...
... subject xul properties, xul reference no summary! 847 suppressonselect xul properties, xul reference no summary! 848 tab.control xul properties, xul reference no summary! 849 tabcontainer xul properties, xul reference no summary! 850 tabindex xul properties, xul reference no summary! 851 tab
scrolling xul properties, xul reference no summary! 852 tabbox xul, xul properties, xul reference no summary! 853 tabbox.tabs xul properties, xul reference no summary! 854 tabbrowser.tabs xul, xul properties, xul reference no summary! 855 tabpanels xul properties, xul reference no summary! 856 tabs ...
...tutorials, xul, xul_tutorial in this section, we'll look at creating progress meters. 1054 property files internationalization, localization, tutorials, xul, xul_tutorial no summary! 1055 rdf datasources tutorials, xul, xul_tutorial no summary! 1056 scroll bars now, let's find out to add scroll bars to a window. 1057
scrolling menus tutorials, xul, xul_tutorial this section will describe
scrolling menus and how to use the mechanism with other elements. 1058 simple menu bars tutorials, xul, xul_tutorial in this section, we'll see how to create a menu bar with menus on it. 1059 skinning xul files by hand xul no summary! 1060 splitters tutorials, xul, xul_...
textbox (Toolkit autocomplete) - Archive of obsolete content
ompletedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tab
scrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimag...
...this should be one of the characters that appears in the label a...
... the column. if this attribute is not specified, the image column doesn't appear. size type: integer the number of characters that can be displayed in the textbox. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. tab
scrolling new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the user may cycle through the results list by pressing the tab key. if false, the default, the tab key moves the focus to the next element. timeout type: integer for autocomplete textboxes, the number of milliseconds before the textbox starts searching for completions. the default is 50 milliseconds. for search textboxe...
...racter. showcommentcolumn type: boolean gets and sets the value of the showcommentcolumn (or showcommentcolumn) attribute. showimagecolumn type: boolean gets and sets the value of the showimagecolumn attribute. size type: integer gets and sets the value of the size attribute. tabindex type: integer gets and sets the value of the tabindex attribute. tab
scrolling type: boolean gets and sets the value of the tab
scrolling (or tab
scrolling) attribute. textlength type: integer holds the length of the text entered in the textbox. this property is read-only. textvalue new in thunderbird 15 requires seamonkey 2.12 type: string returns the content of the textbox. equivalent to the value property. note: setting the value causes an input event to...
arrowscrollbox - Archive of obsolete content
the user only needs to hover the mouse over the arrows to scroll the box. this element is typically used for large popup menus. hovering the mouse over one of the (active) arrows triggers a scroll event. more information is available in the xul tutorial. ...
...ill have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. smoothscroll type: boolean true initially enables smooth
scrolling for the corresponding arrowscrollbox, false disables it. currently, smooth
scrolling supports horizontal arrowscrollboxes only. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties inherited properties align, , allo...
... disabled type: boolean gets and sets the value of the disabled attribute. scrollboxobject type: nsiscrollboxobject the scroll box object implements the nsiscrollboxobject interface, which may be used to retrieve and adjust the scroll position of the list box. scrollincrement type: integer a read only property that lets you retrieve the number of pixels by which
scrolling will occur when the arrowscrollbox is clicked. smoothscroll type: boolean can be set to enable or disable smooth
scrolling for the corresponding arrowscrollbox. if not set explicitly, it will fall back to the smoothscroll attribute and then to the toolkit.scrollbox.smoothscroll preference. currently, smooth
scrolling supports horizontal arrowscrollboxes only. ta...
... scrollbyindex( lines ) return type: no return value scrolls the contents of the arrowscrollbox by a certain number of lines. a line is a single element. use a positive value as the lines argument to scroll forward that many lines, or a negative value to scroll backward that many lines. ...
-ms-scroll-chaining - Archive of obsolete content
no bounce effect is shown. none a bounce effect is shown when the user hits a scroll limit during any manipulation. ...
...no bounce effect is shown. none a bounce effect is shown when the user hits a scroll limit during any manipulation. formal syntax chained | none examples the following example illustrates the -ms-scroll-chaining property in use. ...
...croll limit during any manipulation. no bounce effect is shown. none a bounce effect is shown when the user hits a scroll limit during any manipulation. formal syntax chained | none examples the following example illustrates the -ms-scroll-chaining property in use. ...
...as its -ms-scroll-chaining property set to chained, which means that when a user is
scrolling through a nested scrollable element and it hits its boundary the parent scrollable element will begin to scroll in the same direction. had the -ms-scroll-chaining property been set to none, the user would observe a bounce effect when the nested element reaches its boundary. for more information, see html
scrolling, panning and zooming sample or internet explorer 10
scrolling, panning, and zooming with touch. .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 5...
Overflowing content - Learn web development
sing overflow: scroll, browsers with visible scrollbars will always display them—even if there is not enough content to overflow. this offers the advantage of keeping the layout consistent, instead of scrollbars appearing or disappearing, depending upon the amount of content in the container. remove some content from the box below. notice how the scrollbars remain, even if there is no need for
scrolling. in the example above, we only need to scroll on the y axis, however we get scrollbars in both axes. to just scroll on the y axis, you could use the overflow-y property, setting overflow-y: scroll. you can also scroll on the x axis using overflow-x, although this is not a recommended way to accommodate long words! if you have a long word in a small box, you might consider using the word-br...
...oll on the x axis using overflow-x, although this is not a recommended way to accommodate long words! if you have a long word in a small box, you might consider using the word-break or overflow-wrap properties. in addition, some of the methods discussed in sizing items in css may help you create boxes that scale better with varying amounts of content. as with scroll, you get a scrollbar in the
scrolling dimension whether or not there is enough content to cause a scrollbar. note: you can specify x and y
scrolling using the overflow property, passing two values. if two keywords are specified, the first applies to overflow-x and the second applies to overflow-y. otherwise, both overflow-x and overflow-y are set to the same value. for example, overflow: scroll hidden would set overflow-x to scroll...
...rflow establishes a block formatting context when you use a value of overflow such as scroll or auto, you create a block formatting context (bfc). the content of the box that you have changed the value of overflow for acquires a self-contained layout. content outside the container cannot poke into the container, and nothing can poke out of that container into the surrounding layout. this enables
scrolling behavior, as all box content needs to be contained and not overlap, in order to create a consistent
scrolling experience. unwanted overflow in web design modern layout methods (described in css layout) manage overflow. they largely work without assumptions or dependencies for how much content there will be on a web page. this has not always been the norm. in the past, some sites were built wi...
...to not rely on fixed-height containers. when developing a site, always keep overflow in mind. test designs with large and small amounts of content. increase the font sizes of text. generally ensure that your css works in a robust way. changing the value of overflow to hide content, or to add scrollbars, is likely to be reserved for a few select use cases. (for example, where you intend to have a
scrolling box) test your skills! there is a lot to absorb from this lesson! can you remember the most important information? to check your understanding, see test your skills: overflow. summary this lesson introduced the concept of overflow. you should understand that default css avoids making overflowing content invisible. you have discovered that you can manage potential overflow, and also, that you ...
EventTarget.addEventListener() - Web APIs
ndicating that the listener should be invoked at most once after being added. if true, the listener would be automatically removed when invoked. passive a boolean that, if true, indicates that the function specified by listener will never call preventdefault(). if a passive listener does call preventdefault(), the user agent will do nothing other than generate a console warning. see improving
scrolling performance with passive listeners to learn more. mozsystemgroup a boolean indicating that the listener should be added to the system group. available only in code running in xbl or in the chrome of the firefox browser. usecapture optional a boolean indicating whether events of this type will be dispatched to the registered listener before being dispatched to any eventtarget beneath i...
... to preven...
...e){/*do something*/}; els[j].addeventlistener("click", processevent, false); } improving
scrolling performance with passive listeners according to the specification, the default value for the passive option is always false. however, this introduces the potential for event listeners handling certain touch events (among others) to block the browser's main thread while it is attempting to handle
scrolling, resulting in possibly enormous reduction in performance during scroll handling. to prevent this problem, some browsers (specifically, chrome and firefox) have changed the default value of the passive option to true for the touchstart and touchmove events on the document-level nodes window, document, and document.body. this prevents the event listener from being called, so it can't block page re...
...ormous reduction in performance during scroll handling. to prevent this problem, some browsers (specifically, chrome and firefox) have changed the default value of the passive option to true for the touchstart and touchmove events on the document-level nodes window, document, and document.body. this prevents the event listener from being called, so it can't block page rendering while the user is
scrolling. note: see the compatibility table below if you need to know which browsers (and/or which versions of those browsers) implement this altered behavior. you can override this behavior by explicitly setting the value of passive to false, as shown here: /* feature detection */ let passiveifsupported = false; try { window.addeventlistener("test", null, object.defineproperty( {}, ...
Intersection Observer API - Web APIs
ion to each other, has been a difficult task for which solutions have been unreliable and prone to causing the browser and the sites the user is accessing to become sluggish. as the web has matured, the need for this kind of information has grown. intersection information is needed for many reasons, such as: lazy-loading of images or other content as a page is scrolled. implementing "infinite
scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages. reporting of visibility of advertisements in order to calculate ad revenues. deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result. implementing intersection detection in the past involved event handle...
...ementing intersection detection in the past involved event handlers and loops calling methods like element.getboundingclientrect() to build up the needed information for every element affected. since all this code runs on the main thread, even one of these can cause performance problems. when a site is loaded with these tests, things can get downright ugly. consider a web page that uses infinite
scrolling. it uses a vendor-provided library to manage the advertisements placed periodically throughout the page, has animated graphics here and there, and uses a custom library that draws notification boxes and the like. each of these has its own intersection detection routines, all running on the main thread. the author of the web site may not even realize this is happening, since they may know very lit...
...to intersecting. note that it's possible to have a non-zero intersection rectangle, which can happen if the intersection is exactly along the boundary between the two or the area of boundingclientrect is zero. this state of the target and root sharing a boundary line is not considered enough to be considered transitioning into an intersecting state. to get a feeling for how thresholds work, try
scrolling the box below around. each colored box within it displays the percentage of itself that's visible in all four of its corners, so you can see these ratios change over time as you scroll the container. each box has a different set of thresholds: the first box has a threshold for each percentage point of visibility; that is, the intersectionobserver.thresholds array is [0.00, 0.01, 0.02, ..., 0.9...
...late.queryselector(".samplebox").id = boxid; wrapper.appendchild(document.importnode(template, true)); // set up the observer for this box observeroptions.threshold = thresholdsets[i]; observers[i] = new intersectionobserver(intersectioncallback, observeroptions); observers[i].observe(document.queryselector("#" + boxid)); } // scroll to the starting position document.
scrollingelement.scrolltop = wrapper.firstelementchild.getboundingclientrect().top + window.scrolly; document.
scrollingelement.scrollleft = 750; } intersectioncallback = (entries) => { entries.foreach((entry) => { let box = entry.target; let visiblepct = (math.floor(entry.intersectionratio * 100)) + "%"; box.queryselector(".topleft").innerhtml = visiblepct; box.queryselector(".toprigh...
Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
the css scroll snap specification gives us a way to snap
scrolling to certain points as the user scrolls through a document. this can be helpful in creating a more app-like experience on mobile or even on the desktop for some types of applications. basics of scroll snap the key properties of the scroll snap specification are scroll-snap-type and scroll-snap-align. the scroll-snap-type property is used on the scroll container to state the type and direction of
scrolling. the scroll-snap-align property must be used on child elements in order to set the position that
scrolling will snap to. the below example demonstrates scroll snapping along the y axis, with scroll-snap-align used on the section element to dictate the point the
scrolling should stop. using scroll-snap-type the scroll-snap-typ...
...he browser whether the content has to snap to a certain point, no matter where the scroll is. the proximity keyword means that it may snap to the point, but does not have to. using mandatory gives a very consistent experience — you know that the browser will always snap to each defined point. this means you can be confident that something you expect to be at the top of the screen will be when
scrolling finishes. however, it can cause problems if the content is larger than you expect — users may find themselves in the frustrating position of never being able to scroll and view a certain point in the content. therefore, use of mandatory should be carefully considered and only used in situations where you know how much content is on the screen at any one time. the proximity value will only snap...
...f scroll-snap-align to see how this changes the scroll behavior. padding the scroll container if you do not want the content to snap right to the edge of the scroll container you can use the scroll-padding property or its equivalent longhand values to set some padding. in the below example i have set scroll-padding to 40 pixels. when we snap to the start of the second and third sections, the
scrolling stops 40 pixels away from the start of the section. try changing the scroll-padding value to see how this changes the distance. this is potentially useful if you have a fixed element, for example a navigation bar, which could end up overlapping scrolled content. by using scroll-padding you can reserve a space for it as in the example below where my <h1> remains on screen as the content scrolls...
... should snap to each defined snap point — meaning that in our examples above we would stop at the start of each section — or be able to skip past sections. this property has fewer browser implementations than the rest of the specification. it could be helpful in ensuring users see each section of the scroller and don't accidentally zip past them. however it could be problematic in making the
scrolling experience slower if the user is looking for a particular section. note: the scroll-snap-stop property is currently marked at risk in the current candidate recommendation spec, therefore it may be removed. ...
overscroll-behavior - CSS: Cascading Style Sheets
the overscroll-behavior css property sets what a browser does when reaching the boundary of a
scrolling area. it's a shorthand for overscroll-behavior-x and overscroll-behavior-y. /* keyword values */ overscroll-behavior: auto; /* default */ overscroll-behavior: contain; overscroll-behavior: none; /* two values */ overscroll-behavior: auto contain; /* global values */ overscroll-behavior: inherit; overscroll-behavior: initial; overscroll-behavior: unset; by default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. ...
...oll-behavior: none; /* two values */ overscroll-behavior: auto contain; /* global values */ overscroll-behavior: inherit; overscroll-behavior: initial; overscroll-behavior: unset; by default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. you may also have noticed that when you have a dialog box with
scrolling content on top of a page of
scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining. in some cases these behaviors are not desirable. you can use overscroll-behavior to get rid of unwanted scroll chaining and the browser's facebook/twitter app-inspired "pull to refresh"-type behavior. syntax the over...
...ies the overscroll-behavior value on the x and y axes respectively. if only one value is specified, both x and y are assumed to have the same value. values auto the default scroll overflow behavior occurs as normal. contain default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring
scrolling areas, e.g. underlying elements will not scroll. none no scroll chaining occurs to neighbouring
scrolling areas, and default scroll overflow behavior is prevented. formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ contain | none | auto ]{1,2} exampl...
... both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. ...
scroll-behavior - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note that any other scrolls, such as those performed by the user, are not affected by this property. when this property is specified on the root element, it applies to the viewport instead. this property specified on the body element will not propagate to the viewport. user agents are allowed to ignore this property. ...
... specified on the body element will not propagate to the viewport. user agents are allowed to ignore this property. syntax /* keyword values */ scroll-behavior: auto; scroll-behavior: smooth; /* global values */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: unset; the scroll-behavior property is specified as one of the keyword values listed below. ...
...ate to the viewport. user agents are allowed to ignore this property. syntax /* keyword values */ scroll-behavior: auto; scroll-behavior: smooth; /* global values */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: unset; the scroll-behavior property is specified as one of the keyword values listed below. values auto the
scrolling box scrolls instantly. ...
...havior: unset; the scroll-behavior property is specified as one of the keyword values listed below. values auto the
scrolling box scrolls instantly. smooth the
scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. user agents should follow platform conventions, if any. ...
scroll-margin - CSS: Cascading Style Sheets
croll-margin-bottom scroll-margin-left scroll-margin-right scroll-margin-top syntax /* <length> values */ scroll-margin: 10px; scroll-margin: 1em .5em 1em 1em; /* global values */ scroll-margin: inherit; scroll-margin: initial; scroll-margin: unset; values <length> an outset from the corresponding edge of the scroll container. description you can see the effect of scroll-margin by
scrolling to a point partway between two of the "pages" of the example's content. the value specified for scroll-margin determines how much of the page that's primarily outside the snapport should remain visible. thus, the scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed bor...
...e specified outsets. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,4} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented. the aim here is to create four horizontally-
scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overf...
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant pa...
...part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin-values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin: 1rem; } .scroller > div:nth-child(3) { scroll-margin: 2rem; } this means that when
scrolling past the middle child elements, the
scrolling will snap to 1rem outside the left edge of the second <div>, and 2rems outside the left edge of the third <div>. note: here we are setting scroll-margin on all sides at once, but only the start edge is really relevant. it would work just as well here to only set a scroll margin on that one edge, for example with scroll-margin-inline-start: 1rem, or ...
<marquee>: The Marquee element (Obsolete) - HTML: Hypertext Markup Language
possible values are left, right, up and down. if no value is specified, the default value is left. height sets the height in pixels or percentage value. ...
...s the edges of its content area using its attributes. dom interface htmlmarqueeelement attributes behavior sets how the text is scrolled within the marquee. possible values are scroll, slide and alternate. if no value is specified, the default value is scroll. bgcolor sets the background color through color name or hexadecimal value. direction sets the direction of the
scrolling within the marquee. possible values are left, right, up and down. if no value is specified, the default value is left. height sets the height in pixels or percentage value. hspace sets the horizontal margin loop sets the number of times the marquee will scroll. if no value is specified, the default value is −1, which means the marquee will scroll continuously. scrollamount sets the amou...
...n the marquee. possible values are left, right, up and down. if no value is specified, the default value is left. height sets the height in pixels or percentage value. hspace sets the horizontal margin loop sets the number of times the marquee will scroll. if no value is specified, the default value is −1, which means the marquee will scroll continuously. scrollamount sets the amount of
scrolling at each interval in pixels. the default value is 6. scrolldelay sets the interval between each scroll movement in milliseconds. the default value is 85. note that any value smaller than 60 is ignored and the value 60 is used instead, unless truespeed is specified. truespeed by default, scrolldelay values lower than 60 are ignored. if truespeed is present, those values are not ignored. vspace...
.... if truespeed is present, those values are not ignored. vspace sets the vertical margin in pixels or percentage value. width sets the width in pixels or percentage value. event handlers onbounce fires when the marquee has reached the end of its scroll position. it can only fire when the behavior attribute is set to alternate. onfinish fires when the marquee has finished the amount of
scrolling that is set by the loop attribute. it can only fire when the loop attribute is set to some number that is greater than 0. onstart fires when the marquee starts
scrolling. methods start() starts
scrolling of the marquee. stop() stops
scrolling of the marquee. examples <marquee>this text will scroll from right to left</marquee> <marquee direction="up">this text will scroll from bottom...
Miscellaneous - Archive of obsolete content
http://mxr.mozilla.org/seamonkey/sou...pdates.js#1639 for firefox 2 see around here: http://mxr.mozilla.org/mozilla1.8/so...pdates.js#1631 bug 338039 tracks improving this situation by providing a simple method to restart the application. example for firefox: services.startup.quit(services.startup.eforcequit|services.startup.erestart); mouse and keyboard detecting mouse wheel events when
scrolling the mouse wheel on an element, the dommousescroll event fires. event.detail contains the number of lines to scroll. this event is mozilla-only; other browsers may support window.onmousewheel. <div id="scrollarea" style="overflow: scroll; height: 6em; width: 10em;"> this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. this is th...
...he mouse wheel on an element, the dommousescroll event fires. event.detail contains the number of lines to scroll. this event is mozilla-only; other browsers may support window.onmousewheel. <div id="scrollarea" style="overflow: scroll; height: 6em; width: 10em;"> this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. </div> <script type="text/javascript"> var elm = document.getelementbyid("scrollarea"); elm.addeventlistener("dommousescroll", function scroll(event){ //event.detail is posit...
... this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. this is the
scrolling area. </div> <script type="text/javascript"> var elm = document.getelementbyid("scrollarea"); elm.addeventlistener("dommousescroll", function scroll(event){ //event.detail is positive for a downward scroll, negative for an upward scroll alert("
scrolling " + event.detail + " lines"); }, false); </script> if you do not receive a dommousescroll event while holding any of the modifier keys (ctrl,shift,alt,meta) you should check the mousewheel.withcontrolkey.action and related preferences. the meaning of the action preference is shown in the following table mousewheel.withxxxkey.action result 0 scroll by lines. if set, yo...
Theme changes in Firefox 2 - Archive of obsolete content
right end of the search bar. global/about.css new file; css used in the application's about box. global/alltabs-box-bkgnd.png new file; the background for the "all tabs" drop-down menu at the right side of the tab bar. global/alltabs-box-overflow-bkgnd.png new file; the background for the "all tabs" drop-down menu when there are enough tabs to activate tab bar
scrolling. global/browser.css revised to support new styles for the main browser window. global/globalbindings.xml updated to support changes to the tab bar, including per-tab close buttons. global/icons/alltabs.png not actually used; left over from earlier drafts of the theme. global/inactivetab-left.png removed file. global/inactivetab-right.png ...
... global/scrollbox/autorepeat-arrow-up-dis.gif new file; icon displayed for a disabled autorepeat up arrow in a scroll box. global/scrollbox/autorepeat-arrow-up.gif new file; icon displayed for an autorepeat up arrow in a scroll box. global/scrollbox.css needs to be updated to include new styles. ...
... global/scrollbox/autorepeat-arrow-up.gif new file; icon displayed for an autorepeat up arrow in a scroll box. global/scrollbox.css needs to be updated to include new styles. global/tab-arrow-end-bkgnd.png new file; the background for the
scrolling tab bar arrow at the right side of the tab bar. global/tab-arrow-end.png new file; the arrow drawn in the
scrolling tab bar box at the right end of the tab bar. global/tab-arrow-start-bkgnd.png new file; the background for the
scrolling tab bar arrow at the left side of the tab bar. global/tab-arrow-start.png new file; the arrow drawn in the
scrolling tab bar box at the left end of the tab bar. global/tab-left.png new file; the left edge of a tab. global/tab-middle.
Gecko info for Windows accessibility vendors
eyboardshortcut msaa support: iaccessible events and unique id's what msaa events do we support? event_focus is fired for focus changes on any kind of focusable object event_statechange is used in check boxes, radio buttons, text fields, combo boxes and list boxes. it's also used in the root pane object to show when the state_busy flag changes from loading new content. event_
scrollingend is used to indicate when a document has scrolled, even if only 1 line. gecko fires this event when the
scrolling is finished, rather than fire excessive events. event_
scrollingstart is fired when the user has jumped to a named anchor within the page. the event is fired on the first accessible object in the part of the document that has been jumped to. event_menupopupstart and event_men...
...y community ): iaccessible methods that we don't currently support: get_acchelp get_acchelptopic put_accname put_accvalue we do not currently support the visual basic (idispatch) bindings for iaccessible. we do not currently support directional navigation via accnavigate() we do not currently support scroll bars as iaccessible objects, although we do support event_
scrollingend and isimpledomnode::scrollto(), explained below. we do not currently support state_moveable, state_sizeable or state_marqueed. we do not currently support role_system_row, although internet explorer doesn't either, and the reason seems apparent. it is not obvious where the role_system_row should exist in the tree when the html rowspan attribute is used to combine to cells in different ...
...causes of leaks in chrome and extension code. additional dom support there are a number of things available in the parsed html or xml of a document that msaa will not tell you. to solve this problem, we provide access to the content dom for gecko documents, through two interfaces: isimpledomnode gives you the actual parsed structure of a document, by node. isimpledomtext supports
scrolling and rectangular bounds information on a character by character basis isimpledomdocument contains basic document information, such title, url, doctype and mime type. compiling the .idl files to use these interfaces, you'll need to get the isimpledomnode.idl, isimpledomtext.idl and isimpledomdocument.idl file. you must make a header files for them, by running these commands: ...
mozbrowserscrollviewchange
apcz) starts or stops. ...
... event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. ...
...custom object. details the details property returns an anonymous javascript object with the following properties: state a domstring representing the current state of
scrolling in the viewport — available values are started and stopped. ...
nsIScrollable
this is a generic interface without concern for the type of content that may be inside. ...
...lorientation, in long minpos, in long maxpos); obsolete since gecko 29.0 void setscrollrangeex(in long minhorizontalpos, in long maxhorizontalpos, in long minverticalpos, in long maxverticalpos); obsolete since gecko 29.0 constants scroll orientations scroll orientations a scrollbar can be in. constant value description scrollorientation_x 1 horizontal
scrolling. when passing this in to a method you are requesting or setting data for the horizontal scrollbar. scrollorientation_y 2 vertical
scrolling. when passing this in to a method you are requesting or setting data for the vertical scrollbar. scrollbar states visibility states of a scrollbar. constant value description scrollbar_auto 1 scrollbars visib...
...crollbar. scrollorientation_y 2 vertical
scrolling. when passing this in to a method you are requesting or setting data for the vertical scrollbar. scrollbar states visibility states of a scrollbar. constant value description scrollbar_auto 1 scrollbars visible only when needed. scrollbar_never 2 scrollbars never visible, even when
scrolling is still possible. scrollbar_always 3 scrollbars always visible, even when
scrolling is not possible. methods getcurscrollpos() obsolete since gecko 29.0 (firefox 29.0 / thunderbird 29.0 / seamonkey 2.26) long getcurscrollpos( in long scrollorientation ); parameters scrollorientation an integer representing the orientation of the scrollbar...
Paint Flashing Tool - Firefox Developer Tools
with the help of this tool you can figure out whether your website is causing the browser to repaint more than it needs to. because repaints can be performance-intensive operations, eliminating unnecessary repaints can improve your website's responsiveness. repaints and responsiveness when the browser renders a web page it parses the html and css, determines how to lay it out, and then paints it to actually display the content on the screen. ...
...low responding to user input (also known as "janky"). that's where the paint flashing tool helps: by showing you the areas that the browser repaints in response to an event, you can see whether it is repainting more than it needs to. using the paint flashing tool open the toolbox, then click the icon labeled "highlight painted area": then try using the page. ...
...using the paint flashing tool open the toolbox, then click the icon labeled "highlight painted area": then try using the page. after moving the mouse around and
scrolling a bit, the above page looks like this: in this example, there are two main sources of repaints: moving the mouse over links makes the browser repaint them, because they have a style applied using the :hover pseudo-class
scrolling makes the browser repaint the new part of the page coming into view at the bottom of the screen, and also the scrollbar at the top-right to deactivate paint flashing, click the "highlight painted area" icon in the toolbox again. example: css transitions one area where implementation choices can affect repaint efficiency is in css transitions. the example below shows two different ways to move...
Element: mousewheel event - Web APIs
note: on macos, the scroll distance (and therefore the value of detail) is computed based on the accelerated scroll distance. on linux, 2 or -2 is set per native wheel event. wheeldelta, wheeldeltax and wheeldeltay value the wheeldelta attribute value is an abstract value w...
...ndler property onmousewheel the detail property the value of the detail property is always zero, except in opera, which uses detail similarly to the firefox-only dommousescroll event's detail value, which indicates the scroll distance in terms of lines, with negative values indicating the
scrolling movement is either toward the bottom or toward the right, and positive values indicating
scrolling to the top or left. note: on macos, the scroll distance (and therefore the value of detail) is computed based on the accelerated scroll distance. on linux, 2 or -2 is set per native wheel event. wheeldelta, wheeldeltax and wheeldeltay value the wheeldelta attribute value is an abstract value which indicates how far the wheel turned. if the wheel has rotated away from the user, it's positive...
...ifferent from dom level 3 event's wheel. however, the meaning of the amount of these values is not the same between browsers. see following explanation for the detail. ie and opera (presto) only support wheeldelta attribute and do not support horizontal scroll. the wheeldeltax attribute value indicates the wheeldelta attribute value along the horizontal axis. when a user operates the device for
scrolling to right, the value is negative. otherwise, i.e., if it's to left, the value is positive. the wheeldeltay attribute value indicates the wheeldelta attribute value along the vertical axis. the sign of the value is the same as the wheeldelta attribute value. internet explorer the value is the same as the delta value of windows' wm_mousewheel or wm_mousehwheel. it means that if the mouse wheel do...
HTMLMarqueeElement - Web APIs
roperties inherits properties from its parent, htmlelement. htmlmarqueeelement.behavior sets how the text is scrolled within the marquee. possible values are scroll, slide and alternate. if no value is specified, the default value is scroll. htmlmarqueeelement.bgcolor sets the background color through color name or hexadecimal value. htmlmarqueeelement.direction sets the direction of the
scrolling within the marquee. possible values are left, right, up and down. if no value is specified, the default value is left. htmlmarqueeelement.height sets the height in pixels or percentage value. htmlmarqueeelement.hspace sets the horizontal margin. htmlmarqueeelement.loop sets the number of times the marquee will scroll. if no value is specified, the default value is −1, which means the marq...
...pecified, the default value is left. htmlmarqueeelement.height sets the height in pixels or percentage value. htmlmarqueeelement.hspace sets the horizontal margin. htmlmarqueeelement.loop sets the number of times the marquee will scroll. if no value is specified, the default value is −1, which means the marquee will scroll continuously. htmlmarqueeelement.scrollamount sets the amount of
scrolling at each interval in pixels. the default value is 6. htmlmarqueeelement.scrolldelay sets the interval between each scroll movement in milliseconds. the default value is 85. note that any value smaller than 60 is ignored and the value 60 is used instead, unless truespeed is true. htmlmarqueeelement.truespeed by default, scrolldelay values lower than 60 are ignored. if truespeed is true, then th...
...t ignored. htmlmarqueeelement.vspace sets the vertical margin. htmlmarqueeelement.width sets the width in pixels or percentage value. event handlers htmlmarqueeelement.onbounce fires when the marquee has reached the end of its scroll position. it can only fire when the behavior attribute is set to alternate. htmlmarqueeelement.onfinish fires when the marquee has finished the amount of
scrolling that is set by the loop attribute. it can only fire when the loop attribute is set to some number that is greater than 0. htmlmarqueeelement.onstart fires when the marquee starts
scrolling. methods inherits methods from its parent, htmlelement. htmlmarqueeelement.start() starts
scrolling of the marquee. htmlmarqueeelement.stop() stops
scrolling of the marquee. examples <marquee>this...
UIEvent.layerX - Web APIs
syntax var xpos = event.layerx xpos is an integer value in pixels for the x-coordinate of the mouse pointer, when the mouse event fired. ...
... <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. ...
...lement. note the pagex\pagey properties still return the absolute position in the document, including page
scrolling.</span> <span>make the page scroll more! this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page
scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </bo...
UIEvent.layerY - Web APIs
syntax var ypos = event.layery; ypos is an integer value in pixels for the y-coordinate of the mouse pointer, when the mouse event fired. ...
... <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. ...
...lement. note the pagex\pagey properties still return the absolute position in the document, including page
scrolling.</span> <span>make the page scroll more! this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page
scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </bo...
UIEvent.pageY - Web APIs
the uievent.pagey read-only property returns the vertical coordinate of the event relative to the whole document. syntax var pagey = event.pagey; pagey is an integer value in pixels for the y-coordinate of the mouse pointer, relative to the whole document, when the mouse event fired. this property takes into account any vertical
scrolling of the page. example <html> <head> <title>pagex\pagey & layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css">...
...> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. ...
...lement. note the pagex\pagey properties still return the absolute position in the document, including page
scrolling.</span> <span>make the page scroll more! this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page
scrolling.</span> </div> <div id="d3"> <form name="form_coords"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> ...
Guide to scroll anchoring - CSS: Cascading Style Sheets
roll position to compensate for the changes outside of the viewport. this means that the point in the document the user is looking at remains in the viewport, which may mean their scroll position actually changes in terms of how far they have moved through the document. how do i turn on scroll anchoring? you don't! the feature is enabled by default in supporting browsers. in most cases anchored
scrolling is exactly what you want — content jumping is a poor experience for anyone. what if i need to debug it? if your page is not behaving well with scroll anchoring enabled, it is probably because some scroll event listener is not handling well the extra
scrolling to compensate for the anchor node movement. you can check whether disabling scroll anchoring fixes the issue in firefox by changing la...
...anchoring in places where it might be problematic. if any of the triggers happen on the anchor node, or an ancestor of it, anchoring is suppressed. ...
...sform additionally, position changes anywhere inside the
scrolling box also disable scroll anchoring. ...
overflow - CSS: Cascading Style Sheets
ing the user to scroll (such as by dragging or using a scroll wheel) is allowed. the content can be scrolled programmatically (for example, by setting the value of a property such as offsetleft), so the element is still a scroll container. clip like for hidden, the content is clipped to the element's padding box. the difference between clip and hidden is that the clip keyword also forbids all
scrolling, including programmatic
scrolling. the box is not a scroll container, and does not start a new formatting context. if you wish to start a new formatting context, you can use display: flow-root to do so. scroll content is clipped if necessary to fit the padding box. browsers always display scrollbars whether or not any content is actually clipped, preventing scrollbars from appearing or disappea...
... mozilla extensions -moz-scrollbars-none [1] use overflow: hidden instead. -moz-scrollbars-horizontal [1] use overflow-x: scroll and overflow-y: hidden, or overflow: hidden scroll instead. -moz-scrollbars-vertical [1] use overflow-x: hidden and overflow-y: scroll, or overflow: scroll hidden instead. -moz-hidden-unscrollable intended mainly for internal use and by themes. disables
scrolling of xml root elements, <html>, and <body> with the keyboard's arrow keys and the mouse wheel. [1] as of firefox 63, this feature is behind a feature preference setting. in about:config, set layout.css.overflow.moz-scrollbars.enabled to true description overflow options include clipping, showing scrollbars, or displaying the content flowing out of its container into the surrounding area. spec...
...etting. in about:config, set layout.css.overflow.moz-scrollbars.enabled to true description overflow options include clipping, showing scrollbars, or displaying the content flowing out of its container into the surrounding area. specifying a value other than visible (the default) creates a new block formatting context. this is necessary for technical reasons — if a float intersected with the
scrolling element it would forcibly rewrap the content after each scroll step, leading to a slow
scrolling experience. in order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap. setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto. the javascrip...
overscroll-behavior-block - CSS: Cascading Style Sheets
see overscroll-behavior for a full explanation. /* keyword values */ overscroll-behavior-block: auto; /* default */ overscroll-behavior-block: contain; overscroll-behavior-block: none; /* global values */ overscroll-behavior-block: inherit; overscroll-behavior-block: initial; overscroll-behavior-block: unset; syntax the overscroll-behavior-block property is specified as a keyword chosen from the list of values below. values auto the default scroll overflow behavior occurs as normal. ...
...; overscroll-behavior-block: unset; syntax the overscroll-behavior-block property is specified as a keyword chosen from the list of values below. values auto the default scroll overflow behavior occurs as normal. contain default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring
scrolling areas, e.g. underlying elements will not scroll. none no scroll chaining occurs to neighbouring
scrolling areas, and default scroll overflow behavior is prevented. formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples prev...
...the outer box has a large height set on it so the page will scroll vertically. the inner box has a small width (and height) set on it so it sits comforably inside the viewport, but its content is given a large height so it will also scroll vertically. ...
overscroll-behavior-inline - CSS: Cascading Style Sheets
see overscroll-behavior for a full explanation. /* keyword values */ overscroll-behavior-inline: auto; /* default */ overscroll-behavior-inline: contain; overscroll-behavior-inline: none; /* global values */ overscroll-behavior-inline: inherit; overscroll-behavior-inline: initial; overscroll-behavior-inline: unset; syntax the overscroll-behavior-inline property is specified as a keyword chosen from the list of values below. values auto the default scroll overflow behavior occurs as normal. ...
...overscroll-behavior-inline: unset; syntax the overscroll-behavior-inline property is specified as a keyword chosen from the list of values below. values auto the default scroll overflow behavior occurs as normal. contain default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring
scrolling areas, e.g. underlying elements will not scroll. none no scroll chaining occurs to neighbouring
scrolling areas, and default scroll overflow behavior is prevented. formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples prev...
...the outer box has a large width set on it so the page will scroll horizontally. ...
overscroll-behavior-x - CSS: Cascading Style Sheets
the overscroll-behavior-x css property sets the browser's behavior when the horizontal boundary of a
scrolling area is reached. see overscroll-behavior for a full explanation. /* keyword values */ overscroll-behavior-x: auto; /* default */ overscroll-behavior-x: contain; overscroll-behavior-x: none; /* global values */ overscroll-behavior-x: inherit; overscroll-behavior-x: initial; overscroll-behavior-x: unset; syntax the overscroll-behavior-x property is specified as a keyword chosen from the list of values below. values auto the default scroll overflow behavior occurs as normal. contain default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring
scrolling areas, e.g. underlyi...
...rd chosen from the list of values below. values auto the default scroll overflow behavior occurs as normal. contain default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring
scrolling areas, e.g. underlying elements will not scroll. none no scroll chaining occurs to neighbouring
scrolling areas, and default scroll overflow behavior is prevented. ...
...the outer box has a large width set on it so the page will scroll horizontally. ...
overscroll-behavior-y - CSS: Cascading Style Sheets
see overscroll-behavior for a full explanation. /* keyword values */ overscroll-behavior-y: auto; /* default */ overscroll-behavior-y: contain; overscroll-behavior-y: none; /* global values */ overscroll-behavior-y: inherit; overscroll-behavior-y: initial; overscroll-behavior-y: unset; initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax the overscroll-behavior-y property is specified as a keyword chosen from the list of values below. ...
... valueas specifiedanimation typediscrete syntax the overscroll-behavior-y property is specified as a keyword chosen from the list of values below. values auto the default scroll overflow behavior occurs as normal. contain default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring
scrolling areas, e.g. underlying elements will not scroll. none no scroll chaining occurs to neighbouring
scrolling areas, and default scroll overflow behavior is prevented. formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples prev...
...ill not scroll. none no scroll chaining occurs to neighbouring
scrolling areas, and default scroll overflow behavior is prevented. formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing an underlying element from
scrolling vertically .messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } see overscroll-behavior for a full example and explanation. specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-y' in that specification. working draft ...
scroll-margin-inline-end - CSS: Cascading Style Sheets
of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented. the aim here is to create four horizontally-
scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; over...
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part...
...-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline-end: 1rem; } .scroller > div:nth-child(3) { scroll-margin-inline-end: 2rem; } this means that when
scrolling past the middle child elements, the
scrolling will snap to 1rem outside the inline end edge of the second <div>, and 2rems outside the inline end edge of the third <div>. result try it for yourself: specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-inline-end' in that specification. candidate recommendat...
scroll-margin-inline-start - CSS: Cascading Style Sheets
of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented. the aim here is to create four horizontally-
scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overf...
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant pa...
...lign: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin-values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline-start: 1rem; } .scroller > div:nth-child(3) { scroll-margin-inline-start: 2rem; } this means that when
scrolling past the middle child elements, the
scrolling will snap to 1rem outside the inline start edge of the second <div>, and 2rems outside the inline start edge of the third <div>. result try it for yourself: specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-inline-start' in that specification. candidate recom...
scroll-margin-inline - CSS: Cascading Style Sheets
e specified outsets. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,2} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented. the aim here is to create four horizontally-
scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; over...
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part...
...s scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline: 1rem; } .scroller > div:nth-child(3) { scroll-margin-inline: 2rem; } this means that when
scrolling past the middle child elements, the
scrolling will snap to 1rem outside the inline end edge of the second <div>, and 2rems outside the inline end edge of the third <div>. note: here we are setting scroll-margin on the start and end of the inline axis (x in our case), but only the end edge is really relevant. it would work just as well here to only set a scroll margin on that one edge, for examp...
scrollbar-width - CSS: Cascading Style Sheets
it must be one of the following values: auto the default scrollbar width for the platform. ...
...width. none no scrollbar shown, however the element will still be scrollable. note: user agents must apply any scrollbar-width value set on the root element to the viewport. accessibility concerns use this property with caution — setting scrollbar-width to thin or none can make content hard or impossible to scroll if the author does not provide an alternative
scrolling mechanism. while swiping gestures or mouse wheels can enable
scrolling on such content, some devices have no scroll alternative. wcag criterion 2.1.1 (keyboard) has been in place for a long time to advise on basic keyboard accessibility, and this should include
scrolling of content areas. and introduced in wcag 2.1, criterion 2.5.5 (target size) advises that touch targets should be at least 44px...
...idth and height (although the problem is compounded on high-resolution screens; thorough testing is advised). ...
touch-action - CSS: Cascading Style Sheets
g features built into the browser). /* keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* global values */ touch-action: inherit; touch-action: initial; touch-action: unset; by default, panning (
scrolling) and pinching gestures are handled exclusively by the browser. an application using pointer events will receive a pointercancel event when the browser starts handling a touch gesture. by explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures. applications using touch events...
...ble the browser handling of gestures by calling preventdefault(), but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked. when a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors, up to the one that implements the gesture (in other words, the first containing
scrolling element). this means that in practice, touch-action is typically applied only to top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element's descendants. after a gesture starts, changes to touch-action will not have any impact on the behavior of the current gesture. syntax the touch-action property may be specified as either...
... gestures, but disable additional non-standard gestures such as double-tap to zoom. disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. this is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid). pan-left, pan-right, pan-up, pan-down enable single-finger gestures that begin by
scrolling in the given direction(s). once
scrolling has started, the direction may still be reversed. note that
scrolling "up" (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right. multiple directions may be combined except when there is a simpler representation (for example, "pan-left pan-right" is ...
HTML attribute: multiple - HTML: Hypertext Markup Language
multiple values depends on the form control. depending on the type, the form control may have a different appearance if the multiple attribute is set. for the file input type, the native messaging the browser provides differs. in firefox, the file input reads "no files selected" when the attribute is present and "no file selected" when not, when no files are selected. most browsers displaying a
scrolling list box for a <select> control with the multiple attribute set versus a single line dropdown when the attribute is ommitted. the email input displays the same, but will match the :invalid pseudo-class if more than one comma-separated email address is included if the attribute is not present. when multiple is set on the email input type, the user can inlclude zero (if not also required), one or...
... otherwise, the <select> element represents a control for selecting a single <option> from the list of options. <select multiple name="drawfs" id="drawfs"> <option>grumpy</option> <option>happy</option> <option>sleepy</option> <option>bashful</option> <option>sneezy</option> <option>dopey</option> <option>doc</option> </select> when multiple is specified, most browsers will show a
scrolling list box instead of a single line dropdown. examples email input <label for="emails">who do you want to email?</label> <input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64"> <datalist id="drawfemails"> <option value="grumpy@woodworkers.com">grumpy</option> <option value="happy@woodworkers.com">happy</option> <option value="sleepy@woodworkers.com">s...
...or more information. select the multiple attribute on the <select> element represents a control for selecting zero or more options from the list of options. otherwise, the <select> element represents a control for selecting a single <option> from the list of options. the control generally has a different appearance based on the presence of the multiple attribute, with most browsers displaying a
scrolling list box instead of a single line dropdown when the attribute is present. <form method="get" action="#"> <p> <label for="dwarfs">select the woodsmen you like:</label> <select multiple name="drawfs" id="drawfs"> <option>grumpy@woodworkers.com</option> <option>happy@woodworkers.com</option> <option>sleepy@woodworkers.com</option> <option>bashful@woodworkers.com</option> <opt...
Populating the page: how browsers work - Web Performance
ed information as fast as possible, or at least seem super fast. network latency is the time it takes to transmit bytes over-the-air to computers. web performance is what we have to do to make the page load happen as quickly as possible. for the most part, browsers are considered single threaded. for smooth interactions, the developer's goal is to ensure performant site interactions, from smooth
scrolling to being responsive to touch. render time is key, with ensuring the main thread can complete all the work we throw at it and still always be available to handle user interactions. web performance can be improved by understanding the single-threaded nature of the browser and minimizing the main thread's responsibilities, where possible and appropriate, to ensure rendering is smooth and responses t...
...hich is called the first meaningful paint. in the painting or rasterization phase, the browser converts each box calculated in the layout phase to actual pixels on the screen. painting involves drawing every visual part of an element to the screen, including text, colors, borders, shadows, and replaced elements like buttons and images. the browser needs to do this super quickly. to ensure smooth
scrolling and animation, everything occupying the main thread, including calculating styles, along with reflow and paint, must take the browser less than 16.67ms to accomplish. at 2048 x 1536, the ipad has over 3,145,000 pixels to be painted to the screen. that is a lot of pixels that have to be painted very quickly. to ensure repainting can be done even faster than the initial paint, the drawing to the sc...
...tained from the server, the rendering process goes back to the layout steps and restarts from there. interactivity once the main thread is done painting the page, you would think we would be "all set." that isn't necessarily the case. if the load includes javascript, that was correctly deferred, and only executed after the onload event fires, the main thread might be busy, and not available for
scrolling, touch, and other interactions. time to interactive (tti) is the measurement of how long it took from that first request which led to the dns lookup and ssl connection to when the page is interactive -- interactive being the point in time after the first contentful paint when the page responds to user interactions within 50ms. if the main thread is occupied parsing, compiling, and executing java...
Tree Box Objects - Archive of obsolete content
ntil the calling script ends since mozilla does not redraw in the background. note: it is not necessary to run tree.boxobject.queryinterface(components.interfaces.nsitreeboxobject) as shown in the code examples on this page because: let boxobject = tree.treeboxobject; note: is equivalent to: let boxobject = tree.boxobject; boxobject.queryinterface("components.interfaces.nsitreeboxobject");
scrolling the tree you can also scroll the tree using four different methods, similar to those available for listboxes. the scrolltorow() function may be used to scroll to a particular row. here is a simple example. example 1 : source view <script> function doscroll(){ var value = document.getelementbyid("tbox").value; var tree = document.getelementbyid("thetree"); var boxobject = tree.boxobject;...
... tree shows 10 rows at a time, a page will be equivalent to 10 rows. this is a convenient method since when the user resizes a flexible tree, the page size will grow and shrink, so you don't need to calculate the page size manually. this isn't too hard to calculate manually anyway since the tree box object also provides a getpagelength() function which returns the number of rows in a page. in the
scrolling example above, getpagelength() would return four. note that in firefox 1.0 and mozilla 1.7 and earlier, the getpagelength() function is called getpagecount() instead. the name was changed to getpagelength() since it was confusing before since it doesn't return the number of pages, but the size of each page. you could determine the number of pages by dividing the total number of rows by the page...
XUL accessibility guidelines - Archive of obsolete content
riggers, including the keyboard button and appropriate mouse clicks. mouse dependent scripting functionality associated with mouse events such as onmouseover, onmousemove, and ondrag can only be activated with the use of the mouse. provide keyboard-accessible alternative access points for this functionality. consider using context menu items or other xul elements along with keyboard shortcuts.
scrolling ensure that
scrolling is keyboard accessible. many xul elements can be set to scroll using css. other elements, such as arrowscrollbox and listbox, are made to scroll automatically. as a general rule, elements set to scroll are inaccessible if the user cannot scroll to all the content using the keyboard. the arrowscrollbox, for example, is a non-focusable element and cannot be scrolled using a k...
...ortant functionality keyboard shortcuts are not provided. context menus context menus are triggered by the oncontextmenu event handler. context menus are hard coded to a right mouse click or other specific trigger. mouse dependent scripting all mouse operations have keyboard accessible equivalents. operations exist that can only be performed with a mouse.
scrolling all scrollable elements are controllable with the keyboard.
scrolling cannot be performed with a keyboard. focus keyboard focus is maintained and does not move unexpectedly. focus moves or is disabled unexpectedly. assistive information checkpoint pass fail alternative text alternative text is provided for meaningful images. alternative t...
CSS - Archive of obsolete content
box relative to the element on which the ime composition is active. ...
...ll-limit-y-maxthe -ms-scroll-limit-y-max css property is a microsoft extension that specifies the maximum value for the element.scrolltop property.-ms-scroll-limit-y-minthe -ms-scroll-limit-y-min css property is a microsoft extension that specifies the minimum value for the element.scrolltop property.-ms-scroll-railsthe -ms-scroll-rails css property is a microsoft extension that specifies whether
scrolling locks to the primary axis of motion.-ms-scroll-snap-points-xthe -ms-scroll-snap-points-x css property is a microsoft extension that specifies where snap-points will be located along the x-axis.-ms-scroll-snap-points-ythe -ms-scroll-snap-points-y css property is a microsoft extension that specifies where snap-points will be located along the y-axis.-ms-scroll-snap-xthe -ms-scroll-snap-x css shorth...
Examples - Game development
rst two sections list playable games, while the second is a catch-all area to list demos that aren't necessarily interactive/games. free/demo games beloola webvr platform to connect passionate people. experience both available on 2d screens and on vr hmds (settings / switch to vr mode). tanx a multiplayer tank battle game, created with playcanvas. hyper vanguard force a neat vertically
scrolling space shooter. swooop a plane flying game: control your plane and collect the jewels. again, created with playcanvas. save the day fly your rescue chopper around the disaster area and save the stranded victims (ga.me.) polycraft a shipwreck 'n survive game. explore the island and defeat the monsters. hexgl a fast-paced, futuristic racing game. dead trigger 2 classic zombie splatter acti...
...fly your rescue chopper around the disaster area and save the stranded victims (ga.me.) polycraft a shipwreck 'n survive game. explore the island and defeat the monsters. hexgl a fast-paced, futuristic racing game. dead trigger 2 classic zombie splatter action, made with unity3d. angry bots a futuristic aliens-esque isometric 3rd person shooter demo, made with unity3d. nutmeg cute retro
scrolling platforming action. back to candyland a match-3 (candy crush) style game. biolab disaster side-
scrolling platform shooter. x-type vertically
scrolling space shooter demo. xibalba retro (doom-style) first person shooter. gorescript another retro style first person shooter. the wizard a turn-based, dungeon puzzle game. hextris tetris-like hexagonal puzzle game. 2048 a sliding number...
Index - MDN Web Docs Glossary: Definitions of Web-related terms
response, animation, idle, and load, is a performance model originated by the google chrome team in 2015, focused on user experience and performance within the browser. the performance mantra of rail is "focus on the user; the end goal isn't to make your site perform fast on any specific device, it's to make users happy." there are 4 stages of interaction: page load, idle, response to input, and
scrolling and animation. in acronym order, the main tenets are: 352 rdf codingscripting, glossary, infrastructure, openpractices, webmechanics rdf (resource description framework) is a language developed by w3c for representing information on the world wide web, such as webpages. rdf provides a standard way of encoding resource information so that it can be exchanged in a fully automat...
..."<locale>/docs/". 426 smoke test composing, glossary, intro, qa, testing a smoke test consists of functional or unit tests of critical software functionality. smoke testing comes before further, in-depth testing. 427 snap positions glossary, snap positions a scroll container may set snap positions — points that the scrollport will stop moving at after a
scrolling operation is completed. this allows a
scrolling experience that gives the effect of paging through content rather than needing to drag content into view. 428 specification glossary, openpractices, standardization a specification is a document that lays out in detail what functionality or attributes a product must include before delivery. in the context of describing the web, ...
Positioning - Learn web development
rius commodo et a urna. ut id ornare felis, eget fermentum sapien.</p> body { width: 500px; margin: 0 auto; } .positioned { background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); padding: 10px; margin: 10px; border-radius: 5px; } .positioned { position: sticky; top: 30px; left: 30px; } an interesting and common use of position: sticky is to create a
scrolling index page where different headings stick to the top of the page as they reach it. the markup for such an example might look like so: <h1>sticky positioning</h1> <dl> <dt>a</dt> <dd>apple</dd> <dd>ant</dd> <dd>altimeter</dd> <dd>airplane</dd> <dt>b</dt> <dd>bird</dd> <dd>buzzard</dd> <dd>bee</dd> <dd>banana</dd> <dd>beanstalk</dd> <dt>c</dt> <...
... note: you can see this example live at 7_sticky-positioning.html (see source code). test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: posi...
Index - Learn web development
e scripting beginner, codingscripting, javascript, javascripting beginner, landing, module, topic, l10n:priority javascript is a programming language that allows you to implement complex things on web pages. every time a web page does more than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2d/3d graphics,
scrolling video jukeboxes, or more—you can bet that javascript is probably involved. 49 asynchronous javascript beginner, codingscripting, guide, javascript, landing, promises, async, asynchronous, await, callbacks, requestanimationframe, setinterval, settimeout in this module we take a look at asynchronous javascript, why it is important, and how it can be used to effectively handle...
... 348 what is web performance? beginner, introduction, learn, performance, reference, tutorial, web performance web performance is all about making web sites fast, including making slow processes seem fast. does the site load quickly, allow the user to start interacting with it quickly, and offer reassuring feedback if something is taking time to load (e.g. a loading spinner)? are
scrolling and animations smooth? this article provides a brief introduction to objective, measureable web performance*, looking at what technologies, techniques, and tools are involved in web optimization. ...
What is web performance? - Learn web development
previous overview: performance next web performance is all about making web sites fast, including making slow processes seem fast. does the site load quickly, allow the user to start interacting with it quickly, and offer reassuring feedback if something is taking time to load (e.g. a loading spinner)? are
scrolling and animations smooth? this article provides a brief introduction to objective, measureable web performance*, looking at what technologies, techniques, and tools are involved in web optimization. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to gain basic familiarity of what is involved with web performance. * versus subjective, perceived performance, covered in ...
...ontinue to load in the background while the user gets on with primary tasks, and sometimes we only load assets when they are actually needed (this is called lazy loading). the measurement of how long it takes the site to get to a usable start after it has started loading is called time to interactive. smoothness and interactivity: does the application feel reliable and pleasurable to use? is the
scrolling smooth? are buttons clickable? are pop-ups quick to open up, and do they animate smoothly as they do so? there are a lot of best practices to consider in making apps feel smooth, for example using css animations rather than javascript for animation, and minimizing the number of repaints the ui requires due to changes in the dom. perceived performance: how fast a website seems to the user has a g...
nsIAccessibleEvent
xthelp_end 0x0021 0x001e a window has exited context-sensitive help mode. event_dragdrop_start 0x0022 0x001f an application is about to enter drag-and-drop mode. event_dragdrop_end 0x0023 0x0020 an application is about to exit drag-and-drop mode. event_dialog_start 0x0024 0x0021 a dialog box has been displayed. event_dialog_end 0x0025 0x0022 a dialog box has been closed. event_
scrolling_start 0x0026 0x0023
scrolling has started on a scroll bar. event_
scrolling_end 0x0027 0x0024
scrolling has ended on a scroll bar. event_minimize_start 0x0028 0x0025 a window object is about to be minimized or maximized. event_minimize_end 0x0029 0x0026 a window object has been minimized or maximized. event_document_load_complete 0x002b 0x0027 the loading of the document has comp...
...5 event_menupopupstart 0x0006 event_menupopupend 0x0007 event_capturestart 0x0008 event_captureend 0x0009 event_movesizestart 0x000a event_movesizeend 0x000b event_contexthelpstart 0x000c event_contexthelpend 0x000d event_dragdropstart 0x000e event_dragdropend 0x000f event_dialogstart 0x0010 event_dialogend 0x0011 event_
scrollingstart 0x0012 event_
scrollingend 0x0013 event_minimizestart 0x0016 event_minimizeend 0x0017 event_atk_property_change 0x0100 event_atk_selection_change 0x0101 event_atk_text_change 0x0102 event_atk_text_selection_change 0x0103 event_atk_text_caret_move 0x0104 event_atk_visible_data_change 0x0105 event_atk_table_model_change 0x0110 ev...
Document: scroll event - Web APIs
see bootstrap issue #16202. safari and wkwebviews are not affected by this bug. ...
...see bootstrap issue #16202. safari and wkwebviews are not affected by this bug. ...
Element.getBoundingClientRect() - Web APIs
erall border-box in pixels. properties other than width and height are relative to the top-left of the viewport. empty border-boxes are completely ignored. if all the element's border-boxes are empty, then a rectangle is returned with a width and height of zero and where the top and left are the top-left of the border-box for the first css box (in content order) for the element. the amount of
scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the bounding rectangle. this means that the rectangle's boundary edges (top, right, bottom, left) change their values every time the
scrolling position changes (because their values are relative to the viewport and not absolute). if you need the bounding rectangle relative to the top-le...
... other scrollable element) is taken into account when computing the bounding rectangle. this means that the rectangle's boundary edges (top, right, bottom, left) change their values every time the
scrolling position changes (because their values are relative to the viewport and not absolute). if you need the bounding rectangle relative to the top-left corner of the document, just add the current
scrolling position to the top and left properties (these can be obtained using window.scrollx and window.scrolly) to get a bounding rectangle which is independent from the current
scrolling position. cross-browser fallback scripts requiring high cross-browser compatibility can use window.pagexoffset and window.pageyoffset instead of window.scrollx and window.scrolly. scripts without access to these prope...
Element: scroll event - Web APIs
see bootstrap issue #16202. safari and wkwebviews are not affected by this bug. ...
...see bootstrap issue #16202. safari and wkwebviews are not affected by this bug. ...
GlobalEventHandlers.onscroll - Web APIs
the onscroll property of the globaleventhandlers mixin is an eventhandler that processes scroll events. the scroll event fires when the document view or an element has been scrolled, whether by the user, a web api, or the user agent. note: don't confuse onscroll with onwheel! onwheel handles general wheel rotation, while onscroll handles
scrolling of an object's content. ...
...of an object's content. syntax target.onscroll = functionref value functionref a function name, or a function expression. the function receives a uievent object as its sole argument. only one onscroll handler can be assigned to an object at a time. for greater flexibility, you can pass a scroll event to the eventtarget.addeventlistener() method instead. example this example monitors
scrolling on a <textarea>, and logs the element's vertical scroll position accordingly. html <textarea>1 2 3 4 5 6 7 8 9</textarea> <p id="log"></p> css textarea { width: 4rem; height: 8rem; font-size: 3rem; } javascript const textarea = document.queryselector('textarea'); const log = document.getelementbyid('log'); textarea.onscroll = logscroll; function logscroll(e) { log.textcontent = `s...
HTMLIFrameElement - Web APIs
eature policies applied to a specific document. htmliframeelement.referrerpolicy is a domstring that reflects the referrerpolicy html attribute indicating which referrer to use when fetching the linked resource. htmliframeelement.sandbox is a domsettabletokenlist that reflects the sandbox html attribute, indicating extra restrictions on the behavior of the nested content. htmliframeelement.
scrolling is a domstring that indicates whether the browser should provide scrollbars for the frame. htmliframeelement.src is a domstring that reflects the src html attribute, containing the address of the content to be embedded. note that programatically removing an <iframe>'s src attribute (e.g. via element.removeattribute()) causes about:blank to be loaded in the frame in firefox (from version 65),...
...arent, htmlelement. specifications specification status comment html living standardthe definition of 'htmliframeelement' in that specification. living standard the following property has been added: allowfullscreen. html5the definition of 'htmliframeelement' in that specification. recommendation the following properties are now obsolete:
scrolling, marginwidth, marginheight, longdesc, frameborder, and align. the following properties have been added: srcdoc, sandbox, and contentwindow. document object model (dom) level 2 html specificationthe definition of 'htmliframeelement' in that specification. obsolete the contentdocument property has been added. document object model (dom) level 1 specificationthe definitio...
HTMLElement.focus() - Web APIs
aspects of the focusing process. this object may contain the following property: preventscroll optional a boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. a value of false for preventscroll (the default) means that the browser will scroll the element into view after focusing it. if preventscroll is set to true, no
scrolling will occur. examples focus on a text field javascript focusmethod = function getfocus() { document.getelementbyid("mytextfield").focus(); } html <input type="text" id="mytextfield" value="text field."> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the text field!</button> result focus on a button javascript focusmethod = function getfocus...
...d("mybutton").focus(); } html <button type="button" id="mybutton">click me!</button> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the button!</button> result focus with focusoption javascript focusscrollmethod = function getfocus() { document.getelementbyid("mybutton").focus({preventscroll:false}); } focusnoscrollmethod = function getfocuswithout
scrolling() { document.getelementbyid("mybutton").focus({preventscroll:true}); } html <button type="button" onclick="focusscrollmethod()">click me to focus on the button!</button> <button type="button" onclick="focusnoscrollmethod()">click me to focus on the button without
scrolling!</button> <div id="container" style="height: 1000px; width: 1000px;"> <button type="button" id="mybutton" s...
MouseEvent.pageX - Web APIs
the pagex read-only property of the mouseevent interface returns the x (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document. this includes any portion of the document not currently visible. being based on the edge of the document as it is, this property takes into account any horizontal
scrolling of the page. for example, if the page is scrolled such that 200 pixels of the left side of the document are scrolled out of view, and the mouse is clicked 100 pixels inward from the left edge of the view, the value returned by pagex will be 300. originally, this property was defined as a long integer. the cssom view module redefined it as a double float. see the browser compatibility section for details. see page in coordinate systems for ...
... as a long integer. the cssom view module redefined it as a double float. see the browser compatibility section for details. see page in coordinate systems for some additional information about coordinates specified in this fashion. syntax var pagex = mouseevent.pagex; value a floating-point number of pixels from the left edge of the document at which the mouse was clicked, regardless of any
scrolling or viewport positioning that may be in effect. this property was originally specified in the touch events specification as a long integer, but was redefined in the cssom view module to be a double-precision floating-point number to allow for subpixel precision. even though numeric types both are represented by number in javascript, they may be handled differently internally in the browser's code...
Pointer events - Web APIs
tiple events occur with one event, all of them have the same value. pointer capture pointer capture allows events for a particular pointer event to be re-targeted to a particular element instead of the normal hit test at a pointer's location. this can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by
scrolling). the following example shows pointer capture being set on an element. <html> <script> function downhandler(ev) { let el = document.getelementbyid("target"); // element 'target' will receive/capture further events el.setpointercapture(ev.pointerid); } function init() { let el = document.getelementbyid("target"); el.onpointerdown = downhandler; } </script> <body onlo...
...ept: non-replaced inline elements, table rows, row groups, table columns, and column groups. a value of auto means the browser is free to apply its default touch behavior (to the specified region) and the value of none disables the browser's default touch behavior for the region. the values pan-x and pan-y, mean that touches that begin on the specified region are only for horizontal and vertical
scrolling, respectively. the value manipulation means the browser may consider touches that begin on the element are only for
scrolling and zooming. in the following example, the browser's default touch behavior is disabled for the div element. <html> <body> <div style="touch-action:none;">can't touch this ... </div> </body> </html> in the following example, default touch behavior is disabled f...
ScrollToOptions - Web APIs
the scrolltooptions dictionary of the cssom view spec contains properties specifying where an element should be scrolled to, and whether the
scrolling should be smooth. a scrolltooptions dictionary can be provided as a parameter for the following methods: window.scroll() window.scrollby() window.scrollto() element.scroll() element.scrollby() element.scrollto() properties scrolltooptions.top specifies the number of pixels along the y axis to scroll the window or element. scrolltooptions.left specifies the number of pixels along the x axis to scroll the window or element. scrolltooptions.behavior specifies whether the
scrolling should animate smoothly, or happen instantly in a single jump. this is actually defined on the scrolloptions dictionary, which is implemented by scrolltoop...
...n a single jump. this is actually defined on the scrolloptions dictionary, which is implemented by scrolltooptions. examples in our scrolltooptions example (see it live) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth
scrolling enabled or not. when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ? 'smo...
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
could be used to determine what a non-player character can see, relying on the same rendering and physics engine used by player characters for non-player characters. ...
...directly with the player or any other character in the game, but is instead either fixed above or next to the game play area, or follows the action as the action moves around a
scrolling game world. for example, a classic arcade game such as pac-man takes place on a fixed game map, so the camera remains fixed a set distance above the map, always pointed straight down at the game world. in a side-
scrolling or top-
scrolling game such as super mario bros., the camera moves along left and right (or up and down, or both) to ensure that the action remains visible even though the game level is much larger than the viewport. positioning the camera since there are no standard camera objects in webgl or webxr, we need to simulate the camera ourselves. before we can do so, and before we can then simulate ...
Window.pageYOffset - Web APIs
that contains the document we're going to scroll, and a <div> into which we'll output the value of pageyoffset when we've finished the scroll. <iframe id="frame"> </iframe> <div id="info"> </div> javascript var frame = document.getelementbyid("frame"); var framedoc = frame.contentdocument; var info = document.getelementbyid("info"); var target = framedoc.getelementbyid("overview"); framedoc.
scrollingelement.scrolltop = target.offsettop; info.innertext = "y offset after
scrolling: " + frame.contentwindow.pageyoffset + " pixels"; the javascript code begins by getting into frame and info the <iframe> element that contains our content as well as the <div> element into which we'll output the result of our scroll position check. it then gets a reference to the element we want to ...
...pt code begins by getting into frame and info the <iframe> element that contains our content as well as the <div> element into which we'll output the result of our scroll position check. it then gets a reference to the element we want to scroll into view calling getelementbyid() on the frame's htmliframeelement.contentdocument. with the target element in hand, we set the scrolltop of the frame's
scrollingelement to the offsettop of the target element. by doing so, we set the vertical
scrolling position of the frame's document so that it's the same as the top edge of the target element. this will automatically set the
scrolling position to the maximum possible value if the attempted scroll would exceed the maximum. this prevents us from falling off the edge of the document. nobody wants to know wh...
ARIA: feed role - Accessibility
a feed is a dynamic scrollable list of articles in which articles are added to or removed from either end of the list as the user scrolls. a feed enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue
scrolling infinitely by loading more content as the user reads. <section role="feed" aria-busy="false"> ... <article aria-posinset="427" aria-setsize="-1">...</article> <article aria-posinset="428" aria-setsize="-1">...</article> <article aria-posinset="429" aria-setsize="-1">...</article> ... </section> description a feed is a page structure for a scrollable list of articles where
scrolling may cause articles to be added to the top or end of the list. the list establishes an interoperability contract betwe...
...de functions that enable users to jump from article to article and efficiently discern which articles they want to read. the feed pattern enables reliable assistive technology reading mode interaction by establishing the following interoperability agreement between the web page and assistive technologies: in the context of a feed, the web page code is responsible for: appropriate visual
scrolling of the content based on which article contains dom focus. loading or removing feed articles based on which article contains dom focus. in the context of a feed, assistive technologies with a reading mode are responsible for: indicating which article contains the reading cursor by ensuring the article element or one of its descendants has dom focus. providing reading mode keys th...
Cognitive accessibility - Accessibility
e timeout duration by a factor of 10 with a simple action, such as hitting the space bar. provide a toggle on content that allows users to enable a longer session time limit, or no session time limit at all. examples of timed content include forms, timed reading exercises, and training materials. if the time limit is longer than 20 hours, accommodations are not required. moving, blinking,
scrolling it is important not to distract users, especially ones with cognitive disabilities. if moving, blinking,
scrolling, or auto-updating information starts automatically, lasts more than five seconds, and is presented in parallel with other content, the user must able to pause, stop, hide or control it, unless it's an essential functionality. "essential" means that removing the moving, blinking,...
...this includes animated gifs, if the gif animates for more than 5 seconds. ...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
event_system_menupopupstart [important] event_system_menupopupend [important] event_system_capturestart event_system_captureend event_system_movesizestart event_system_movesizeend event_system_contexthelpstart event_system_contexthelpend event_system_dragdropstart event_system_dragdropend event_system_dialogstart event_system_dialogend event_system_
scrollingstart event_system_
scrollingend [possibly important, talk to at vendor] event_system_switchstart event_system_switchend event_system_minimizestart event_system_minimizeend event_object_create [don't implement, watching system generated versions of this event causes assistive technology crashes] event_object_destroy [don't implement, watching system generated versions of ...
... magnifiers. implement a custom interface for text objects, and support it through queryinterface or queryservice if it's being implemented on a different object than iaccessible is. support a scrollto method which takes a text index, and a getclippedbounds and getunclippedbounds method which takes a start and end index. publish your custom interface. no way for assistive technology to know when
scrolling has stopped. fire the event_system_
scrollingend event to indicate when
scrolling has ended (try not to fire too many of these, wait until
scrolling has truly stopped). there is no need to support event_system_
scrollingstart, it is not used by assistive technology. no support for document formatting or "dom" as requested by some vendors: support a custom interface that gives them the formatting i...
Perceivable - Accessibility
padding: 2.25rem;). when the text size is doubled, the content should not need to be scrolled. 1.4.9 images of text (no exception) (aaa) text should not be presented as part of an image unless it is purely decoration (i.e., it does not convey any content) or cannot be presented in any other way. ...
... 1.4.9 images of text (no exception) (aaa) text should not be presented as part of an image unless it is purely decoration (i.e., it does not convey any content) or cannot be presented in any other way. 1.4.10 reflow (aa) added in 2.1 no horizontal
scrolling for left-to-right languages (like english) or right-to-left languages (like arabic) no vertical
scrolling for top-to-bottom languages (like japanese) except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table) understanding reflow 1.4.11 non-text contrast(aa) added in 2.1 minimum color contrast ratio of 3:1 for user interface components and graphical objects. understanding non-text contrast 1.4.12 text s...
Coordinate systems - CSS: Cascading Style Sheets
ety properties are given relative to the top-left corner of the node to which the event has been delivered. the origin is inset by the distances specified by padding-left and padding-top. client the "client" coordinate system uses as its origin the top-left corner of the viewport or browsing context in which the event occurred. this is the entire viewing area in which the document is presented.
scrolling is not a factor. on a desktop computer, for example, the mouseevent.clientx and mouseevent.clienty properties indicate the position of the mouse cursor at the moment the event occurred, relative to the top-left corner of the browser window. the top-left corner of the window is always (0, 0), regardless of the content of the document or any
scrolling that may have been done. in other words, scrol...
... ...
background-attachment - CSS: Cascading Style Sheets
background-attachment: scroll; background-attachment: fixed; background-attachment: local; /* global values */ background-attachment: inherit; background-attachment: initial; background-attachment: unset; the background-attachment property is specified as one of the keyword values from the list below. values fixed the background is fixed relative to the viewport. ...
...the background-attachment property is specified as one of the keyword values from the list below. values fixed the background is fixed relative to the viewport. even if an element has a
scrolling mechanism, the background doesn't move with the element. (this is not compatible with background-clip: text.) local the background is fixed relative to the element's contents. if the element has a
scrolling mechanism, the background scrolls with the element's contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them. scroll the background is fixed relative to the element itself and does not scroll with its contents. (it is effectively attached to the element's border.) formal definition in...
scrollbar-color - CSS: Cascading Style Sheets
the thumb refers to the moving part of the scrollbar, which usually floats on top of the track. syntax /* keyword values */ scrollbar-color: auto; scrollbar-color: dark; scrollbar-color: light; /* <color> values */ scrollbar-color: rebeccapurple green; /* two valid colors. the first applies to the thumb of the scrollbar, the second to the track. ...
... the root element to the viewport. accessibility concerns when using scrollbar-color property with specific color values, authors should ensure the specified colors have enough contrast between them. for keyword values, uas should ensure the colors they use have enough contrast. see techniques for wcag 2.0: g183: using a contrast ratio of 3:1. ...
Performance fundamentals - Web Performance
just-in-time (jit) compilation. this enables application logic to perform comparably to other virtual machines — such as java virtual machines — and in some cases even close to "native code". the graphics pipeline in gecko that underpins html, css, and canvas is optimized in several ways. the html/css layout and graphics code in gecko reduces invalidation and repainting for common cases like
scrolling; developers get this support "for free". pixel buffers painted by both gecko "automatically" and applications to canvas "manually" minimize copies when being drawn to the display framebuffer. this is done by avoiding intermediate surfaces where they would create overhead (such as per-application "back buffers" in many other operating systems), and by using special memory for graphics buffers that...
...'s up to the developer to hit framerate targets: they have direct control over what's drawn. for html and css content, the path to high framerate is to use the right primitives. firefox is highly optimized to scroll arbitrary content; this is usually not a concern. but often trading some generality and quality for speed, such as using a static rendering instead of a css radial gradient, can push
scrolling framerate over a target. css media queries allow these compromises to be restricted only to devices that need them. many applications use transitions or animations through "pages", or "panels". for example, the user taps a "settings" button to transition into an application configuration screen, or a settings menu "pops up". firefox is highly optimized to transition and animate scenes that: u...
Web Performance
web performance is the objective measurements and the perceived user experience of load time and runtime. web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions - is the
scrolling smooth? are buttons clickable? are pop-ups quick to load and display, and do they animate smoothly as they do so? web performance includes both objective measurements like time to load, frames per second, and time to become interactive, and subjective experiences of how long it felt like it took the content to load. the longer it takes for a site to respond, the more users will abandon the site. it is important to minimize the loading and response times and add additional features to conceal latency by making the experience as av...
...ple we need to consider when thinking about performance, and how we can make performance part of our web development workflow. how do users perceive performance? more important than how fast your website is in milliseconds, is how fast your users perceive your site to be. these perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of
scrolling and other animations. in this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings. web performance basics in addition to the front end components of html, css, javascript, and media files, there are features that can make applications slower and features that can make applicatio...
panel - Archive of obsolete content
doesn't give you autocomplete suggestions (bug 918600). you can't embed flash (bug 952578). you can't provide tooltips using title attributes (bug 918600). security warning pages (the "this connection is untrusted" warning) does not work, so panels which trigger it will be broken (bug 1031554). mouse button shortcuts, such as using the middle button to open a link in a new page, don't work.
scrolling using keyboard doesn't work properly (bug 1001914) globals constructors panel(options) creates a panel. parameters options : object optional options: name type width number the width of the panel in pixels. optional. height number the height of the panel in pixels. optional. position object, button, wid...
Source code directories overview - Archive of obsolete content
contained at a certain url. for example, if this code determines that the content is a mail message, it looks up the appropriate listener (probably netscape messenger) and passes the mail message to it for display. it is generic and can hand the content off to internal components (like messenger), to plug-ins or helper apps. view contains c interfaces and code for different types of views (e.g.
scrolling view). a view contains content but does not contain the title bar, borders or other decorations (which are contained by frames). this code serves to manipulate the individual content that it contains. for example, a
scrolling view will find out the scroll bar positions and tell its content where to draw according the scroll bar thumbs. webshell contains c interfaces, c code, linux shell scripts ...
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
r (an internal interface used for link clicks). both interfaces are implemented by nswebshell/nsdocshell. these api calls will typically pass in a uri string or object to load, and may include information like the name of the target frame (for <a target="something">, e.g.). nsdocshell::internalload() handles targeting to the correct docshell (if the load has a target window associated with it),
scrolling to anchors (if the load is an anchor within the current page), and session history issues. it calls douriload(). douriload() creates a channel, massages it to have the right post data, load flags, cache key, referrer, etc. it then passes the channel to dochannelload, which does some more flag massaging and then calls into the uriloader. nsuriloader::openuri gets a channel to open, a boolean ind...
Attribute (XUL) - Archive of obsolete content
eafter 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 tab
scrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top type uri useraction validate value var visuallyselected wait-cursor width windowtype wrap wraparound ...
XUL Events - Archive of obsolete content
ue of the element. attribute: onsynctopreference underflow this event is sent to an element when there becomes enough space to display it at full size. this applies to boxes and other layout elements with a css overflow property other than 'visible'. the underflow event can be used to indicate that a
scrolling mechanism is no longer necessary. attribute: onunderflow dommenuitemactive this event is sent when a menu or menuitem is hovered over, or highlighted. this event bubbles. dommenuiteminactive this event is sent when ...
smoothScroll - Archive of obsolete content
« xul reference smoothscroll type: boolean can be set to enable or disable smooth
scrolling for the corresponding arrowscrollbox. if not set explicitly, it will fall back to the smoothscroll attribute and then to the toolkit.scrollbox.smoothscroll preference. currently, smooth
scrolling supports horizontal arrowscrollboxes only. ...
Property - Archive of obsolete content
electedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tab
scrolling tabpanels tag textlength textvalue timeout title toolbarname toolbarset tooltip tooltiptext top treeboxobject type uri useraction value valuenumber view webbrowserefind webnavigation webprogress width wizardpages wraparound year yearleadingzero related dom element properties dom:element.attributes dom:element.baseuri dom:element.childele...
Things I've tried to do with XUL - Archive of obsolete content
properties (see http://www.mozilla.org/docs/dom/domr...entheight.html); no equivalent exists for xul. enn: most people would use the box object width and height properties, or do you want something else? vlad: the boxobject width/height are the actual width and height of the box, regardless of the actual visible portion of the box (clipped by the window borders, for example). this is assuming no
scrolling is going on. resize event problems going with the inability to obtain the clientwidth/clientheight of xul elements, it's impossible to handle the "resize" event yourself to grow/shrink content as needed -- as you grow the content, when you shrink the window, the content will simply be clipped (because now it has a bigger size than the window). you have no way of finding out what the clipped si...
Manipulating Lists - Archive of obsolete content
e is also a corresponding getitematindex() function to do the reverse. the nsidomxulmultiselectcontrolelement interface also provides methods for modifying the selected items. for instance, the additemtoselection() function adds a new item to the set of selected items, without clearing the existing selection. the removeitemfromselection() function removes a single item from the selection. list
scrolling if there are more rows in the listbox than can be displayed, a scroll bar will appear to allow the user to scroll the list. the scroll position may be adjusted using a couple of listbox methods. the scrolltoindex() method scrolls to a given row. this listbox will scroll such that the row will be the top row visible, unless the row is near the end of the list of items. the ensureindexisvisible()...
Popup Menus - Archive of obsolete content
r to the edit menu has been added to the first tabpanel. if you right-click (control-click on the macintosh) anywhere on the first panel, the popup will appear. however, the popup will not appear if you click anywhere else. note that the textbox has its own built-in popup menu which will override the one we specified. our find files example so far : source view next, we'll look at how to create
scrolling menus. « previousnext » ...
XUL Tutorial - Archive of obsolete content
c controls list controls progress meters adding html elements using spacers more button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus
scrolling menus events and scripts adding event handlers more event handlers keyboard shortcuts focus and selection commands updating commands broadcasters and observers document object model document object model modifying a xul interface manipulating lists box objects xpcom interfaces xpcom examples trees trees more tree features tree selection custom tree views tree view de...
XUL Questions and Answers - Archive of obsolete content
.clone(); settings.docurl = " "; // suppress url on printout other options you can modify are documented here: http://www.xulplanet.com/references/...tsettings.html how can i send xml/xul document fragment to the server instead of using get or post variables? you can send documents using send(document), so you should be able to insert the fragment into an empty document. how can i manage
scrolling outside the browser? this problem can be solved by capturing the focus events and giving the focus to another xul element or capturing and canceling the keypress events. how to display addressbook rdf and menulist on the same list? mailing lists are children of directories. as such, you cannot use a template to display them in the same list. the best you can do is a cascading menu along the ...
listbox - Archive of obsolete content
ue. the function returns the newly created element. clearselection() return type: no return value deselects all of the items. a select event is sent before the items are deselected. ensureelementisvisible( element ) return type: no return value if the specified element is not currently visible to the user, the displayed items are scrolled so that it is. if the item is already visible, no
scrolling occurs. ensureindexisvisible( index ) return type: no return value if the item at the specified index is not currently visible to the user the displayed items are scrolled so that it is. if the item is already visible, no
scrolling occurs. getindexoffirstvisiblerow() return type: integer returns the index of the first displayed row. note that this is not the same as the first row -- if th...
richlistbox - Archive of obsolete content
. the function returns the newly created element. clearselection() return type: no return value deselects all of the items. a select event is sent before the items are deselected. ensureelementisvisible( element ) return type: no return value if the specified element is not currently visible to the user, the displayed items are scrolled so that it is. if the item is already visible, no
scrolling occurs. ensureindexisvisible( index ) return type: no return value if the item at the specified index is not currently visible to the user the displayed items are scrolled so that it is. if the item is already visible, no
scrolling occurs. getindexoffirstvisiblerow() return type: integer returns the index of the first displayed row. note that this is not the same as the first row -- if ...
rows - Archive of obsolete content
d row elements define the individual rows to appear in the grid. each child of a rows element should be a row element. the rows element may be nested inside another rows element. the children of these nested rows are counted as normal rows as if they were part of the parent. however, nesting rows elements allows groups of rows to have a separate appearance such as a different border, or separate
scrolling may be defined for these rows. non-row related elements placed inside a rows element occupy the full width of the grid and are placed in their corresponding positions between the rows. more information is available in the xul tutorial. example see grid for an example. attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collaps...
scrollbox - Archive of obsolete content
e wanted our vbox to get smaller and sprout its scroll bars instead. note that this example doesn't use a scrollbox tag; you only need that tag if you want to programmatically scroll in addition to the automatic scroll bars. note: avoid nested scroll boxes; it's maddening for the experienced user and confusing for the less experienced user. instead, figure out some other way to lay things out.
scrolling a child element into view see element.scrollintoview. prior to gecko 19, scrollintoview() didn't exist in xul. do this instead: var xpcominterface =scrollbox_element.boxobject.queryinterface( components.interfaces.nsiscrollboxobject); xpcominterface.ensureelementisvisible(child_element_to_make_visible); see the nsiscrollboxobject api for other scroll-related methods. attrib...
tree - Archive of obsolete content
er list and the message list in mozilla mail. tabindex type: integer gets and sets the value of the tabindex attribute. treeboxobject type: nsitreeboxobject the box object is responsible for rendering the tree on the window. this object implements the nsitreeboxobject interface and contains functions for retrieving the cells at certain coordinates, redrawing cells and
scrolling the tree. this property is equivalent to the boxobject property. view type: nsitreeview the view for the tree, which is the object which generates the data to be displayed. you can assign an object which implements nsitreeview to this property. trees built from rdf or those which use treeitems directly will already have a view. functions available in the view allow one to r...
-ms-overflow-style - Archive of obsolete content
lows. "traditional" scrollbars don't auto-hide and never overlap the element's content. accordingly, the dimensions of the layout area for the content are reduced by the width (for vertical scrollbars) or height (for horizontal scrollbars) of the scrollbar(s). -ms-autohiding-scrollbar auto-hiding scrollbars are used if the element's content overflows. auto-hiding scrollbars are displayed during
scrolling or shortly after the pointer interacts with the page, and are hidden shortly after
scrolling and pointer interaction stops. when they are visible, auto-hiding scrollbars overlap the element's content. formal syntax auto | none | scrollbar | -ms-autohiding-scrollbar specifications not part of any specification. ...
-ms-scroll-rails - Archive of obsolete content
initial valuerailedapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values none the content moves exactly with the user's finger. this value allows for free-form panning. railed initial value. panning locks to the primary axis of motion. formal syntax none | railed specifications not part of any specification. remarks this property has no effect on non-scrollable elements. ...
Index - Game development
s in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times. this set of articles covers the basics of creating tile maps using javascript and canvas (although the same high level techniques could be used in any programming language.) 36 square tilemaps implementation:
scrolling maps canvas, games, javascript, atlas,
scrolling, spritesheet, tilemap, tiles this article covers how to implement
scrolling square tilemaps using the canvas api. 37 square tilemaps implementation: static maps canvas, games, javascript, static, atlas, spritesheet, tilemap, tilemaps, tiles this article covers how to implement static square tilemaps using the canvas a...
First input delay - MDN Web Docs Glossary: Definitions of Web-related terms
rst input delay (fid) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, javascript-powered control) to the time when the browser is actually able to respond to that interaction. it is the length of time, in milliseconds, between the first user interaction on a web page and the browser’s response to that interaction.
scrolling and zooming are not included in this metric. the time between when content is painted to the page and when all the functionality becomes responsive to human interaction often varies based on the the size and complexity of the javascript needing to be downloaded, parsed, and executed on the main thread, and on the device speed or lack thereof (think low end mobile devices). the longer the delay, ...
RAIL - MDN Web Docs Glossary: Definitions of Web-related terms
response, animation, idle, and load, is a performance model originated by the google chrome team in 2015, focused on user experience and performance within the browser. the performance mantra of rail is "focus on the user; the end goal isn't to make your site perform fast on any specific device, it's to make users happy." there are 4 stages of interaction: page load, idle, response to input, and
scrolling and animation. in acronym order, the main tenets are: response respond to users immediately, acknowledging any user input in 100ms or less. animation when animating, render each frame in under 16ms, aiming for consistency and avoiding jank. idle when using the main javascript thread, work in chunks for less than 50ms to free up the thread for user interactions. load deliver interactive ...
Snap positions - MDN Web Docs Glossary: Definitions of Web-related terms
a scroll container may set snap positions — points that the scrollport will stop moving at after a
scrolling operation is completed. this allows a
scrolling experience that gives the effect of paging through content rather than needing to drag content into view. defining snap positions on the scroll container was introduced in the css scroll snap specification. ...
HTML table advanced features and accessibility - Learn web development
and don't result in any visual enhancement on their own. they are however very useful for styling and layout — acting as useful hooks for adding css to your table. to give you some interesting examples, in the case of a long table you could make the table header and footer repeat on every printed page, and you could make the table body display on a single page and have the contents available by
scrolling up and down. to use them: the <thead> element must wrap the part of the table that is the header — this is usually the first row containing the column headings, but this is not necessarily always the case. if you are using <col>/<colgroup> element, the table header should come just below those. the <tfoot> element needs to wrap the part of the table that is the footer — this might be a f...
What is JavaScript? - Learn web development
h what javascript is, what it can do, and how it fits into a web site. a high-level definition javascript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2d/3d graphics,
scrolling video jukeboxes, etc. — you can bet that javascript is probably involved. it is the third layer of the layer cake of standard web technologies, two of which (html and css) we have covered in much more detail in other parts of the learning area. html is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data table...
Web performance resources - Learn web development
lback. <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of unstyled text (fout.) the simplist way to address this is by inlining css that is required for any content that is rendered above the fold, or what you see in the browser viewport before
scrolling. these styles will improve perceived performance as the css does not require a file request. <style type="text/css"> // insert your css here </style> javascript avoid javascript blocking by using the async or defer attributes, or link javascript assets after the page's dom elements. javascript only block rendering for elements that appear after the script tag in the dom tree. web fonts eot ...
Web performance - Learn web development
ent makes it into your users browser to be viewed, to what groups of people we need to consider when thinking about performance, how do users perceive performance? more important than how fast your website is in milliseconds, is how fast your users perceive your site to be. these perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of
scrolling and other animations. in this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings. measuring performance now that you understand a few performance metrics, we take a deeper dive into performance tools, metrics, and apis and how we can make performance part of the web developmen...
Handling common accessibility problems - Learn web development
is common with screenreaders, to enable them to keep their commands from clashing with other commands. in the case of nvda, the modifier can either be insert (the default), or capslock (can be chosen by checking the first checkbox in the nvda welcome dialog before pressing ok). note: nvda is more subtle than voiceover in terms of how it highlights where it is and what it is doing. when you are
scrolling through headings, lists, etc., items you are selected on will generally be highlighted with a subtle outline, but this is not always the case for all things. if you get completely lost, you can press ctrl + f5 to refresh the current page and begin from the top again. nvda has many keyboard commands, and we won't list them all here. the basic ones you'll need for web page testing are in the foll...
Accessibility API cross-reference
corresponds to an mdi document. in aria, used to nest browsable rich text content inside interactive content document n/a n/a document document a drop down list, different from combobox droplist n/a n/a listbox for math & chemistry equation n/a n/a math a scrollable list of articles where
scrolling may cause articles to be added to or removed from either end of the list. feed a landmark region that contains a collection of items and objects that, as a whole, combine to create a form. form <form> presumably msaa's graphic is aria's and html's img? graphic n/a n/a img <img> a cel...
Mozilla’s UAAG evaluation report
rl itself. clearly identifying internal vs. external links is bug 127038. provides information about whether link will open in same window does not support fee links 10.7 highlight current viewport. (p1) vg uses title bar color and focus indicator to indicate with view port has focus the currently focused content frame has a dotted outline, until a key is pressed or
scrolling occurs the focus appearance is not configurable 10.8 indicate rendering progress. (p3) vg a progress bar and status bar message indicates loading progress the scroll bar indicates how far into the document the current graphical view is the size of the current document is in the page info screen, sometimes it says unavailable guideline 11. allow confi...
Experimental features in Firefox
5153 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no beta 75 no release 75 no preference name devtools.webconsole.input.context mobile gesture support in responsive design mode mouse gestures are used to simulate mobile gestures like swiping/
scrolling, double-tap and pinch-zooming and long-press to select/open the context menu. see bug 1621781, bug 1245183, and bug 1401304 for more details. release channel version added enabled by default? nightly 76[1] yes developer edition 76[1] yes beta 76[1] yes release 76[1] no preference name n/a [1] suppor...
mozbrowserscrollareachanged
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserscrollareachanged event is fired when the available
scrolling area in the browser <iframe> changes. this can occur on resize and when the page size changes (while loading for example.) general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type...
Browser API
rowser <iframe>. mozbrowseropentab sent when a new tab is opened within a browser <iframe> as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.) mozbrowserresize sent when the browser <iframe>'s window size has changed. mozbrowserscroll sent when the browser <iframe> content scrolls. mozbrowserscrollareachanged sent when the available
scrolling area in the browser <iframe> changes. this can occur on resize and when the page size changes (while loading for example.) mozbrowserscrollviewchange sent when asynchronous
scrolling (i.e. apcz) starts or stops. mozbrowsersecuritychange sent when the ssl state changes within a browser <iframe>. mozbrowserselectionstatechanged sent when the text selected inside the browser <iframe> content c...
IME handling guide
n gecko calls it. if this occurs, gecko should restart composition with a dom compositionstart event , a dom compositionupdate event and a dom text event at caret position. this issue hasn't been supported yet. ime state management ime is a text input system. it means that except when a user wants to input some text, ime shouldn't be avaliable. for example, pressing the space key to attempt
scrolling a page may be consumed and prevented by ime. additionally, password editors need to request special behavior with ime. for solving this issue, gecko sets the proper ime state at dom focus change. first, when a dom node gets focus, nsfocusmanager notifies imestatemanager of the new focused node (calls imestatemanager::onchangefocus()). imestatemanager asks desired ime state by calling nsicontent...
source-editor.jsm
aline, [optional] number acolumn, [optional] number aalign ); parameters aline the 0-based line number on which to place the caret. acolumn optional the 0-based column number at which to place the caret; if you don't provide this parameter, the caret is placed at the beginning of the line specified by aline. aalign optional how to position the line with respect to the viewport when
scrolling the line into view. this may be one of sourceeditor.vertical_align.top, sourceeditor.vertical_align.center, and sourceeditor.vertical_align_bottom. see alignment constants for details. the default is sourceeditor.vertical_align.top. setmode() sets the current syntax highlighting mode for the text being edited. void setmode( string amode ); parameters amode a string indicating the file...
Mozilla Quirks Mode Behavior
upported on the cellspacing attribute, but treated as pixels (bug 106336). obsolete since gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) this quirk has been adopted in standards mode now. frames in quirks mode marginwidth and marginheight on a frame are propagated to the contained body. in a frameset cols/rows specification 0* is treated as 1* (see bug 40383). obsolete the
scrolling attribute on frame is handled differently. html parser in quirks mode, we parsed html comments in a non-sgml way compatible with other browsers instead of treating "--" as the comment start and end delimiter. obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this quirk is now html5 conform and has been adopted in standards mode. original document information auth...
Reporting a Performance Problem
contains, the harder it is to analyze and turn into actionable data. once uploaded, copy permalink url to your clipboard by right clicking and add the profile url to a bug for your performance problem and/or send it to the appropriate person. try to give some context about what you were doing when the performance problem arose such as the url you were viewing and what actions were you doing (ex.
scrolling on gmail.com). viewing addon performance in geckoview sometimes an addon or more are slowing down firefox. these addons might be using the extension api in ways that were not meant to. you can see which of these addons are causing problems by adding the "moz-extension" filter. make sure you are selecting the process that is using up the cpu since all of the processes are shown. you might...
Gecko events
thelp_end a window has exited context-sensitive help mode is supported: no event_dragdrop_start an application is about to enter drag-and-drop mode is supported: yes event_dragdrop_end an application is about to exit drag-and-drop mode is supported: no event_dialog_start a dialog box has been displayed is supported: no event_dialog_end a dialog box has been closed is supported: no event_
scrolling_start
scrolling has started on a scroll bar is supported: yes event_
scrolling_end
scrolling has ended on a scroll bar is supported: yes event_minimize_start a window object is about to be minimized or maximized is supported: no event_minimize_end a window object has been minimized or maximized is supported: no event_document_load_start is supported: yes event_document_load_complete t...
Gecko states
state_default this state represents the default button in a window. state_expanded children of this object that have the role_outlineitem role are displayed. state_collapsed children of this object that have the role_outlineitem role are hidden. state_busy the control cannot accept input at this time. state_floating children "owned" not "contained" by parent state_checkable indicates
scrolling or moving text or graphics. state_animated the object's appearance changes rapidly or constantly. graphics that are occasionally animated are described as role_graphic with the state property set to state_animated. this state is used to indicate that the object's location is changing. state_invisible the object is programmatically hidden. for example, menu itmes are programmatically hidden un...
nsIAccessibleScrollType
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) constants constant value description scroll_type_top_left 0x00 scroll the top left of the object or substring to the top left of the window (or as close as possible). scroll_type_bottom_right 0x01 scroll the bottom right of the object or substring to the bottom right of the window (or as close as possible). scroll_type_top_edge 0x02 scroll the top edge of the object or substring to the top edge of the window (or as close as possible). ...
nsIAccessibleStates
ave the role_outlineitem role are displayed. (see nsiaccessiblerole.constants). state_collapsed 0x00000400 children of this object that have the role_outlineitem role are hidden. (see nsiaccessiblerole.constants). state_busy 0x00000800 the control cannot accept input at this time. state_floating 0x00001000 children "owned" not "contained" by parent. state_marqueed 0x00002000 the object is
scrolling or moving text or graphics. state_animated 0x00004000 the object's appearance changes rapidly or constantly. graphics that are occasionally animated are described as role_graphic (see nsiaccessiblerole.constants) with the state property set to state_animated. this state is used to indicate that the object's location is changing. state_invisible 0x00008000 the object is programmatically hidden...
nsIDOMWindowUtils
the width of the viewport in css pixels. aheightpx the height of the viewport in css pixels. setdisplayport() set the "displayport" to be <xpx, ypx, widthpx, heightpx> in units of css pixels, regardless of the size of the enclosing widget/view. this will *not* trigger reflow. <x, y> is relative to the top-left of the css viewport. this means that the pixels rendered to the displayport take
scrolling into account, for example. the displayport will be used as the window's visible region for the purposes of invalidation and painting. the displayport can approximately be thought of as a "persistent" drawwindow() (albeit with coordinates relative to the css viewport): the bounds are remembered by the platform, and layer pixels are retained and updated inside the viewport bounds. it's legal to s...
nsISHEntry
if any, that was associated with the channel that the document that was loaded to create this history entry came from. pageidentifier unsigned long an integer that should be the same for two entries attached to the same docshell only if the two entries are entries for the same page in the sense that one could go from the state represented by one to the state represented by the other simply by
scrolling (so the entries are separated by an anchor traversal or a subframe navigation in some other frame). obsolete since gecko 6.0 parent nsishentry parent of this entry. postdata nsiinputstream post data for the document. referreruri nsiuri referrer uri. refreshurilist nsisupportsarray saved refresh uri list for the content viewer. savelayoutstateflag boolean indicate whether layouthistory...
nsITreeBoxObject
sitreecolumn to check scrolltorow() scrolls such that the row at index is at the top of the visible view. void scrolltorow(in long index); parameters index the index of the row scrollbylines() scroll the tree up or down by numlines lines. void scrollbylines(in long numlines); parameters numlines the number of lines to scroll. positive values move down in the tree. prevents
scrolling off the end of the tree. scrollbypages() scroll the tree up or down by numpages pages. a page is considered to be the amount displayed by the tree. this method prevents
scrolling off the end of the tree. void scrollbypages(in long numpages); parameters numpages the number of pages to scroll. positive values move down in the tree. scrolltocell() scrolls such that a given cell is visib...
Index - Firefox Developer Tools
e picker is active. 80 ui tour guide, inspector, tools this article is a quick tour of the main sections of the page inspector's user interface. 81 paint flashing tool web performance the paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or
scrolling. with the help of this tool you can figure out whether your website is causing the browser to repaint more than it needs to. because repaints can be performance-intensive operations, eliminating unnecessary repaints can improve your website's responsiveness. 82 performance developer tools, learn, performance, web performance the performance tool gives you insight into your si...
Frame rate - Firefox Developer Tools
sponsiveness as the user interacts with it. for example, if moving the mouse over some page element triggers some javascript that changes the element's appearance, and that triggers a reflow and a repaint, then all this work needs to be completed in that frame. if it takes too long for the browser to process the frame, then the browser will appear momentarily unresponsive (janky). similarly, if
scrolling through a page involves a lot of complex page updates and the browser can't keep up an acceptable frame rate,
scrolling the page will appear sluggish or will occasionally freeze. in general, a high and consistent frame rate will make the user's interaction with the site more enjoyable and engaging. a frame rate of 60fps is reckoned to be the target for smooth performance, giving you a time bud...
Animation() - Web APIs
available is keyframeeffect. this can be null (which is the default) to indicate that there should be no effect applied. timeline optional specifies the timeline with which to associate the animation, as an object of a type based on the animationtimeline interface. currently the only timeline type available is documenttimeline, but in the future there my be timelines associated with gestures or
scrolling, for example. the default value is document.timeline, but this can be set to null as well. examples in the follow the white rabbit example, the animation() constructor is used to create an animation for the rabbitdownkeyframes using the document's timeline: var rabbitdownanimation = new animation(rabbitdownkeyframes, document.timeline); specifications specification status co...
CanvasRenderingContext2D.drawWindow() - Web APIs
this api cannot be used by web content. it is synchronous, and as such can't be compatible with fission. if you're using it from an extension, you should switch to tabs.capturetab. if you're writing chrome code, you probably want windowglobalparent.drawsnapshot from the parent process. ...
CanvasRenderingContext2D - Web APIs
duced in gecko 1.9 and is removed starting with gecko 7.0. canvasrenderingcontext2d.moztextalongpath() this method was introduced in gecko 1.9 and is removed starting with gecko 7.0. internal apis (chrome-context only) canvasrenderingcontext2d.drawwindow() renders a region of a window into the canvas. the contents of the window's viewport are rendered, ignoring viewport clipping and
scrolling. canvasrenderingcontext2d.demote() this causes a context that is currently using a hardware-accelerated backend to fallback to a software one. all state should be preserved. internet explorer canvasrenderingcontext2d.msfillrule the fill rule to use. this must be one of evenodd or nonzero (default). specifications specification status comment html living stan...
Document: pointercancel event - Web APIs
bubbles yes cancelable no interface pointerevent event handler property onpointercancel some examples of situations that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities. ...
Document: wheel event - Web APIs
event handler property globaleventhandlers.onwheel this event replaces the non-standard deprecated mousewheel event. note: don't confuse the wheel event with the scroll event. the default action of a wheel event is implementation-specific, and doesn't necessarily dispatch a scroll event. even when it does, the delta* values in the wheel event don't necessarily reflect the content's
scrolling direction. therefore, do not rely on the wheel event's delta* properties to get the
scrolling direction. instead, detect value changes of scrollleft and scrolltop in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. <div>scale me with your mouse wheel.</div> body { min-height: 100vh; m...
Document - Web APIs
the available plugins. document.featurepolicy read only returns the featurepolicy interface which provides a simple api for introspecting the feature policies applied to a specific document. document.preferredstylesheetsetread only returns the preferred style sheet set as specified by the page author. document.scriptsread only returns all the <script> elements on the document. document.
scrollingelementread only returns a reference to the element that scrolls the document. document.selectedstylesheetset returns which style sheet set is currently in use. document.stylesheetsetsread only returns a list of the style sheet sets available on the document. document.timelineread only returns timeline as a special instance of documenttimeline that is automatically created on page load. ...
Element: DOMMouseScroll event - Web APIs
events may be fired without this event. on gecko 17 (firefox 17) or later, you need to call preventdefault() of wheel events which must be fired for every native event. use the standardized wheel event if available. properties the event has only one additional property beyond standard events. detail the detail property describes the scroll more precisely, with positive values indicating
scrolling downward and negative values indicating
scrolling upward. if the event represents
scrolling up by a page, the value of detail is -32768. if the event indictes
scrolling down by a page, the value is +32768. any other value represents the number of lines to scroll, with the direction indicated by the value's sign. note: trusted events are never sent with a value of 0 for detail. trusted events...
Element: MozMousePixelScroll event - Web APIs
by the mousescrollevent interface. important: do not use this non-standard and obsolete event. instead, you should always use the standard wheel event. bubbles yes cancelable yes interface mousescrollevent getting the distance scrolled the event's detail property indicates the scroll distance in terms of lines, with negative values indicating the
scrolling movement is either toward the bottom or toward the right, and positive values indicating
scrolling to the top or left. if the platform's native mouse wheel events indicate the scroll distance in terms of lines or pages, the value of detail is computed using that value and the line height or page width/height of the nearest ancestor scrollable element that contains the target element. note: on ...
Element.getClientRects() - Web APIs
is method to return a textrectangle object for each line of text. however, the cssom working draft specifies that it returns a domrect for each border box. for an inline element, the two definitions are the same. but for a block element, mozilla will return only a single rectangle. firefox 3.5 note firefox 3.5 adds width and height properties to the textrectangle object. the amount of
scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the rectangles. the returned rectangles do not include the bounds of any child elements that might happen to overflow. for html <area> elements, svg elements that do not render anything themselves, display:none elements, and generally any elements that are not directly rendered, an emp...
Element.msZoomTo() - Web APIs
o the element's contenty value. scalefactor[in]: floating-point. the scale factor (mscontentzoomfactor) to zoom to. if no value is specified, defaults to the current zoom level (no additional zoom occurs).this argument is ignored if the element is not zoomable. animate[in]: the type of animation to use. default: uses the default animation. none: no animation is used. this method has no
scrolling effect on non-scrollable elements and no zooming effect on non-zoomable elements (e.g., elements with "-ms-content-zooming: none"). this method has no effect if called from a parent document to scroll or zoom content hosted in an iframe. return value this method does not return a value. example /* zooming in on an element while still keeping it centered in the viewport */ var args = { co...
Element.setPointerCapture() - Web APIs
ese events on all other elements. overview of pointer capture pointer capture allows events for a particular pointer event (pointerevent) to be re-targeted to a particular element instead of the normal (or hit test) target at a pointer's location. this can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (such as by
scrolling or panning). syntax targetelement.setpointercapture(pointerid); parameters pointerid the pointerid of a pointerevent object. return value this method returns undefined. exceptions exception explanation invalidpointerid pointerid does not match any of the active pointers. example this example sets pointer capture on a <div> when you press down on it...
Element: wheel event - Web APIs
bubbles yes cancelable yes interface wheelevent event handler property onwheel note: don't confuse the wheel event with the scroll event. the default action of a wheel event is implementation-specific, and doesn't necessarily dispatch a scroll event. even when it does, the delta* values in the wheel event don't necessarily reflect the content's
scrolling direction. therefore, do not rely on the wheel event's delta* properties to get the
scrolling direction. instead, detect value changes of scrollleft and scrolltop of the target in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. <div>scale me with your mouse wheel.</div> body { min-heig...
Event.cancelable - Web APIs
ent listener cannot stop the event from occurring. event listeners that handle multiple kinds of events may want to check cancelable before invoking their preventdefault() methods. most browser-native events that can be canceled are the ones that result from the user interacting with the page. canceling the click, scroll, or beforeunload events would prevent the user from clicking on something,
scrolling the page, or navigating away from the page, respectively. custom events created by other javascript code control if they can be canceled when they are created. syntax bool = event.cancelable; value the result is a boolean, which is true if the event can be canceled. example for example, browser vendors are proposing that the wheel event can only be canceled the first time the listener is ...
Using the Frame Timing API - Web APIs
a frame rate of 60 fps (frames per second) for a 60 hz refresh rate is a common target for a good responsive user experience. this means the browser should process a frame in about 16.7ms. ...
Frame Timing API - Web APIs
a frame rate of 60 fps (frames per second) for a 60 hz refresh rate is a common target for a good responsive user experience. this means the browser should process a frame in about 16.7 ms. an application can register a performanceobserver for "frame" performance entry types. ...
GlobalEventHandlers.onwheel - Web APIs
syntax target.onwheel = functionref; value functionref is a function name or a function expression. the function receives a wheelevent object as its sole argument. ...
HTMLElement: pointercancel event - Web APIs
bubbles yes cancelable no interface pointerevent event handler property onpointercancel some examples of situations that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities. ...
HTMLImageElement.loading - Web APIs
hint to the user agent as to how to best schedule the loading of the image to optimize page performance. the possible values are: eager the default behavior, eager tells the browser to load the image as soon as the <img> element is processed. lazy tells the user agent to hold off on loading the image until the browser estimates that it will be needed imminently. for instance, if the user is
scrolling through the document, a value of lazy will cause the image to only be loaded shortly before it will appear in the window's visual viewport. usage notes timing of the load event the load event is fired when the document has been fully processed. when images are loaded eagerly (which is the default), every image in the document must be fetched before the load event can fire. by specifying the ...
HTMLOutputElement - Web APIs
y of the element and returns a boolean holding the check result. htmloutputelement.reportvalidity() this method reports the problems with the constraints on the element, if any, to the user. if there are problems, fires an invalid event at the element, and returns false; if there are no problems, it returns true. when the problem is reported, the user agent may focus the element and change the
scrolling position of the document or perform some other action that brings the element to the user's attention. user agents may report more than one constraint violation if this element suffers from multiple problems at once. if the element is not rendered, then the user agent may report the error for the running script instead of notifying the user. htmloutputelement.setcustomvalidity() sets a custom v...
Timing element visibility with the Intersection Observer API - Web APIs
lling loadrandomad(), specifying the ad to be replaced as an input parameter. as we saw previously, loadrandomad() will replace an existing ad with content and data corresponding to a new ad, if you specify an existing ad's element as an input parameter. the new ad's element object is returned to the caller in case it's needed. result the resulting page looks like this. try experimenting with
scrolling around and watch how visibility changes affect the timers in each ad. also note that each ad is replaced after one minute of visibility, and how the timers pause while the document is tabbed into the background. ...
Key Values - Web APIs
y_meta (0x01000022) keycode_meta_left (117) keycode_meta_right (118) "numlock" the numlock (number lock) key. toggles the numeric keypad between number entry some other mode (often directional arrows). vk_numlock (0x90) gdk_key_num_lock (0xff7f) qt::key_numlock (0x01000025) keycode_num_lock (143) "scrolllock" [2] the scroll lock key. toggles between
scrolling and cursor movement modes. vk_scroll (0x91) gdk_key_scroll_lock (0xff14) qt::key_scrolllock (0x01000026) keycode_scroll_lock (116) "shift" the shift key. modifies keystrokes to allow typing upper (or other) case letters, and to support typing punctuation and other special characters. vk_shift (0x10) vk_lshift (0xa0) vk_rshift (0xa1) kvk_shift (0x38) ...
Long Tasks API - Web APIs
ong tasks api gives us visibility into tasks that take 50 milliseconds or more. the 50 ms threshold comes from the rail model, in particular the "response: process events in under 50 ms" section. tasks that block the main thread for 50 ms or more cause, among other issues: delayed "time to interactive". high/variable input latency. high/variable event handling latency. janky animations and
scrolling. concepts some key terms or ideas that are utilized by the long tasks api. long task any uninterrupted period where the main ui thread is busy for 50 ms or longer. common examples include: long running event handlers. expensive reflows and other re-renders. work the browser does between different turns of the event loop that exceeds 50 ms. culprit browsing context container th...
MediaTrackConstraints.logicalSurface - Web APIs
ty is a constraindomstring describing the requested or mandatory constraints placed upon the value of the logicalsurface constrainable property. this is used to specify whether or not getdisplaymedia() should allow the user to choose display surfaces which are not necessarily fully visible on the screen, such as occluded windows or the complete content of windows which are large enough to require
scrolling to see their entire contents. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.logicalsurface as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { logicalsur...
MediaTrackSettings.logicalSurface - Web APIs
the mediatracksettings dictionary's logicalsurface property indicates whether or not the display area being captured is a logical surface. logical surfaces are those which are not necessarily entirely onscreen, or may even be off-screen, such as windows' backing buffers (where only part of the buffer is visible without
scrolling the containing window) and offscreen rendering contexts. syntax islogicalsurface = mediatracksettings.logicalsurface; value a boolean value which is true if the video track in the stream of captured video is taken from a logical display surface. the most common scenario in which a display surface may be a logical one is if the selected surface contains the entire content area of a window which is too large to display onscreen at once. since the window that contains th...
MouseEvent.pageY - Web APIs
syntax var pos = event.pagey; originally, this property was defined as a long integer. the cssom view module redefined it as a double float. see the browser compatibility section for details. ...
PerformanceFrameTiming - Web APIs
a frame rate of 60fps (frames per second) for a 60hz refresh rate is the target for a good responsive user experience. this means the browser should process a frame in about 16.7ms. ...
ScrollToOptions.behavior - Web APIs
the behavior property of the scrolltooptions dictionary specifies whether the
scrolling should animate smoothly, or happen instantly in a single jump. this is actually defined on the scrolloptions dictionary, which is implemented by scrolltooptions. syntax behavior: scrollbehavior value an enum, the value of which can be one of the following: smooth: the
scrolling animates smoothly. auto: the
scrolling happens in a single jump. examples in our scrolltooptions example (see it live) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth
scrolling enabled or not. when the form is submitted, an event handler is run th...
ScrollToOptions.left - Web APIs
fies the number of pixels along the x axis to scroll the window or element. syntax left: double value a double. examples in our scrolltooptions example (see it live) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth
scrolling enabled or not. when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ? 'smo...
ScrollToOptions.top - Web APIs
ifies the number of pixels along the y axis to scroll the window or element. syntax top: double value a double. examples in our scrolltooptions example (see it live) we include a form that allows the user to enter three values — two numbers representing the left and top properties (i.e. the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth
scrolling enabled or not. when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ? 'smo...
TouchEvent - Web APIs
id webview), where the default value for the passive option for touchstart and touchmove is true and calls to preventdefault() will have no effect. to override this behavior, you need to set the passive option to false, after which calling preventdefault() will work as specified. the change to treat listeners as passive by default prevents the listener from blocking page rendering while a user is
scrolling. a demo is available on the google developer site. globaleventhandlers the globaleventhandlers mixin defines these events as global events that are available on any element in the dom that the user can interact with. globaleventhandlers.ontouchstart a global event handler for the touchstart event. globaleventhandlers.ontouchend a global event handler for the touchend event. globaleve...
UIEvent.pageX - Web APIs
nd pagex on any non-mouse events. do not look for pagex on any non-mouse events in new code and update existing code as soon as possible. syntax var pos = event.pagex value an integer value, in pixels, indicating the x coordinate at which the mouse pointer was located when the event occurred. this value is relative to the left edge of the entire document, regardless of the current horizontal
scrolling offset of the document. examples for an example, see the documentation for the standard mouseevent.pagex property, which you should use instead. specifications this property is not part of any specification. see mouseevent.pagex instead. ...
VisualViewport - Web APIs
specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specification. draft initial definition. ...
WebGL best practices - Web APIs
l entry points cause synchronous stalls on the calling thread. even basic requests can take as long as 1ms, but they can take even longer if they need to wait for all graphics work to be completed (with an effect similar to glfinish() in native opengl). in production code, avoid such entry points, especially on the browser main thread where they can cause the entire page to jank (often including
scrolling or even the whole browser). geterror(): causes a flush + round-trip to fetch errors from the gpu process). for example, within firefox, the only time glgeterror is checked is after allocations (bufferdata, *teximage*, texstorage*) to pick up any gl_out_of_memory errors. getshader/programparameter(), getshader/programinfolog(), other gets on shaders/programs: flush + shader compile ...
Web Video Text Tracks Format (WebVTT) - Web APIs
reating new objects of cues. autokeyword. directionsetting: to set the direction of caption or text in a file. linealignment: to adjust the line alignment. positionalignsetting: to adjust the position of text. vttregion the methods used for region are listed below along with description of their functionality: scrollsetting: for adjusting the
scrolling setting of all nodes present in given region. vtt region constructor: for construction of new vtt regions. tutorial on how to write a webvtt file there are few steps that can be followed to write a simple webvtt file. before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. steps are given below: open a notepad. the fir...
WheelEvent - Web APIs
mousewheelevent and mousescrollevent interfaces. use this interface and avoid the non-standard ones. do not confuse the wheel event with the scroll event: the default action of a wheel event is implementation-defined. thus, a wheel event doesn't necessarily dispatch a scroll event. even when it does, that doesn't mean that the delta* values in the wheel event necessarily reflect the content's
scrolling direction. therefore, do not rely on delta* properties to get the content's
scrolling direction. instead, detect value changes to scrollleft and scrolltop of the target in the scroll event. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block...
Window.scroll() - Web APIs
ant displayed in the upper left. - or - options is a scrolltooptions dictionary. examples <!-- put the 100th vertical pixel at the top of the window --> <button onclick="scroll(0, 100);">click to scroll down 100 pixels</button> using options: window.scroll({ top: 100, left: 100, behavior: 'smooth' }); notes window.scrollto() is effectively the same as this method. for relative
scrolling, see window.scrollby(), window.scrollbylines(), and window.scrollbypages(). for
scrolling elements, see element.scrolltop and element.scrollleft. specification specification status comment css object model (cssom) view modulethe definition of 'window.scroll()' in that specification. working draft initial definition. browser compatibility the compatibil...
Window.scrollTo() - Web APIs
at you want displayed in the upper left. y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left. - or - options is a scrolltooptions dictionary. examples window.scrollto(0, 1000); using options: window.scrollto({ top: 100, left: 100, behavior: 'smooth' }); notes window.scroll() is effectively the same as this method. for relative
scrolling, see window.scrollby(), window.scrollbylines(), and window.scrollbypages(). for
scrolling elements, see element.scrolltop and element.scrollleft. specifications specification status comment css object model (cssom) view modulethe definition of 'window.scroll()' in that specification. working draft initial definition. ...
Using the log role - Accessibility
olite" aria-atomic="false"> <li>please choose a user name to begin using ajax chat.</li> </ul> <ul id="userlistregion" aria-live="off" aria-relevant="additions removals text"> </ul> </div> working examples: http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/ notes using the log role on an element implies that element has aria-live="polite". with an area that has
scrolling text, such as a stock ticker, the marquee role should be used instead. aria attributes used log related aria techniques marquee role compatibility tbd: add support information for common ua and at product combinations additional resources aria best practices – mplementing live regions: http://www.w3.org/tr/wai-aria-practices/#liveregions ...
ARIA: grid role - Accessibility
ves focus one cell to the left. if focus is on the left-most cell in the row, focus does not move. ↓ moves focus one cell down. if focus is on the bottom cell in the column, focus does not move. ↑ moves focus one cell up. if focus is on the top cell in the column, focus does not move. page down moves focus down an author-determined number of rows, typically
scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. if focus is in the last row of the grid, focus does not move. page up moves focus up an author-determined number of rows, typically
scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. if focus is in the first row of the grid, focus does not move...
ARIA: Region role - Accessibility
on" aria-labelledby="heading"> <h3 id="use-discretion">please use the <code>region</code> role with discretion</h3> <!-- content --> </div> ... <div role="region" aria-labelledby="please-reconsider"> <h3 id="please-reconsider">please reconsider your document structure</h3> <!-- content --> </div> in this example, the region's label is being generated by the aria-labelledby attribute.
scrolling content areas with overflow text if there is a content area with tabindex="0", add role="region" to convey to screen reader users that is a generic region. this is done to allow keyboard-only users to scroll regions with overflow text. svg role="region" can be declared on areas of svg along with an aria-label to allow individual sections of the svg to be described. added benefits certain tec...
ARIA: button role - Accessibility
button:focus, [role="button"][aria-pressed="true"] { border: 2px solid #000; } javascript function handlebtnclick(event) { togglebutton(event.target); } function handlebtnkeydown(event) { // check to see if space or enter were pressed if (event.key === " " || event.key === "enter" || event.key === "spacebar") { // "spacebar" for ie11 support // prevent the default action to stop
scrolling when space is pressed event.preventdefault(); togglebutton(event.target); } } function togglebutton(element) { var audio = document.getelementbyid('audio'); // check to see if the button is pressed var pressed = (element.getattribute("aria-pressed") === "true"); // change aria-pressed to the opposite state element.setattribute("aria-pressed", !pressed); // toggle the play s...
WAI-ARIA Roles - Accessibility
ith reading or browse modes to use the document mode to read the content contained within this element.aria: feed rolea feed is a dynamic scrollable list of articles in which articles are added to or removed from either end of the list as the user scrolls. a feed enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue
scrolling infinitely by loading more content as the user reads.aria: figure rolethe aria figure role can be used to identify a figure inside page content where appropriate semantics do not already exist. a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.aria: form rolethe form landmark role ca...
Accessibility documentation index - Accessibility
d the content contained within this element. 61 aria: feed role aria, aria role, reference, feed a feed is a dynamic scrollable list of articles in which articles are added to or removed from either end of the list as the user scrolls. a feed enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue
scrolling infinitely by loading more content as the user reads. 62 aria: figure role aria, aria role, aria figure, accessibility, reference, rôle, figure the aria figure role can be used to identify a figure inside page content where appropriate semantics do not already exist. a figure is generally considered to be one or more images, code snippets, or other content that puts across i...
Keyboard-navigable JavaScript widgets - Accessibility
ert". in the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and ie doesn't implement css outlines). prevent used key events from performing browser functions if your widget handles a key event, prevent the browser from also handling it (for example,
scrolling in response to the arrow keys) by using your event handler's return code. if your event handler returns false, the event will not be propagated beyond your handler. for example: <span tabindex="-1" onkeydown="return handlekeydown();"> if handlekeydown() returns false, the event will be consumed, preventing the browser from performing any action based on the keystroke. don't rely on consistent...
Operable - Accessibility
time limit and would be invalidated if it were turned off. 2.2.2 pausing, stopping, hiding (a) for moving/blinking content that starts automatically, lasts longer than 5 seconds, and is shown alongside other content, controls should be provided to pause, stop, or hide it. this does not apply to moving/blinking content that is essential to the experience. examples include
scrolling text and videos. for auto-updating information that starts automatically and is shown alongside other content, controls should be provided to pause, stop, or hide it, or to control the frequency of updates. this does not apply to auto-updating content that is essential to the experience. examples include carousels or rotating annoucements. 2.2.3 no time limits (aaa) this ...
::-webkit-scrollbar - CSS: Cascading Style Sheets
(e.g., chrome, edge, opera, safari, all browsers on ios, and others). css scrollbar selectors you can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers: ::-webkit-scrollbar — the entire scrollbar. ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards). ::-webkit-scrollbar-thumb — the draggable
scrolling handle. ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar. ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle. ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some e...
overflow-block - CSS: Cascading Style Sheets
the overflow-block css media feature can be used to test how the output device handles content that overflows the initial containing block along the block axis. syntax the overflow-block feature is specified as a keyword value chosen from the list below. none content that overflows the block axis is not displayed. scroll content that overflows the block axis can be seen by
scrolling to it. optional-paged content that overflows the block axis can be seen by
scrolling to it, but page breaks can be manually triggered (such as via break-inside, etc.) to cause the following content to display on the following page. paged content is broken up into discrete pages; content that overflows one page in the block axis is displayed on the following page. examples html <p>lorem ipsum dolor sit a...
overflow-inline - CSS: Cascading Style Sheets
the overflow-inline css media feature can be used to test how the output device handles content that overflows the initial containing block along the inline axis. syntax the overflow-inline feature is specified as a keyword value chosen from the list below. none content that overflows the inline axis is not displayed. scroll content that overflows the inline axis can be seen by
scrolling to it. examples html <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; nunc velit erat, tempus id rutrum sed, dapibus ut urna. integer vehicula nibh a justo imperdiet rutrum. nam faucibus pretium orci imperdiet sollicitudin. nunc id facilisis d...
CSSOM View - CSS: Cascading Style Sheets
reference properties scroll-behavior guides coordinate systems a guide to the coordinate systems used to specify the position of a location in a display context, whether that context is a window on a monitor, a viewport on a mobile device, or a position on a sheet of paper when printing. ...
Flow Layout and Overflow - CSS: Cascading Style Sheets
enable viewing it. scrollbars will be added even if the content fits in the box. using a value of auto will display the content with no scrollbars if the content fits inside the box. if it doesn’t fit then scrollbars will be added. comparing the next example with the example for overflow: scroll you should see overflow scroll has horizontal and vertical scrollbars when it only needs vertical
scrolling. the auto example below only adds the scrollbar in the direct we need to scroll. as we have already learned, using any of these values, other than the default of visible, will create a new block formatting context. note: in the working draft of overflow level 3, there is an additional value overflow: clip. this will act like overflow: hidden however it does not allow for programmatic scrollin...
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
ured and accessible document a grid layout should mean we do not need to change our document source in order to get the layout that we want. therefore the starting point of your page should be a well structured and accessible source document. as is noted in the css grid layout specification, this is quite often going to give you a good structure for your smallest screen devices too. if a user is
scrolling through a long document on mobile, the priorities for that user quite often map to what should be a priority in the source. create a responsive, and responsible grid with a solid document you can begin to add your layout, it is likely you will be using media queries to create additional columns and make changes for different screen sizes and devices. grid can be really very useful here, element...
CSS Overflow - CSS: Cascading Style Sheets
. the first is described as ink overflow. this is the overflow of painting effects which do not affect layout or otherwise extend the scrollable overflow region, such as box shadows, border images, text decoration, overhanging glyphs, outlines, etc. the overflow that we sometimes need to manage in css is described as scrollable overflow. this is the content appearing outside of the box for which
scrolling mechanisms need to be provided. the overflow properties are how we can control what happens when content overflows a box. basic example the following interactive example shows how changing the value of the overflow property, changes how the overflow of a fixed height box is dealt with. the source for this interactive example is stored in a github repository. if you'd like to contribute to t...
The stacking context - CSS: Cascading Style Sheets
value other than auto. element with a opacity value less than 1 (see the specification for opacity). element with a mix-blend-mode value other than normal. element with any of the following properties with value other than none: transform filter perspective clip-path mask / mask-image / mask-border element with a isolation value isolate. element with a -webkit-overflow-
scrolling value touch. element with a will-change value specifying any property that would create a stacking context on non-initial value (see this post). element with a contain value of layout, or paint, or a composite value that includes either of them (i.e. contain: strict, contain: content). within a stacking context, child elements are stacked according to the same rules previously explained. impo...
Visual formatting model - CSS: Cascading Style Sheets
t is the viewing area of the browser window. user agents can change the layout of the page when the viewport size changes — for example, if you resize your window, or change the orientation of a mobile device. if the viewport is smaller than the size of the document then the user agent needs to offer a way to scroll to the parts of the document that are not displayed. we most often see this as
scrolling in the block dimension — vertically in a horizontal, top-to-bottom language. however, you might design something that requires
scrolling in the inline dimension too. box generation box generation is the part of the css visual formatting model that creates boxes from the document's elements. generated boxes are of different types, which affect their visual formatting. the type of the box gener...
WebKit CSS extensions - CSS: Cascading Style Sheets
efix but are no longer supported in evergreen browsers, with or without the -webkit- prefix. -webkit-alt* -webkit-color-correction -webkit-flow-from -webkit-flow-into -webkit-grid-columns (see grid-column) -webkit-grid-rows (see grid-row) -webkit-hyphenate-charset -webkit-image-set (see image-set()) -webkit-mask-attachment -webkit-match-nearest-mail-blockquote-color -webkit-overflow-
scrolling -webkit-region-break-after -webkit-region-break-before -webkit-region-break-inside -webkit-region-fragment -webkit-shape-inside -webkit-touch-callout (see touch-action) background-origin-x (unprefixed!) background-origin-y (unprefixed!) * still supported in the safari technology preview, but not in a generally released browser. pseudo-classes :-webkit-animating-full-screen-transit...
cursor - CSS: Cascading Style Sheets
drop an item may not be dropped at the current location. bug 275173: on windows and mac os x, no-drop is the same as not-allowed. not-allowed the requested action will not be carried out. grab something can be grabbed (dragged to be moved). grabbing something is being grabbed (dragged to be moved). resizing &
scrolling all-scroll something can be scrolled in any direction (panned). bug 275174: on windows, all-scroll is the same as move. col-resize the item/column can be resized horizontally. often rendered as arrows pointing left and right with a vertical bar separating them. row-resize the item/row can be resized vertically. often rendered as arrows p...
overflow-x - CSS: Cascading Style Sheets
's left and right edges. if overflow-y is hidden, scroll or auto and this property is visible, it will implicitly compute to auto. hidden content is clipped if necessary to fit horizontally in the padding box. no scrollbars are provided. clip like for hidden, the content is clipped to the element's padding box. the difference between clip and hidden is that the clip keyword also forbids all
scrolling, including programmatic
scrolling. the box is not a scroll container, and does not start a new formatting context. if you wish to start a new formatting context, you can use display: flow-root to do so. scroll content is clipped if necessary to fit horizontally in the padding box. browsers display scrollbars whether or not any content is actually clipped. (this prevents scrollbars from appearin...
overflow-y - CSS: Cascading Style Sheets
itly compute to auto. values visible content is not clipped and may be rendered outside the padding box's top and bottom edges. hidden content is clipped if necessary to fit vertically in the padding box. no scrollbars are provided. clip like for hidden, the content is clipped to the element's padding box. the difference between clip and hidden is that the clip keyword also forbids all
scrolling, including programmatic
scrolling. the box is not a scroll container, and does not start a new formatting context. if you wish to start a new formatting context, you can use display: flow-root to do so. scroll content is clipped if necessary to fit vertically in the padding box. browsers display scrollbars whether or not any content is actually clipped. (this prevents scrollbars from appearing ...
Event reference
when window.open() is called within a browser iframe. mozbrowserresize firefox os browser api-specific sent when the browser <iframe>'s window size has changed. mozbrowserscroll firefox os browser api-specific sent when the browser <iframe> content scrolls. mozbrowserscrollareachanged firefox os browser api-specific sent when the available
scrolling area in the browser <iframe> changes. this can occur on resize and when the page size changes (while loading for example.) mozbrowserscrollviewchange firefox os browser api-specific sent when asynchronous
scrolling (i.e. apcz) starts or stops. mozbrowsersecuritychange firefox os browser api-specific sent when the ssl state changes within a browser <iframe>. ...
<frame> - HTML: Hypertext Markup Language
l elements, this element supports the global attributes. src this attribute specifies the document that will be displayed by the frame. name this attribute is used for labeling frames. without labeling, every link will open in the frame that it’s in – the closest parent frame. see the target attribute for more information. noresize this attribute prevents resizing of frames by users.
scrolling this attribute defines the existence of a scrollbar. if this attribute is not used, the browser adds a scrollbar when necessary. there are two choices: "yes" for forcing a scrollbar even when it is not necessary and "no" for forcing no scrollbar even when it is necessary. marginheight this attribute defines the height of the margin between frames. marginwidth this attribute defines the width...
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
css property border to control <iframe> borders. longdesc a url of a long description of the frame's content. due to widespread misuse, this is not helpful for non-visual browsers. marginheight the amount of space in pixels between the frame's content and its top and bottom borders. marginwidth the amount of space in pixels between the frame's content and its left and right borders.
scrolling indicates when the browser should provide a scrollbar for the frame: auto: only when the frame's content is larger than its dimensions. yes: always show a scrollbar. no: never show a scrollbar. non-standard attributes mozbrowser see bug 1318532 for exposing this to webextensions in firefox. makes the <iframe> act like a top-level browser window. see browser api for detai...
<select>: The HTML Select element - HTML: Hypertext Markup Language
ent, if any.) this attribute lets you associate <select> elements to <form>s anywhere in the document, not just inside a <form>. it can also override an ancestor <form> element. multiple this boolean attribute indicates that multiple options can be selected in the list. if it is not specified, then only one option can be selected at a time. when multiple is specified, most browsers will show a
scrolling list box instead of a single line dropdown. name this attribute is used to specify the name of the control. required a boolean attribute indicating that an option with a non-empty string value must be selected. size if the control is presented as a
scrolling list box (e.g. when multiple is specified), this attribute represents the number of rows in the list that should be visible at one t...
HTML elements reference - HTML: Hypertext Markup Language
result of the process will be a signed certificate. <listing> the html listing element (<listing>) renders text between the start and end tags without interpreting the html in between and using a monospaced font. the html 2 standard recommended that lines shouldn't be broken when not greater than 132 characters. <marquee> the html <marquee> element is used to insert a
scrolling area of text. you can control what happens when the text reaches the edges of its content area using its attributes. <menuitem> the html <menuitem> element represents a command that a user is able to invoke through a popup menu. this includes context menus, as well as menus that might be attached to a menu button. <multicol> the html multi-column layout element (<multi...
tabindex - HTML: Hypertext Markup Language
lues greater than 0. doing so makes it difficult for people who rely on assistive technology to navigate and operate page content. instead, write the document with the elements in a logical sequence. if you set the tabindex attribute on a <div>, then its child content cannot be scrolled with the arrow keys unless you set tabindex on the content, too. check out this fiddle to understand the
scrolling effects of tabindex. accessibility concerns avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input. an example of this would be using a <div> element to describe a button, instead of the <button> element. interactive components authored using non-interactive elements are not be listed in the access...
HTML documentation index - HTML: Hypertext Markup Language
arking text, reference, web, mark the html mark text element (<mark>) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context. 154 <marquee>: the marquee element (obsolete) element, html, obsolete, reference, web, marquee the html <marquee> element is used to insert a
scrolling area of text. you can control what happens when the text reaches the edges of its content area using its attributes. 155 <menu> element, experimental, html, html interactive elements, navigation, reference, site navigation, ui, ux, user interface, user experience, web, menu, menus the html <menu> element represents a group of commands that a user can perform or activate. this...
CSS Houdini
an api for running scripts in various stages of the rendering pipeline independent of the main javascript execution environment. worklets are conceptually similar to web workers, and are called by and extend the rendering engine. worklets reference other topics related topics which may be of interest, since they can be used in tandem with houdini apis in interesting ways. composite
scrolling and animation ...
Loops and iteration - JavaScript
xpression is omitted entirely, the condition is assumed to be true.) the statement executes. to execute multiple statements, use a block statement ({ ... }) to group those statements. if present, the update expression incrementexpression is executed. control returns to step 2. example in the example below, the function contains a for statement that counts the number of selected options in a
scrolling list (a <select> element that allows multiple selections). the for statement declares the variable i and initializes it to 0. it checks that i is less than the number of options in the <select> element, performs the succeeding if statement, and increments i by after each pass through the loop. <form name="selectform"> <p> <label for="musictypes">choose some music types, then click the butt...
Promise - JavaScript
ge) => { // successmessage is whatever we passed in the resolve(...) function above. // it doesn't have to be a string, but if it is only a succeed message, it probably will be. console.log("yay! " + successmessage) }); example with diverse situations this example shows diverse techniques for using promise capabilities, and diverse situations that can occur. to understand this, start by
scrolling to the bottom of the code block, and examine the promise chain. upon provision of an initial promise, a chain of promises can follow. the chain is composed of .then() calls, and typically (but not necessarily) has a single .catch() at the end, optionally followed by .finally(). in this example, the promise chain is initiated by a custom written new promise() construct; but in actual practice, pro...
Critical rendering path - Web Performance
th of the device instead of the default viewport width. the device-width changes when a user rotates their phone between landscape and portrait mode. layout happens every time a device is rotated or browser is otherwise resized. layout performance is impacted by the dom -- the greater the number of nodes, the longer layout takes. layout can become a bottleneck, leading to jank if required during
scrolling or other animations. while a 20ms delay on load or orientation change may be fine, it will lead to jank on animation or scroll. any time the render tree is modified, such as by added nodes, altered content, or updated box model styles on a node, layout occurs. to reduce the frequency and duration of layout events, batch updates and avoid animating box model properties. paint the last step is p...
Recommended Web Performance Timings: How long is too long? - Web Performance
and script execution are all on the same thread. if the thread is busy doing complex javascript execution, the main thread will not be available to react to user input, such as pressing a button. for this reason, script execution should be limited in scope, divided into chunks of code that can be executed in 50ms or less. this makes the thread available for user interactions. animation goal for
scrolling and other animations to look smooth and feel responsive, the content repaints should occur at 60 frames per second (60fps), which is once every 16.7ms. the 16.7 milliseconds includes scripting, reflow, and repaint. realize a document takes about 6ms to render a frame, leaving about 10ms for the rest. anything less than 60fps, especially an un-even or changing frame rate, will appear janky. respo...
Lazy loading - Web Performance
lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. it's a way to shorten the length of the critical rendering path, which translates into reduced page load times. lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as
scrolling and navigation. overview as the web has evolved, we have come to see huge increases in the number and size of assets sent to users. between 2011 and 2019, the median resource weight increased from ~100kb to ~400kb for desktop and ~50kb to ~350kb for mobile. while image size has increased from ~250kb to ~900kb on desktop and ~100kb to ~850kb on mobile. one of the methods we can use to tackle this problem is to shorten the critical ren...
overflow - SVG: Scalable Vector Graphics
ated). if the overflow property has the value hidden or scroll, a clip of the exact size of the svg viewport is applied. when scroll is specified on an <svg> element, a scrollbar or panner is normally shown for the svg viewport whether or not any of its content is clipped. within svg content, the value auto implies that all rendered content for child elements must be visible, either through a
scrolling mechanism, or by rendering with no clip. although the initial value for overflow is auto, it is overwritten in the user agent style sheet for the <svg> element when it is not the root element of a stand-alone document, the <pattern> element, and the <marker> element to be hidden by default. note: as a presentation attribute, overflow can be used as a css property. see the css opacity property ...