Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
flexbox is very well supported across modern browsers, however there are a few issues that you might run into.
... in this guide we will look at how well flexbox is supported in browsers, and look at some potential issues, resources and methods for creating workarounds and fallbacks.
... the history of flexbox as with all css specifications the flexbox specification went through a large number of changes before it became the candidate recommendation that we have today.
...And 24 more matches

Typical use cases of Flexbox - CSS: Cascading Style Sheets
in this guide we will take a look at some of the common use cases for flexbox — those places where it makes more sense than another layout method.
... why choose flexbox?
... in a perfect world of browser support, the reason you'd choose to use flexbox is because you want to lay a collection of items out in one direction or another.
...And 24 more matches

Box-shadow generator - CSS: Cascading Style Sheets
this tool lets you construct css box-shadow effects, to add box shadow effects to your css objects.
... box-shadow generator html content <div id="container"> <div class="group section"> <div id="layer_manager"> <div class="group section"> <div class="button" data-type="add"> </div> <div class="button" data-type="move-up"> </div> <div class="button" data-type="move-down"> </div> </div> <div id="stack_container"></div> </div> <div id="preview_zone"> <div id="layer_menu" class="col span_12"> <div class="button" id="element" data-type="subject" data-title="element"> element </div> <div class="button" id="before" data-type="subject" data-title=":before"> :before <span class="delete" data-type="disabl...
...e"></span> </div> <div class="button" id="after" data-type="subject" data-title=":after"> :after <span class="delete" data-type="disable"></span> </div> <div class="ui-checkbox" data-topic='before' data-label=":before"></div> <div class="ui-checkbox" data-topic='after' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="wrap-left"> ...
...And 22 more matches

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
this article provides a set of mixins for those who want to mess around with flexbox using the native support of current browsers.
... this set uses: fallbacks using 2009 'box' syntax (ff and older webkit) and prefixed syntaxes (ie10, webkit browsers without flex wrapping) final standards syntax (ff, safari, chrome, ie11+, edge, opera) this was inspired by: http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ with help from: http://w3.org/tr/css3-flexbox/ http://the-echoplex.net/flexyboxes/ http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx http://css-tricks.com/using-flexbox/ a complete guide to flexbox | css-tricks visual guide to css3 flexbox: flexbox playground | note: mixins are not currently supported natively in browsers.
... flexbox containers using the display property's flex value causes an element to generate a block-level flex container box.
...And 21 more matches

ARIA: textbox role - Accessibility
the textbox role is used to identify an element that allows the input of free-form text.
... description when an element has the textbox role, the browser sends an accessible textbox event to assistive technologies, which can then notify the user about it.
...to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true".
...And 19 more matches

Tabboxes - Archive of obsolete content
tabboxes tabboxes are typically used in an application in the preferences window.
... tabbox the outer box that contains the tabs along the top and the tab pages themselves.
... tabs the inner box that contains the individual tabs.
...And 18 more matches

create fancy boxes - Learn web development
css boxes are the building blocks of any web page styled with css.
...let's do some fancy boxes.
... before we start getting into the practical side of it, make sure you are familiar with the css box model.
...And 18 more matches

Groupboxes - Archive of obsolete content
« previousnext » this section describes a way to include elements into groups groupboxes the groupbox element is used to group related xul elements together, much like the html fieldset element is used to group html elements.
... the groupbox is a type of box, and the elements it contains are aligned according to the xul box rules.
... however, there are several differences between groupboxes and regular boxes: the groupbox can be labeled using the caption element.
...And 17 more matches

CSS Box Alignment - CSS: Cascading Style Sheets
the css box alignment module specifies css features that relate to the alignment of boxes in the various css box layout models: block layout, table layout, flex layout, and grid layout.
... note: the documentation for each layout method will detail how box alignment is applied there.
...alignment of text is now covered by the inline layout and css text modules, and for the first time in box alignment we have full horizontal and vertical alignment capabilities.
...And 17 more matches

box-lines - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... see flexbox for information about the current standard.
... the box-lines css property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).
...And 17 more matches

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
css grid layout implements the specification box alignment level 3 which is the same standard flexbox uses for aligning items in its flex container.
... this guide presents demonstrations of how box alignment in grid layout works.
... you will see many similarities in how these properties and values work in flexbox.
...And 16 more matches

box-sizing - CSS: Cascading Style Sheets
the box-sizing css property sets how the total width and height of an element is calculated.
... by default in the css box model, the width and height you assign to an element is applied only to the element's content box.
... if the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen.
...And 16 more matches

listbox - Archive of obsolete content
a listbox may contain multiple columns.
... there are numerous methods which allow the items in the listbox to be retrieved and modified.
...a listbox is expected to contain listitem elements.
...And 15 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
the flexible box module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
... this article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides.
... when we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column.
...And 14 more matches

box-align - CSS: Cascading Style Sheets
warning: this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... the box-align css property specifies how an element aligns its contents across its layout in a perpendicular direction.
... the effect of the property is only visible if there is extra space in the box.
...And 14 more matches

Tree Box Objects - Archive of obsolete content
« previousnext » this section will describe the tree box object used to handle how a tree is displayed.
... about the tree box object box objects were described in an earlier section.
... the tree box object is a specialized box object used specifically for trees.
...And 13 more matches

richlistbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to create a list of listitems (richlistitems), similar to a listbox, but is designed to be used when the items do not contain simple text content.
... note: in versions of firefox prior to firefox 3, rich list boxes support only single selection.
... firefox 3 introduced multiple selection to rich list boxes.
...And 12 more matches

toolbox - Archive of obsolete content
it is a type of box but defaults to vertical orientation.
... if a toolbar is placed inside a toolbox, a grippy is displayed on its left or upper edge.
...if multiple toolbars are placed in the same toolbox, they will all collapse into the same row.
...And 12 more matches

ARIA: checkbox role - Accessibility
the checkbox role is used for checkable interactive controls.
... elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.
... <span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"> </span> <label id="chk1-label">remember my preferences</label> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria.
...And 12 more matches

loader/sandbox - Archive of obsolete content
experimental create javascript sandboxes and execute scripts in them.
... usage create a sandbox to create a sandbox: const { sandbox, evaluate, load } = require("sdk/loader/sandbox"); let scope = sandbox('http://example.com'); the argument passed to the sandbox defines its privileges.
... the argument may be: a url string, in which case the sandbox will get the same privileges as a script loaded from that url a dom window object, to inherit privileges from the window being passed.
...And 11 more matches

textbox.type - Archive of obsolete content
« xul reference home type type: one of the values below you can set the type attribute to one of the values below for a more specialized type of textbox.
... don't set the type if you wish to use a regular textbox.
... autocomplete a textbox that supports autocomplete.
...And 11 more matches

arrowscrollbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a box which provides scroll arrows along its edges for scrolling through the contents of the box.
... the user only needs to hover the mouse over the arrows to scroll the box.
... attributes clicktoscroll, disabled, smoothscroll, tabindex properties disabled, scrollboxobject, scrollincrement, smoothscroll, tabindex methods ensureelementisvisible, scrollbyindex, scrollbypixels examples <arrowscrollbox orient="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> attribute...
...And 11 more matches

transform-box - CSS: Cascading Style Sheets
the transform-box css property defines the layout box to which the transform and transform-origin properties relate.
... /* keyword values */ transform-box: content-box; transform-box: border-box; transform-box: fill-box; transform-box: stroke-box; transform-box: view-box; /* global values */ transform-box: inherit; transform-box: initial; transform-box: unset; syntax the transform-box property is specified as one of the keyword values listed below.
... values content-box the content box is used as the reference box.
...And 11 more matches

nsIBoxObject
layout/xul/base/public/nsiboxobject.idlscriptable please add a summary to this article.
... inherits from: nsisupports last changed in gecko 1.9 (firefox 3) to get an instance, use the boxobject property.
... firstchild nsidomelement the first child of the box, in box-ordinal-group order.
...And 10 more matches

Shapes from box values - CSS: Cascading Style Sheets
a straightforward way to create a shape is to use a value from the css box model.
... the box values allowable as a shape value are: content-box padding-box border-box margin-box the border-radius values are also supported, this means that you can have something in your page with a curved border, and your shape can follow the created shape.
... css box model the values listed above correspond to the various parts of the css box model.
...And 10 more matches

box-flex - CSS: Cascading Style Sheets
this is a property for controlling parts of the xul box model.
... it does not match either the old css flexible box layout module drafts for 'box-flex' (which were based on this property) or the behavior of '-webkit-box-flex' (which is based on those drafts).
... see flexbox for information about the current standard.
...And 10 more matches

box-shadow - CSS: Cascading Style Sheets
the box-shadow css property adds shadow effects around an element's frame.
...a box shadow is described by x and y offsets relative to the element, blur and spread radius, and color.
... the box-shadow property enables you to cast a drop shadow from the frame of almost any element.
...And 10 more matches

box-pack - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... see flexbox for information about the current standard.
... the -moz-box-pack and -webkit-box-pack css properties specify how a -moz-box or -webkit-box packs its contents in the direction of its layout.
...And 9 more matches

scrollbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a box that has additional functions that can be used to scroll the content.
... note that a scrollbox doesn't cause scrollbars to be displayed.
...they come out in a box.
...And 8 more matches

Browser Toolbox - Firefox Developer Tools
the browser toolbox enables you to debug add-ons and the browser's own javascript code rather than just web pages like the normal toolbox.
... the browser toolbox's context is the whole browser rather than just single page on a single tab.
... use the browser toolbox for add-ons that are neither.
...And 8 more matches

Introduction to the CSS basic box model - CSS: Cascading Style Sheets
when laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard css basic box model.
... css determines the size, position, and properties (color, background, border size, etc.) of these boxes.
... every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.
...And 8 more matches

box-decoration-break - CSS: Cascading Style Sheets
the box-decoration-break css property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
... the specified value will impact the appearance of the following properties: background border border-image box-shadow clip-path margin padding syntax /* keyword values */ box-decoration-break: slice; box-decoration-break: clone; /* global values */ box-decoration-break: initial; box-decoration-break: inherit; box-decoration-break: unset; the box-decoration-break property is specified as one of the keyword values listed below.
... values slice the element is initially rendered as if its box were not fragmented, after which the rendering for this hypothetical box is sliced into pieces for each line/column/page.
...And 8 more matches

box-direction - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... the -moz-box-direction will only be used for xul while the previous standard box-direction has been replaced by flex-direction.
... see flexbox for information about the current standard.
...And 8 more matches

box-orient - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... see flexbox for information about the current standard.
... the box-orient css property sets whether an element lays out its contents horizontally or vertically.
...And 8 more matches

viewBox - SVG: Scalable Vector Graphics
the viewbox attribute defines the position and dimension, in user space, of an svg viewport.
... the value of the viewbox attribute is a list of four numbers: min-x, min-y, width and height.
... html,body,svg { height:100% } svg:not(:root) { display: inline-block; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a large viewbox the circle looks small as it is using user units for the r attribute: 4 resolved against 100 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> ...
...And 8 more matches

tabbox - Archive of obsolete content
a row of tabs is displayed at the top of tabbox which may be used to switch between each page.
... the tabbox should contain two children, the first a tabs element which contains the tabs and the second a tabpanels element which contains the contents of the pages.
... attributes eventnode, handlectrlpageupdown, handlectrltab properties accessibletype, eventnode, handlectrlpageupdown, handlectrltab, selectedindex, selectedpanel, selectedtab, tabs, tabpanels examples <tabbox id="mytablist" selectedindex="2"> <tabs> <tab label="a first tab"/> <tab label="second tab"/> <tab label="another tab"/> <tab label="last tab"/> </tabs> <tabpanels> <tabpanel><!-- tabpanel first elements go here --></tabpanel> <tabpanel><!-- tabpanel second elements go here --></tabpanel> <tabpanel><button label="click me"/></tabpanel> <tabpanel><!-- tabpanel fourth elements go here --></tabpanel> </tabpanels> </tabbox> attributes eventnode type: one of the values below i...
...And 7 more matches

ResizeObserverEntry.contentBoxSize - Web APIs
the contentboxsize read-only property of the resizeobserverentry interface returns an array containing the new content box size of the observed element when the callback is run.
... syntax var mycontentboxsize = resizeobserverentry.contentboxsize; value an object containing the new content box size of the observed element.
... this object contains two properties: blocksize the length of the observed element's content box in the block dimension.
...And 7 more matches

-webkit-mask-box-image - CSS: Cascading Style Sheets
-webkit-mask-box-image sets the mask image for an element's border box.
... initial value: none applies to: all elements inherited: no media: visual computed value: as specified syntax -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image.
... none used to specify that a border box is to have no mask image.
...And 7 more matches

Enabling the behavior - retrieving tinderbox status - Archive of obsolete content
to make it work we have to add javascript code that changes its status when the tinderbox status changes.
... the first step is to write a function that queries the tinderbox server and retrieves the current status.
... var gxmlhttprequest; function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); } xmlhttprequest is an interface in mozilla for retrieving documents via http.
...And 6 more matches

A cool-looking box - Learn web development
in this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box.
... objective: to test comprehension of the css box model and other box-related features such as borders and backgrounds.
... project brief your task is to create a cool, fancy box and explore the fun we can have with css.
...And 6 more matches

Components.utils.evalInSandbox
the evalinsandbox() function enables you to evaluate javascript code inside a sandbox you've previously created using the components.utils.sandbox constructor.
... note: it's not safe to use evalinsandbox() to evaluate json strings; instead, use the techniques discussed in the article on json.
... use to use evalinsandbox(), you must first create a sandbox object using its constructor, components.utils.sandbox.
...And 6 more matches

box-flex-group - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... see flexbox for information about the current standard.
... the box-flex-group css property assigns the flexbox's child elements to a flex group.
...And 6 more matches

checkbox - Archive of obsolete content
this is most commonly rendered as a box when the element is off and a box with a check when the element is on.
... the user can switch the state of the check box by selecting it with the mouse.
... a label, specified with the label attribute, may be added beside the check box.
...And 5 more matches

notificationbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the notificationbox element is used to display notifications above an element.
... the notification box is a vertical box which may have children.
... the notifications appear at the top of the box.
...And 5 more matches

Toolbox - Firefox Developer Tools
the toolbox provides a single home for most of the developer tools that are built into firefox.
... there are a few different ways to open the toolbox: select "toggle tools" from the web developer menu (under "tools" on os x and linux, or "firefox" on windows) click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "toggle tools" activate any tool hosted in the toolbox (for example, the javascript debugger or the page inspector) press ctrl + shift + i on windows and linux, or cmd + opt + i on os x.
...this is what it looks like when it's docked: the window itself is split into two parts: a toolbar along the top, and a main pane underneath: note: since firefox 62, you can drag and drop tabs in the main toolbar of the toolbox to reorder your tools as you wish (bug 1226272).
...And 5 more matches

Box alignment for block, absolutely positioned and table layout - CSS: Cascading Style Sheets
the box alignment specification details how alignment works in various layout methods.
... in this page we explore how box alignment works in the context of block layout, including floated, positioned, and table elements.
... as this page aims to detail things which are specific to block layout and box alignment, it should be read in conjunction with the main box alignment page, which details the common features of box alignment across layout methods.
...And 5 more matches

ResizeObserverEntry.borderBoxSize - Web APIs
the borderboxsize read-only property of the resizeobserverentry interface returns an array containing the new border box size of the observed element when the callback is run.
... syntax var myborderboxsize = resizeobserverentry.borderboxsize; value an array containing objects with the new border box size of the observed element.
...each object in the array contains two properties: blocksize the length of the observed element's border box in the block dimension.
...And 4 more matches

Box alignment in Multi-column Layout - CSS: Cascading Style Sheets
the box alignment specification details how alignment works in various layout methods; on this page we explore how box alignment works in the context of multi-column layout.
... as this page aims to detail things which are specific to multi-column layout and box alignment, it should be read in conjunction with the main box alignment page which details the common features of box alignment across layout methods.
... in multi-column layout the alignment container is the content box of the multicol container.
...And 4 more matches

CSS Flexible Box Layout - CSS: Cascading Style Sheets
css flexible box layout is a module of css that defines a css box model optimized for user interface design, and the layout of items in one dimension.
... reference css properties flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap order alignment properties the properties align-content, align-self, align-items and justify-content initially appeared in the flexbox specification, but are now defined in box alignment.
... the flexbox spec now refers to the box alignment specification for up to date definitions.
...And 4 more matches

box-ordinal-group - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard.
... see flexbox for information about the current standard.
... the box-ordinal-group css property assigns the flexbox's child elements to an ordinal group.
...And 4 more matches

Test your skills: The Box Model - Learn web development
the aim of this task is to help you check your understanding of the css box model.
... the box model one with the two boxes below, one is using the standard box model, the other the alternate box model.
... change the width of the second box by adding rules to the .alternate class, so that it matches the visual width of the first box.
...And 3 more matches

overflow-clip-box
the overflow-clip-box css property specifies relative to which box the clipping happens when there is an overflow.
... it is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties.
... /* keyword values */ overflow-clip-box: padding-box; overflow-clip-box: content-box; /* two values */ overflow-clip-box: padding-box content-box; overflow-clip-box: content-box content-box; /* global values */ overflow-clip-box: inherit; overflow-clip-box: initial; overflow-clip-box: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box.
...And 3 more matches

nsITreeBoxObject
the nsitreeboxobject interface contains information about the size and layout of a tree.
... /layout/xul/base/src/tree/public/nsitreeboxobject.idlscriptable please add a summary to this article.
... last changed in gecko 1.9 (firefox 3) inherits from: nsisupports to get the treeboxobject for a tree: let boxobject = tree.boxobject; boxobject.queryinterface("components.interfaces.nsitreeboxobject"); or simply: let boxobject = tree.treeboxobject; method overview long getfirstvisiblerow(); long getlastvisiblerow(); long getpagelength(); void ensurerowisvisible(in long index); void ensurecellisvisible(in long row, in nsitreecolumn col); void scrolltorow(in long index); void scrollbylines(in long numlines); void scrollbypages(in long numpages); void scrolltocell(in long row, in nsitreecolumn col); void scrolltocolumn(in nsitreecolumn col); void scrolltohorizontalposition(in long horizont...
...And 3 more matches

msIsBoxed - Web APIs
msisboxed is a property which gets or sets when the video player control is in boxed (letterbox or pillarbox) mode.
... returns true if the video is in letterbox or pillarbox mode.
... letterbox format displays black bars on the top and bottom of a video to fill in between the wide screen format of a video, and the aspect ratio of the screen.
...And 3 more matches

Box alignment in grid layout - CSS: Cascading Style Sheets
the box alignment specification details how alignment works in various layout methods.
... on this page we explore how box alignment works in the context of css grid layout.
... as this page aims to detail things which are specific to css grid layout and box alignment, it should be read in conjunction with the main box alignment page which details the common features of box alignment across layout methods.
...And 3 more matches

<display-box> - CSS: Cascading Style Sheets
these keywords define whether an element generates display boxes at all.
... syntax valid <display-box> values: contents these elements don't produce a specific box by themselves.
... they are replaced by their pseudo-box and their child boxes.
...And 3 more matches

CSP: sandbox - HTTP
the http content-security-policy (csp) sandbox directive enables a sandbox for the requested resource similar to the <iframe> sandbox attribute.
... syntax content-security-policy: sandbox; content-security-policy: sandbox <value>; where <value> can optionally be one of the following values: allow-downloads-without-user-activation allows for downloads to occur without a gesture from the user.
... allow-popups-to-escape-sandbox allows a sandboxed document to open new windows without forcing the sandboxing flags upon them.
...And 3 more matches

Tinderbox - Archive of obsolete content
tinderbox is a web tool for tracking the status of the mozilla source code.
...mozilla engineers regularly check tinderbox before changing the code because changes are prohibited while the codebase is broken.
... the mozilla sheriff, a rotating position responsible for watching the code and getting engineers to fix breakage, checks tinderbox even more regularly.
...And 2 more matches

groupbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the groupbox is used to group related elements together.
... if a caption element is placed inside the groupbox, it will be used as a caption which appears along the top of the groupbox.
... typically, the groupbox will be drawn with a border around it and the caption either above or over the top border, however the actual appearance will be platform specific.
...And 2 more matches

Flexbox - MDN Web Docs Glossary: Definitions of Web-related terms
flexbox is the commonly-used name for the css flexible box layout module, a layout model for displaying items in a single dimension — as a row or as a column.
... in the specification, flexbox is described as a layout model for user interface design.
... the key feature of flexbox is the fact that items in a flex layout can grow and shrink.
...And 2 more matches

overflow-clip-box-block
the overflow-clip-box-block css property specifies relative to which box the clipping happens when there is an overflow — in the block direction.
... /* keyword values */ overflow-clip-box-block: padding-box; overflow-clip-box-block: content-box; /* global values */ overflow-clip-box-block: inherited; overflow-clip-box-block: initial; overflow-clip-box-block: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box.
... syntax values padding-box this keyword makes the clipping be related to the padding box.
...And 2 more matches

overflow-clip-box-inline
the overflow-clip-box-inline css property specifies relative to which box the clipping happens when there is an overflow — in the inline direction.
... /* keyword values */ overflow-clip-box-inline: padding-box; overflow-clip-box-inline: content-box; /* global values */ overflow-clip-box-inline: inherited; overflow-clip-box-inline: initial; overflow-clip-box-inline: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box.
... syntax values padding-box this keyword makes the clipping be related to the padding box.
...And 2 more matches

nsIMenuBoxObject
layout/xul/base/public/nsimenuboxobject.idlscriptable represents the box object for a xul menu.
... inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) to get access to the box object for a given menu, use code like this: var boxobject = xulmenu.boxobject.queryinterface(components.interfaces.nsimenuboxobject); method overview boolean handlekeypress(in nsidomkeyevent keyevent); void openmenu(in boolean openflag); attributes attribute type description activechild nsidomelement the currently active menu or menuitem child of the menu box.
... note: for gecko 2.0, the openedwithkey attribute exists on the nsimenuboxobject_mozilla_2_0_branch interface.
...And 2 more matches

SVGFitToViewBox - Web APIs
svg fit to view box interface the svgfittoviewbox interface is used to reflect the viewbox and preserveaspectratio attributes, and is mixed in to other interfaces for elements that support these two attributes.
... interface overview also implement none methods none properties svganimatedpreserveaspectratio preserveaspectratio svganimatedrect viewbox normative document svg 1.1 (2nd edition) properties name type description preserveaspectratio svganimatedpreserveaspectratio corresponds to attribute preserveaspectratio on the given element.
... viewbox svganimatedrect corresponds to attribute viewbox on the given element.
...And 2 more matches

getBBox() - Web APIs
the svggraphicselement.getbbox() allows us to determine the coordinates of the smallest rectangle in which the object fits.
... note: getbbox() must return the actual bounding box at the time the method was called—even in case the element has not yet been rendered.
... getbbox returns different values than getboundingclientrect(), as the latter returns value relative to the viewport syntax let bboxrect = object.getbbox(); return value the returned value is a svgrect object, which defines the bounding box.
...And 2 more matches

Boxes - Archive of obsolete content
this does not happen with xul box (or hbox and vbox) by default.
...make the box style="display: block" and the wrapping behavior will occur when the box is resized: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox style="display: block"> <label value="aaa"/> <label value="bbb"/> <label value="ccc"/> <label value="ddd"/> <label value="eee"/> <label value="fff"/> <label value="ggg"/> <label value="hhh"/> <label value="iii"/> <label value="jjj"/> <label value="kkk"/> <label value="lll"/> <label value="mmm"/> <label value="nnn"/> <label value="ooo"/> <label value="ppp"/> <label value="qqq"/> <label value="rrr"/> <label val...
...ue="sss"/> <label value="ttt"/> <label value="uuu"/> <label value="vvv"/> <label value="www"/> <label value="xxx"/> <label value="yyy"/> <label value="zzz"/> </hbox> </window> images if you put image in the contents, you should probably add align="start" attribute to the box.
... this keeps the image from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> </box> </window> ...

textbox.onblur - Archive of obsolete content
« xul reference home onblur type: script code this event is sent when a textbox loses keyboard focus.
...prior to gecko 1.9 (firefox 3), the script code would execute in the context of the anonymous html <input> element inside the textbox binding.
... from gecko 1.9 to gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9), the script code would actually execute twice, once in the context of the anonymous html <input> element and once in the context of the <textbox> element itself.
... as of gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10), the script code only runs in the context of the <textbox> element, matching the behavior of all other event handlers.

textbox.onfocus - Archive of obsolete content
« xul reference home onfocus type: script code this event is sent when a textbox receives keyboard focus.
...prior to gecko 1.9 (firefox 3), the script code would execute in the context of the anonymous html <input> element inside the textbox binding.
... from gecko 1.9 to gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9), the script code would actually execute twice, once in the context of the anonymous html <input> element and once in the context of the <textbox> element itself.
... as of gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10), the script code only runs in the context of the <textbox> element, matching the behavior of all other event handlers.

box - Archive of obsolete content
if the box has an orient attribute that is set to horizontal, the child elements are laid out from left to right in the order that they appear in the box.
... examples <box orient="horizontal"> <label value="zero"/> <box orient="vertical"> <label value="one"/> <label value="two"/> </box> <box orient="horizontal"> <label value="three"/> <label value="four"/> </box> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, or...
...dinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(...
...es(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements vbox, hbox ...

hbox - Archive of obsolete content
this is equivalent to the box element, except it defaults to horizontal orientation.
... example <!-- two button on the right --> <hbox> <spacer flex="1"/> <button label="connect"/> <button label="ping"/> </hbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties...
... align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattri...
...des(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements box, vbox ...

vbox - Archive of obsolete content
this is equivalent to the box element, except it defaults to vertical orientation.
... example <!-- two labels at bottom --> <vbox> <spacer flex="1"/> <label value="one"/> <label value="two"/> </vbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align,...
... , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), ...
...des(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements box, hbox ...

Test your skills: Flexbox - Learn web development
the aim of this task is to get you working with flexbox and demonstrate your understanding of how flex items behave.
... below are four common design patterns which you might use flexbox to create, your task is to build them.
...use flexbox to center the child inside the parent.
...your post should include: a descriptive title such as "assessment wanted for flexbox layout 1 skill test".

toolboxid - Archive of obsolete content
« xul reference toolboxid type: string the id of the toolbox this toolbar is a member of.
... this will either be the toolbox's parent (if it's in a toolbox), or, if the toolbar is an external toolbar (that is, one not contained in a toolbox), the id of the toolbox it should be considered to be part of.
... this makes it possible to have toolbars that are not contained within toolboxes, such as the add-on bar.

treeBoxObject - Archive of obsolete content
« xul reference 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.

bbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a horizontal box that is baseline aligned.
... it is equivalent to using an hbox element with an align attribute set to baseline.
..., insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appen...

nsIBrowserBoxObject
layout/xul/base/public/nsibrowserboxobject.idlscriptable please add a summary to this article.
... inherits from: nsicontainerboxobject last changed in gecko 1.9 (firefox 3) the boxobject belonging to a xul browser element implements this interface.
... note: please consider using nsicontainerboxobject instead.

nsIEditorBoxObject
layout/xul/base/public/nsieditorboxobject.idlscriptable please add a summary to this article.
... inherits from: nsicontainerboxobject last changed in gecko 1.9 (firefox 3) the boxobject belonging to a xul editor element implements this interface.
... note: please consider using nsicontainerboxobject instead.

nsIIFrameBoxObject
layout/xul/base/public/nsiiframeboxobject.idlscriptable please add a summary to this article.
... inherits from: nsicontainerboxobject last changed in gecko 1.9 (firefox 3) the boxobject belonging to a xul iframe element implements this interface.
... note: please consider using nsicontainerboxobject instead.

Mailbox
the mailbox protocol is used to read messages from a local folder berkeley mailbox.
... it consists of nsmailboxservice, nsmailboxurl, and nsmailboxprotocol.
... the mailbox protocol is also used to regenerate a summary file, in conjunction with nsmsgmailboxparser ...

Document.getBoxObjectFor() - Web APIs
returns a boxobject (x, y, width, height) for a specified element.
... syntax boxobject = document.getboxobjectfor(element); boxobject is an nsiboxobject.
... example var mydiv = document.getelementbyid("mydiv"), boxobj = document.getboxobjectfor (mydiv); alert ( "x:" + boxobj.x + ", y:" + boxobj.y + ", width:" + boxobj.width + ", height:" + boxobj.height ); notes specified in nsixuldocument.idl ...

CSS Basic Box Model - CSS: Cascading Style Sheets
css basic box model is a module of css that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting model.
... reference properties properties controlling the flow of content in a box overflow overflow-x overflow-y properties controlling the size of a box height width max-height max-width min-height min-width properties controlling the margins of a box margin margin-bottom margin-left margin-right margin-top margin-trim properties controlling the paddings of a box padding padding-bottom padding-left padding-right padding-top other properties visibility guides introduction to the css box model explains one of the fundamental concept of css: the box model.
... specifications specification status comment css basic box model working draft added margin-trim css level 2 (revision 1) recommendation css level 1 recommendation initial definition.

bbox - SVG: Scalable Vector Graphics
the bbox attribute defines the maximal bounding box of a font.
... only one element is using this attribute: <font-face> usage notes value <string> default value none animatable no <string> a comma-separated list of exactly four numbers specifying, in order, the lower left x, lower left y, upper right x, and upper right y of the bounding box for the complete font.
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'bbox' in that specification.

Tabbox - Archive of obsolete content
handling onclosetab event assuming the tabbox, tabs, and tabpanels widgets with id's the same as their nodename, this function will correctly remove the current tab and tab panel for the onclosetab tabs event: function removetab(){ var tabbox = document.getelementbyid("tabbox"); var currentindex = tabbox.selectedindex; if(currentindex>=0){ var tabs=document.getelementbyid("tabs"); var tabpanels=document.getelementbyid("tabpanels"); tabpanels.removechild(tabpanels.childnodes[currentindex]); tabs.removeitemat(currentindex); /*wo...
...rk around if last tab is removed, widget fails to advance to next tab*/ if(-1 == tabbox.selectedindex && tabs.childnodes.length>0){ tabbox.selectedindex=0; } } creating a close tab button to have a tab close button, you must configure the style.

textbox.value - Archive of obsolete content
« xul reference home value type: string the default value entered in a textbox.
...for number boxes, the default is 0 or the minimum value returned by the min property, whichever is higher.

getTabModalPromptBox - Archive of obsolete content
« xul reference home gettabmodalpromptbox( browser ) return type: object returns an object that manages tab-modal prompts for the specified browser.
... returns a promptbox object representing the new prompt.

boxObject - Archive of obsolete content
« xul reference boxobject type: nsiboxobject this property is available for elements that are derived from boxes, which is most displayable xul elements.
... prior to gecko 1.9.1, you can retrieve the boxobject for non-xul elements using the document.getboxobjectfor method; the method was removed in gecko 1.9.1 because it was non-standard.

listBoxObject - Archive of obsolete content
« xul reference listboxobject type: nsilistboxobject the nsilistboxobject behind the list box.
...most of the features of the list box are already available directly in the listbox, so you will rarely have need to use this box object directly.

promptBox - Archive of obsolete content
the promptbox object represents the tab-modal prompts (or alerts) on a given tab.
... it's returned by the tabbrowser method gettabmodalpromptbox method.

Creating Sandboxed HTTP Connections
introduction starting with gecko 1.8.1 (firefox 2), it is possible to create sandboxed http connections which don't affect the user's cookies.
... these methods provide all the required functionality needed to modify cookies before they are processed/sent, allowing for sandboxed cookie connections that don't affect the user's cookies.

nsIContainerBoxObject
layout/xul/base/public/nsicontainerboxobject.idlscriptable please add a summary to this article.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) the boxobject belonging to a xul browser, editor or iframe element implements this interface.

TextMetrics.actualBoundingBoxAscent - Web APIs
the read-only actualboundingboxascent property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the top of the bounding rectangle used to render the text, in css pixels.
... examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.actualboundingboxascent; // 8; specifications specification html living standardthe definition of 'textmetrics.actualboundingboxascent' in that specification.

TextMetrics.actualBoundingBoxDescent - Web APIs
the read-only actualboundingboxdescent property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the bottom of the bounding rectangle used to render the text, in css pixels.
... examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.actualboundingboxdescent; // 0; specifications specification html living standardthe definition of 'textmetrics.actualboundingboxdescent' in that specification.

TextMetrics.actualBoundingBoxLeft - Web APIs
the read-only actualboundingboxleft property of the textmetrics interface is a double giving the distance parallel to the baseline from the alignment point given by the canvasrenderingcontext2d.textalign property to the left side of the bounding rectangle of the given text, in css pixels.
... examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.actualboundingboxleft; // 0; specifications specification html living standardthe definition of 'textmetrics.actualboundingboxleft' in that specification.

TextMetrics.actualBoundingBoxRight - Web APIs
the read-only actualboundingboxright property of the textmetrics interface is a double giving the distance parallel to the baseline from the alignment point given by the canvasrenderingcontext2d.textalign property to the right side of the bounding rectangle of the given text, in css pixels.
... examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.actualboundingboxright; // 15.633333333333333; specifications specification html living standardthe definition of 'textmetrics.actualboundingboxright' in that specification.

TextMetrics.fontBoundingBoxAscent - Web APIs
the read-only fontboundingboxascent property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in css pixels.
... examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.fontboundingboxascent; // 10; specifications specification html living standardthe definition of 'textmetrics.fontboundingboxascent' in that specification.

TextMetrics.fontBoundingBoxDescent - Web APIs
the read-only fontboundingboxdescent property of the textmetrics interface is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in css pixels.
... examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.fontboundingboxdescent; // 3; specifications specification html living standardthe definition of 'textmetrics.fontboundingboxdescent' in that specification.

-webkit-box-reflect - CSS: Cascading Style Sheets
the -webkit-box-reflect css property lets you reflect the content of an element in one specific direction.
... /* direction values */ -webkit-box-reflect: above; -webkit-box-reflect: below; -webkit-box-reflect: left; -webkit-box-reflect: right; /* offset value */ -webkit-box-reflect: below 10px; /* mask value */ -webkit-box-reflect: below 0 linear-gradient(transparent, white); /* global values */ -webkit-box-reflect: inherit; -webkit-box-reflect: initial; -webkit-box-reflect: unset; note: this feature is not intended to be used by web sites.

checkbox.src - Archive of obsolete content
« xul reference home src type: uri set this to an uri pointing to an image to appear in the checkbox.

textbox.autoFill - Archive of obsolete content
« xul reference home autofill obsolete since gecko 1.9.1 type: boolean note: applies to: thunderbird and seamonkeyif set to true, the best match will be filled into the textbox as the user types.

textbox.disablehistory - Archive of obsolete content
« xul reference home disablehistory obsolete since gecko 2.0 type: boolean note: applies to: thunderbird and seamonkeyif false, an arrow button will appear on the end of the textbox which will open a dropdown menu of all available results.

textbox.forceComplete - Archive of obsolete content
« xul reference home forcecomplete obsolete since gecko 1.9.1 type: boolean if true, the textbox will be filled in with the best match when it loses the focus.

textbox.min - Archive of obsolete content
« xul reference home min type: integer the minimum value the textbox's value may take.

textbox.minResultsForPopup - Archive of obsolete content
a zero value will always open the popup unless the textbox is empty.

textbox.onchange - Archive of obsolete content
« xul reference home onchange type: script code this event is sent when the value of the textbox is changed.

CheckboxStateChange - Archive of obsolete content
the checkboxstatechange event is executed when the state of a <checkbox> element has changed.

getNotificationBox - Archive of obsolete content
« xul reference home getnotificationbox( browser ) return type: notificationbox element returns a notificationbox for the specified browser element.

listbox.currentIndex - Archive of obsolete content
(or, on some platforms, typeof(listboxcurrentindex) will be undefined) in a single selection list, the current index will always be the same as the selected index.

menuBoxObject - Archive of obsolete content
« xul reference menuboxobject type: nsimenuboxobject a reference to the nsimenuboxobject which implements the menu.

popupBoxObject - Archive of obsolete content
« xul reference popupboxobject type: nsipopupboxobject this read-only property holds the nsipopupboxobject that implements the popup.

scrollBoxObject - Archive of obsolete content
« xul reference 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.

tabbox - Archive of obsolete content
« xul reference tabbox type: tabbox element returns the tabbox element that contains the tabs.

tabbox.tabs - Archive of obsolete content
« xul reference tabs type: tabs element the tabs element contained within the tabbox.

textbox.label - Archive of obsolete content
note: prior to firefox 3, and always in thunderbird and seamonkey, the label property of an autocomplete textbox returns its value, for compatibility with the menulist element.

textbox.type - Archive of obsolete content
« xul reference type type: string set to the value autocomplete to have an autocomplete textbox.

textbox.value - Archive of obsolete content
« xul reference value type: string holds the current value of the textbox as a string.

Bounding Box - MDN Web Docs Glossary: Definitions of Web-related terms
the bounding box of an element is the smallest possible rectangle (aligned with the axes of that element's user coordinate system) that entirely encloses it and its descendants.

Examine and edit the box model - Firefox Developer Tools
viewing the box model with the select element button pressed, if you hover over an element in the page, the box model for the element is shown overlaid on the page: it's also shown overlaid if you hover over an element's markup in the html pane: if the element is inline and is split over multiple line boxes, the highlighter shows each individual line box that together make up the element: the box model view when an element's selected, you can get a detailed look at the box model in the box model view: if you hover over a value, you'll see a tooltip telling you which rule the value comes from: if you hover over part of the box model in the box model view, the corresponding part of the page is highlighted: editing the box model you can also edit the values in the bo...

Index - Archive of obsolete content
93 loader/sandbox create javascript sandboxes and execute scripts in them.
... 175 boxes code snippets make the box style="display: block" and the wrapping behavior will occur when the box is resized: 176 canvas code snippets canvas, code snippets, graphics no summary!
... 213 tabbox no summary!
...And 141 more matches

Index - Archive of obsolete content
52 checkbox.src xul attributes, xul reference no summary!
... 56 clicktoscroll clicktoscroll, if true, the arrows must be clicked to scroll the scrollbox content.
... 364 textbox.autofill no summary!
...And 117 more matches

DevTools API - Firefox Developer Tools
these tabs are located in a box we call a toolbox.
... a toolbox can be hosted within a browser tab (at the bottom or on the side), or in its own window (we say that the toolbox is undocked).
... a toolbox (and all the tools it contains) is linked to a target, which is the object the tools are debugging.
...And 74 more matches

Element Positioning - Archive of obsolete content
box element positioning so far, we know how to position elements either horizontally or vertically inside a box.
... we will often need more control over the position and size of elements within the box.
... for this, we first need to look at how a box works.
...And 49 more matches

Visual formatting model - CSS: Cascading Style Sheets
in the visual formatting model, each element in the document tree generates zero or more boxes according to the box model.
... the layout of these boxes is governed by: box dimensions and type.
... box generation box generation is the part of the css visual formatting model that creates boxes from the document's elements.
...And 49 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
the xul box model in principle, xul lays out all ui components using combinations of two kinds of boxes: horizontal and vertical.
... as shown in listing 3, elements can be laid out horizontally using the hbox (horizontal box) element or vertically using the vbox (vertical box) element.
... <label value="horizontal layout"/> <hbox> <button label="horizontal1"/> <button label="horizontal2"/> </hbox> <label value="vertical layout"/> <vbox> <button label="vertical1"/> <button label="vertical2"/> </vbox> <label value="mixed"/> <hbox> <button label="mixed1"/> <vbox> <button label="mixed2"/> <button label="mixed3"/> </vbox> <button label="mixed4"/> </hbox> listing 3: horizontal and vertical boxes figure 1: output of listing 3 there is also a grid element, which can be used for layouts similar to those achieved using the html table element, a stack element for layering other elements, and so on.
...And 38 more matches

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
grid and flexbox the basic difference between css grid layout and css flexbox layout is that flexbox was designed for layout in one dimension - either a row or a column.
...the two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with grid.
... in this first example, i am using flexbox to lay out a set of boxes.
...And 37 more matches

Practical positioning examples - Learn web development
prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to get an idea of the practicalities of positioning a tabbed info-box the first example we'll look at is a classic tabbed info box — a very common feature used when you want to pack a lot of information into a small area.
... this includes information-heavy apps like strategy/war games, mobile versions of websites where the screen is narrow and space is limited, and compact information boxes where you might want to make lots of information available without having it fill the whole ui.
... our simple example will look like this once we are finished: note: you can see the finished example running live at info-box.html (source code).
...And 35 more matches

nsIPromptService
alertcheck() shows an alert dialog with an ok button and a labeled checkbox.
... acheckmsg text to appear with the checkbox.
... acheckstate contains the initial checked state of the checkbox when this method is called and the final checked state after this method returns.
...And 35 more matches

Bounding volume collision detection with THREE.js - Game development
this article shows how to implement collision detection between bounding boxes and spheres using the three.js library.
... using box3 and sphere three.js has objects that represent mathematical volumes and shapes — for 3d aabb and bounding spheres we can use the box3 and sphere objects.
... instantiating boxes to create a box3 instance, we need to provide the lower and upper boundaries of the box.
...And 33 more matches

display - CSS: Cascading Style Sheets
some values of display are fully defined in their own individual specifications; for example the detail of what happens when display: flex is declared is defined in the css flexible box model specification.
...keyword values are grouped into six value categories: .container { display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ; } outside <display-outside> these keywords specify the element’s outer display type, which is essentially its role in flow layout.
... valid <display-outside> values: block the element generates a block element box, generating line breaks both before and after the element when in the normal flow.
...And 30 more matches

Index - Web APIs
returning domquads lets getboxquads() return accurate information even when arbitrary 2d or 3d transforms are present.
...such a set is returned by element.classlist, htmllinkelement.rellist, htmlanchorelement.rellist, htmlareaelement.rellist, htmliframeelement.sandbox, or htmloutputelement.htmlfor.
... 918 document.getboxobjectfor() api, dom, method, obsolete, reference returns a boxobject (x, y, width, height) for a specified element.
...And 29 more matches

Block and inline layout in normal flow - CSS: Cascading Style Sheets
normal flow is defined in the css 2.1 specification, which explains that any boxes in normal flow will be part of a formatting context.
...we describe block-level boxes as participating in a block formatting context, and inline-level boxes as participating in an inline formatting context.
...for elements with a block formatting context, the spec says: “in a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
...And 28 more matches

preserveAspectRatio - SVG: Scalable Vector Graphics
the preserveaspectratio attribute indicates how an element with a viewbox providing a given aspect ratio must fit into a viewport with a different aspect ratio.
... because the aspect ratio of an svg image is defined by the viewbox attribute, if this attribute isn't set, the preserveaspectratio attribute has no effect (with one exception, the <image> element, as described below).
... example <svg viewbox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="smiley" d="m50,10 a40,40,1,1,1,50,90 a40,40,1,1,1,50,10 m30,40 q36,35,42,40 m58,40 q64,35,70,40 m30,60 q50,75,70,60 q50,75,30,60" /> </defs> <!-- (width>height) meet --> <svg preserveaspectratio="xmidymid meet" x="0" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xminymid meet" x="25" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmaxymid meet" x="50" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <!-- (width>height) slice --> <svg preserveaspectratio="xmidymin slice" x="0" y="15" viewbox="0 0 100 100" width="20" h...
...And 28 more matches

Floats - Learn web development
with the advent of flexbox and grid it has now returned to its original purpose, as this article explains.
... first, we'll start off with some simple html — add the following to your html body, removing anything that was inside there before: <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> now apply the following css to your html (using a <style> element or a <link> to a separate .css file — your choice): body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expect — the box is sitting above the text, in normal flow.
...And 26 more matches

clip-path - CSS: Cascading Style Sheets
syntax /* keyword values */ clip-path: none; /* <clip-source> values */ clip-path: url(resources.svg#c1); /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,...
...1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* box and shape values combined */ clip-path: padding-box circle(50px at 0 100px); /* global values */ clip-path: inherit; clip-path: initial; clip-path: unset; the clip-path property is specified as one or a combination of the values listed below.
... <basic-shape> a shape whose size and position is defined by the <geometry-box> value.
...And 26 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input type="button" name="button" /> checkbox a check box allowing single values to be selected/deselected.
... <input type="checkbox" name="checkbox"/> color a control for specifying a color; opening a color picker when active in supporting browsers.
...required for accessibility autocomplete all hint for form autofill feature autofocus all automatically focus the form control when the page is loaded capture file media capture input method in file upload controls checked radio, checkbox whether the command or control is checked dirname text, search name of form field to use for sending the element's directionality in form submission disabled all whether the form control is disabled form all associates the control with a form element formaction image, submit url to use for form submission formenctype image...
...And 25 more matches

Using CSS transitions - CSS: Cascading Style Sheets
transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-funct...
...ion: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration: 0.5s; transiti...
...on-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out;...
...And 24 more matches

Appendix D: Loading Scripts - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="script-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript;version=1.8" src="overlay.js"/> </overlay> evalinsandbox the components.utils.evalinsandbox method may be used to load arbitrary code into components.utils.sandbox objects.
... advantages namespacing: since scripts executed via evalinsandbox run in a defined namespace, global namespace contamination and the resultant extension compatibility issues are not usually a problem.
... flexibility: the evalinsandbox method accepts several parameters, including the url, line number, and javascript version of the file from which the code being evaluated was extracted.
...And 23 more matches

XUL element attributes - Archive of obsolete content
« xul reference home the following attributes are common to all xul elements: align type: one of the values below the align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children.
... for boxes that have horizontal orientation, it specifies how its children will be aligned vertically.
... for boxes that have vertical orientation, it specifies how its children will be aligned horizontally.
...And 23 more matches

XUL controls - Archive of obsolete content
button reference related elements: menupopup menuitem <checkbox> a control that may be turned on and off, typically used to create options which may be enabled or disabled.
... <checkbox label="show toolbar labels" checked="true"/> more information about the checkbox element.
... checkbox reference <colorpicker> a control that may be used to select a color.
...And 23 more matches

Timing element visibility with the Intersection Observer API - Web APIs
this box will be populated using script later.
... articles each article is contained in an <article> element, styled like this: article { background-color: white; padding: 6px; } article:not(:last-child) { margin-bottom: 8px; } article h2 { margin-top: 0; } this creates article boxes with a white background which float atop the blue background, with a small margin around the article.
...let's start with the global variables: let contentbox; let nextarticleid = 1; let visibleads = new set(); let previouslyvisibleads = null; let adobserver; let refreshintervalid = 0; these are used as follows: contentbox a reference to the <main> element's htmlelement object in the dom.
...And 23 more matches

Focus and Selection - Archive of obsolete content
if there are three textboxes on a window, the one that has the focus is the one that the user can currently enter text into.
...example 2 : source view <script> function displayfocus(){ var elem=document.getelementbyid('sbar'); elem.setattribute('value','enter your phone number.'); } </script> <textbox id="tbox1"/> <textbox id="tbox2" onfocus="displayfocus();"/> <description id="sbar" value=""/> the focus event, when it occurs, will call the displayfocus function.
...window id="focus-example" title="focus example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init(){ addeventlistener("focus",setfocusedelement,true); } function setfocusedelement(){ var focused = document.commanddispatcher.focusedelement; document.getelementbyid("focused").value = focused.tagname; } </script> <hbox> <label control="username" value="user name:"/> <textbox id="username"/> </hbox> <button label="hello"/> <checkbox label="remember this decision"/> <label id="focused" value="-no focus-"/> </window> in this example, a focus event handler is attached the window.
...And 22 more matches

Input Controls - Archive of obsolete content
xul has a similar element, textbox, used for text entry fields.
... without any attributes, the textbox element creates a box in which the user can enter text.
... textboxes accept many of the same attributes as html input controls.
...And 22 more matches

Theme changes in Firefox 2 - Archive of obsolete content
browser/safebrowsing/close16x16.png new file; this is the icon displayed in the safe browsing warning window as a close box for the window.
... 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.
...And 22 more matches

Backgrounds and borders - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn how to style the background and border of boxes.
... .box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; } we'll return to how the shorthand works later in the tutorial, but first let's have a look at the different things you can do with backgrounds in css, by looking at the individual background properties.
...a background-color extends underneath the content and padding box of the element.
...And 22 more matches

Advanced form styling - Learn web development
to recap what we said in the previous article, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> the ugly: some elements can't be styled thoroughly using css.
...: </label> <input id="search" name="search" type="search"> </p> <p> <label for="text">text: </label> <input id="text" name="text" type="text"> </p> <p> <label for="date">date: </label> <input id="date" name="date" type="datetime-local"> </p> <p> <label for="radio">radio: </label> <input id="radio" name="radio" type="radio"> </p> <p> <label for="checkbox">checkbox: </label> <input id="checkbox" name="checkbox" type="checkbox"> </p> <p><input type="submit" value="submit"></p> <p><input type="button" value="button"></p> </form> applying the following css to them removes system-level styling.
...in a couple of cases — search and radio buttons/checkboxes, it becomes way more useful.
...And 22 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
boxes every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.
... borders see the section borders for a list of the css properties you can use to set the colors of a box's borders.
...see box properties in the box model to learn about the relationship between elements and their borders, and the article styling borders using css to learn more about applying styles to borders.
...And 22 more matches

Modifying a XUL Interface - Archive of obsolete content
for example, the following will add a button to a xul window: example 1 : source view <script> function addbutton(){ var abox = document.getelementbyid("abox"); var button = document.createelement("button"); button.setattribute("label","a new button"); abox.appendchild(button); } </script> <box id="abox" width="200"> <button label="add" oncommand="addbutton();"/> </box> this example has two parts a box container element in xul.
... notice that this is not the same as a vbox or an hbox.
... (this is discussed more in the box model pages.) the box element has two attributes "id" and "width".
...And 21 more matches

WebGL model view projection - Web APIs
webglbox example this example will create a custom webglbox object that will draw a 2d box on the screen.
... note: the code for each webglbox example is available in this github repo and is organized by section.
... webglbox constructor the constructor looks like this: function webglbox() { // setup the canvas and webgl context this.canvas = document.getelementbyid('canvas'); this.canvas.width = window.innerwidth; this.canvas.height = window.innerheight; this.gl = mdn.createcontext(canvas); var gl = this.gl; // setup a webgl program, anything part of the mdn object is defined outside of this article this.webglprogram = mdn.createwebglprogramfromids(gl, 'vertex-shader', 'fragment-shader'); gl.useprogram(this.webglprogram); // save the attribute and uniform locations this.positionlocation = gl.getattriblocation(this.webglprogram, 'position'); this.colorlocation = gl.getuniformlocation(this.webglprogram, 'col...
...And 21 more matches

Introduction to CSS layout - Learn web development
the page layout techniques we'll be covering in more detail in this module are normal flow the display property flexbox grid floats positioning table layout multiple-column layout each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation.
... the methods that can change how elements are laid out in css are as follows: the display property — standard values such as block, inline or inline-block can change how elements behave in normal flow, for example making a block-level element behave like an inline element (see types of css boxes for more information).
... we also have entire layout methods that are switched on via specific display values, for example css grid and flexbox, which alter how elements inside the element they are set on are laid out.
...And 20 more matches

CSS property compatibility table for form controls - Learn web development
property n t note css box model width yes yes height partial[1][2] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields.
... box-shadow no partial[1] ie9 does not support this property.
... property n t note css box model width yes yes height partial[1] yes this property is not applied on webkit based browsers on mac osx or ios.
...And 20 more matches

Index - Learn web development
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.
...for example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box.
... 104 a cool-looking box assessment, beginner, css, learn, backgrounds, borders, box, box model, effects in this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box.
...And 20 more matches

Intersection Observer API - Web APIs
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.
...this set of values serves to grow or shrink each side of the root element's bounding box before computing intersections.
...the values in rootmargin define offsets added to each side of the intersection root's bounding box to create the final intersection root bounds (which are disclosed in intersectionobserverentry.rootbounds when the callback is executed).
...And 20 more matches

Basic Shapes - CSS: Cascading Style Sheets
before looking at the shapes, it is worth understanding two pieces of information that go together to make these shapes possible: the <basic-shape> type the reference box the <basic-shape> type the <basic-shape> type is used as the value for all of our basic shapes.
... the reference box understanding the reference box used by css shapes is important when using basic shapes, as it defines each shape's coordinate system.
... you have already met the reference box in the guide on creating shapes from box values, which directly uses the reference box to create the shape.
...And 20 more matches

Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
for example to make a heading inline we would use the following css: h1 { display: inline; } more recently we have gained css grid layout and flexbox.
...only when the value of display is changed do the children become flex or grid items and begin to respond to the other properties in the grid or flexbox specifications.
... what grid and flexbox demonstrate, however, is that an element has both an outer and an inner display type.
...And 19 more matches

List Controls - Archive of obsolete content
« previousnext » xul has a number of types of elements for creating list boxes.
... list boxes a list box is used to display a number of items in a list.
...xul provides two types of elements to create lists, a listbox element to create multi-row list boxes, and a menulist element to create drop-down list boxes.
...And 18 more matches

Overflowing content - Learn web development
everything in css is a box.
... you can constrain the size of these boxes by assigning values of width and height (or inline-size and block-size).
... overflow happens when there is too much content to fit in a box.
...And 18 more matches

Build your own function - Learn web development
it will display a custom message box on a web page and will act as a customized replacement for a browser's built-in alert() function.
...type the following in your browser's javascript console, on any page you like: alert('this is a message'); the alert function takes a single argument — the string that is displayed in the alert box.
...we've also provided some basic css to style the custom message box, and an empty <script> element to put our javascript in.
...And 18 more matches

Border-image generator - CSS: Cascading Style Sheets
section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" data-unit="%" data-max="300" data-sensivity="10"> </div> </div> <div class="separator"></div> <div class="property"> ...
...<div class="name">draggable</div> <div class="ui-checkbox" data-topic='drag-subject'></div> </div> <div class="property right"> <div class="name">section height</div> <div class="ui-input-slider" data-topic="preview-area-height" data-min="400" data-max="1000"> </div> </div> </div> <div id="preview_section" class="group section"> <div id="subject"> <div class="guideline" data-axis="y" data-topic="slice-top"></div> <div class="guideline" data-axis="x" data-topic="slice-right"></div> <div class="guideline" data-axis="y" data-topic="slice-bottom"></div> <div class="guideline" data-axis="...
...review"> </div> </div> <!-- controls --> <div id="controls" class="group section"> <!-- border-image-slice --> <div id="border-slice-control" class="category"> <div class="title"> border-image-slice </div> <div class="property"> <div class="name">fill</div> <div class="ui-checkbox" data-topic='slice-fill'></div> </div> </div> <!-- border-image-width --> <div id="border-width-control" class="category"> <div class="title"> border-image-width </div> </div> <!-- border-image-outset --> <div id="border-outset-control" class="category"> <div class="title"> bo...
...And 18 more matches

mix-blend-mode - CSS: Cascading Style Sheets
ion | color | luminosity examples effect of different mix-blend-mode values <div class="grid"> <div class="col"> <div class="note">blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <defs> <lineargradient id="red"> <stop offset="0" stop-color="hsl(0,100%,50%)" /> <stop offset="100%" stop-color="hsl(0,0%,100%)" /> </lineargradient> <lineargradient id="green"> <stop offset="0" stop-color="hsl(120,100%,50%)" /> <stop offset="...
...e> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> multiply <div class="container multiply"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> darken <div class="container darken"> ...
... <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> screen <div class="container screen"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" c...
...And 18 more matches

XUL accessibility guidelines - Archive of obsolete content
other elements, such as arrowscrollbox and listbox, are made to scroll automatically.
...the arrowscrollbox, for example, is a non-focusable element and cannot be scrolled using a keyboard.
... a listbox, however, can receive focus so its contents can scroll.
...And 17 more matches

Advanced styling effects - Learn web development
this article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.
... box shadows box-shadow allows you to apply one or more drop shadows to an element's box.
... like text shadows, box shadows are supported pretty well across browsers, including ie9+ and edge.
...And 17 more matches

Images, media, and form elements - Learn web development
images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes.
... sizing images as you already know from following these lessons, everything in css generates a box.
... if you place an image inside a box that is smaller or larger than the intrinsic dimensions of the image file in either direction, it will either appear smaller than the box, or overflow the box.
...And 17 more matches

Legacy layout methods - Learn web development
prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand the fundamental concepts behind the grid layout systems used prior to css grid layout being available in browsers.
... this lesson will explain how grid systems and grid frameworks based on floats and flexbox work.
...this leaves us with 960 pixels for our total column/gutter widths — in this case, the padding is subtracted from the total content width because we have set box-sizing to border-box on all elements on the site (see changing the box model completely for more explanation).
...And 17 more matches

ARIA Test Cases - Accessibility
- - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - checkbox simple checkbox testcases: set aria-checked="false" for unchecked both remove or set attribute for unchecked case -- also includes an invalid and required checkbox hierarchical (newly added test not in test results yet) dojo nightly build expected at behavior: screen reader should speak the accessible name followed by both the type being checkbox and the state (checked, unchecked).
... markup used: role="checkbox" aria-checked="true" or "false" notes: need testcase where aria-checked attribute is removed instead of set to false results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 pass fail (changes not spoken) fail fail voiceover (leopard) n/a n/a - fail window-eyes pass pass fail (unchecked presented as checked, ie exposing incorrect state for no aria-checked attribute) fail fail nvda fail on #2 -- repetitive text spoken, first checkbox toggle speaks incorrect state n/a fail fail zoom (leopard) pass n/a pass pass ...
... zoomtext pass - fail fail orca pass n/a - - tristate checkbox testcases: both remove or unset for unchecked case expected at behavior: screen reader should announce accessible name, role and state.
...And 17 more matches

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
one of the reasons that flexbox quickly caught the interest of web developers is that it brought proper alignment capabilities to the web for the first time.
... it enabled proper vertical alignment, so we can at last easily center a box.
... in this guide, we will take a thorough look at how the alignment and justification properties work in flexbox.
...And 17 more matches

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="wra...
...pper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> positioning items by line number we can use line-based placement to control where these items sit on the grid.
... .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; } as you position some items, other items on the grid will continue to be laid out using the auto-placement rules.
...And 17 more matches

User Notifications and Alerts - Archive of obsolete content
the notificationbox element you have probably seen these before.
...they are thin boxes that appear from beneath the tab list and above the page content, with some text and maybe a few buttons.
... this kind of notification is implemented with a notificationbox.
...And 16 more matches

Web audio spatialization basics - Web APIs
3d boombox demo to demonstrate 3d spatialization we've created a modified version of the boombox demo we created in our basic using the web audio api guide.
... the boombox sits inside a room (defined by the edges of the browser viewport), and in this demo, we can move and rotate it with the provided controls.
... when we move the boombox, the sound it produces changes accordingly, panning as it moves to the left or right of the room, or becoming quieter as it is moved away from the user or is rotated so the speakers are facing away from them, etc.
...And 16 more matches

Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
margin-inline-end margin-right margin-inline-start margin-left padding-block-end padding-bottom padding-block-start padding-top padding-inline-end padding-right padding-inline-start padding-left there are also some additional shorthands, made possible because we have the ability to target both block or both inline edges of the box simultaneously.
... in the example below i have created two boxes and added different sized margins to each edge.
... one box uses physical properties and the other logical properties.
...And 16 more matches

<input type="email"> - HTML: Hypertext Markup Language
a placeholder is a value that demonstrates the form the value should take by presenting an example of a valid value, which is displayed inside the edit box when the element's value is "".
... once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.
... <input type="email" placeholder="sophie@example.com"> controlling the input size you can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.
...And 16 more matches

tree - Archive of obsolete content
attributes disablekeynavigation, disabled, editable, enablecolumndrag, flags, hidecolumnpicker, onselect, rows, seltype, statedatasource, tabindex, treelines properties accessibletype, builderview, columns, contentview, currentindex, disablekeynavigation, disabled, editingcolumn, editingrow, enablecolumndrag, firstordinalcolumn, inputfield, seltype, selstyle, tabindex, treeboxobject, view examples a tree with several columns <tree flex="1" rows="2"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> ...
...(default in listbox and richlistbox.) multiple multiple rows may be selected at once.
... for richlistbox, this is new in firefox 3.5.
...And 15 more matches

Building up a basic demo with PlayCanvas editor - Game development
creating a new project start a brand new project by clicking on the new button: the resulting dialog box will show a few different options.
...an entity is any object used in the scene — it cna be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
...go ahead and click box — it will be added to the scene.
...And 15 more matches

Debugging CSS - Learn web development
perhaps you believe that a certain selector should match an element, but nothing happens, or a box is a different size than you expected.
...for example in firefox there are some excellent tools for working visually with css layout, allowing you to inspect and edit grid layouts, flexbox, and shapes.
...try selecting the element with the class of box1; this is the first element on the page with a bordered box drawn around it.
...And 15 more matches

UI pseudo-classes - Learn web development
this included some usage of pseudo-classes, for example using :checked to target a checkbox only when it is selected.
... :checked, :indeterminate, and :default: respectively target checkboxes and radio buttons that are checked, in an indeterminate state (neither checked or not checked), and the default selected option when the page loads (e.g.
... an <input type="checkbox"> with the checked attribute set, or an <option> element with the selected attribute set).
...And 15 more matches

nsIAccessibleText
wchar getcharacteratoffset( in long offset ); parameters offset return value getcharacterextents() returns the bounding box of the specified position.
...because it does not represent an existing character its bounding box is defined in relation to preceding characters.
... it should be roughly equivalent to the bounding box of some character when inserted at the end of the text.
...And 15 more matches

Adding sidebars - Archive of obsolete content
<menupopup id="viewsidebarmenu"> <menuitem id="xulschoolhello-sidebar" label="&xulschoolhello.sidebar.title;" accesskey="&xulschoolhello.sidebar.accesskey;" type="checkbox" autocheck="false" group="sidebar" sidebarurl="chrome://xulschoolhello/content/sidebar.xul" sidebartitle="&xulschoolhello.sidebar.title;" oncommand="togglesidebar('xulschoolhello-sidebar');" /> </menupopup> the example in the mdc page includes a shortcut key combination to toggle the new sidebar.
... the tabbox element the « xul reference « element creates a tabbed view of one or more tabpanel elements.
... you can see an example of a tabbox element if you open the firefox preferences window and select the advanced section.
...And 14 more matches

Images, Tables, and Mysterious Gaps - Archive of obsolete content
how inline content is constructed in order to understand what just happened, let's take a look at the construction of a line box, the placement of images within a line box, and the placement of a line box within a table cell.
... first a basic line box containing text, shown in figure 3.
... the most crucial part of figure 3 is the baseline (represented by the blue line), and its placement within the line box.
...And 14 more matches

nsIAccessibleRole
role_dialog 18 represents a dialog box or message box.
...it is used for html:textfield, xul:groupbox, role="group".
... role_list 33 represents a list box, allowing the user to select one or more items.
...And 14 more matches

Using the CSS Painting API - Web APIs
fillrect(0, 15, 200, 20) results in the creation of a rectangle that is 200 units wide by 20 units tall, positioned 0 units from the left and 15 units from the top of the content box.
... we can use the css background-size and background-position properties to re-size or relocate this background image, but this is the default size and placement of the yellow box we created in our paint worklet.
... .fancy { background-image: paint(headerhighlight); } putting it together we can then add the fancy class to any element on the page to add a yellow box as a background: <h1 class="fancy">my cool header</h1> the following example will look like the image above in browsers supporting the css painting api.
...And 14 more matches

shape-outside - CSS: Cascading Style Sheets
by default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
... syntax /* keyword values */ shape-outside: none; shape-outside: margin-box; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box; /* function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); shape-outside: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* <url> value */ shape-outside: url(image.png); /* <gradient> value */ shape-outside: linear-gradient(45deg, rgba(255,...
...inline content wraps around the element's margin box, like usual.
...And 14 more matches

Sizing items in CSS - Learn web development
in the case of a box inside another container, if you give the child box a percentage width it will be a percentage of the width of the parent container.
...in the below example we have a box.
... we have given the inner box a margin of 10% and a padding of 10%.
...And 13 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
they need to know about focus changes and other events, and it needs to know what objects are contained in the current document or dialog box.
... a set of system messages that confer accessibility-related events such as focus changes, changes to document content and state changes in ui objects like checkboxes.
...[important] get_accname: get the "name" of the iaccessible, for example the name of a button, checkbox or menu item.
...And 13 more matches

Basic Concepts of grid layout - CSS: Cascading Style Sheets
grid is a powerful specification that, when combined with other parts of css such as flexbox, can help you create layouts that were previously impossible to build in css.
... .wrapper { display: grid; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } all the direct children are now grid items.
... <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 200px 200px 200px; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } the fr unit tracks can be defined using any length unit.
...And 13 more matches

break-after - CSS: Cascading Style Sheets
the break-after css property sets how page, column, or region breaks should behave after a generated box.
... if there is no generated box, the property is ignored.
... values generic break values auto allows, but does not force, any break (page, column, or region) to be inserted right after the principal box.
...And 13 more matches

break-before - CSS: Cascading Style Sheets
the break-before css property sets how page, column, or region breaks should behave before a generated box.
... if there is no generated box, the property is ignored.
... values generic break values auto allows, but does not force, any break (page, column, or region) to be inserted right before the principal box.
...And 13 more matches

mask-origin - CSS: Cascading Style Sheets
/* keyword values */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box; /* multiple values */ mask-origin: padding-box, content-box; mask-origin: view-box, fill-box, border-box; /* non-standard keyword values */ -webkit-mask-origin: content; -webkit-mask-origin: padding; -webkit-mask-origin: border; /* global values */ mask-origin: inherit; mask-origin: initial; mask-origin: unset; for elements rendered as a single box, this property specifies the mask positioning area.
...for elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes box-decoration-break operates upon to determine the mask positioning area.
... values content-box the position is relative to the content box.
...And 13 more matches

Manipulating Lists - Archive of obsolete content
« previousnext » the xul listbox provides a number of specialized methods.
... list manipulation the listbox element provides numerous methods to retrieve and manipulate its items.
... although listboxes may be manipulated using the standard dom functions as well, it is recommended that the specialized listbox functions be used instead when possible.
...And 12 more matches

Numeric Controls - Archive of obsolete content
number fields a textbox may be used for entering numbers by setting the value of the type attribute to the value number.
... this type of textbox may only be used to enter numbers.
...in addition, arrow buttons appear beside the textbox to allow the user to cycle through the values.
...And 12 more matches

Using Spacers - Archive of obsolete content
xul uses a layout system called the 'box model'.
... we'll talk more about this in the next section but it essentially allows you to divide a window into a series of boxes that hold elements.
... the boxes will be positioned and resized based on specifications that you can define.
...And 12 more matches

dev/panel - Archive of obsolete content
most of the firefox developer tools are hosted in a ui component called the toolbox.
... individual built-in tools, such as the javascript debugger or the web console, occupy "panels" in the toolbox.
... with the dev/panel module, you can create your own panels in the toolbox: the panel gets a tab in the toolbox toolbar which enables the user to open it: you specify the panel's content and behavior using html, css, and javascript.
...And 11 more matches

align - Archive of obsolete content
« xul reference home align type: one of the values below the align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children.
... for boxes that have horizontal orientation, it specifies how its children will be aligned vertically.
... for boxes that have vertical orientation, it specifies how its children will be aligned horizontally.
...And 11 more matches

Tree Widget Changes - Archive of obsolete content
some specific changes you should now get the tree selection object from the view, not the box object, meaning use tree.view.selection instead of tree.treeboxobject.selection.
... use tree.columns[1].id instead of tree.treeboxobject.getcolumnid(1) to get the id of a column, in this case column 1.
... use tree.columns.getkeycolumn().index instead of tree.treeboxobject.getkeycolumnindex().
...And 11 more matches

Commands - Archive of obsolete content
you might use this to have a listbox respond to cut, copy and paste operations, for instance.
...by default, only textboxes have a controller that does anything.
... the textbox controller handles clipboard operations, selection, undo and redo as well as some editing operations.
...And 11 more matches

attribute.align - Archive of obsolete content
summary the align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children.
... for boxes that have horizontal orientation, it specifies how its children will be aligned vertically.
... for boxes that have vertical orientation, it is used to specify how its children are algined horizontally.
...And 11 more matches

toolbarbutton - Archive of obsolete content
r, disabled, dlgtype, group, image, label, oncommand, open, orient, tabindex, title, type, validate properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <toolbar id="test-toolbar"> <toolbarbutton accesskey="p" label="plain"/> <toolbarbutton accesskey="c" label="checkbox" type="checkbox"/> <toolbarbutton accesskey="b" label="menu-button" type="menu-button"> <menupopup> <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> <toolbarbutton accesskey="m" label="menu" type="menu"> <menupopup> <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutt...
...when autocheck is true, the button type should be "checkbox" or "radio".
...this means that the button acts like a checkbox except that there is a third state which must be set manually by adjusting the check state.
...And 11 more matches

treecol - Archive of obsolete content
attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below.
... <tree flex="1" editable="true"> <treecols> <treecol label="active" type="checkbox" editable="true"/> <treecol label="name" flex="1" /> </treecols> <treechildren> <treeitem> <treerow> <treecell value="true"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </tree> to make the checkbox visible on some platforms, the following styles need to be added to the stylesheet (see treecol.type).
...if targeting firefox for mac os x, be sure to use these styles but include your own checkbox image.
...And 11 more matches

XForms Input Element - Archive of obsolete content
mozilla extensions labelposition - only for boolean types: show the label before or after the checkbox (see below) type restrictions the input element can be bound to a node containing simple content of any data type except xsd:base64binary, xsd:hexbinray or any data type derived from these.
... representations the xforms input element can be represented by the following widgets for the spcified data types (or types derived from these data types): text field - the default widget when no type is specified or the data is of type xsd:string (xhtml/xul) checkbox - used for xsd:boolean instance data.
...analogous widgets are <xhtml:input type="text"/> and <xul:textbox/> specific handling of attributes incremental - if "true", the bound instance node will be updated on each character typed by the user.
...And 11 more matches

CSS values and units - Learn web development
the first box has a width set in pixels.
... the second box has a width set in vw (viewport width) units.
...if you change the width of your browser window, the size of the box should change, however this example is embedded into the page using an <iframe>, so this won't work.
...And 11 more matches

Supporting older browsers - Learn web development
previous overview: css layout next in this module, we recommend using flexbox and grid as the main layout methods for your designs.
... prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand how to provide support for your layouts on older browsers that might not support the features you want to use.
...any browser that does not support css grid layout will see the row of boxes as a floated layout.
...And 11 more matches

Creating our first Vue component - Learn web development
inside that <div>, let's add a checkbox and a corresponding label.
... add an id to the checkbox, and a for attribute mapping the checkbox to the label, as shown below.
... <template> <div> <input type="checkbox" id="todo-item" checked="false" /> <label for="todo-item">my todo item</label> </div> </template> using todoitem inside our app this is all fine, but we haven’t added the component to our app yet, so there’s no way to test it and see if everything is working.
...And 11 more matches

TextMetrics - Web APIs
textmetrics.actualboundingboxleft read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the left side of the bounding rectangle of the given text, in css pixels.
... textmetrics.actualboundingboxright read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the right side of the bounding rectangle of the given text, in css pixels.
... textmetrics.fontboundingboxascent read only is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in css pixels.
...And 11 more matches

Color picker tool - CSS: Cascading Style Sheets
nput[data-topic="alpha"] > .name { width: 60px; } .ui-color-picker .input[data-topic="alpha"] > input { float: right; } .ui-color-picker .input[data-topic="hexa"] { width: auto; float: right; margin: 6px 8px 0 0; } .ui-color-picker .input[data-topic="hexa"] > .name { display: none; } .ui-color-picker .input[data-topic="hexa"] > input { width: 90px; height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left...
...er { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right {...
...rm: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * color picker tool */ body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; box-shadow: 0 0 5px 0 #999; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } /** * resize handle */ .resize-handle { width: 10px; height: 10px; background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat; position: absolu...
...And 11 more matches

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
fully understanding how these properties work with growing and shrinking items is the real key to mastering flexbox.
... .item { flex: 2 1 auto; } if you have read the article basic concepts of flexbox, then you will have already had an introduction to the properties.
...it would overflow the box it is in if that container was too narrow.
...And 11 more matches

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
syntax /* css basic user interface module level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar; /* partial list of available values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as gecko and edge) */ -webkit-appearance: media-mute-button; -webkit-appearance: care...
... checkbox div { color: black; -moz-appearance: checkbox; -webkit-appearance: checkbox; } <div>lorem</div> firefox chrome safari edge the element is drawn like a checkbox, including only the actual "checkbox" portion.
... listbox div { color: black; height:20px; -moz-appearance: listbox; -webkit-appearance: listbox; } <div>lorem</div> firefox chrome safari edge menulist div { color: black; -moz-appearance: menulist; -webkit-appearance: menulist; } <div>lorem</div> firefox chrome safari edge meter div{ color: black; -webkit-appearance: meter; } <div>lorem</div> chrome safari firefox progress-bar div{ color: black; -webkit-appearance: progress-bar; } <div>lorem</div> chrome safari firefox push-button div{ color: black; -webkit-appearance: push-button; } <div>lorem</div> chrome safari edge ...
...And 11 more matches

mask-clip - CSS: Cascading Style Sheets
/* <geometry-box> values */ mask-clip: content-box; mask-clip: padding-box; mask-clip: border-box; mask-clip: margin-box; mask-clip: fill-box; mask-clip: stroke-box; mask-clip: view-box; /* keyword values */ mask-clip: no-clip; /* non-standard keyword values */ -webkit-mask-clip: border; -webkit-mask-clip: padding; -webkit-mask-clip: content; -webkit-mask-clip: text; /* multiple values */ mask-clip: padding-box, no-clip; mask-clip: view-box, fill-box, border-box; /* global values */ mask-clip: inherit; mask-clip: initial; mask-clip: unset; syntax one or more of the keyword values listed below, separated by commas.
... values content-box the painted content is clipped to the content box.
... padding-box the painted content is clipped to the padding box.
...And 11 more matches

Adding more elements - Archive of obsolete content
« previousnext » we will conclude the discussion of boxes by adding some boxes to the find files dialog.
...<hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog.
...you will notice that if the window is resized, the textbox grows but the other components do not.
...And 10 more matches

Splitters - Archive of obsolete content
splitting a box there may be times when you want to have two sections of a window where the user can resize the sections.
...you can place a splitter anywhere you want and it will allow resizing of the elements that come before it and the elements that come after it in the same box.
... when a splitter is placed inside a horizontal box, it will allow resizing horizontally.
...And 10 more matches

Templates - Archive of obsolete content
example 1 : source <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <button uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </template> </vbox> here, a vertical box has been created that will contain a column of buttons, one for each top-level bookmark.
...(you may have to focus the window for it to change.) container and datasources the template itself is placed inside a vertical box.
... the box has two special attributes that allow it to be used for templates, which are used to specify where the data comes from.
...And 10 more matches

Toolbars - Archive of obsolete content
adding a toolbar like a number of elements, xul toolbars are a type of box.
...for example, the mozilla browser window contains a textbox that displays the page url.
...of course you wouldn't normally put a textbox in a vertical toolbar.
...And 10 more matches

Tree View Details - Archive of obsolete content
first, the simple functions: { treebox: null, selection: null, get rowcount() { return this.visibledata.length; }, settree: function(treebox) { this.treebox = treebox; }, getcelltext: function(idx, column) { return this.visibledata[idx][0]; }, iscontainer: function(idx) { return this.visibledata[idx][1]; }, iscontaineropen: function(idx) { return this.visibledata[idx][2]; }, iscont...
... the settree function will be called to set the tree's box object.
... the tree box object is a specialized type of box object specific to trees and will be examined in detail in the next section.
...And 10 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
this is defined by the layout mode; it is usually the alignment subject’s containing block, and assumes the writing mode of the box establishing the containing block.
... 17 alignment subject alignment subject, css, glossary, alignment in css box alignment the alignment subject is the thing (or things) being aligned by the property.
... 39 bounding box bounding box, codingscripting, design, glossary the bounding box of an element is the smallest possible rectangle (aligned with the axes of that element's user coordinate system) that entirely encloses it and its descendants.
...And 10 more matches

How to build custom form controls - Learn web development
.select .active, .select:focus { outline: none; /* this box-shadow property is not exactly required, however it's imperative to ensure active state is visible, especially to keyboard users, that we use it as a default value.
... */ box-shadow: 0 0 3px 1px #227755; } now, let's handle the list of options: /* the .select selector here helps to make we only select element inside our control.
... if you are lost with px to em conversion, try http://riddle.pl/emcalc/ */ font-size : 0.625em; /* this (10px) is the new font size context for em value in this context */ font-family : verdana, arial, sans-serif; box-sizing : border-box; /* we need extra room for the down arrow we will add */ padding : .1em 2.5em .2em .5em; width : 10em; /* 100px */ border : .2em solid #000; border-radius : .4em; box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* the first declaration is for browsers that do not support linear gradients.
...And 10 more matches

Accessibility API cross-reference
a checkbox; aria has two kinds: use checkbox if you need to express 'mixed' state (some of the descendents are true, some are false), otherwise use switch or (preferred in html) <input type=checkbox>, which are true/false only.
... checkbutton check_box check_box checkbox or switch <input type=checkbox> pretty obvious what this is for clock n/a n/a timer <time> column of cells in a table - how would the user specifically point to this, as opposed to the column header or cells?
... column n/a n/a n/a the heading of a table's column columnheader column_header column_header, table_column_header columnheader <th scope=col> edit control with drop down list box, different from droplist combobox combo_box combo_box combobox abstract role - a form of widget that performs an action but does not receive input data.
...And 10 more matches

Accessible Toolkit Checklist
for example, lists of checkboxes are implemented in windows with images of checked and unchecked checkboxes.
... most widgets (like checkboxes) can have a label outside of themselves, which should focus the widget when clicked on, or when its mnemonic is pressed.
... get_accname: get the "name" of the iaccessible, for example the name of a button, checkbox or menu item.
...And 10 more matches

XUL Events - Archive of obsolete content
the event handler should be placed on an observer.checkboxstatechangethe checkboxstatechange event is executed when the state of a <checkbox> element has changed.closethe close event is executed when a request has been made to close the window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>.
... attribute: onblur change this event is sent when the value of the textbox is changed.
...in a textbox, a user can normally hold down a key to repeat a character in this case, multiple sets of key events are sent (as if the user pressed the same key repeatedly).
...And 9 more matches

MenuItems - Archive of obsolete content
checkbox menu items sometimes, you will want to have an item on a menu that acts as a toggle.
...to indicate the current state of the toolbar, a checkbox would be displayed next to the menu item label.
... if the checkbox is on, the toolbar is shown, whereas if the checkbox is off, the toolbar is not shown.
...And 9 more matches

Special Condition Tests - Archive of obsolete content
for instance, if the container was a <vbox>, a rule could be created that would only match a <vbox> element.
...for the bookmarks toolbar, the outer content is inserted into an <hbox>, but at lower levels, the content will be inserted into a <menu> in case you aren't clear, the tag that must match for the outer iteration is the root element, the one with the datasources attribute on it.
...here is a previous example, rewritten to use the parent matching syntax: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <rule parent="vbox"> <action> <groupbox uri="?"> <caption label="?name"/> </groupbox> </action> </rule> <rule> <action> <label uri="?" value="?name"/> </action> </rule> </template> </vbox> previously, an assign element was used to assign the tagname of the result to a variable, which was then compared in a rule condition.
...And 9 more matches

Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
for example, a custom checkbox might have a checked property which needs to be changed when the user clicks the checkbox: <handlers> <handler event="mouseup" action="this.checked=!this.checked"/> </handlers> when the user clicks and releases the mouse button over the check box, the mouseup event is sent to it, and the handler defined here is called, causing the state of the checked property to be reversed.
...the previous example could be extended so that the checked property of the check box is changed when the space bar is pressed.
...the following alternate syntax can be used when the code in a handler is more complex: <binding id="binding-name"> <handlers> <handler event="event-name"> -- handler code goes here -- </handler> </handlers> </binding> handlers example the following example adds some key handlers to create a very primitive local clipboard: example 1 : source <binding id="clipbox"> <content> <xul:textbox/> </content> <implementation> <field name="clipboard"/> </implementation> <handlers> <handler event="keypress" key="x" modifiers="control" action="this.clipboard=document.getanonymousnodes(this)[0].value; document.getanonymousnodes(this)[0].value='';"/> <handler event="keypress" key="c" modifiers="control" action="this.clipboard=docum...
...And 9 more matches

button - Archive of obsolete content
when autocheck is true, the button type should be "checkbox" or "radio".
...this means that the button acts like a checkbox except that there is a third state which must be set manually by adjusting the check state.
...the type attribute must be set to checkbox for buttons with a check state.
...And 9 more matches

menulist - Archive of obsolete content
attributes accesskey, crop, disableautoselect, disabled, editable, focused, image, label, oncommand, open, preference, readonly, sizetopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfield, itemcount, label, menuboxobject, menupopup, open, selectedindex, selecteditem, tabindex, value methods appenditem, contains, getindexofitem, getitematindex, insertitemat, removeallitems, removeitemat, select examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> ...
...if the box direction is reversed, the cropping is reversed.
...for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disableautoselect type: boolean if this attribute is true or omitted, the selected item on the menu will update to match what the user entered in the textbox.
...And 9 more matches

Basic native form controls - Learn web development
this article covers: the common input types button, checkbox, file, hidden, image, password, radio, reset, submit, and text.
... they can have a placeholder; this is text that appears inside the text input box that should be used to briefly describe the purpose of the box.
... they can be constrained in size (the physical size of the box) and maxlength (the maximum number of characters that can be entered into the box).
...And 9 more matches

Implementing feature detection - Learn web development
a classic example might be to test for flexbox support in a browser; for browsers that support the newest flexbox spec, we could use a flexible and robust flex layout.
... when you save everything and try out your example, you should see the flexbox layout applied to the page if the browser supports modern flexbox, and the float layout if not.
... @supports also has or and not logic available — the other block applies the float layout if the flexbox properties are not available: @supports not (flex-flow: row) and (flex: 1) { /* rules in here */ } this may look a lot more convenient than the previous example — we can do all of our feature detection in css, no javascript required, and we can handle all the logic in a single css file, cutting down on http requests.
...And 9 more matches

Strategies for carrying out testing - Learn web development
toggling the button should make the information box appear/disappear.
... a grade: the information box should animate smoothly as it appears/disappears.
... the gradient and text shadow should appear to enhance the look of the box.
...And 9 more matches

Xray vision
as well as these two levels of privilege, chrome code can create sandboxes.
... the security principal defined for the sandbox determines its privilege level.
... if an expanded principal is used, the sandbox is granted certain privileges over content code and is protected from direct access by content code.
...And 9 more matches

Drawing and Event Handling - Plugins
the plug-in prints the part of the page it occupies, and the browser handles the rest of the printing process, including displaying print dialog boxes, getting the printer device context, and, of course, printing the rest of the page.
...the browser displays the necessary print dialog boxes and calls npp_print again.
... a full-page plug-in handles the print dialog boxes and printing process as it sees fit.
...And 9 more matches

GlobalEventHandlers.onanimationend - Web APIs
example html content <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; paddin...
...olor: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... first is the box itself.
...And 9 more matches

GlobalEventHandlers.onanimationstart - Web APIs
example html content <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; paddin...
...olor: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... first is the box itself.
...And 9 more matches

A simple RTCDataChannel sample - Web APIs
first, we have a couple of buttons for establishing and closing the connection: <button id="connectbutton" name="connectbutton" class="buttonleft"> connect </button> <button id="disconnectbutton" name="disconnectbutton" class="buttonright" disabled> disconnect </button> then there's a box which contains the text input box into which the user can type a message to transmit, with a button to send the entered text.
... <div class="messagebox"> <label for="message">enter a message: <input type="text" name="message" id="message" placeholder="message text" inputmode="latin" size=60 maxlength=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </div> finally, there's the little box into which we'll insert the messages.
... <div class="messagebox" id="receivebox"> <p>messages received:</p> </div> the javascript code while you can just look at the code itself on github, below we'll review the parts of the code that do the heavy lifting.
...And 9 more matches

filter - CSS: Cascading Style Sheets
</tr> </thead> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="srgb"> <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%"> <fegaussianblur in="sourcegraphic" stddeviation="3.5"/> </filter> <image xlink:href="/files/3710/test_form_2.jpeg" filter="url(#svgblur)" width="212px" height="161px"/> </svg> </div> </td> <td><img alt="t...
...e</th> </tr> </thead> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3708/test_form.jpg" style="width: 100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3708/test_form.jpg" style="width: 100%;" /></td> <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="srgb"> <filter id="brightness"> <fecomponenttransfer> <fefuncr type="linear" slope="2"/> <fefuncg type="linear" slope="2"/> <fefuncb type="linear" slope="2"/> </fecomponenttransfer> </filter> <image xlink:href="/files/3708/test_form.jpg" filter="url(#brightness)" width="286px" height="217px" /> </svg><div></td> ...
...</tr> </thead> <tbody> <tr> <td><img alt="test_form_3.jpeg" id="img1" class="internal default" src="/files/3712/test_form_3.jpeg" style="width: 100%;" /></td> <td><img alt="test_form_3.jpg" id="img2" class="internal default" src="/files/3712/test_form_3.jpeg" style="width: 100%;" /></td> <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151" color-interpolation-filters="srgb"> <filter id="contrast"> <fecomponenttransfer> <fefuncr type="linear" slope="2" intercept="-0.5"/> <fefuncg type="linear" slope="2" intercept="-0.5"/> <fefuncb type="linear" slope="2" intercept="-0.5"/> </fecomponenttransfer> </filter> <image xlink:href="/files/3712/test_form_3.jpeg" filter="url(#contrast)" width="240p...
...And 9 more matches

<input type="url"> - HTML: Hypertext Markup Language
a placeholder is a value that demonstrates the form the value should take by presenting an example of a valid value, which is displayed inside the edit box when the element's value is "".
... once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.
... <input id="myurl" name="myurl" type="url" placeholder="http://www.example.com"> controlling the input size you can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.
...And 9 more matches

alignment-baseline - SVG: Scalable Vector Graphics
matches the box’s corresponding baseline to that of its parent.
... text-bottom matches the bottom of the box to the top of the parent’s content area.
... middle aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
...And 9 more matches

New Security Model for Web Services - Archive of obsolete content
securing resources from untrusted scripts behind firewalls introduction this page describes an alternative mechanism which can be used to protect all internal resources against requests from sandboxed scripts.
...when an attempt is made to access a resource at a previously-unknown uri, the sandbox reads a file at that domain with declarations to determine whether access is permitted to the script.
... the problem external untrusted scripts loaded behind a firewall are executed in a sandbox.
...And 8 more matches

Things I've tried to do with XUL - Archive of obsolete content
(to add insult, xul layout code *explicitly* trims off '%' from width/height, thus treating it as pixels.) for reference, i'd like the following to give a vbox that resizes along with the window, with the green, red, and blue inside boxes always maintaining a 30%-20%-50% ratio to the height of the parent vbox.
... <vbox flex="1"> <box height="30%" flex="1" style="background: green;"/> <box height="20%" flex="1" style="background: red;"/> <box height="50%" flex="1" style="background: blue;"/> </vbox> workaround: no real good ones; the closest i've gotten is to use a div instead of a box container: <html:div style="-moz-box-flex: 1; width: 100%; height: 100%;"> <box style="height: 30%" flex="1" style="background: green;"/> <box style="height: 20%" flex="1" style="background: green;"/> <box style="height: 50%" flex="1" style="background: green;"/> </html:div> using flex="3" flex="2" flex="5" would give the right display visually for the empty boxes; however, flex only applies to how empty space is allocated.
... so, as soon as you add a label or some other element inside, there will be a different amount of "empty space" to allocate in different boxes.
...And 8 more matches

Creating a Skin - Archive of obsolete content
window > box { background-color: #0088cc; } menubar,menupopup,toolbar,tabpanels { background-color: lightblue; border-top: 1px solid white; border-bottom: 1px solid #666666; border-left: 1px solid white; border-right: 1px solid #666666; } caption { background-color: lightblue; } the inner box of the window (which actually surrounds all of the window content) has been changed to have a me...
... the first rule above (for 'window > box') specifies that the child box of the window has a different color.
...that way, we can modify the xul without needing to keep the box as the first child of the window.
...And 8 more matches

Stacks and Decks - Archive of obsolete content
containers each xul box is a container that can contain any other element.
... there are a number of elements that are specialized types of boxes, such as toolbars and tabbed panels.
... the box tag creates the simplest box with no special properties.
...And 8 more matches

XBL Attribute Inheritance - Archive of obsolete content
for example: xul: <searchbox/> xbl: <binding id="searchbinding"> <content> <xul:textbox/> <xul:button label="search"/> </content> </binding> in the example, the label attribute has been placed directly on the button element.
...in this case, it would be preferable if the attribute could be specified on the searchbox instead.
...<xul:textbox xbl:inherits="flex"/> <xul:button xbl:inherits="label"/> when the content is generated, the textbox grabs the flex attribute from the searchbox and the button grabs the label attribute from the searchbox.
...And 8 more matches

dialog - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element should be used in place of the window element for dialog boxes.
... the buttons attribute may be used to set which buttons should appear in the dialog box.
...etoalertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio label="red"/> <radio label="green" selected="true"/> <radio label="blue"/> </radiogroup> <label value="nickname"/> <textbox/> </groupbox> </dialog> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
...And 8 more matches

WAI-ARIA basics - Learn web development
<nav>), or go beyond html5 semantics to provide signposts to different functional areas, e.g search, tabgroup, tab, listbox, etc.
...in these situations, aria can help to provide what's missing with a combination of roles like button, listbox, or tabgroup, and properties like aria-required or aria-posinset to provide further clues as to functionality.
...in this example we have a simple random quote box: <section> <h1>random quote</h1> <blockquote> <p></p> </blockquote> </section> our javascript loads a json file via xmlhttprequest containing a series of random quotes and their authors.
...And 8 more matches

Other form controls - Learn web development
html has two forms of drop down content: the select box, and the autocomplete box.
... note: you can find examples of all the drop-down box types on github at drop-down-content.html (see it live also).
... select box a simple select box is created with a <select> element with one or more <option> elements as its children, each of which specifies one of its possible values.
...And 8 more matches

From object to iframe — other embedding technologies - Learn web development
insert it into the input box below, and see what the result is in the output.
... insert it into the input box below, and see what the result is in the output.
...say you wanted to include the mdn glossary on one of your web pages — you could try something like this: <iframe src="https://udn.realityripple.com/docs/glossary" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p> <a href="https://udn.realityripple.com/docs/glossary"> fallback link for browsers that don't support iframes </a> </p> </iframe> this example includes the basic essentials needed to use an <iframe>: allowfullscreen if set, the <iframe> is able to be placed in fullscreen mode using the full screen api (somewhat beyond scope for this article.) frameborder if set to 1,...
...And 8 more matches

Beginning our React todo list - Learn web development
<span classname="visually-hidden"> tasks</span> </button> </div> <h2 id="list-heading"> 3 tasks remaining </h2> <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delet...
...e <span classname="visually-hidden">eat</span> </button> </div> </li> <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-1" type="checkbox" /> <label classname="todo-label" htmlfor="todo-1"> sleep </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">sleep</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">sleep</span> </button> </div> </li> <li classname="todo stack-small"> <div classname="c-cb"> <input id="t...
...odo-2" type="checkbox" /> <label classname="todo-label" htmlfor="todo-2"> repeat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">repeat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">repeat</span> </button> </div> </li> </ul> </div> ); } now open public/index.html and change the <title> element’s text to todomatic.
...And 8 more matches

Componentizing our Svelte app - Learn web development
some people prefer an intuitive approach and start looking at the markup and drawing boxes around every component and subcomponent that seems to have its own logic.
... eventually, we will split up our app into the following components: alert.svelte: a general notification box for communicating actions that have occurred.
... creating our todo component now we will create a todo component to encapsulate each individual todo — including the checkbox and some editing logic so you can change an existing todo.
...And 8 more matches

Vue conditional rendering: editing existing todos - Learn web development
<template> <div class="stack-small"> <div class="custom-checkbox"> <input type="checkbox" class="checkbox" :id="id" :checked="isdone" @change="$emit('checkbox-changed')" /> <label :for="id" class="checkbox-label">{{label}}</label> </div> <div class="btn-group"> <button type="button" class="btn" @click="toggletoitemeditform"> edit <span class="visually-hidden">{{label}}</span> </button> <button type="b...
...if isediting is true, we want to use that flag to display our todoitemeditform instead of the checkbox.
...add this line at the top of your <script> element: import todoitemeditform from "./todoitemeditform"; and add a components property about the props property inside the component object: components: { todoitemeditform }, now, if you go to your app and click a todo item's "edit" button, you should see the checkbox replaced with the edit form.
...And 8 more matches

Handling common HTML and CSS problems - Learn web development
in general, most core html and css functionality (such as basic html elements, css basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as flexbox, or html5 video/audio, or even more nascent, css grids or -webkit-background-clip: text.
... let's look at an example — a simple box styled with css, which has some styling provided by various css3 features: note: you can also see this example running live on github as button-with-fallback.html (also see the source code).
... background-color: #ff0000; background-color: rgba(255,0,0,1); box-shadow: inset 1px 1px 3px rgba(255,255,255,0.4), inset -1px -1px 3px rgba(0,0,0,0.4); } button:hover { background-color: rgba(255,0,0,0.5); } button:active { box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4), inset -1px -1px 3px rgba(255,255,255,0.4); } here we are providing an rgba background-color that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent inset box-shadow shades to give the button a bit of texture and depth.
...And 8 more matches

Gecko info for Windows accessibility vendors
contains more desktop-style widgets than html and follows a box layout model, rather than being text-flow based.
...in addition, if it is a role_alert, a screen reader should treat it as a message box -- that is, to read the entire contents.
... 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.
...And 8 more matches

Index
31 components.utils.sandbox needsmarkupwork, reference, référence(2), xpcom:language bindings, xpconnect components.utils.sandbox is used to create a sandbox object for use with evalinsandbox().
... 34 components.utils.evalinsandbox add-ons, developing mozilla, extensions, javascript, xpcom:language bindings, xpconnect the evalinsandbox() function enables you to evaluate javascript code inside a sandbox you've previously created using the components.utils.sandbox constructor.
... 174 iaccessiblevalue interfaces, xpcom, xpcom interface reference the iaccessiblevalue interface represents a single numerical value and should be implemented by any class that supports numerical value like progress bars and spin boxes.
...And 8 more matches

Examine and edit CSS - Firefox Developer Tools
enable/disable: if you hover over a declaration, a checkbox appears next to it: you can use this to toggle the declaration on or off.
...(note that this setting is independent of the "browser styles" checkbox in the computed view.) user-agent styles are displayed against a different background, and the link to the filename and line number contains the prefix (user agent): element {} rule the element {} rule at the top of the rules list isn't actually a css rule.
... filtering rules there's a box at the top of the rules view labeled "filter styles": as you type: any rules which don't contain the typed string at all are hidden any declarations which contain the typed string are highlighted click the "x" at the end of the search box to remove the filter.
...And 8 more matches

EffectTiming.fill - Web APIs
we have a <div> named "main" which is a container for the element we'll be animating, which is a <div> with the id "box".
... <div class="main"> <div id="box"> <div id="text">look!
... a box!</div> </div> </div> <div class="button" id="animatebutton"> animate!
...And 8 more matches

GlobalEventHandlers.onanimationiteration - Web APIs
html <div class="main"> <div id="box"> <div id="text">box</div> </div> </div> <div class="button" id="play"> begin demonstration </div> css :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: w...
...hite; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... first is the box itself.
...And 8 more matches

Storage API - Web APIs
origin 2 has no data stored in it yet; it's just an empty box waiting for content.
... box modes the actual data storage within each site storage unit is called its box.
... each site storage unit has exactly one box into which all of its data is placed, and has a box mode that describes the data retention policy for that box.
...And 8 more matches

Border-radius generator - CSS: Cascading Style Sheets
<div class="ui-input-slider" data-topic="height" data-info="height" data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> </div> <div id="output"></div> </div> <div class="group section"> <div id="radius-lock"> <div class="info"> rounded corner </div> <div class="ui-checkbox" data-topic='top-left'></div> <div class="ui-checkbox" data-topic='top-right'></div> <div class="ui-checkbox" data-topic='bottom-right'></div> <div class="ui-checkbox" data-topic='bottom-left'></div> </div> <div id="unit-selection"> <div class="info"> select border units </div> </div> </di...
...nd lower */ /* * ui component */ .ui-input-slider-container { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider-container * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right {...
...at; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em;...
...And 8 more matches

Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
flexbox was designed as a single dimensional layout, meaning that it deals with laying out items as a row or as a column — but not both at once.
...in this guide i will explain how this works, what it is designed for and what situations really require css grid layout rather than flexbox.
... there is no method in flexbox to tell items in one row to line up with items in the row above — each flex line acts like a new flex container.
...And 8 more matches

Inline formatting context - CSS: Cascading Style Sheets
inline boxes are laid out one after the other, in the direction sentences run in the writing mode in use: in a horizontal writing mode, boxes are laid out horizontally, starting on the left.
...the boxes in the horizontal writing mode run horizontally, and the vertical writing mode boxes run vertically.
... boxes forming a line are contained by a rectangular area called a line box.
...And 8 more matches

align-self - CSS: Cascading Style Sheets
in flexbox, it aligns the item on the cross axis.
... the property doesn't apply to block-level boxes, or to table cells.
... if a flexbox item's cross-axis margin is auto, then align-self is ignored.
...And 8 more matches

justify-items - CSS: Cascading Style Sheets
the css justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
... in table cell layouts, this property is ignored (more about alignment in block, absolute positioned and table layout) in flexbox layouts, this property is ignored (more about alignment in flexbox) in grid layouts, it aligns the items inside their grid areas on the inline axis (more about alignment in grid layouts) syntax /* basic keywords */ justify-items: auto; justify-items: normal; justify-items: stretch; /* positional alignment */ justify-items: center; /* pack items around the center */ justify-items: start; ...
...note that justify-items is ignored in flexbox layouts.
...And 8 more matches

justify-self - CSS: Cascading Style Sheets
the css justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.
... in table cell layouts, this property is ignored (more about alignment in block, absolute positioned and table layout) in flexbox layouts, this property is ignored (more about alignment in flexbox) in grid layouts, it aligns an item inside its grid area on the inline axis (more about alignment in grid layouts) syntax /* basic keywords */ justify-self: auto; justify-self: normal; justify-self: stretch; /* positional alignment */ justify-self: center; /* pack item around the center */ justify-self: start; /* pac...
...note that justify-self is ignored in flexbox layouts.
...And 8 more matches

gradientUnits - SVG: Scalable Vector Graphics
value userspaceonuse | objectboundingbox default value objectboundingbox animatable yes userspaceonuse this value indicates that the attributes represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill or stroke property) and then applyi...
... objectboundingbox this value indicates that the user coordinate system for the attributes is established using the bounding box of the element to which the gradient is applied and then applying the transform specified by attribute gradienttransform.
... percentages represent values relative to the bounding box for the object.
...And 8 more matches

Security best practices in extensions - Archive of obsolete content
one of the best ways to do this is to use components.utils.evalinsandbox().
... note that objects passed into the sandbox are restricted, but objects that come back out from it are not.
...for more information, refer to the evalinsandbox section.
...And 7 more matches

Block and Line Layout Cheat Sheet - Archive of obsolete content
ns_frame_sync_frame_and_view ns_frame_outside_children this flag is set if the combined area of a frame's children extend past the frame's bounding box.
... (what is a frame's "bounding box"?) if this flag is set, then <code>moverflowarea</code> will contain the total area of the frame, including the overflow.
... nslinebox a block consists of lines and other blocks, stacked vertically.
...And 7 more matches

pack - Archive of obsolete content
« xul reference home pack type: one of the values below the pack attribute specifies where child elements of the box are placed when the box is larger that the size of the children.
... for boxes with horizontal orientation, it is used to indicate the position of children horizontally.
... for boxes with vertical orientation, it is used to indicate the position of children vertically.
...And 7 more matches

treecol.type - Archive of obsolete content
checkbox the content of the columns are checkboxes.
... if you are using type="checkbox", then the tree and each treecol must be editable.
... you need to apply css to make the checkbox toggle.
...And 7 more matches

Grids - Archive of obsolete content
if you wanted one particular cell to contain multiple elements, you can use a nested hbox or other box element.
... an hbox is a single element but you can put as many elements that you want inside it.
... for example: example 2 : source view <grid flex="1"> <columns> <column/> <column flex="1"/> </columns> <rows> <row> <label control="doctitle" value="document title:"/> <textbox id="doctitle" flex="1"/> </row> <row> <label control="docpath" value="path:"/> <hbox flex="1"> <textbox id="docpath" flex="1"/> <button label="browse..."/> </hbox> </row> </rows> </grid> notice in the image how the first column of elements containing the labels has only a single element in each row.
...And 7 more matches

XBL Example - Archive of obsolete content
example 1 : source <binding id="slideshow"> <content> <xul:vbox flex="1"> <xul:deck xbl:inherits="selectedindex" selectedindex="0" flex="1"> <children/> </xul:deck> <xul:hbox> <xul:button xbl:inherits="label=previoustext"/> <xul:label flex="1"/> <xul:button xbl:inherits="label=nexttext"/> </xul:hbox> </xul:vbox> </content> </binding> this binding creates the slideshow structure that we want.
... <box class="slideshow" previoustext="previous" nexttext="next" flex="1"> <button label="button 1"/> <checkbox label="checkbox 2"/> <textbox/> </box> the style sheet used here is: .slideshow { -moz-binding: url("slideshow.xml#slideshow"); } the first button, button 1 has been used as the first page of the deck.
...this returns the vertical box, so to get the deck, we need to get the first child node of the box.
...And 7 more matches

XBL Inheritance - Archive of obsolete content
for example, the following binding creates a textbox which adds the text 'http://www' to the beginning of its value when the f4 key is pressed.
... example 1 : source <binding id="textboxwithhttp" extends="chrome://global/content/bindings/textbox.xml#textbox"> <handlers> <handler event="keypress" keycode="vk_f4"> this.value="http://www"+value; </handler> </handlers> </binding> the xbl here extends from the xul textbox element.
... the url given in the extends attribute above is the url of the textbox binding.
...And 7 more matches

Accessibility/XUL Accessibility Reference - Archive of obsolete content
caption see groupbox checkbox <checkbox label='<!--label text-->' /> colorpicker <colorpicker type="button" palettename="standard" /> colorpicker appears to read color values out if the colorpicker can get focus in the first place.
... groupbox <groupbox> <caption label="<!--group label-->" /> <hbox> <button label="<!--button text-->" /> </hbox> </groupbox> iframe jaws 7.10 issues testing with jaws 7.10, use of an iframe element causes many, unpredictable issues with xul inside of the iframe.
... image <image src="images/img.xbm" tooltiptext='<!--image label-->'/> key see keyboard shortcut tutorial keyset see keyboard shortcut tutorial listbox <label control='listid'><!--label text--></label> <listbox id="listid"> <listitem value="val" label="<!--item text-->"/> </listbox> <label control='listid2' value='<!--list label-->' /> <listbox rows="5" id='listid2'> <listcols> <listcol/> <listcol/> <listcol/> </listcols> <listhead> <listheader label="name" /> <listheader label="sex" /> <listheader label="color" /> </listhead> <listitem> <label value="<!--pearl-->" /> <label value="<!--female-->" /...
...And 7 more matches

toolbar - Archive of obsolete content
it is a type of box that defaults to horizontal orientation.
... it can be collapsed with a grippy when the toolbar is placed inside a toolbox.
...these are toolbars that are not children of a toolbox element.
...And 7 more matches

Building up a basic demo with Babylon.js - Game development
let's start by defining the geometry for a box shape — add the following new code below your previous additions: var box = babylon.mesh.createbox("box", 2, scene); a mesh is a way the engine creates geometric shapes, so material can be easily applied to them later on.
... in this case we're creating a box using the mesh.createbox method with it's own name, a size of 2, and a declaration of which scene we want it added to.
...for the box size) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you.
...And 7 more matches

Handling different text directions - Learn web development
we create borders on the top, right, bottom, and left of a box, for example.
...in this next example i have two boxes that contain a heading and a paragraph.
... let's take a look at our two boxes again — one with a horizontal-tb writing mode and one with vertical-rl.
...And 7 more matches

Test your skills: sizing - Learn web development
task one in this task, you have two boxes.
...test this box by removing the content from the html to make sure you still get a 100 pixel tall box even with no content.
... the second box should be fixed at 100 pixels tall, so that content will overflow if there is too much.
...And 7 more matches

Basic math in JavaScript — numbers and operators - Learn web development
active learning: sizing a canvas box in this exercise, you will manipulate some numbers and operators to change the size of a box.
... the box is drawn using a browser api called the canvas api.
...the width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 50.
...And 7 more matches

Styling Vue components with CSS - Learn web development
add the following contents to the reset.css file: /*reset.css*/ /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-f...
... margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } /* end global styles */ #app { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; padding-top: 0; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { #app { padding: 4rem; } } #app > * { max-width: 50rem; margin-left: auto; margin-right: auto; } #app > form { max-width: 100%; } #app h1 { display: block; min-width: 100%; width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } </style> if yo...
... to use the scoped modifier, create a <style> element inside todoitem.vue, at the bottom of the file, and give it a scoped attribute: <style scoped> </style> next, copy the following css into the newly created <style> element: .custom-checkbox > .checkbox-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 16px; font-size: 1rem; line-height: 1.25; color: #0b0c0c; display: block; margin-bottom: 5px; } .custom-checkbox > .checkbox { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing...
...And 7 more matches

How to implement a custom autocomplete search component
the xul textbox element supports an autocomplete mechanism that is used to create a textbox with a popup containing a list of possible completions for what the user has started to type.
... to use autocomplete with a xul textbox, all you need to do is set some attributes: <textbox type="autocomplete" autocompletesearch="history"/> the type="autocomplete" turns on the autocomplete mechanism and the autocompletesearch="history" sets the source for the autocomplete.
... there are more options and features, see xul:textbox_(firefox_autocomplete) for more details.
...And 7 more matches

JSAPI User Guide
one way to keep user a from accessing user b's sensitive data or dangerous functions is to keep each user's code in a separate sandbox.
...how can a malicious script get a reference to an object from another sandbox?
...even global variables are per-sandbox.
...And 7 more matches

IAccessibleText
characterextents() returns the bounding box of the specified position.
...because it does not represent an existing character its bounding box is defined in relation to preceding characters.
... it should be roughly equivalent to the bounding box of some character when inserted at the end of the text().
...And 7 more matches

nsIDOMClientRect
dom/interfaces/base/nsidomclientrect.idlscriptable represents a rectangular box.
... the type of box is specified by the method that returns such an object.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) attributes attribute type description bottom float y-coordinate, relative to the viewport origin, of the bottom of the rectangle box.
...And 7 more matches

nsIXPConnect
void clearallwrappednativesecuritypolicies(); nsixpconnectjsobjectholder createsandbox(in jscontextptr cx, in nsiprincipal principal); native code only!
... void debugdumpjsstack(in prbool showargs, in prbool showlocals, in prbool showthisprops); void debugdumpobject(in nsisupports acomobj, in short depth); [noscript,notxpcom] prbool definedomquickstubs(in jscontextptr cx, in jsobjectptr proto, in pruint32 flags, in pruint32 interfacecount, [array, size_is(interfacecount)] in nsiidptr interfacearray); jsval evalinsandboxobject(in astring source, in jscontextptr cx, in nsixpconnectjsobjectholder sandbox, in prbool returnstringonly); native code only!
... exceptions thrown missing exception missing description native code only!createsandbox create a sandbox for evaluating code in isolation using evalinsandboxobject().
...And 7 more matches

Tutorial: Set a breakpoint - Firefox Developer Tools
since the debugger api is only available to privileged javascript code, you’ll need to use the browser content toolbox to try it out.
... to do this, open the firefox developer tools, click on the options gear at the upper right of the toolbox, and make sure that both “enable browser chrome and add-on debugging toolboxes” and “enable remote debugging” are checked.
... save the following text to an html file: <div onclick="report('the best div');">click me!</div> <div onclick="report('another great div');">or me!</div> <script> function report(what) { console.log('clicked: ' + what); } </script> visit the html file in your browser, and open the browser content toolbox by opening the firefox menu, choosing “web developer”, and then “browser content toolbox”.
...And 7 more matches

All keyboard shortcuts - Firefox Developer Tools
the first section lists the shortcut for opening each tool and the second section lists shortcuts that are applicable to the toolbox itself.
...the same shortcuts will work to close tools hosted in the toolbox, if the tool is active.
... command windows macos linux open toolbox (with the most recent tool activated) ctrl + shift + i cmd + opt + i ctrl + shift + i bring toolbox to foreground (if the toolbox is in a separate window and not in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 close toolbox (if the toolbox is in a separate window and in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 open web console 1 ctrl + shift + k cmd + opt + k ctrl + shift + k toggle "pick an element from the page" (opens the toolbox and/or focus the inspector tab) ctr...
...And 7 more matches

Element.getClientRects() - Web APIs
the getclientrects() method of the element interface returns a collection of domrect objects that indicate the bounding rectangles for each css border box in a client.
... syntax let rectcollection = object.getclientrects(); return value the returned value is a collection of domrect objects, one for each css border box associated with the element.
... each domrect object contains read-only left, top, right and bottom properties describing the border box, in pixels, with the top-left relative to the top-left of the viewport.
...And 7 more matches

Capabilities, constraints, and settings - Web APIs
edit the constraint sets for the video and audio tracks in the edit boxes on the left, then click the "apply constraints" button to try them out.
... the actual settings the browser selected and is using are shown in the boxes on the right.
... videoconstrainteditor.value = videodefaultconstraintstring; audioconstrainteditor.value = audiodefaultconstraintstring; updating the settings display to the right of each of the constraint set editors is a second text box which we use to display the current configuration of the track's configurable properties.
...And 7 more matches

CSS Animations tips and tricks - CSS: Cascading Style Sheets
<div class="box"> </div> <div class="runbutton">click me to run the animation</div> css content now we'll define the animation itself using css.
... .runbutton { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 12px; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } @keyframes colorchange { 0% { background: yellow } 100% { background: blue } } .box { width: 100px; height: 100px; border: 1px solid black; } .changing { animation: colorchange 2s; } there are two classes here.
... the "box" class is the basic description of the box's appearance, without any animation information included.
...And 7 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"...
...i’m using a flexbox on the navigation to display it in a row spaced out.
...i then use a flexbox to display the navigation as a column.
...And 7 more matches

<color> - CSS: Cascading Style Sheets
captiontext text in caption, size box, and scrollbar arrow box.
... mozilla system color extensions -moz-buttondefault the border color that goes around buttons that represent the default action for a dialog box.
... -moz-combobox background color for combo-boxes.
...And 7 more matches

<input type="tel"> - HTML: Hypertext Markup Language
a placeholder is a value that demonstrates the form the value should take by presenting an example of a valid value, which is displayed inside the edit box when the element's value is "".
... once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.
... <input id="telno" name="telno" type="tel" placeholder="123-4567-8901"> controlling the input size you can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.
...And 7 more matches

Browser detection using the user agent - HTTP
this effect can be easily achieved using css flexboxes, sometimes with floats as a partial fallback.
...let us imagine a page composed of boxes of information; each box is about a different feline breed or canine breed.
... each box has an image, an overview, and a historical funfact.
...And 7 more matches

Content Processes - Archive of obsolete content
as explained earlier, firefox doesn't yet use separate processes for tabs or add-ons, so instead, each content script is loaded in a sandbox.
... sandboxes were explained this article.
... accessing the dom the global for the content sandbox has the window object as its prototype.
...And 6 more matches

/loader - Archive of obsolete content
secure each module in an isolated js sandbox and makes any capability imports explicit via calls to the require() function.
... globals each module loaded via the loader instance is secured in own js sandbox.
... load() the load() function takes loader and loads the given module into it: let loader = loader(options); let module = module('foo/bar', 'resource:///modules/foo/bar.js'); load(loader, module); sandbox() the sandbox() function is a utility function for creating js sandboxes.
...And 6 more matches

Adding windows and dialogs - Archive of obsolete content
the prompt service has a very rich set of functions that allow different kinds of inputs, such as text, passwords, usernames and passwords, and checkboxes that can be used for "never ask this again"-type dialogs.
... groupboxes the groupbox element should be easy to understand: it groups a series of xul controls together.
... it's a box container with styling that is usually a visible border around its contents, so that it's clear what is being grouped together.
...And 6 more matches

CSS3 - Archive of obsolete content
it brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.
... css basic user interface module level 3 recommendation since june 21st, 2018 adds: the ability to tweak the box model using the css box-sizing property.
... at risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module.
...And 6 more matches

Tamarin Build System Documentation - Archive of obsolete content
tamarin-redux mercurial builds are displayed in the top 3 sections: compile, smoke, test sandbox builds are displayed in next 3 sections: sandbox compile, sandbox smoke, sandbox test tamarin-central is considered a "sandbox" and will appear under sandbox phase what are the build phases?
... the compile phase compiles all of the tamarin source code and builds all of the shell executables, any errors will stop the phase and a red box will appear on the slave where the error occurred.
... checkins (hg push) to http://hg.mozilla.org/tamarin-redux and sandbox requests will trigger a buildbot build when all build slaves are idle the next build begins before the build begins buildbot waits for 2 minutes of no checkin activity the build system prioritizes tamarin-redux checkins over sandbox builds when several tamarin-redux checkins occur the newest change is built including all checkins since the last build each sandbox build occurs in the order they we...
...And 6 more matches

Using Recursive Templates - Archive of obsolete content
<groupbox type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <action> <vbox uri="?" class="indent"> <label value="?name"/> </vbox> </action> </template> </groupbox> in this simplified example, the xpath expression just gets the list of child elements of the reference node.
... for the outermost iteration, a vbox is created with a child label.
...the content of the action body is again generated for each result, but instead of being inserted inside the outermost groupbox, this new content is inserted inside the content generated from the previous iteration.
...And 6 more matches

Anonymous Content - Archive of obsolete content
filename input field example another example, this time for a field for entering a filename: <binding id="fileentry"> <content> <textbox/> <button label="browse..."/> </content> </binding> attaching this binding to an element will cause it to contain a field for entering text, followed by a browse button.
...for example, a simplified version of an editable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input fiel...
...the resulting content would be: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> <textbox flex="1"/> <button src="chrome://global/skin/images/dropbox.jpg"/> </menu> includes attribute in some cases, you may wish to only include specific types of content and not others.
...And 6 more matches

Introduction to XBL - Archive of obsolete content
the basic appearance of all elements, such as scroll bars and check boxes may be modified by adjusting the style or by setting attributes on the element.
... binding example the box is generic enough that you can use it to create custom widgets (although you can use any element, even one you make up yourself).
... by assigning a class to a box tag, you can associate a binding to only those boxes that belong to that class.
...And 6 more matches

More Event Handlers - Archive of obsolete content
in the example below, currenttarget is always the vbox, whereas target would be the specific element, either the button or checkbox, that was activated.
... example 1 : source view <vbox oncommand="alert(event.currenttarget.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing.
...example 2 : source view <hbox id="outerbox"> <button id="okbutton" label="ok"/> </hbox> <script> function buttonpressed(event){ alert('button was pressed!'); } function boxpressed(event){ alert('box was pressed!'); event.stoppropagation(); } var button = document.getelementbyid("okbutton"); button.addeventlistener('command',buttonpressed,true); var outerbox = document.getelementbyid("outerbox"); outerbox.addeventl...
...And 6 more matches

More Menu Features - Archive of obsolete content
the example below creates a simple submenu inside the file menu example 1 : source view <toolbox flex="1"> <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menu id="new-menu" label="new"> <menupopup id="new-popup"> <menuitem label="window"/> <menuitem label="message"/> </menupopup> </menu> <menuitem label="open"/> <menuitem label="save"/> <menuseparator...
.../> <menuitem label="exit"/> </menupopup> </menu> </menubar> </toolbox> adding a menu to our find files example let's add a menu to the find files dialog.
... <toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="file" accesskey="f"> <menupopup id="file-popup"> <menuitem label="open search..." accesskey="o"/> <menuitem label="save search..." accesskey="s"/> <menuseparator/> <menuitem label="close" accesskey="c"/> </menupopup> </menu> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem label="cut" accesskey="t"/> <menuitem label="copy" accesskey="c"/> <menuitem label="paste" accesskey="p" disabled="true"/> </menupopup> </menu> </menubar> <toolbar id="findfiles-toolbar> here we have added two menus with various...
...And 6 more matches

Simple Menu Bars - Archive of obsolete content
the menu bar can optionally be placed inside a toolbox and the menu would work just like any other toolbar.
... menupopup the popup box that appears when you click on the menu title.
... this box contains the list of menu commands.
...And 6 more matches

listitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single row in a listbox.
... attributes accesskey, checked, command, crop, current, disabled, image, label, preference, selected, tabindex, type, value properties accesskey, accessible, checked, control, crop, current, disabled, image, label, selected, tabindex, value style classes listitem-iconic examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... for buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect.
...And 6 more matches

Building up a basic demo with the PlayCanvas engine - Game development
note: an entity is any object used in the scene — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
...let's start by defining the geometry for a cube shape — add the following new code below your previous additions: var box = new pc.entity(); box.addcomponent("model", { type: "box" }); app.root.addchild(box); box.rotate(10, 15, 0); it will create an entity with the box model component and add it to the root of the application, our scene.
... we also rotate the box a bit to show that it's actually a 3d cube and not a square.
...And 6 more matches

Starting our Svelte Todo list app - Learn web development
</button> <button class="btn btn__primary todo-edit" type="submit"> save <span class="visually-hidden">new name for create a svelte starter app</span> </button> </div> </form> </div> </li> <!-- todo-2 --> <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-2" checked/> <label for="todo-2" class="todo-label"> create your first component </label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">create your first component</span> </button> <button type="button" class="btn btn__danger"> ...
... delete <span class="visually-hidden">create your first component</span> </button> </div> </div> </li> <!-- todo-3 --> <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-3" /> <label for="todo-3" class="todo-label"> complete the rest of the tutorial </label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">complete the rest of the tutorial</span> </button> <button type="button" class="btn btn__danger"> delete <span class="visually-hidden">complete the rest of the tutorial</span> </butto...
...but let's have a look at the markup and see how it relates to our desired features: a label and a text box for entering new tasks.
...And 6 more matches

Gecko Roles
role_dialog represents a dialog box or message box.
... role_list represents a list box, allowing the user to select one or more items.
... role_statictext represents read-only text, such as labels for other controls or instructions in a dialog box.
...And 6 more matches

nsIAccessibleProvider
xul controls constants constant value description xulalert 0x00001001 xulbutton 0x00001002 xulcheckbox 0x00001003 xulcolorpicker 0x00001004 xulcolorpickertile 0x00001005 xulcombobox 0x00001006 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e x...
... xultabbox 0x00001018 a combination of a tabs object and a tabpanels object.
... xultabs 0x00001019 the collection of tab objects, usable in the tabbox and independent of as well.
...And 6 more matches

Index - Firefox Developer Tools
15 browser toolbox debug, firefox, javascript the browser toolbox enables you to debug add-ons and the browser's own javascript code rather than just web pages like the normal toolbox.
... the browser toolbox's context is the whole browser rather than just single page on a single tab.
...to enable it, open the developer tool settings, and check the "memory" box under "default firefox developer tools": 40 dom allocation example this article describes a very simple web page that we'll use to illustrate some features of the memory tool.
...And 6 more matches

GlobalEventHandlers.onanimationcancel - Web APIs
example html <div class="main"> <div id="box" onanimationcancel="handlecancelevent(event);"> <div id="text">box</div> </div> </div> <div class="button" id="togglebox"> hide the box </div> <pre id="log"></pre> css :root { --boxwidth: 50px; } .main { width: 300px; height: 300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; m...
... color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... first is the box itself, with all its properties, including animation, defined.
...And 6 more matches

SubtleCrypto.sign() - Web APIs
rsassa-pkcs1-v1_5 this code fetches the contents of a text box, encodes it for signing, and signs it with a private key.
... /* fetch the contents of the "message" textbox, and encode it in a form we can use for the sign operation.
... */ function getmessageencoding() { const messagebox = document.queryselector(".rsassa-pkcs1 #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await window.crypto.subtle.sign( "rsassa-pkcs1-v1_5", privatekey, encoded ); rsa-pss this code fetches the contents of a text box, encodes it for signing, and signs it with a private key.
...And 6 more matches

WebGLRenderingContext.scissor() - Web APIs
the webglrenderingcontext.scissor() method of the webgl api sets a scissor box, which limits the drawing to a specified rectangle.
... syntax void gl.scissor(x, y, width, height); parameters x a glint specifying the horizontal coordinate for the lower left corner of the box.
... y a glint specifying the vertical coordinate for the lower left corner of the box.
...And 6 more matches

Flow Layout and Overflow - CSS: Cascading Style Sheets
giving an element a fixed height and width, then adding significant content to the box, creates a basic overflow example: the content goes into the box.
... once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content.
... using a value of scroll contains the content in its box and add scrollbars to enable viewing it.
...And 6 more matches

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="wrapper"> <div>one</div> ...
...to cause all created rows to be 100 pixels tall for example you would use: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four <br>this cell <br>has extra <br>content.
...And 6 more matches

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
visual not logical re-ordering any time you reorder things with grid layout – or with flexbox – you only perform visual reordering.
... in this example i have used grid to lay out a set of boxes that contain links.
... i have used the line-based placement properties to position box 1 on the second row of the grid.
...And 6 more matches

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
the float no longer applies, and i can use the css box alignment property align-self to align my content to the end of the container: * {box-sizing: border-box;} img { max-width: 100%; display: block; } .media { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 400px; display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "img content"; margin-bottom: 1em; } .me...
...to create gaps between the cards, i use a margin on the items, and then a negative margin on the container: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none...
...this means i don’t get a final margin on the last row of boxes.
...And 6 more matches

Grid template areas - CSS: Cascading Style Sheets
.box1 { grid-area: 1 / 1 / 4 / 2; } what we are doing here when defining all four lines, is defining the area by specifying the lines that enclose that area.
... .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sid...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-ro...
...And 6 more matches

CSS Layout cookbook - CSS: Cascading Style Sheets
the recipes recipe description layout methods media objects a two-column box with an image on one side and descriptive text on the other, e.g.
... css grid, float fallback, fit-content() sizing columns when to choose multi-column layout, flexbox or grid for your columns.
... css grid, multicol, flexbox center an element how to center an item horizontally and vertically.
...And 6 more matches

Mozilla CSS extensions - CSS: Cascading Style Sheets
b -moz-binding -moz-border-bottom-colors -moz-border-left-colors -moz-border-right-colors -moz-border-top-colors -moz-box-align -moz-box-direction -moz-box-flex -moz-box-ordinal-group -moz-box-orient -moz-box-pack c–i -moz-context-properties -moz-float-edge -moz-force-broken-image-icon -moz-image-region o -moz-orient -moz-osx-font-smoothing -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright overflow-cl...
...ip-box overflow-clip-box-block overflow-clip-box-inline s–z -moz-stack-sizing :-moz-system-metric(images-in-menus) :-moz-system-metric(mac-graphite-theme) :-moz-system-metric(scrollbar-end-backward) :-moz-system-metric(scrollbar-end-forward) :-moz-system-metric(scrollbar-start-backward) :-moz-system-metric(scrollbar-start-forward) :-moz-system-metric(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus -moz-user-input -moz-user-modify -moz-window-dragging -moz-window-shadow formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
... -moz-animation-play-state [prefixed version still accepted] -moz-animation-timing-function [prefixed version still accepted] -moz-appearance b -moz-backface-visibility [prefixed version still accepted] -moz-background-clipobsolete since gecko 2 -moz-background-originobsolete since gecko 2 -moz-background-inline-policyobsolete since gecko 32 [superseded by the standard version box-decoration-break] -moz-background-sizeobsolete since gecko 2 -moz-border-end [superseded by the standard version border-inline-end] -moz-border-end-color [superseded by the standard version border-inline-end-color] -moz-border-end-style [superseded by the standard version border-inline-end-style] -moz-border-end-width [superseded by the standard version border-inline-end-width] -moz...
...And 6 more matches

align-items - CSS: Cascading Style Sheets
in flexbox, it controls the alignment of items on the cross axis.
... baseline; /* overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /* global values */ align-items: inherit; align-items: initial; align-items: unset; values normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
... for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
...And 6 more matches

<basic-shape> - CSS: Cascading Style Sheets
when creating a shape, the reference box is defined by each property that uses <basic-shape> values.
... the coordinate system for the shape has its origin at the top-left corner of the reference box, with the x-axis running to the right and the y-axis running downwards.
... all the lengths expressed in percentages are resolved from the used dimensions of the reference box.
...And 6 more matches

transform-origin - CSS: Cascading Style Sheets
values x-offset is a <length> or a <percentage> describing how far from the left edge of the box the origin of the transform is set.
... y-offset is a <length> or a <percentage> describing how far from the top edge of the box the origin of the transform is set.
... x-offset-keyword is one of the left, right, or center keyword describing how far from the left edge of the box the origin of the transform is set.
...And 6 more matches

transition-duration - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-functio...
...n: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration:0.5s; transition-timi...
...ng-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-pr...
...And 6 more matches

SVG documentation index - SVG: Scalable Vector Graphics
33 bbox deprecated, svg, svg attribute the bbox attribute defines the maximal bounding box of a font.
... 61 dominant-baseline reference, svg, svg attribute the dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box’s text and inline-level contents.
... it also indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context.
...And 6 more matches

Patterns - SVG: Scalable Vector Graphics
it defaults to "objectboundingbox" as it did above, so a value of 1 is scaled to the width/height of the object you're applying the pattern to.
...this means the pattern's width/height is only 0.25 of the total box size.
... to make this work in the example above, we had to consider the size of our box (200 pixels) and the fact that we wanted the pattern to repeat itself 4 times horizontally and vertically.
...And 6 more matches

Modules - Archive of obsolete content
this is made possible by the use of sandboxes.
... each sandbox lives in its own compartment.
...we will show how sandboxes and compartments can be used to improve security in our module system.
...And 5 more matches

XUL user interfaces - Archive of obsolete content
ng sure that you scroll to get all of it: <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="style7.css"?> <!doctype window> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="css getting started - xul demonstration" onload="init();"> <script type="application/javascript" src="script7.js"/> <label class="head-1" value="xul demonstration"/> <vbox> <groupbox class="demo-group"> <caption label="day of week calculator"/> <grid> <columns> <column/> <column/> </columns> <rows> <row> <label class="text-prompt" value="date:" accesskey="d" control="date-text"/> <textbox id="date-text" type="timed" timeout="750" oncommand="refresh();"/> </r...
...ow> <row> <label value="day:"/> <hbox id="day-box"> <label class="day" value="sunday" disabled="true"/> <label class="day" value="monday" disabled="true"/> <label class="day" value="tuesday" disabled="true"/> <label class="day" value="wednesday" disabled="true"/> <label class="day" value="thursday" disabled="true"/> <label class="day" value="friday" disabled="true"/> <label class="day" value="saturday" disabled="true"/> </hbox> </row> </rows> </grid> <hbox class="buttons"> <button id="clear" label="clear" accesskey="c" oncommand="cleardate();"/> <button id="today" label="today" accesskey="t" oncommand="settoday();"/...
...> </hbox> </groupbox> <statusbar> <statusbarpanel id="status"/> </statusbar> </vbox> </window> make a new css file, style7.css.
...And 5 more matches

Index of archived content - Archive of obsolete content
core/namespace core/promise dev/panel event/core event/target frame/hidden-frame frame/utils fs/path io/byte-streams io/file io/text-streams lang/functional lang/type loader/cuddlefish loader/sandbox net/url net/xhr places/bookmarks places/favicon places/history platform/xpcom preferences/event-target preferences/service remote/child remote/parent stylesheet/style stylesheet/utils system/child_process ...
... open a web page troubleshooting unit testing using xpcom without chrome using third-party modules (jpm) bootstrapped extensions code snippets alerts and notifications autocomplete bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding window handles forms related code snippets ...
...pprefix miscellaneous modules on page load page loading post data to window preferences progress listeners queryselector rosetta running applications svg animation svg general scrollbar sidebar stringview tabbox toolbar tree uri parsing view source for xul applications windows xml-related code snippets xml:base support in old browsers xpath getattributens common pitfalls communication between html an...
...And 5 more matches

Notes on HTML Reflow - Archive of obsolete content
the xul box layout model, on the other hand, is constraint based , meaning that geometric preferences and constraints of neighboring elements are taken into consideration before the elements' final geometry can be computed.
... the box is the geometric primitive for the xul layout model.
...in reflowdirtychild, the parent frame sets the ns_frame_has_dirty_child state bit on itself, and does any bookkeeping necessary to remember which child is dirty (for example, the block frame marks the linebox dirty that contains the child frame).
...And 5 more matches

Building accessible custom components in XUL - Archive of obsolete content
firefox ships with a tabbox element and a tree element, and these elements are fully accessible out-of-the-box.
...when the user presses enter, we replace the currently focused xul label element with a xul textbox element, copy the initial value over to the textbox element, and call its focus and select methods to set focus to the textbox and select the entire value.
... we register two event handlers on the textbox: onkeypress and onblur.
...And 5 more matches

appendNotification - Archive of obsolete content
eventcallback optional - a javascript function to call to notify you of interesting things that happen with the notification box.
... see notification box events.
... priority levels (defined as properties of notificationbox) : priority_info_low priority_info_medium priority_info_high priority_warning_low priority_warning_medium priority_warning_high priority_critical_low priority_critical_medium priority_critical_high priority_critical_block buttons : the buttons argument is an array of button descriptions.
...And 5 more matches

Document Object Model - Archive of obsolete content
for example, we could get the state of a check box by using the code below: var state = document.getelementbyid('casecheck').checked; the value casecheck corresponds to the id of the case sensitive checkbox.
...we could do something similar for the other check box, or any other element that has an id.
...<splitter id="splitbar" resizeafter="grow" hidden="true"/> <hbox> <progressmeter id="progmeter" value="50%" style="margin: 4px;" hidden="true"/> we've added the hidden attribute and set the value to true.
...And 5 more matches

Popup Menus - Archive of obsolete content
it has no special attributes and is a type of box.
...typically, this will be a specific button or a box.
...the sample below shows how we might do this: example 1 : source view <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <box context="clipmenu"> <label value="context click for menu"/> </box> here, the menupopup has been associated with a box.
...And 5 more matches

Trees - Archive of obsolete content
in some ways, a tree has some similarities with the listbox.
...the tree also supports nested rows, whereas the listbox does not.
... however, listboxes may contain any type of content, whereas trees may only contain text and images.
...And 5 more matches

notification - Archive of obsolete content
it will normally be used as part of a notificationbox.
... the box includes a button which the user can use to close the box.
... persistence type: integer the persistence may be set to a non-zero value so that the notificationbox's removetransientnotifications method does not remove them.
...And 5 more matches

prefwindow - Archive of obsolete content
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <checkbox label="automatically save backups" preference="pref-backup"/> <textbox label="duration:" preference="pref-backupduration"/> </prefpane> </prefwindow> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
... buttonalign type: string the value of the align attribute for the box containing the buttons.
... buttondir type: string the value of the dir attribute for the box containing the buttons.
...And 5 more matches

3D collision detection - Game development
axis-aligned bounding boxes as with 2d collision detection, axis-aligned bounding boxes (aabb) are the quickest algorithm to determine whether the two game entities are overlapping or not.
... this consists of wrapping game entities in a non-rotated (thus axis-aligned) box and checking the positions of these boxes in the 3d coordinate space to see if they are overlapping.
...the overlapping area between two non-rotated boxes can be checked with logical comparisons alone, whereas rotated boxes require additional trigonometric operations, which are slower to calculate.
...And 5 more matches

CSS layout - Learn web development
at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside.
... now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another.
... we have covered the necessary prerequisites so we can now dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about.
...And 5 more matches

Example 1 - Learn web development
ry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-bo...
...x; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-rad...
...ius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">s...
...And 5 more matches

Mozilla accessibility architecture
examples of accessible role constants are role_button, role_checkbox and role_list, although they can have slightly different names and values in each api.
...for example, tables support nsiaccessibletable, text supports nsiaccessibletext and edit boxes support nsieditabletext., although this code has been moved into the atk specific directories because it is not currently used in windows.
... the implementations for each kind of object (document, text, table, edit box, button, etc.) exist in accessible/src.
...And 5 more matches

JIT Optimization Strategies
getprop_unboxed similar to getprop_definiteslot.
... unboxed property reads are possible on properties which satisfy all the characteristics of a definite slot, and additionally have been observed to only store values of one kind of value.
... consider the following constructor: function point(x, y) { this.x = x; this.y = y; } if only integers are ever stored in the x and y properties, then the instances of point will be represented in an "unboxed" mode - with the property values stored as raw 4-byte values within the object.
...And 5 more matches

Building the WebLock UI
i), we'll assume the strings we get from the ui itself are urls we actually want to write to the white list: function addthissite() { var tf = document.getelementbyid("dialog.input"); // weblock is global and declared above weblock.addsite(tf.value); } this javascript function can be called directly from the xul widget, where the input string is retrieved as the value property of the textbox element.
...within a xul application file, elements like <button/>, <menu/>, and <checkbox/> can be hooked up to an event model, to scripts, and to the xpcom interfaces that carry out a lot of the browser functionality in mozilla.
...at the top of all xul documents, an xml declaration is followed by the root element for the document, which is usually <window/> but for dialog boxes can also be the element <dialog/>.
...And 5 more matches

nsIMsgHeaderParser
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) to create an instance, use: var msgheaderparser = components.classes["@mozilla.org/messenger/headerparser;1"] .createinstance(components.interfaces.nsimsgheaderparser); method overview string extractheaderaddressmailboxes(in string line); void extractheaderaddressname(in string line, out string name); void extractheaderaddressnames(in string line, out string usernames); astring makefulladdress(in astring aname, in astring aaddress); string makefulladdressstring(in string aname, in string aaddress); wstring makefulladdresswstring(in wstring name, in wstring addr); obs...
... wstring reformatunquotedaddresses(in wstring line); void removeduplicateaddresses(in string addrs, in string other_addrs, in prbool removealiasestome, out string newaddress); string unquotephraseoraddr(in string line, in boolean preserveintegrity); wstring unquotephraseoraddrwstring(in wstring line, in boolean preserveintegrity); methods extractheaderaddressmailboxes() given a string which contains a list of header addresses, returns a comma-separated list of just the 'mailbox' portions.
... if any of the addresses doesn't have a mailbox, then the user name is used instead.
...And 5 more matches

Demo Addon
demo 2 - find the inbox this demo shows various information: it lists all folders of an account (in this case the first one) and marks the inbox folder with a *.
... furthermore, it shows some messages in the inbox and lists a random attachment.
... we start with listing all folders and marking the inbox: let server = accounts[0].incomingserver; let folder = server.rootfolder; // ...
...And 5 more matches

HTMLInputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,3...
... properties that apply only to elements of type checkbox or radio checked boolean: returns / sets the current state of the element when type is checkbox or radio.
... defaultchecked boolean: returns / sets the default state of a radio button or checkbox as originally specified in html that created this object.
...And 5 more matches

SubtleCrypto.verify() - Web APIs
/* fetch the contents of the "message" textbox, and encode it in a form we can use for sign operation.
... */ function getmessageencoding() { const messagebox = document.queryselector(".rsassa-pkcs1 #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } /* fetch the encoded message-to-sign and verify it against the stored signature.
... /* fetch the contents of the "message" textbox, and encode it in a form we can use for sign operation.
...And 5 more matches

Coordinate systems - CSS: Cascading Style Sheets
this simple example creates a set of nested boxes.
... whenever the mouse enters, moves around inside, or exits the inner box, the corresponding event is handled by updating a set of informational messages within the box, listing out the current mouse coordinates in each of the four available coordinate systems.
... displaying the coordinates as we'll see in the html, the inner box (the one we're watching for events on) contains several paragraphs; one for each of the four coordinate systems we'll be reporting on.
...And 5 more matches

Layout using named grid lines - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } when defining the grid, i name my lines inside square brackets.
... .box1 { grid-column-start: main-start; grid-row-start: main-start; grid-row-end: main-end; } .box2 { grid-column-start: content-end; grid-row-start: main-start; grid-row-end: content-end; } .box3 { grid-column-start: content-start; grid-row-start: main-start; } .box4 { grid-column-start: content-start; grid-column-end: main-end; grid-row-start: content-end; } <div class="wra...
...pper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> everything else about line-based placement still works in the same way and you can mix named lines and line numbers.
...And 5 more matches

Overview of CSS Shapes - CSS: Cascading Style Sheets
the result is that the content now curves around the circular shape rather than following the rectangle created by the box of the image.
...if you do not have shapes support in the browser, the user will see content flowing around the sides of a rectangular box as before.
...the specification defines four <basic-shape> values, which are: inset() circle() ellipse() polygon() using the value inset() wraps text around a rectangular shape however you are able to add offset values, thus pulling the line boxes of any wrapping content closer to the object than would otherwise happen.
...And 5 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
nput[data-topic="alpha"] > .name { width: 60px; } .ui-color-picker .input[data-topic="alpha"] > input { float: right; } .ui-color-picker .input[data-topic="hexa"] { width: auto; float: right; margin: 6px 8px 0 0; } .ui-color-picker .input[data-topic="hexa"] > .name { display: none; } .ui-color-picker .input[data-topic="hexa"] > input { width: 90px; height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("images/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; ba...
...ker .switch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; line-height: inherit; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("arrows.png") center left no-repeat; } .ui-input-slider-right { background: url...
...px; padding: 0; text-align: center; } /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-size: 12px; background-image: url("dropdown_arrow.svg"); background-position: right 0.3em center; background-repeat: no-repeat; background-color: #359740; background-size: 1.1em; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor: pointer; background-color: #208b20; } /* dropdown select button */ .ui-dropdown-select { padding: 0 0.75em; color: #fff; line-height: 2em; } /* dropdown list */ .ui-dropdown-list { ...
...And 5 more matches

border-radius - CSS: Cascading Style Sheets
top-left-and-bottom-right is a <length> or a <percentage> denoting a radius to use for the border in the top-left and bottom-right corners of the element's box.
... top-right-and-bottom-left is a <length> or a <percentage> denoting a radius to use for the border in the top-right and bottom-left corners of the element's box.
... top-left is a <length> or a <percentage> denoting a radius to use for the border in the top-left corner of the element's box.
...And 5 more matches

<display-inside> - CSS: Cascading Style Sheets
if its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box.
... otherwise it generates a block container box.
... flow-root the element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.
...And 5 more matches

mask - CSS: Cascading Style Sheets
url(masks.svg#star) 40px 20px; /* element within svg graphic used as mask positioned 40px from the top and 20px from the left */ mask: url(masks.svg#star) 0 0/50px 50px; /* element within svg graphic used as mask with a width and height of 50px */ mask: url(masks.svg#star) repeat-x; /* element within svg graphic used as horizontally repeated mask */ mask: url(masks.svg#star) stroke-box; /* element within svg graphic used as mask extending to the box enclosed by the stroke */ mask: url(masks.svg#star) exclude; /* element within svg graphic used as mask and combined with background using non-overlapping parts */ /* global values */ mask: inherit; mask: initial; mask: unset; /* multiple masks */ mask: url(masks.svg#star) left / 16px repeat-y, /* element within sv...
... <geometry-box> if only one <geometry-box> value is given, it sets both mask-origin and mask-clip.
... if two <geometry-box> values are present, then the first sets mask-origin and the second sets mask-clip.
...And 5 more matches

max-block-size - CSS: Cascading Style Sheets
none no limit on the size of the box.
... everything else about the two boxes is identical, including the values used for max-block-size.
...both boxes share the standard-box class, which simply establishes coloring, padding, and their respective values of max-block-size.
...And 5 more matches

object-fit - CSS: Cascading Style Sheets
you can alter the alignment of the replaced element's content object within the element's box using the object-position property.
... values contain the replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box.
... the entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box.
...And 5 more matches

overflow-y - CSS: Cascading Style Sheets
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.
... clip like for hidden, the content is clipped to the element's padding box.
...And 5 more matches

place-items - CSS: Cascading Style Sheets
the align-items and justify-items properties) in a relevant layout system such as grid or flexbox.
...ms: flex-end normal; place-items: left auto; place-items: right normal; /* baseline alignment */ place-items: baseline normal; place-items: first baseline auto; place-items: last baseline normal; place-items: stretch auto; /* global values */ place-items: inherit; place-items: initial; place-items: unset; values auto the value used is the value of the justify-items property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, auto represents normal.
... in absolutely-positioned layouts, the keyword behaved like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
...And 5 more matches

place-self - CSS: Cascading Style Sheets
the align-self and justify-self properties) in a relevant layout system such as grid or flexbox.
... normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
... for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
...And 5 more matches

transition-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-fu...
...nction: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } function updatetransition() { var el = document.querys...
...elector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:1s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition...
...And 5 more matches

z-index - CSS: Cascading Style Sheets
for a positioned box (that is, one with any position other than static), the z-index property specifies: the stack level of the box in the current stacking context.
... whether the box establishes a local stacking context.
... values auto the box does not establish a new local stacking context.
...And 5 more matches

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
sandbox applies extra restrictions to the content in the frame.
... allow-popups-to-escape-sandbox: lets the sandboxed document open new windows without those windows inheriting the sandboxing.
... for example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.
...And 5 more matches

d - SVG: Scalable Vector Graphics
three elements have this attribute: <path>, <glyph>, and <missing-glyph> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </svg> path for <path>, d is a string containing a series of path commands that define the path to be drawn.
...however the <glyph> element has its origin in the bottom left corner of its letterbox.
... formula: pn = {xo + dx, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,10 h 10 m 0,10 h 10 m 0,10 h 10 m 40,20 h 10 m 0,10 h 10 m 0,10 h 10 m 0,10 h 10 m 50,50 h 10 m-20,10 h 10 m-20,10 h 10 m-20,10 h 10" /> </svg> lineto path commands lineto instructions draw a straight line from the current po...
...And 5 more matches

refX - SVG: Scalable Vector Graphics
value <length-percentage> | <number> | left | center | right default value 0 animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
... percentage values are interpreted as being a percentage of the viewbox width.
... <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
...And 5 more matches

refY - SVG: Scalable Vector Graphics
value <length-percentage> | <number> | top | center | bottom default value 0 animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
... percentage values are interpreted as being a percentage of the viewbox height.
... <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
...And 5 more matches

Adding menus and submenus - Archive of obsolete content
the menubar element should be a child of a toolbox element because it is treated like another toolbar on systems other than mac os x.
... the toolbox should be positioned near the top of the xul document, and the code should be similar to this: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.label;" oncommand="xulschoolchrome.greetingdialog.greetingmedium(event);" /> <menuitem label="&xulschoolhello.greet.long.label;" onc...
...ommand="xulschoolchrome.greetingdialog.greetinglong(event);" /> <menuseparator /> <menuitem label="&xulschoolhello.greet.custom.label;" oncommand="xulschoolchrome.greetingdialog.greetingcustom(event);" /> </menupopup> </menu> </menubar> </toolbox> this code displays a simple menu with options for 3 different types of greetings, a menuseparator, and finally an option to show a custom greeting.
...And 4 more matches

Adding preferences to an extension - Archive of obsolete content
0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow id="stockwatcher2-prefs" title="stockwatcher 2 options" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="sw2-stock-pane" label="stock settings"> <preferences> <preference id="pref_symbol" name="extensions.stockwatcher2.symbol" type="string"/> </preferences> <hbox align="center"> <label control="symbol" value="stock to watch: "/> <textbox preference="pref_symbol" id="symbol" maxlength="4"/> </hbox> </prefpane> </prefwindow> the <preferences> block establishes all the settings we implement as well as their types.
...the <hbox> element is used to lay out the user interface by indicating that the widgets inside it should be positioned horizontally, next to each other in the window.
...the first is a label describing the textbox.
...And 4 more matches

In-Depth - Archive of obsolete content
button, checkbox-container, checkbox, dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield...
...-moz-border-radius rounds the corners of a box.
...-moz-box-direction controls which way the items in this box are displayed.
...And 4 more matches

Panels - Archive of obsolete content
for example, the following panel displays a textbox for entering a name.
... <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </window> many panels will be associated with a button, as in this example.
... <label value="search" popup="search-panel"/> <panel id="search-panel"> <label control="search" value="terms:"/> <textbox id="search"/> </panel> to attach a panel to an non-button element, for instance to have a panel open when a label is clicked, use the popup attribute.
...And 4 more matches

Rule Compilation - Archive of obsolete content
for instance, if generating the items in a listbox, you will typically use only one rule.
...<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a" flex="1"> <template> <query> -- query content goes here -- </query> <rule> -- rule content goes here -- </rule> <rule> -- rule content goes here -- </rule> </template> </vbox> query/rule compilation and lazy content generation when the template builder starts processing, and after it has started the datasource loading, it first must compile the query and rules.
...for instance, consider the example below: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a" hidden="true"> <template> ...
...And 4 more matches

SQLite Templates - Archive of obsolete content
this simple example shows how to display a listbox containing the values in one column in a database table.
... <listbox datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name from myfriends </query> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> the query returns the list of values from the 'name' column in the table 'myfriends'.
...the effect is a listbox containing the names from the database.
...And 4 more matches

XML Templates - Archive of obsolete content
an example: <listbox datasources="people.xml" ref="*" querytype="xml"> <template> ...
... </template> <listbox> the url in the datasources attribute may be a relative url or an absolute url.
...here is an example: <listbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> the expr attribute is a very simple xpath expression which simply retrieves the person elements from within the datasource.
...And 4 more matches

Broadcasters and Observers - Archive of obsolete content
example 1 : source view <command id="my_command" label="open"/> <button command="my_command"/> <checkbox label="open in a new window" command="my_command"/> in this example, the button does not have a label attribute, however it is attached to a command that does.
...the checkbox already has a label, however, it will be overridden by the command's label.
... the result is that both the button and the checkbox will have the same label 'open'.
...And 4 more matches

Scrolling Menus - Archive of obsolete content
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.
...And 4 more matches

XUL Changes for Firefox 1.5 - Archive of obsolete content
<scrollcorner> a <scrollcorner> element is added which is used to create the small box in the intersection of the horizontal and vertical scrollbars.
... <richlistbox> and <richlistitem> the <richlistbox> and <richlistitem> elements are used for creating lists containing arbitrary content.
... this element works similarly to the <listbox> which is designed primarily for lists of textual items.
...And 4 more matches

XUL Event Propagation - Archive of obsolete content
the widget hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> <menuitem oncommand="alert('new item alert')" label="new" /> <menuitem label="open" /> <menuitem oncommand="alert('close handler')" label="close" /> </menupopup> </menu> <menu class="menu" label="edit">...
... <menupopup> <menuitem oncommand="alert('edit source handler')" label="edit source" /> <menuitem label="reload" /> <menuitem label="view source" /> </menupopup> </menu> </vbox> <spring flex="1" /> </vbox> </window> in this file, the lowest-down, or "leaf" elements are the menuitems.
...in the example above, when the menuitem raises the "command" event, indicating that it has been selected, the menupopup, the menu itself, the parent box, or the root window element itself can all take advantage of this.
...And 4 more matches

menuitem - Archive of obsolete content
when autocheck is true, the button type should be "checkbox" or "radio".
... for buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect.
...if the box direction is reversed, the cropping is reversed.
...And 4 more matches

scale - Archive of obsolete content
increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged).
... type: integer the maximum value that the scale or number box may be set to.
... the default value is 100 for scales and infinity for number boxes.
...And 4 more matches

splitter - Archive of obsolete content
the vbox is used to hold the .png image that a user clicks on to resize the search bar.--> <splitter tooltiptext="resize the search box" oncommand="alert('the splitter was dragged')"> <vbox id="example_vbox" /> </splitter> attributes collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked.
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appen...
...lumndrag="true"> <treecols> <treecol id="name" label="name" flex="1"/> <splitter class="tree-splitter"/> <treecol id="id" label="id" flex="1"/> <splitter class="tree-splitter"/> <treecol id="date" label="date" flex="1"/> <splitter class="tree-splitter"/> </treecols> <treechildren/> </tree> splitter resizing and overflow the degree to which a splitter will resize a box, and what happens during the resize and after the limit is reached, depends on the height (or width) specified for the box as an attribute or in css, the min-height (or min-width), the intrinsic height of the box contents, and the presence or absence of a collapse attribute on the splitter.
...And 4 more matches

window - Archive of obsolete content
it is by default a horizontally oriented box.
... as it is a box, all box attributes can be used.
...--> <window id="rootwnd" title="register online!" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox> <hbox> <image src="application_form.png"/> <description>register online!</description> </hbox> <groupbox align="start"> <caption label="your information"/> <radiogroup> <vbox> <hbox> <label control="your-fname" value="enter first name:"/> <textbox id="your-fname" value="johan"/> </hbox> <hbox> ...
...And 4 more matches

display-outside - Archive of obsolete content
the display-outside css property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent formatting context.
... values block-level the element generates a block-level box, and participates in a block formatting context.
... inline-level the element generates an inline-level box, and participates in an inline formatting context.
...And 4 more matches

Organizing your CSS - Learn web development
some developers put all of the rules onto a single line, like so: .box { background-color: #567895; } h2 { background-color: black; color: white; } other developers prefer to break everything onto a new line: .box { background-color: #567895; } h2 { background-color: black; color: white; } css doesn't mind which one you use.
... you may have used a css property in a specific way to get around older browser incompatibilities, for example: .box { background-color: red; /* fallback for older browsers that don't support gradients */ background-image: linear-gradient(to right, #ff0000, #aa0000); } perhaps you followed a tutorial to achieve something, and the css is a little non-obvious.
...} .product-box { ...
...And 4 more matches

Responsive design - Learn web development
for example, if the line lengths become unreadably long as the screen size increases, or a box becomes squashed with two words on each line as it narrows.
...on narrow screens the layout displays the boxes stacked on top of one another: on wider screens they move to two columns: note: you can find the live example and source code for this example on github.
... modern layout technologies modern layout methods such as multiple-column layout, flexbox, and grid are responsive by default.
...And 4 more matches

Introduction to events - Learn web development
for example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box.
...let's look at an example to make this easier — open up the show-video-box.html example in a new tab (and the source code in another tab.) it is also available live below: this is a pretty simple example that shows and hides a <div> with a <video> element inside it: <button>display video</button> <div class="hidden"> <video> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support ht...
...here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> </div> when the <button> is selected, the video is displayed, by changing the class attribute on the <div> from hidden to showing (the example's css contains these two classes, which position the box off the screen and on the screen, respectively): btn.onclick = function() { videobox.setattribute('class', 'showing'); } we then add a couple more onclick event handlers — the first one to the <div> and the second one to the <video>.
...And 4 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
replace the existing <ul> element with the following simplified version to get an idea of how it works: <ul> {#each todos as todo, index (todo.id)} <li> <input type="checkbox" checked={todo.completed}/> {index}.
...replace your existing <ul> block with the following: <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> {#each todos as todo (todo.id)} <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" checked={todo.completed}/> <label for="todo-{todo.id}" class="todo-label"> {todo.name} </label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">{todo.name}</span> </button> <button type="button" class="btn btn__danger"> del...
...ete <span class="visually-hidden">{todo.name}</span> </button> </div> </div> </li> {:else} <li>nothing to do here!</li> {/each} </ul> notice how we are using curly braces to embed javascript expressions in html attributes, like we did with the checked and id attributes of the checkbox.
...And 4 more matches

The Firefox codebase: CSS Guidelines
using variables use the variable according to its naming do this: xul|tab:hover { background-color: var(--in-content-box-background-hover); } not this: #certificateerrordebuginformation { background-color: var(--in-content-box-background-hover); } localization text direction for margins, padding and borders, use inline-start/inline-end rather than left/right.
... 99% theme 70% theme 70% content 99% content font-*, color, *-color, border-*, -moz-appearance [1] line-height, padding, margin cursor, width, max-width, top, bottom [2], etc overflow, direction, display, *-align, align-*, *-box-*, flex-*, order if some css is layout or functionality related, then it is likely content css.
...part of those adjustments include making all box-shadow invisible, so this is something to be aware of if you create a focus ring or a border using the box-shadow property: consider using a border or an outline if you want the border/focus ring to stay visible in high-contrast mode.
...And 4 more matches

JIT Optimization Outcomes
notunboxed the object whose property is being accessed is not formatted as an unboxed object.
... unboxedconvertedtonative the object whose property is being accessed was previously unboxed but was deoptimized and converted to a native object.
... structnofield the unboxed property being accessed does not correspond to a field on the typed object.
...And 4 more matches

nsIDBFolderInfo
obsolete since gecko 1.8 void getmailboxname(in nsstring boxname); native code only!
...obsolete since gecko 1.8 void setmailboxname(in nsstring newboxname); native code only!
... highwater nsmsgkey imaphierarchyseparator wchar imaptotalpendingmessages long imapuidvalidity long imapunreadpendingmessages long knownartsset string locale astring mailboxname astring nummessages long numunreadmessages long sortorder nsmsgviewsortordervalue sorttype nsmsgviewsorttypevalue version unsigned long viewflags nsmsgviewflagstypevalue viewtype n...
...And 4 more matches

Settings - Firefox Developer Tools
to see the settings, open any of the developer tools, and then: click the "settings" command in the menu: or press f1 to toggle between the active tool and the settings pane the settings pane looks something like this: categories default firefox developer tools this group of checkboxes determines which tools are enabled in the toolbox.
... available toolbox buttons this group of checkboxes determines which tools get an icon in the toolbox's toolbar.
... note that in firefox 52 we removed the checkbox to toggle the "select element" button.
...And 4 more matches

ResizeObserver - Web APIs
the resizeobserver interface reports changes to the dimensions of an element's content or border box, or the bounding box of an svgelement.
... note: the content box is the box in which content can be placed, meaning the border box minus the padding and border width.
... the border box encompasses the content, padding, and border.
...And 4 more matches

ResizeObserverEntry - Web APIs
properties resizeobserverentry.borderboxsize read only an object containing the new border box size of the observed element when the callback is run.
... resizeobserverentry.contentboxsize read only an object containing the new content box size of the observed element when the callback is run.
... note: the content box is the box in which content can be placed, meaning the border box minus the padding and border width.
...And 4 more matches

Taking still photos with WebRTC - Web APIs
<canvas id="canvas"> </canvas> <div class="output"> <img id="photo" alt="the screen capture will appear in this box."> </div> that's all of the relevant html.
... wrapping up the startup() method there are only two more lines of code in the startup() method: clearphoto(); } this is where we call the clearphoto() method we'll describe below in the section clearing the photo box.
... clearing the photo box clearing the photo box involves creating an image, then converting it into a format usable by the <img> element that displays the most recently captured frame.
...And 4 more matches

Window.prompt() - Web APIs
the above prompt appears as follows (in chrome on os x): notes a prompt dialog contains a single-line textbox, a cancel button, and an ok button, and returns the (possibly empty) text the user entered into that textbox.
... the following text is shared between this article, dom:window.confirm and dom:window.alert dialog boxes are modal windows; they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
... for this reason, you should not overuse any function that creates a dialog box (or modal window).
...And 4 more matches

WAI-ARIA Roles - Accessibility
to be supported, the cell must be nested in an element with the role of row.aria: checkbox rolethe checkbox role is used for checkable interactive controls.
... elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.aria: comment rolethe comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment.aria: complementary rolethe complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated.
... these sections are frequently presented as sidebars or call-out boxes.
...And 4 more matches

-moz-image-rect - CSS: Cascading Style Sheets
css the css defines one container style, then the styles for the four boxes that comprise the complete image.
... the container looks like this: #container { width:267px; height:272px; top:100px; left:100px; position:absolute; font-size:16px; text-shadow:white 0px 0px 6px; text-align:center; } then the four boxes defining the segments of the image are defined.
... #box1 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%); width:133px; height:136px; position:absolute; } this is the top-left corner of the image.
...And 4 more matches

:checked - CSS: Cascading Style Sheets
the :checked css pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.
... /* matches any checked/selected radio, checkbox, or option */ :checked { margin-left: 25px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.
... syntax :checked examples basic example html <div> <input type="radio" name="my-input" id="yes"> <label for="yes">yes</label> <input type="radio" name="my-input" id="no"> <label for="no">no</label> </div> <div> <input type="checkbox" name="my-checkbox" id="opt-in"> <label for="opt-in">check me!</label> </div> <select name="my-select" id="fruit"> <option value="opt1">apples</option> <option value="opt2">grapes</option> <option value="opt3">pears</option> </select> css div, select { margin: 8px; } /* labels for checked inputs */ input:checked + label { color: red; } /* radio element, when checked */ input[typ...
...And 4 more matches

Handling content breaks in multicol - CSS: Cascading Style Sheets
content is broken between column boxes in multiple-column layout in the same way that it is broken between pages in paged media.
...in multicol, the fragmentainer is the column box.
... a column box can contain other markup and there are many places where a break would not be ideal.
...And 4 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
it then moves onto the next line, creating a new row track, and fills in more items: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { writing-mode: vertical-lr; display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2,...
...this occurs once we've flipped the grid onto the side, like this: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { writing-mode: vertical-lr; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1...
...And 4 more matches

Layout and the containing block - CSS: Cascading Style Sheets
when a user agent (such as your browser) lays out a document, it generates a box for every element.
... each box is divided into four areas: content area padding area border area margin area many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true.
... identifying the containing block the process for identifying the containing block depends entirely on the value of the element's position property: if the position property is static, relative, or sticky, the containing block is formed by the edge of the content box of the nearest ancestor element that is either a block container (such as an inline-block, block, or list-item element) or establishes a formatting context (such as a table container, flex container, grid container, or the block container itself).
...And 4 more matches

Column layouts - CSS: Cascading Style Sheets
whether you use grid, flexbox or multi-column layout will depend on what you are trying to achieve, and in this recipe we explore these options.
... you do not need to target individual column boxes for styling.
... a single row of items with equal heights — flexbox flexbox can be used to break content into columns by setting flex-direction to row, however flexbox targets the elements inside the flex container and will place each direct child into a new column.
...And 4 more matches

aspect-ratio - CSS: Cascading Style Sheets
the aspect-ratio css property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
... syntax aspect-ratio: 1 / 1; /* global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset; values <auto> replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio.
... size calculations involving intrinsic aspect ratio always work with the content box dimensions.
...And 4 more matches

background-clip - CSS: Cascading Style Sheets
the background-clip css property sets whether an element's background extends underneath its border box, padding box, or content box.
... syntax /* keyword values */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; /* global values */ background-clip: inherit; background-clip: initial; background-clip: unset; values border-box the background extends to the outside edge of the border (but underneath the border in z-ordering).
... padding-box the background extends to the outside edge of the padding.
...And 4 more matches

background - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size syntax /* using a <background-color> */ background: green; /* using a <bg-image> and <repeat-style> */ background: url("test.jpg") repeat-y; /* using a <box> and <background-color> */ background: border-box red; /* a single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); the background property is specified as one or more background layers, separated by commas.
... the <box> value may be included zero, one, or two times.
... values <attachment> see background-attachment <box> see background-clip and background-origin <background-color> see background-color <bg-image> see background-image <position> see background-position <repeat-style> see background-repeat <bg-size> see background-size.
...And 4 more matches

break-inside - CSS: Cascading Style Sheets
the break-inside css property sets how page, column, or region breaks should behave inside a generated box.
... if there is no generated box, the property is ignored.
... values auto allows, but does not force, any break (page, column, or region) to be be inserted within the principal box.
...And 4 more matches

<display-outside> - CSS: Cascading Style Sheets
syntax valid <display-outside> values: block the element generates a block element box, generating line breaks both before and after the element when in the normal flow.
... inline the element generates one or more inline element boxes that do not generate line breaks before or after themselves.
... in normal flow, the next element will be on the same line if there is space run-in the element generates a run-in box.
...And 4 more matches

line-height - CSS: Cascading Style Sheets
the line-height css property sets the height of a line box.
...on block-level elements, it specifies the minimum height of line boxes within the element.
... on non-replaced inline elements, it specifies the height that is used to calculate line box height.
...And 4 more matches

max-height - CSS: Cascading Style Sheets
none no limit on the size of the box.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 formal definition initial valuenoneapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block.
... typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max-height using percentage and keyword values table { max-height: 75%; } form { max-height: none; } specifications specification status comment css box sizing module level 4the definition of 'max-height' in that specification.
...And 4 more matches

overflow-block - CSS: Cascading Style Sheets
the overflow-block css property sets what shows when content overflows the block start and block end edges of a box.
... values visible content is not clipped and may be rendered outside the padding box's block start and block end edges.
... hidden content is clipped if necessary to fit the block dimension in the padding box.
...And 4 more matches

overflow-x - CSS: Cascading Style Sheets
values visible content is not clipped and may be rendered outside the padding box's left and right edges.
... hidden content is clipped if necessary to fit horizontally in the padding box.
... clip like for hidden, the content is clipped to the element's padding box.
...And 4 more matches

text-decoration-skip - CSS: Cascading Style Sheets
/* keyword values */ text-decoration-skip: none; text-decoration-skip: objects; text-decoration-skip: spaces; text-decoration-skip: edges; text-decoration-skip: box-decoration; /* multiple keywords */ text-decoration-skip: objects spaces; text-decoration-skip: leading-spaces trailing-spaces; text-decoration-skip: objects edges box-decoration; /* global values */ text-decoration-skip: inherit; text-decoration-skip: initial; text-decoration-skip: unset; syntax values none nothing is skipped.
... thus, text decoration is drawn for all text content and across atomic inline-level boxes.
... objects the entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.
...And 4 more matches

HTML documentation index - HTML: Hypertext Markup Language
89 <details>: the details disclosure element disclosure box, disclosure widget, element, html, html interactive elements, reference, web, details the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
... 91 <dialog>: the dialog element dialog, element, html, html interactive elements, reference, web, polyfill the html <dialog> element represents a dialog box or other interactive component, such as a dismissable alert, inspector, or subwindow.
... 120 <input type="checkbox"> element, html, html forms, input, input types, reference, checkbox, form <input> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form.
...And 4 more matches

patternContentUnits - SVG: Scalable Vector Graphics
note: that this attribute has no effect if attribute viewbox is specified on the <pattern> element.
... only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- a pattern tile that content coordinates and values are computed against the current coordinate user space.
... note that the size of the tile is computed against the bounding box of the target element --> <pattern id="p1" width="20%" height="20%" patterncontentunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- a pattern tile that content coordinates and values are computed against the bounding box of the target element.
...And 4 more matches

transform - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a css property.
...ys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevcoordsys}} \\ y_{\mathrm{prevcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevcoordsys}} + c y_{\mathrm{prevcoordsys}} + e \\ b x_{\mathrm{prevcoordsys}} + d y_{\mathrm{prevcoordsys}} + f \\ 1 \end{pmatrix} example html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="20" fill="green" /> <!-- in the following example we are applying the matrix: [a c e] [3 -1 30] [b d f] => [1 3 40] [0 0 1] [0 0 1] which transform the rectangle as such: top left corner: oldx=10 oldy=10 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 10 + 30 = 50 newy = b * oldx...
... in other words: xnew = xold + <x> ynew = yold + <y> example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- no translation --> <rect x="5" y="5" width="40" height="40" fill="green" /> <!-- horizontal translation --> <rect x="5" y="5" width="40" height="40" fill="blue" transform="translate(50)" /> <!-- vertical translation --> <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" /> <!-- bot...
...And 4 more matches

panel - Archive of obsolete content
// the message payload is the contents of the edit box.
... var textarea = document.getelementbyid("edit-box"); textarea.addeventlistener('keyup', function onkeyup(event) { if (event.keycode == 13) { // remove the newline.
...self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body { background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png to learn much more about content scripts, see the working with content scripts guide.
...And 3 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
within the window are a label element and textbox element, wrapped in a hbox element so that they are arranged horizontally.
... listing 5: content for clock.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"?> <dialog id="clockdialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="clock" buttons="accept" onload="initclock();"> <script type="application/javascript" src="chrome://helloworld/content/clock.js"/> <hbox align="center"> <label value="current time:" /> <textbox id="currenttime" /> </hbox> </dialog> listing 6: content for clock.js function initclock() { showcurrenttime(); window.setinterval(showcurrenttime, 1000); } function showcurrenttime() { var textbox = document.getelementbyid("currenttime"); textbox.value = new date().tolocaletimestring(); textbox.select(); } operations check perform an operations check to ma...
....xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"?> <!doctype dialog system "chrome://helloworld/locale/clock.dtd"> <dialog id="clockdialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="&helloworld.clock;" buttons="accept" onload="initclock();"> <script type="application/javascript" src="chrome://helloworld/content/clock.js" /> <hbox align="center"> <label value="&helloworld.currenttime;:" /> <textbox id="currenttime" /> </hbox> </dialog> create the dtd that defines the entity references now create the dtd file that gets referred to by clock.xul (listing 9).
...And 3 more matches

Setting Up a Development Environment - Archive of obsolete content
in the "run" textbox you should type this: bash -c "make" or replace "make" with "make clean" for the clean command.
... in the "start in" textbox you should choose %p (directory path of active project).
... if you don't see this textbox, click on the "more" button.
...And 3 more matches

Enabling the behavior - updating the status periodically - Archive of obsolete content
now that we have code to retrieve tinderbox status and update the icon, we need to run it periodically.
... function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); window.settimeout(loadtinderboxstatus, 60000); } window.settimeout(loadtinderboxstatus, 1000); window.settimeout schedules functions to run at some future time.
... we use it inside the loadtinderboxstatus function to make that function run a second (1,000 milliseconds) after startup and a minute (60,000 milliseconds) after each invocation.
...And 3 more matches

Tamarin build documentation - Archive of obsolete content
download and build the asc source code using the subversion client $ svn co http://opensource.adobe.com/svn/open...box/asc-redux/ asc $ cd asc/build/java $ ant ...
...heck the windows mobile shell is functioning by running $avm hello.abc (where hello.abc is a simple abc to print a string, or can substitute with any test abc) now any acceptance or performance tests can be run as on desktop using test/acceptance/runtests.py or tests/performance/runtests.py tamarin buildbot adobe maintains a continuous build and test system for tamarin redux, similar to tinderbox.
... tamarin buildbot tryserver the tryserver/sandbox is setup to allow users to push any code changes that they would like to have tested in the automated build/test process prior to actually pushing the changes.
...And 3 more matches

Actions - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <button uri="?relateditem" label="?relateditem"/> </action> </template...
...> </vbox> in this example, we omit the <xul:rule> element around the <xul:action> as it is optional when we want to generate content unconditionally.
...after all the results have been examined, the dom tree will look like the following: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <button uri="?relateditem" label="?relateditem"/> </action> </template...
...And 3 more matches

Multiple Queries - Archive of obsolete content
the following is the basic structure of a template with multiple queries: <listbox datasources="..." ref="..."> <queryset> <query> ...
... </rule> </queryset> </listbox> each queryset holds a query and its set of rules.
...here is an example using an rdf datasource: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> ...
...And 3 more matches

Adding Event Handlers - Archive of obsolete content
for example, when the mouse is moved over a button that is inside a box, a 'mousemove' event is generated, and sent first to the window, followed by the document, and then the box.
...finally, the bubbling phase causes the event to be sent to the box, document and window.
...the command event is fired when a user activates an element, for example by pressing a button, changing a checkbox or selecting an item from a menu.
...And 3 more matches

Cross Package Overlays - Archive of obsolete content
our foverlay.xul example source <?xml version="1.0"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="browser-toolbox"> <toolbar id="findfile_toolbar"> <label control="findfile_filename" value="search for files named:"/> <textbox id="findfile_filename"/> <label control="findfile_dir" value="directory:"/> <textbox id="findfile_dir"/> <button label="browse..."/> </toolbar> </toolbox> </overlay> you can view this by changing the overlay to a window.
... the only thing that is special here is the id used on the toolbox.
... this value (browser-toolbox) is the same as the identifier of the toolbox in the browser window (navigator.xul).
...And 3 more matches

XUL Questions and Answers - Archive of obsolete content
is it possible to have checkbox support for multi column lists?
... the current issue is a person exploring if it is possible to have checkbox support for multi column lists.
... the following is the code they wrote: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="checkbox" value="1" label="vghkvghk"/> </listitem> <listitem> <listcell type="checkbox" value="2" label="vghjkvk" checked="true"/> </listitem> <listitem> <listcell type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listitem> </listbox> <listbox rows="4"> <listhead> <listheader label="single-column"/> ...
...And 3 more matches

listcols - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for the columns of a listbox, each of which are created with the listcol element.
... there should be only one listcols element in a list box.
... if there is no listcols element, the list box has a single column.
...And 3 more matches

preference - Archive of obsolete content
you can connect a user interface element such as a checkbox to a preference element using the user interface element's preference attribute.
...for instance, checking the checkbox disables the preference instead of enabling it.
...a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
...And 3 more matches

tabpanels - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container to hold the set of pages in a tabbox.
... the tabpanels element should be placed in a tabbox although it does not have to be a direct child.
... the children of the tabpanels element become the panels of the tabbox.
...And 3 more matches

tabs - Archive of obsolete content
a tabs element should be placed inside a tabbox and should contain tab elements.
... attributes closebutton, disableclose, disabled, onclosetab, onnewtab, onselect, setfocus, selectedindex, tabbox, tabindex, tooltiptextnew, value, properties accessibletype, disabled, itemcount, selectedindex, selecteditem, tabindex, value, methods advanceselectedtab, appenditem, getindexofitem, getitematindex, insertitemat, removeitemat examples (example needed) attributes closebutton obsolete since gecko 1.9.2 type: boolean if this attribute is set to true, the tabs row will have a "new tab" button and "close" button on the ends.
...the listbox, richlistbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
...And 3 more matches

How to enable locale switching in a XULRunner application - Archive of obsolete content
i chose a listbox with a button.
...sample chrome/chrome.manifest content localeswitchdemo content/ locale localeswitchdemo de-de locale/de-de/ locale localeswitchdemo en-gb locale/en-gb/ locale localeswitchdemo fr-fr locale/fr-fr/ how are you going to populate the xul listbox?
...here is a code snippet showing how this is done: the definition of the xul control: <listbox id="locale-listbox"> <!-- generated list items go in here --> </listbox> <button label="&switchlocale.button;" oncommand="changelocale()"/> the javascript code to populate the control: try { // query available and selected locales var chromeregservice = components.classes["@mozilla.org/chrome/chrome-registry;1"].getservice(); var xulchromereg = chromeregservice.queryinterface(components.interfaces.nsixulchrom...
...And 3 more matches

Common Firefox theme issues and solutions - Archive of obsolete content
in order to work around this issue, you need to either rename any of the following files that are in your chrome://browser/skin/ folder and fix any references to those files, or copy them to the folder chrome://browser/skin/lion/: keyhole-circle.png toolbar.png toolbarbutton-dropmarker.png tabbrowser/alltabs-box-bkgnd-icon.png tabview/tabview.png places/toolbar.png linux linux select box fields are showing both drop arrow and spinner arrows on linux: the styling of drop down select box fields may show both a drop arrow and up/down spinner arrows.
... address bar identity box is missing padlock icons for secure sites in firefox 14 and later the identity box has been significantly changed and the favicon has been replaced by an icon that indicates the website's status.
...the following css rules also need to be copied to the proper location in the browser.css file and modified as necessary: /* page proxy icon */ #page-proxy-favicon { width: 16px; height: 16px; margin: 1px 3px; list-style-image: url(chrome://browser/skin/identity-icons-generic.png); -moz-image-region: rect(0, 16px, 16px, 0); } .verifieddomain > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browser/skin/identity-icons-https.png); } .verifiedidentity > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } #identity-box:hover > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-ima...
...And 3 more matches

Building up a basic demo with A-Frame - Game development
a-frame is built on top of webgl, and provides pre built components to use in applications — models, video players, skyboxes, geometries, controls, animations, cursors, etc.
... note: an entity is any element — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
... let's create the scene by adding an <a-scene> element inside the <body> element: <a-scene> </a-scene> adding a cube adding the cube to the scene is done by adding a simple <a-box> element inside the <a-scene> element.
...And 3 more matches

CSS building blocks - Learn web development
the sub-articles are as follows: type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align items with other items.
... in this lesson, we will take a proper look at the css box model, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.
...overflow is what happens when there is too much content to be contained comfortably inside a box.
...And 3 more matches

Grids - Learn web development
prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand the fundamental concepts behind grid layout systems, and how to implement a grid layout using css grid.
...by default these display in normal flow so the boxes display one below the other.
...as with flexbox, this switches on grid layout, and all of the direct children of the container become grid items.
...And 3 more matches

Beginner's guide to media queries - Learn web development
perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read.
... * { box-sizing: border-box; } body { width: 90%; margin: 2em auto; font: 1em/1.3 arial, helvetica, sans-serif; } a:link, a:visited { color: #333; } nav ul, aside ul { list-style: none; padding: 0; } nav a:link, nav a:visited { background-color: rgba(207, 232, 220, 0.2); border: 2px solid rgb(79, 185, 227); text-decoration: none; display: block; padding: 10p...
...we have also used flexbox to put the navigation into a row.
...And 3 more matches

Arrays - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 150px;"> <ul> </ul> <p></p> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 410px;width: 95%"> const list = document.queryselector('.output ul'); const totalbox = document.queryselector('.output p'); let total = 0; list.innerhtml = ''; totalbox.textcontent = ''; // number 1 'underpants:6.99' 'socks:5.99' 't-shirt:14.99' 'trousers:31.99' 'shoes:23.99'; for (let i = 0; i <= 0; i++) { // number 2 // number 3 // number 4 // number 5 let itemtext = 0; const listitem ...
...= document.createelement('li'); listitem.textcontent = itemtext; list.appendchild(listitem); } totalbox.textcontent = 'total: $' + total.tofixed(2); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', fu...
...nction() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list = document.queryselector(\'.output ul\');\nconst totalbox = document.queryselector(\'.output p\');\nlet total = 0;\nlist.innerhtml = \'\';\ntotalbox.textcontent = \'\';\n\nlet products = [\'underpants:6.99\',\n \'socks:5.99\',\n \'t-shirt:14.99\',\n \'trousers:31.99\',\n \'shoes:23.99\'];\n\nfor(let i = 0; i < products.length; i++) {\n let subarray = products[i].split(\':\');\n let name = subarray[0];\n let price = number(subarray[1]);\n total += price;\n let itemtext = name + \' — $\' + price;\n\n let listitem = documen...
...And 3 more matches

Ember app structure and componentization - Learn web development
update the application.hbs file again so its content looks like this: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > <section class="main"> <input id="mark-all-complete" class="toggle-all" type="checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-list"> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>buy movie tickets</label> <button type="button" class="destroy" ...
... title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>go to movie</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> </ul> </section> <footer class="footer"> <span class="todo-count"> <strong>0</strong> todos left </span> <ul class="filters"> <li> <a href="#">all</a> <a href="#">active</a> ...
...the main input / "new-todo" (red in the image) the containing body of the todo list + the mark-all-complete button (purple in the image) the mark-all-complete button, explicitly highlighted for reasons given below (yellow in the image) each todo is an individual component (green in the image) the footer (blue in the image) something odd to note is that the mark-all-complete checkbox (marked in yellow), while in the "main" section, is rendered next to the "new-todo" input.
...And 3 more matches

React interactivity: Events and state - Learn web development
update your <h2> like so: <h2 id="list-heading">{headingtext}</h2> completing a task you might notice that, when you click on a checkbox, it checks and unchecks appropriately.
... as a feature of html, the browser knows how to remember which checkbox inputs are checked or unchecked without our help.
... this feature hides a problem, however: toggling a checkbox doesn't change the state in our react application.
...And 3 more matches

Handling common accessibility problems - Learn web development
html semantic html (where the elements are used for their correct purpose) is accessible right out of the box — such content is readable by sighted viewers (provided you don't do anything silly like make the text way too small or hide it using css), but will also be usable by assistive technologies like screen readers (apps that literally read out a web page to their user), and confer other advantages too.
... safari doesn't allow you to tab through links by default; to enable this, you need to open safari's preferences, go to advanced, and check the press tab to highlight each item on a webpage checkbox.
...for example, in our tabbed info box example (see source code) we have three panels of information, but we are positioning them on top of one another and providing tabs that can be clicked to show each one (it is also keyboard accessible — you can alternatively use tab and enter/return to select them).
...And 3 more matches

How Mozilla's build system works
sandbox.py contains code for a generic python sandbox.
... reader.py contains the code that defines the moz.build sandbox (the mozbuildsandbox class) and the code for traversing a tree of moz.build files (the buildreader class) by following dirs and tiers variables.
... a buildreader is instantiated with a configuration, is told to read the source tree, and then emits a stream of mozbuildsandbox instances corresponding to the executed moz.build files.
...And 3 more matches

SpiderMonkey Internals
the representation is 64 bits and uses nan-boxing on all platforms, although the exact nan-boxing format depends on the platform.
... nan-boxing is a technique based on the fact that in ieee-754 there are 2**53-2 different bit patterns that all represent nan.
...other values are encoded as a value and a type tag: on x86, arm, and similar 32-bit platforms, we use what we call "nunboxing", in which non-double values are a 32-bit type tag and a 32-bit payload, which is normally either a pointer or a signed 32-bit integer.
...And 3 more matches

XPCOM Interface Reference
tionnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompleteinputnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibidikeyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsibrowserboxobjectnsibrowserhistorynsibrowsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitornsicacheservicensicachesessionnsicachevisitornsicachingchannelnsicancelablensicategorymanagernsichannelnsichanneleventsinknsichannelpolicynsicharsetresolvernsichromeframemessagemanagernsichromeregistrynsicla...
...ssinfonsiclipboardnsiclipboardcommandsnsiclipboarddragdrophooklistnsiclipboarddragdrophooksnsiclipboardhelpernsiclipboardownernsicollectionnsicommandcontrollernsicommandlinensicommandlinehandlernsicommandlinerunnernsicomponentmanagernsicomponentregistrarnsicompositionstringsynthesizernsiconsolelistenernsiconsolemessagensiconsoleservicensicontainerboxobjectnsicontentframemessagemanagernsicontentprefnsicontentprefcallback2nsicontentprefobservernsicontentprefservicensicontentprefservice2nsicontentsecuritypolicynsicontentsniffernsicontentviewnsicontentviewmanagernsicontentviewernsicontrollernsicontrollersnsiconverterinputstreamnsiconverteroutputstreamnsicookiensicookie2nsicookieacceptdialognsicookieconsentnsicookiemanagernsicookiemanager2nsicookiepermissionnsicookiepromptservicensicookieservicens...
...eratornsidirectoryservicensidirectoryserviceprovidernsidirectoryserviceprovider2nsidiskcachestreaminternalnsidispatchsupportnsidocshellnsidocumentloadernsidownloadnsidownloadhistorynsidownloadmanagernsidownloadmanageruinsidownloadobservernsidownloadprogresslistenernsidownloadernsidragdrophandlernsidragservicensidragsessionnsidroppedlinkhandlernsidroppedlinkitemnsidynamiccontainernsieditornsieditorboxobjectnsieditordocshellnsieditorimesupportnsieditorloggingnsieditormailsupportnsieditorobservernsieditorspellchecknsieffectivetldservicensienumeratornsienvironmentnsierrorservicensieventlistenerinfonsieventlistenerservicensieventsourcensieventtargetnsiexceptionnsiextensionmanagernsiexternalhelperappservicensiexternalprotocolservicensiexternalurlhandlerservicensiftpchannelnsiftpeventsinknsifactoryn...
...And 3 more matches

Mail and RDF
msgaccounts:/ +-- http://home.netscape.com/nc-rdf#child --> | imap://alecf@imap.mywork.com | +-- http://home.netscape.com/nc-rdf#isserver --> "true" | +-- http://home.netscape.com/nc-rdf#child --> | imap://alecf@imap.mywork.com/inbox | +-- http://home.netscape.com/nc-rdf#totalmessages --> "4" | +-- http://home.netscape.com/nc-rdf#isserver --> "false" | +-- http://home.netscape.com/nc-rdf#messagechild --> | | imap_message://alecf@imap.mywork.com/inbox#1 | +-- http://home.netscape.com/nc-rdf#messagechild --> | | imap_message://alecf@imap.mywork.com/inbox#2 ...
...| +-- http://home.netscape.com/nc-rdf#messagechild --> | | imap_message://alecf@imap.mywork.com/inbox#3 | +-- http://home.netscape.com/nc-rdf#messagechild --> | imap_message://alecf@imap.mywork.com/inbox#4 | etc...
... +-- http://home.netscape.com/nc-rdf#child --> | mailbox://alecf@pop.mywork.com | +-- http://home.netscape.com/nc-rdf#isserver --> "true" | +-- http://home.netscape.com/nc-rdf#child --> | mailbox://alecf@pop.mywork.com/inbox | +-- http://home.netscape.com/nc-rdf#totalmessages --> "2" | +-- http://home.netscape.com/nc-rdf#isserver --> "false" | +-- http://home.netscape.com/nc-rdf#messagechild --> | | mailbox_message://alecf@pop.mywork.com/inbox#1 | +-- http://home.netscape.com/nc-rdf#messagechild --> | mailbox_message://alecf@pop.mywork.com/inbox#2 | etc...
...And 3 more matches

Network request list - Firefox Developer Tools
other actions you can take with request blocking: to turn all request blocking off or on: toggle the checkbox next to enable request blocking.
... to turn a specific block off or on: toggle the checkbox next to that item.
... url use the filter urls box in the toolbar.
...And 3 more matches

Edit Shape Paths in CSS - Firefox Developer Tools
if the shape is clipped by the margin box then the margin box will make up part of this line.
... a dashed line demonstrates the outline of the shape which extends past the margin box reference; this is the area that will be clipped by the margin box.
... to understand the margin box, and other boxes used by css shapes see our guide to shapes from box values.
...And 3 more matches

Examine and edit HTML - Firefox Developer Tools
searching the page inspector's search box matches all markup in the current document and in any frames.
... to start searching the markup, click in the search box to expand it or press ctrl + f , or cmd + f on a mac.
...clicking the marker enables the flexbox highlighter.
...And 3 more matches

UI Tour - Firefox Developer Tools
the select element button is one way you can select an element for inspection: note that it's actually part of the main toolbox toolbar, so it's immediately accessible from any tool, not just the inspector.
... layout view the layout view displays the box model of the page.
... if the page includes any sections using either the flexbox display model or css grids, this view shows the flexbox or grid settings used on the page.
...And 3 more matches

Background Tasks API - Web APIs
this establishes a box (id "container") that's used to present the progress of an operation (because you never know how long decoding "quantum filament tachyon emissions" will take, after all) as well as a second main box (with the id "logbox"), which is used to display textual output.
...</p> <div class="container"> <div class="label">decoding quantum filament tachyon emissions...</div> <progress id="progress" value="0"></progress> <div class="button" id="startbutton"> start </div> <div class="label counter"> task <span id="currenttasknumber">0</span> of <span id="totaltaskcount">0</span> </div> </div> <div class="logbox"> <div class="logheader"> log </div> <div id="log"> </div> </div> the progress box uses a <progress> element to show the progress, along with a label with sections that are changed to present numeric information about the progress.
... css content body { font-family: "open sans", "lucida grande", "arial", sans-serif; font-size: 16px; } .logbox { margin-top: 16px; width: 400px; height:500px; border-radius: 6px; border: 1px solid black; box-shadow: 4px 4px 2px black; } .logheader { margin: 0; padding: 0 6px 4px; height: 22px; background-color: lightblue; border-bottom: 1px solid black; border-radius: 6px 6px 0 0; } #log { font: 12px "courier", monospace; padding: 6px; overflow: auto; overflow-y: scroll; width: 388px; height: 460px; } .container { width: 400px; padding: 6px; border-radius: 6px; border: 1px solid black; box-shadow: 4px 4px ...
...And 3 more matches

Element.innerHTML - Web APIs
example this example uses innerhtml to create a mechanism for logging messages into a box on a web page.
...then the message is appended to the box with the class "log".
... we add a second method that logs information about mouseevent based events (such as mousedown, click, and mouseenter): function logevent(event) { var msg = "event <strong>" + event.type + "</strong> at <em>" + event.clientx + ", " + event.clienty + "</em>"; log(msg); } then we use this as the event handler for a number of mouse events on the box that contains our log: var boxelem = document.queryselector(".box"); boxelem.addeventlistener("mousedown", logevent); boxelem.addeventlistener("mouseup", logevent); boxelem.addeventlistener("click", logevent); boxelem.addeventlistener("mouseenter", logevent); boxelem.addeventlistener("mouseleave", logevent); html the html is quite simple for our example.
...And 3 more matches

Event.preventDefault() - Web APIs
syntax event.preventdefault(); examples blocking default click handling toggling a checkbox is the default action of clicking on a checkbox.
... this example demonstrates how to prevent that from happening: javascript document.queryselector("#id-checkbox").addeventlistener("click", function(event) { document.getelementbyid("output-box").innerhtml += "sorry!
... <code>preventdefault()</code> won't let you check this!<br>"; event.preventdefault(); }, false); html <p>please click on the checkbox control.</p> <form> <label for="id-checkbox">checkbox:</label> <input type="checkbox" id="id-checkbox"/> </form> <div id="output-box"></div> result stopping keystrokes from reaching an edit field the following example demonstrates how invalid text input can be stopped from reaching the input field with preventdefault().
...And 3 more matches

Introduction to the File and Directory Entries API - Web APIs
you can develop apps that can read, write, and create files and directories in a sandboxed, virtual file system.
... sample use cases the following are just a few examples of how you can use the file and directory entries api: apps with persistent uploader when a file or directory is selected for upload, you can copy the file into a local sandbox and upload a chunk at a time.
...irectory entries api has asynchronous and synchronous versions when using the asynchronous api, always use the error callbacks the file and directory entries api interacts with other apis the file and directory entries api is case-sensitive the file and directory entries api is a virtual representation of a file system the api doesn't give you access to the local file system, nor is the sandbox really a section of the file system.
...And 3 more matches

GlobalEventHandlers.ontransitioncancel - Web APIs
in addition, we also use a click event to make the box dissappear (display: none;), showing how it triggers the transitioncancel event to fire.
... html this simply creates a <div> which we'll style with css below to make into a box that resizes and changes color and such.
... <div class="box"></div> css the css below styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it.
...And 3 more matches

RTCRemoteOutboundRtpStreamStats.localId - Web APIs
it takes as input the rtcpeerconnection being tested, calls getstats() to get a new rtcstatsreport with current statistics, then computes the results it's looking for, outputting those results as appropriate to the user by appending appropriate html to the contents of the <div> element whose class is stats-box.
... async function networkteststop(pc) { if (pc) { let statsbox = document.queryselector(".stats-box"); let endreport = await pc.getstats(); for (let endremoteoutbound of endreport.values()) { if (endremoteoutbound.type === "remote-outbound-rtp") { let startremoteoutbound = startreport.get(endremoteoutbound.id); if (startremoteoutbound) { let startinboundstats = findreportentry(startreport, "remoteid", startremoteoutbound.id); let endinboundstats = findreportentry(endreport, "remoteid", endremoteoutbound.id); let elapsedtime = (endremoteoutbound.timestamp - startremoteoutbound.timestamp) / 1000; /* in seconds */ let packetssent = endremoteoutbound.packetssent - startremoteoutbound.packetssent; let bytess...
...framesdecoded} frames for a frame rate of ${framerate.tofixed(2)} fps.<br>`; } let logentry = `<div class="stats-entry"><h2>report id: ${endremoteoutbound.id}</h2>` + `remote peer sent ${packetssent} packets ${timestring}.<br>` + `${framestring}` + `data size: ${bytessent} bytes.</div>`; statsbox.innerhtml += logentry; } else { statsbox.innerhtml += `<div class="stats-error">unable to find initial statistics for id ${endremoteoutbound.id}.</div>` } } statsbox.scrollto(0, statsbox.scrollheight); } } } here's what's going on in the networkteststop() function: after calling the rtcpeerconnection method getstats() to get the latest statistics repo...
...And 3 more matches

SVGSVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2...
...xt x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsvgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement and also implements the ones from svgzoomandpan, svgfittoviewbox, and windoweventhandlers.
... svgsvgelement.usecurrentview the initial view (i.e., before magnification and panning) of the current innermost svg document fragment can be either the "standard" view, i.e., based on attributes on the <svg> element such as viewbox) or on a "custom" view (i.e., a hyperlink into a particular <view> or other element).
...And 3 more matches

SubtleCrypto.encrypt() - Web APIs
rsa-oaep this code fetches the contents of a text box, encodes it for encryption, and encrypts it with using rsa-oaep.
... function getmessageencoding() { const messagebox = document.queryselector(".rsa-oaep #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(publickey) { let encoded = getmessageencoding(); return window.crypto.subtle.encrypt( { name: "rsa-oaep" }, publickey, encoded ); } aes-ctr this code fetches the contents of a text box, encodes it for encryption, and encrypts it using aes in ctr mode.
... function getmessageencoding() { const messagebox = document.queryselector(".aes-ctr #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(key) { let encoded = getmessageencoding(); // counter will be needed for decryption counter = window.crypto.getrandomvalues(new uint8array(16)); return window.crypto.subtle.encrypt( { name: "aes-ctr", counter, length: 64 }, key, encoded ); } let iv = new uint8array(16); let key = new uint8array(16); let data = new uint8array(12345); //crypto functions are wrapped in promises so we have to use await and make sure the function that //contains this code is an async function //encrypt function wants a...
...And 3 more matches

Accessibility documentation index - Accessibility
these sections are frequently presented as sidebars or call-out boxes.
... 57 aria: checkbox role aria, accessibility, needscontent, role(2), rôle the checkbox role is used for checkable interactive controls.
... elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.
...And 3 more matches

:target - CSS: Cascading Style Sheets
isn't that delightful?</p> css p:target { background-color: gold; } /* add a pseudo-element inside the target element */ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; margin-right: .25em; } /* style italic elements within the target element */ p:target i { color: red; } result pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any javascript.
... note: a more complete pure-css lightbox based on the :target pseudo-class is available on github (demo).
... html <ul> <li><a href="#example1">open example #1</a></li> <li><a href="#example2">open example #2</a></li> </ul> <div class="lightbox" id="example1"> <figure> <a href="#" class="close"></a> <figcaption>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 3 more matches

Basic Concepts of Multicol - CSS: Cascading Style Sheets
multiple-column layout, usually referred to as multicol, is a specification for laying out content into a set of column boxes much like columns in a newspaper.
...the columns are anonymous boxes and described as column boxes in the specification.
...the browser will then assign the correct amount of space to each column box to create the requested number of columns.
...And 3 more matches

Center an element - CSS: Cascading Style Sheets
in this recipe you will see how to center one box inside another.
... centering both horizontally and vertically was difficult before flexbox, with the box alignment properties it is now straightforward.
... requirements to place an item into the center of another box horizontally and vertically.
...And 3 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
order-before-color** -webkit-border-before-style** -webkit-border-before-width** -webkit-border-end** -webkit-border-end-color** -webkit-border-end-style** -webkit-border-end-width** -webkit-border-fit -webkit-border-horizontal-spacing -webkit-border-start** -webkit-border-start-color** -webkit-border-start-style** -webkit-border-start-width** -webkit-border-vertical-spacing -webkit-box-align** -webkit-box-direction** -webkit-box-flex-group** -webkit-box-flex** -webkit-box-lines** -webkit-box-ordinal-group** -webkit-box-orient** -webkit-box-pack** -webkit-box-reflect** c -webkit-column-axis -webkit-column-break-after -webkit-column-break-before -webkit-column-break-inside -webkit-column-progression -webkit-cursor-visibility d-i -webkit-dashboard-region -w...
...ebkit-font-size-delta -webkit-font-smoothing -webkit-highlight -webkit-hyphenate-character -webkit-hyphenate-limit-after -webkit-hyphenate-limit-before -webkit-hyphenate-limit-lines -webkit-initial-letter l -webkit-line-align -webkit-line-box-contain -webkit-line-clamp -webkit-line-grid -webkit-line-snap -webkit-locale -webkit-logical-height -webkit-logical-width m -webkit-margin-after-collapse -webkit-margin-after -webkit-margin-before-collapse -webkit-margin-before -webkit-margin-bottom-collapse -webkit-margin-collapse -webkit-margin-end** -webkit-margin-start** -webkit-margin-top-collapse -webkit-marquee-direction -webkit-marquee-increment -webkit-marquee-repetition -webkit-marquee-speed -webkit-marquee-style -webkit-marquee -webkit-mask-box-image-out...
...set -webkit-mask-box-image-repeat -webkit-mask-box-image-slice -webkit-mask-box-image-source -webkit-mask-box-image-width -webkit-mask-box-image -webkit-mask-repeat-x -webkit-mask-repeat-y -webkit-mask-source-type -webkit-max-logical-height -webkit-max-logical-width -webkit-min-logical-height -webkit-min-logical-width n -webkit-nbsp-mode p -webkit-padding-after** -webkit-padding-before** -webkit-padding-end** -webkit-padding-start** -webkit-perspective-origin-x -webkit-perspective-origin-y -webkit-print-color-adjust r-s -webkit-rtl-ordering -webkit-svg-shadow t -webkit-tap-highlight-color -webkit-text-combine -webkit-text-decoration-skip -webkit-text-decorations-in-effect -webkit-text-fill-color -webkit-text-security -webkit-text-stroke-color -web...
...And 3 more matches

background-origin - CSS: Cascading Style Sheets
syntax /* keyword values */ background-origin: border-box; background-origin: padding-box; background-origin: content-box; /* global values */ background-origin: inherit; background-origin: initial; background-origin: unset; the background-origin property is specified as one of the keyword values listed below.
... values border-box the background is positioned relative to the border box.
... padding-box the background is positioned relative to the padding box.
...And 3 more matches

border-bottom-left-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-bottom-left-radius: radius */ border-bottom-left-radius: 3px; /* percentage values */ /* circle if box is a square or ellipse if box is a rectangle */ border-bottom-left-radius: 20%; /* same as above: 20% of horizontal(width) and vertical(height) */ border-bottom-left-radius: 20% 20%; /* 20% of horizontal(width) and 10% of vertical(height) */ border-bottom-left-radius: 20% 10%; /* the corner is an ellipse */ /* border-bottom-left-radius: horizontal vertical */ border-bottom-left-radius: 0.5em 1...
...percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code .
...And 3 more matches

border-bottom-right-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-bottom-right-radius: radius */ border-bottom-right-radius: 3px; /* percentage values */ border-bottom-right-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */ border-bottom-right-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */ border-bottom-right-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */ /*the corner is an ellipse */ /* border-bottom-right-radius: horizontal vertical */ border-bottom-right-radius: 0.5em 1em; border-bottom-right-radi...
...percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code .
...And 3 more matches

caption-side - CSS: Cascading Style Sheets
values top the caption box should be positioned above the table.
... bottom the caption box should be positioned below the table.
... left the caption box should be positioned on the left side of the table.
...And 3 more matches

min-width - CSS: Cascading Style Sheets
none no limit on the size of the box.
...or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting minimum element width table { min-width: 75%; } form { min-width: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-width' in that specification.
... editor's draft css box sizing module level 3the definition of 'min-width' in that specification.
...And 3 more matches

object-position - CSS: Cascading Style Sheets
the object-position css property specifies the alignment of the selected replaced element's contents within the element's box.
... areas of the box which aren't covered by the replaced element's object will show the element's background.
... you can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the object-fit property.
...And 3 more matches

offset-path - CSS: Cascading Style Sheets
yntax /* default */ offset-path: none; /* function values */ offset-path: ray(45deg closest-side contain); /* url */ offset-path: url(#path); /* shapes */ offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); offset-path: path('m 0,200 q 200,200 260,80 q 290,20 400,0 q 300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment starting from the position of the box and proceeds in the direction defined by the specified angle similar to the css gradient angle where 0deg is up, with positive angles inc...
...] ) | <path()> | <url> | [ <basic-shape> | <geometry-box> ]where <size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<path()> = path( [ <fill-rule>, ]?
... <string> )<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <length-percentage> = <length> | <percentage><fill-rule> = nonzero | evenodd<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]?
...And 3 more matches

overflow-inline - CSS: Cascading Style Sheets
the overflow-inline css property sets what shows when content overflows the inline start and end edges of a box.
... values visible content is not clipped and may be rendered outside the padding box's inline start and end edges.
... hidden content is clipped if necessary to fit the inline dimension in the padding box.
...And 3 more matches

overflow - CSS: Cascading Style Sheets
values visible content is not clipped and may be rendered outside the padding box.
... hidden content is clipped if necessary to fit the padding box.
... clip like for hidden, the content is clipped to the element's padding box.
...And 3 more matches

overscroll-behavior-block - CSS: Cascading Style Sheets
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 block overscrolling in this demo we have two block-level boxes, one inside the other.
... 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.
...And 3 more matches

overscroll-behavior-inline - CSS: Cascading Style Sheets
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 inline overscrolling in this demo we have two block-level boxes, one inside the other.
... the outer box has a large width set on it so the page will scroll horizontally.
... 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 width so it will also scroll horizontally.
...And 3 more matches

white-space - CSS: Cascading Style Sheets
lines are broken as necessary to fill line boxes.
...lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
...lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
...And 3 more matches

Block formatting context - Developer guides
it's the region in which the layout of block boxes occurs and in which floats interact with other elements.
... html <section> <div class="box"> <div class="float">i am a floated box!</div> <p>i am content inside the container.</p> </div> </section> <section> <div class="box" style="overflow:auto"> <div class="float">i am a floated box!</div> <p>i am content inside the <code>overflow:auto</code> container.</p> </div> </section> <section> <div class="box" style="display:flow-root"> ...
...<div class="float">i am a floated box!</div> <p>i am content inside the <code>display:flow-root</code> container.</p> </div> </section> css section { height:150px; } .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .5); border:1px solid black; padding: 10px; } exclude external floats in the following example, we are using display:flow-root and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new bfc must not overlap the margin box of any floats in the same block formatting context as the...
...And 3 more matches

stroke-linejoin - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> <!-- upper left path: effect of the "miter" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- center path: effect of the "round" value --> <path d="m7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="round" /> ...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "arcs" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" stroke-linejoin="arcs" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="pink" fill="none" stroke-width=...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "bevel" value --> <path d="m1,5 l2,-3 l2,3" stroke="black" fill="none" stroke-linejoin="bevel" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> ...
...And 3 more matches

<feComposite> - SVG: Scalable Vector Graphics
example svg <svg width="330" height="195" viewbox="0 0 1100 650" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>example fecomposite - examples of fecomposite operations</title> <desc>four rows of six pairs of overlapping triangles depicting the six different fecomposite operators under different opacity values and different clearing of the background.</desc> <defs> ...
... the second set does not wipe out the background, with the result that the background sometimes shines through and is other cases is blended into itself (i.e., "double-counting").</desc> <filter id="overflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="over" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="inflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%...
..."> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="in" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="outflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="out" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="atopflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecompo...
...And 3 more matches

simple-prefs - Archive of obsolete content
type description example specification bool displayed as a checkbox and stores a boolean.
... { "description": "does it have tentacles?", "type": "bool", "name": "hastentacles", "value": true, "title": "tentacles" } boolint displayed as a checkbox and stores an integer.
... a boolint is presented to the user as a checkbox, but instead of storing true or false, the "on" or "off" checkbox states are mapped to integers using "on" or "off" properties in the specification.
...And 2 more matches

Downloading JSON and JavaScript in extensions - Archive of obsolete content
so the extension will not be allowed to move out of the amo sandbox.
...in this case, javascript sandboxing should be used to isolate the downloaded javascript from the rest of the extension, and host application.
... sandboxing is done using components.utils.evalinsandbox().
...And 2 more matches

List of Mozilla-Based Applications - Archive of obsolete content
its monitoring package astyle css editor editing tool atmail webmail client aviva for java mainframe connectivity product uses mozilla rhino babelgum internet tv service basilisk pre-servo xul-based web browser uses most of the firefox 55 source code batik java-based toolkit uses mozilla rhino bitbox security focused browser seemingly based on firefox blackbird browser for african american community bluegriffon wysiwyg editor next generation version of composer buzzbird twitter client built on xulrunner camino browser 2.5m downloads and ~400,000 active users ...
... unofficial bug-fix release of nvu kylo video browser uses gecko biofortis labmatrix web-accessible software application used for information management and integration of patient clinical, specimen, genetic and molecular assay data based on xul liaison groupware client for novell’s email and collaboration server previously called mozngw linbox kiosk browser (fr) web browser dedicated browser for french prefecture and town hall litl internet computer for home uses spidermonkey and gecko lizilayers gis application 3liz also creates some gis firefox add-ons logitech harmony remote software software for remote control device uses gre or xulrunner longman dictionary of contemporary...
...and distributed computing uses mozilla rhino phloneme publishing tool for vocab collab phped php editor embedded mozilla browser in product pidgin im client uses nss plain old webserver extension and standalone webserver 5,000 users and 30,000 downloads poe::xul framework for remote xul application in poe postbox email client started as a fork of thunderbird printgroove jt suite print process software uses xulrunner and spidermonkey prism (was webrunner) single-site browser xulrunner application pro/engineer wildfire cadcam product psycrunner chat, messenger, multicast toolkit about 1,000 users – xulrunner version of psyczilla extension ...
...And 2 more matches

Table Layout Regression Tests - Archive of obsolete content
writing regression data to e:\moz_src\mozilla\layout\html\tests\table\core\verify\standards1.rgd comparing to regression data from e:\moz_src\mozilla\layout\html\tests\table\core\baseline\standards1.rgd frame bbox mismatch: 0,26437,4824,600 vs.
...ft: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum left: null top: null right: null bottom: null left: null top: null right: null bottom: null 1[0x1]enum 0|1 1 [none]|left: auto top: auto right: auto bottom: auto auto 0[0x0]tw null auto 0[0x0]tw null 0 auto |0 0 0 normal normal 0[0x0]tw normal |0 8 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 null frame bbox mismatch: 0,0,4824,600 vs.
...ft: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum left: null top: null right: null bottom: null left: null top: null right: null bottom: null 1[0x1]enum 0|1 1 [none]|left: auto top: auto right: auto bottom: auto auto 0[0x0]tw null auto 0[0x0]tw null 2 auto |0 0 0 normal normal 0[0x0]tw normal |0 8 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 null frame bbox mismatch: 24,24,4776,552 vs.
...And 2 more matches