Search completed in 1.72 seconds.
593 results for "cell":
Your results are loading. Please wait...
ARIA: cell role - Accessibility
the cell value of the aria role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information.
... to be supported, the cell must be nested in an element with the role of row.
... <div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </div> a better, more semantic way of writing the cells above would be to use the semantic <td> element.
...And 33 more matches
HTMLTableCellElement - Web APIs
the htmltablecellelement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header or data cells, in an html document.
...ndale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecellelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecellelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inheri...
... htmltablecellelement.abbr a domstring which can be used on <th> elements (not on <td>), specifying an alternative label for the header cell..
...And 31 more matches
Table Cellmap - Archive of obsolete content
introduction the table layout use the cellmap for two purposes: quick lookup of table structural data store of the border collapse data the cellmap code is contained in nscellmap.cpp and nscellmap.h this document does currently describe only the quick lookup part of the game, border collapse is still far away cellmap data - overview the entries in the cellmap contain information about the table cell frame corresponding to a given row and column number (celldata.h).
...if mspan is 0 then morigcell is in effect 81 // and the data does not represent a span.
...83 union { 84 nstablecellframe* morigcell; 85 long mbits; 86 }; the idea behind this construction is a entry in the cellmap can be either the origin of a row- or colspan (a cell cell without a defined row- or colspan attribute assumes 1 as a default value), or a entry which is only covered by a row- or colspan.
...And 28 more matches
IAccessibleTableCell
other-licenses/ia2/accessibletablecell.idlnot scriptable this interface gives access to the cells of a two-dimensional table.
... 1.0 66 introduced gecko 1.9.2 inherits from: iunknown last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview [propget] hresult columnextent([out] long ncolumnsspanned ); [propget] hresult columnheadercells([out, size_is(, ncolumnheadercells,)] iunknown cellaccessibles, [out] long ncolumnheadercells ); [propget] hresult columnindex([out] long columnindex ); [propget] hresult isselected([out] boolean isselected ); [propget] hresult rowcolumnextents([out] long row, [out] long column, [out] long rowextents, [out] long columnextents, [out] boolean isselected ); [propget] hresult rowextent([out] long nrowsspanned ); [propget] hresult rowheadercells([out, size_is(, nrowheadercells,)] iunknown cellaccessibles, [out] long nrowhead...
...ercells ); [propget] hresult rowindex([out] long rowindex ); [propget] hresult table([out] iunknown table ); methods columnextent() returns the number of columns occupied by this cell accessible.
...And 20 more matches
<td>: The Table Data Cell element - HTML: Hypertext Markup Language
WebHTMLElementtd
the html <td> element defines a cell of a table that contains data.
... implicit aria role cell if a descendant of a <table> element permitted aria roles any dom interface htmltabledatacellelement attributes this element includes the global attributes.
... colspan this attribute contains a non-negative integer value that indicates for how many columns the cell extends.
...And 20 more matches
ARIA: gridcell role - Accessibility
the gridcell role is used to make a cell in a grid or treegrid.
... <div role="gridcell">potato</div> <div role="gridcell">cabbage</div> <div role="gridcell">onion</div> elements that have role="gridcell" applied to them must be the child of an element with a role of row.
... <div role="row"> <div role="gridcell">jane</div> <div role="gridcell">smith</div> <div role="gridcell">496-619-5098</div> … </div> 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 13 more matches
HTMLTableRowElement.insertCell() - Web APIs
the htmltablerowelement.insertcell() method inserts a new cell (<td>) into a table row (<tr>) and returns a reference to the cell.
... note: insertcell() inserts the cell directly into the row.
... the cell does not need to be appended separately with node.appendchild() as would be the case if document.createelement() had been used to create the new <td> element.
...And 10 more matches
treecell - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single cell in a tree.
...you can set the text for the cell using the label attribute.
... attributes editable, label, mode, properties, ref, src, value attributes editable type: boolean allows the contents of individual cells in the column to be changed, especially useful when <treecol type="checkbox">.
...And 6 more matches
nsIAccessibleTableCell
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview boolean isselected(); attributes attribute type description columnextent long return the number of columns occupied by this cell.
... the result differs from 1 if the specified cell spans multiple columns.
... columnheadercells nsiarray return an array of column header cells for this cell.
...And 6 more matches
Grid Cell - MDN Web Docs Glossary: Definitions of Web-related terms
in a css grid layout, a grid cell is the smallest unit you can have on your css grid.
... it is the space between four intersecting grid lines and conceptually much like a table cell.
... if you do not place items using one of the grid placement methods, direct children of the grid container will be placed one into each individual grid cell by the auto-placement algorithm.
...And 3 more matches
MediaTrackSettings.echoCancellation - Web APIs
the mediatracksettings dictionary's echocancellation property is a boolean value whose value indicates whether or not echo cancellation is enabled on an audio track.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.echocancellation property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
... echo cancellation is a feature which attempts to prevent echo effects on a two-way audio connection by attempting to reduce or eliminate crosstalk between the user's output device and their input device.
...And 3 more matches
listcell - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single cell of a listbox.
... by default it only contains text but iconic and checkbox listcells are also available.
... attributes crop, disabled, image, label, type properties disabled style classes listcell-iconic, examples (example needed) attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
...And 2 more matches
HTMLTableElement.cellSpacing - Web APIs
while you should instead use the css border-spacing property, the obsolete htmltableelement interface's cellspacing property represents the spacing around the individual <th> and <td> elements representing a table's cells.
... any two cells are separated by the sum of the cellspacing of each of the two cells.
... syntax htmltableelement.cellspacing = spacing; var spacing = htmltableelement.cellspacing; value a domstring which is either a number of pixels (such as "10") or a percentage value (like "10%").
...And 2 more matches
MediaTrackConstraints.echoCancellation - Web APIs
the mediatrackconstraints dictionary's echocancellation property is a constrainboolean describing the requested or mandatory constraints placed upon the value of the echocancellation constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.echocancellation as returned by a call to mediadevices.getsupportedconstraints().
... syntax var constraintsobject = { echocancellation: constraint }; constraintsobject.echocancellation = constraint; value if this value is a simple true or false, the user agent will attempt to obtain media with echo cancellation enabled or disabled as specified, if possible, but will not fail if this can't be done.
...And 2 more matches
empty-cells - CSS: Cascading Style Sheets
the empty-cells css property sets whether borders and backgrounds appear around <table> cells that have no visible content.
... syntax /* keyword values */ empty-cells: show; empty-cells: hide; /* global values */ empty-cells: inherit; empty-cells: initial; empty-cells: unset; the empty-cells property is specified as one of the keyword values listed below.
... values show borders and backgrounds are drawn like in normal cells.
...And 2 more matches
treecell.editable - Archive of obsolete content
« xul reference home editable type: boolean allows the contents of individual cells in the column to be changed, especially useful when <treecol type="checkbox">.
... also useful for disabling editing of individual treecells.
... when the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell.
...the tree must be a content tree for this to work on treecells.
DataTransfer.mozUserCancelled - Web APIs
the datatransfer.mozusercancelled property is used in the dragend event handler to determine if the user canceled the drag or not.
... syntax datatransfer.mozusercancelled; return value a boolean representing true if the user canceled the drag event and returns false otherwise.
... example this example shows the use of the mozusercancelled property in the dragend event handler.
... function dragend_handler(event) { var dragdata = event.datatransfer; console.log("mozusercancelled = " + dragdata.mozusercancelled); } specifications this property is not defined in any web standard.
Table Cellmap - Border Collapse - Archive of obsolete content
introduction this document describes the additional information that is stored for border collapse tables in the cellmap.
... information storage each cellmap entry stores for tables in the border collapse mode additional information about its top and left edge and its top left corner.
...the following owners are possible: etableowner = 0, ecolgroupowner = 1, eajacolgroupowner = 2, // col group to the left ecolowner = 3, eajacolowner = 4, // col to the left erowgroupowner = 5, eajarowgroupowner = 6, // row group above erowowner = 7, eajarowowner = 8, // row above ecellowner = 9, eajacellowner = 10 // cell to the top or to the left the ownership is determined by the rules for border conflict resolution as defined in css 2.1 corner for the corner we store the corner ownership, defined by the orientation of the major edge relative to the corner that goes into that corner.
HTMLTableElement.cellPadding - Web APIs
the htmltableelement.cellpadding property represents the padding around the individual cells of the table.
... syntax htmltableelement.cellpadding = padding; var padding = htmltableelement.cellpadding; padding is either a number of pixels (e.g.
... example // set cell padding to 10 pixels let t = document.getelementbyid('tablea'); t.cellpadding = '10'; specification w3c dom 2 html specification htmltableelement .cellpadding.
MediaTrackSupportedConstraints.echoCancellation - Web APIs
the mediatracksupportedconstraints dictionary's echocancellation property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the echocancellation constraint.
... syntax echocancellationconstraintsupported = supportedconstraintsdictionary.echocancellation; value this property is present in the dictionary (and its value is always true) if the user agent supports the echocancellation constraint.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().echocancellation) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'echocancellation' in that specification.
treecell.mode - Archive of obsolete content
the cell text is displayed instead.
... normal the cell uses its value attribute to determine the amount of the bar that is filled in.
ROLE_CELL
« gecko roles page represents a cell within a table.
...interfaces nsiaccessible nsisupports nsiaccessibletext nsiaccessiblehypertext nsiaccessibleeditabletext nsiaccessiblehyperlink nsiaccessibleselectable nsiaccessiblevalue nsiaccessnode mapped to at-spi: atk_role_table_cell atk: atk_role_list_item ua: nsaccessibilitygrouprole msaa/ia2: role_system_cell used by aria: gridcell xul: <listcell/> html: <td> ...
treecell.src - Archive of obsolete content
« xul reference home src type: uri set this to the uri of an image to appear in the tree cell.
listcell-iconic - Archive of obsolete content
« xul reference home listcell-iconic use this class to have an image appear on the listcell.
::-moz-tree-cell-text(hover)
the :-moz-tree-cell-text(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over text in a tree cell.
::-moz-tree-cell-text
associated elements <xul:treecell> style properties font visibility color text-decoration ...
::-moz-tree-cell
associated elements <xul:treecell> style properties background border margin outline padding visibility ...
Building accessible custom components in XUL - Archive of obsolete content
label elements for each cell in the spreadsheet.
...we define the grid, then define the headers for each row (numbered 1 through 7), then define the column header and cells for each column.
... the label for each header and cell is defined in the value attribute.
...And 44 more matches
nsITreeView
method overview boolean candrop(in long index, in long orientation, in nsidomdatatransfer datatransfer); boolean candropbeforeafter(in long index, in boolean before); obsolete since gecko 1.8 boolean candropon(in long index); obsolete since gecko 1.8 void cyclecell(in long row, in nsitreecolumn col); void cycleheader(in nsitreecolumn col); void drop(in long row, in long orientation, in nsidomdatatransfer datatransfer); astring getcellproperties(in long row, in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring getcelltext(in long row, in nsitreecolumn col); astring getcellvalue(in...
...er(in long index); boolean iscontainerempty(in long index); boolean iscontaineropen(in long index); boolean iseditable(in long row, in nsitreecolumn col); boolean isselectable(in long row, in nsitreecolumn col); boolean isseparator(in long index); boolean issorted(); void performaction(in wstring action); void performactiononcell(in wstring action, in long row, in nsitreecolumn col); void performactiononrow(in wstring action, in long row); void selectionchanged(); void setcelltext(in long row, in nsitreecolumn col, in astring value); void setcellvalue(in long row, in nsitreecolumn col, in astring value); void settree(in nsitreeboxobject tree); void toggleopenstate(in ...
... cyclecell() called on the view when a cell in a non-selectable cycling column (for example, unread/flag/and so on.) is clicked.
...And 41 more matches
IAccessibleTable
1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) typically all accessible objects that represent cells or cell-clusters of a table will be at the same time children of the table.
...when the table cells are not direct children of a table, the object representing the cell can define a "table-cell-index" object attribute identifying the 0 based table cell index.
...the "table-cell-index" attribute can be used just like a child index of the typical case.
...And 36 more matches
nsIAccessibleTable
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsiaccessible getcellat(in long rowindex, in long columnindex); note: renamed from cellrefat in gecko 1.9.2 long getcellindexat(in long rowindex, in long columnindex); note: renamed from getindexat in gecko 1.9.2 astring getcolumndescription(in long columnindex); long getcolumnextentat(in long row, in long column); long getcolumnindexat(in long cellindex); note: renamed from getcolumnatindex in gecko 1.9.2 void getrowandcolumnindicesat(in long cellindex, out long rowindex, out long columnindex); astring getrowdesc...
...ription(in long rowindex); long getrowextentat(in long row, in long column); long getrowindexat(in long cellindex); note: renamed from getrowatindex in gecko 1.9.2 void getselectedcellindices(out unsigned long cellsarraysize, [retval, array, size_is(cellsarraysize)] out long cellsarray); note: renamed from getselectedcells in gecko 1.9.2 void getselectedcolumnindices(out unsigned long columnsarraysize, [retval, array, size_is(columnsarraysize)] out long columnsarray); note: renamed from getselectedcolumns in gecko 1.9.2 void getselectedrowindices(out unsigned long rowsarraysize, [retval, array, size_is(rowsarraysize)] out long rowsarray); note: renamed from getselectedrows in gecko 1.9.2 boolean iscellselected(in long rowindex, in long colu...
...obsolete since gecko 1.9.2 selectedcellcount unsigned long the total number of selected cells.
...And 35 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
WebHTMLElementtr
the html <tr> element defines a row of cells in a table.
... the row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.
... to provide additional control over how cells fit into (or span across) columns, both <th> and <td> support the colspan attribute, which lets you specify how many columns wide the cell should be, with the default being 1.
...And 34 more matches
Styling a Tree - Archive of obsolete content
setting properties instead, you must use the properties attribute on the rows or cells to set one or more named properties.
... set the property on a row or cell, as in the following example: <treerow properties="makeitblue"> css selectors for the tree the style sheet can take this property and use it to change the appearance of the row for unread messages or labels.
...this is because you can specify the style for a number of parts of the cell individually.
...And 30 more matches
ARIA: grid role - Accessibility
the grid role is for a widget that contains one or more rows of cells.
... the position of each cell is significant and can be focused using keyboard input.
...> </td> <!-- more columns --> </tr> <tr> <th scope="row">aisle 2</th> <td tabindex="-1"> <button id="2a" tabindex="-1">2a</button> </td> <td tabindex="-1"> <button id="2b" tabindex="-1">2b</button> </td> <!-- more columns --> </tr> </tbody> </table> description a grid widget contains one or more rows with one or more cells of thematically related interactive content.
...And 29 more matches
<th> - HTML: Hypertext Markup Language
WebHTMLElementth
the html <th> element defines a cell as header of a group of table cells.
... implicit aria role columnheader or rowheader permitted aria roles any dom interface htmltableheadercellelement attributes this element includes the global attributes.
... abbr this attribute contains a short abbreviated description of the cell's content.
...And 26 more matches
Images, Tables, and Mysterious Gaps - Archive of obsolete content
back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained.
...thanks to an obscure corner of the css specification, every design based on a precise layout of small images in table cells have become visual disasters just waiting to happen.
...we start with a simple case, illustrated in figure 1: a one-cell table containing an image.
...And 24 more matches
tree - Archive of obsolete content
ArchiveMozillaXULtree
on, 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> <treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lunch"/> </treerow> </treeitem> </treechildren> </tree> a tree with several columns and nested items <tree id="mytree" flex="1" hidecolumnpicker="false" seltype="si...
... rows="5"> <treecols id="mytree2-treecols"> <treecol id="mytree2-treecol0" primary="true" flex="2" label="column a" persist="width" ordinal="1"/> <splitter class="tree-splitter" ordinal="2"/> <treecol id="mytree2-treecol1" flex="1" label="column b" persist="width" ordinal="3"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="1"/> <treecell label="a"/> </treerow> </treeitem> <!-- make sure to set container="true" --> <treeitem container="true" open="true"> <treerow> <treecell label="2"/> <treecell label="b"/> </treerow> <treechildren> <treeitem> <treerow> <treecell label="2a"/> <treecell label="ba"/> ...
... editable type: boolean indicates that the cells of the tree may be edited.
...And 20 more matches
IAccessibleTable2
1.0 66 introduced gecko 1.9.2 inherits from: iunknown last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) please also refer to the iaccessibletablecell interface.
...method overview [propget] hresult caption([out] iunknown accessible ); [propget] hresult cellat([in] long row, [in] long column, [out] iunknown cell ); [propget] hresult columndescription([in] long column, [out] bstr description ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult modelchange([out] ia2tablemodelchange modelchange ); [propget] hresult ncolumns([out] long columncount ); [propget] hresult nrows([out] long rowcount ); [propget] hresult nselectedcells([out] long cellcount ); [propget] hresult nselectedcolumns([out] long columncount ); [prop...
...get] hresult nselectedrows([out] long rowcount ); [propget] hresult rowdescription([in] long row, [out] bstr description ); hresult selectcolumn([in] long column ); [propget] hresult selectedcells([out, size_is(, nselectedcells,)] iunknown cells, [out] long nselectedcells ); [propget] hresult selectedcolumns([out, size_is(, ncolumns)] long selectedcolumns, [out] long ncolumns ); [propget] hresult selectedrows([out, size_is(, nrows)] long selectedrows, [out] long nrows ); hresult selectrow([in] long row ); [propget] hresult summary([out] iunknown accessible ); hresult unselectcolumn([in] long column ); hresult unselectrow([in] long row ); methods caption() returns the caption for the table.
...And 20 more matches
HTML table basics - Learn web development
LearnHTMLTablesBasics
overview: tables next this article gets you started with html tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
... the smallest container inside a table is a table cell, which is created by a <td> element ('td' stands for 'table data').
... add the following inside your table tags: <td>hi, i'm your first cell.</td> if we want a row of four cells, we need to copy these tags three times.
...And 19 more matches
mix-blend-mode - CSS: Cascading Style Sheets
normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | 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> ...
...l(240,0%,100%)" /> </lineargradient> </defs> <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"> 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="...
...And 18 more matches
Index - Archive of obsolete content
198 miscellaneous add-ons, code, code snippets, extensions, snippets no summary!
... 646 table cellmap gecko the table layout use the cellmap for two purposes: 647 table cellmap - border collapse this document describes the additional information that is stored for border collapse tables in the cellmap.
... 926 listcell.type xul attributes, xul reference no summary!
...And 17 more matches
Table Reflow Internals - Archive of obsolete content
nt of target usually turns it into an incremental reflow with a style changed command type table frames nstableouter frame ↙ ↘ nstable frame nstablecaption frame ↙ ↘ ↓ nstablecol groupframe nstablerow groupframe nsblockframe ↓ ↓ nstablecol frame nstablerow frame ↓ nstablecell frame ↓ nsblock frame table reflow outer table reflows table and caption (if present) table reflows row groups in multiple passes pass 1 - unconstrained width, height and requests max elem width.
... the table figures out the column widths (balances) given the style width constraints on the table, col groups, cols, cells the preferred and max element sizes of the cells (from the pass 1 reflow), and considers colspans pass 2 - cell widths are constrained by the column widths (heights are only constrained in paginated mode).
... table reflow table reflows row groups (continued) the row group figures out the row heights given its style height constraints, its rows and cells, and the actual heights of its rows and cells from the pass 2 reflow.
...And 17 more matches
Building Trees - Archive of obsolete content
specifically, the action body should be a single treeitem with its rows and cells.
... an example (using an rdf source): <tree id="photoslist" flex="1" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" flags="dont-build-content"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://purl.org/dc/elements/1.1/title"/> <treecell label="rdf:http://purl.org/dc/elements/1.1/date"/> </treerow> </treeitem> </treechildren> </template> </tree> note: the tree columns (treecols) are declared outside the template as static content, since they only need to be declared once.
...instead of generating content, the builder uses the cell attributes to determine what to display.
...And 15 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
179 listcell.type xul attributes, xul reference no summary!
... 397 treecell.editable xul attributes, xul reference no summary!
... 398 treecell.mode xul attributes, xul reference no summary!
...And 14 more matches
Tree Box Objects - Archive of obsolete content
you don't need to call the rowcountchanged() function when a row has simply changed in some way, for example if a cell's label changes.
... other redrawing functions are invalidatecell() to redraw only a single cell invalidatecolumn() to redraw a column invalidaterange() to redraw a range of rows invalidate() to redraw the entire tree.
... cell coordinates some of the most interesting functions of the tree box object are several functions which may be used to get the parts of the tree at specific coordinates and vice versa.
...And 14 more matches
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
this contrasts with the listbox, where individual listitem and listcell tags are used to specify the rows in the listbox.
...when it comes time to display a cell, the tree widget will call out to this tree view to determine what to display, which in turn will be drawn by the tree.
...for instance, the getcelltext() function will be called to get the label for a particular cell in the tree.
...And 14 more matches
Index - Web APIs
WebAPIIndex
798 datatransfer.mozusercancelled api, non-standard, property, reference, drag and drop the datatransfer.mozusercancelled property is used in the dragend event handler to determine if the user canceled the drag or not.
...both events are non-cancellable (you can't prevent the user from coming online, or going offline).
...cancelling the event prevents the script from executing.
...And 14 more matches
Custom Tree Views - Archive of obsolete content
naturally, since a custom tree view is being used, the content tree view will not be used, so the treeitem, treerow, and treecell elements will have no purpose since the custom view will get its data from elsewhere.
...the following example shows this: <tree id="my-tree" flex="1"> <treecols> <treecol id="namecol" label="name" flex="1"/> <treecol id="datecol" label="date" flex="1"/> </treecols> <treechildren/> </tree> to assign data to be displayed in the tree, the view object needs to be created which is used to indicate the value of each cell, the total number of rows plus other optional information.
... getcelltext( row , column ) this method should return the text contents at the specified row and column.
...And 13 more matches
nsITreeBoxObject
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 horizontalposition); void invalidate(); ...
... void invalidatecolumn(in nsitreecolumn col); void invalidaterow(in long index); void invalidatecell(in long row, in nsitreecolumn col); void invalidaterange(in long startindex, in long endindex); void invalidatecolumnrange(in long startindex, in long endindex, in nsitreecolumn col); long getrowat(in long x, in long y); void getcellat(in long x, in long y, out long row, out nsitreecolumn col, out acstring childelt); void getcoordsforcellitem(in long row, in nsitreecolumn col, in acstring element, out long x, out long y, out long width, out long height); boolean iscellcropped(in long row, in nsitreecolumn col); void rowcountchanged(in long index, in long count); void beginupdatebatch(); void en...
... void ensurerowisvisible(in long index); parameters index the index of the row ensurecellisvisible() ensures that a given cell in the tree is visible.
...And 13 more matches
ARIA: row role - Accessibility
an element with role="row" is a row of cells within a tabular structure.
... a row contains one or more cells, grid cells or column headers, and possibly a row header, within a grid, table or treegrid, and optionally within a rowgroup.
...ns" aria-describedby="country_population_desc"> <div id="country_population_desc">world populations by country</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="descending">country</span> <span role="columnheader"aria-sort="none">population</span> </div> </div> <div role="rowgroup"> <div role="row"> <span role="cell">finland</span> <span role="cell">5.5 million</span> </div> <div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </div> </div> </div> description the element role="row" is a row within a grid, table or treegrid, and optionally within a rowgroup, that is a container for one or more cells, gridcells, columnheaders, or r...
...And 13 more matches
ARIA: table role - Accessibility
ia-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> <div role="rowgroup"> <div role="row" aria-rowindex="11"> <span role="cell">header</span> <span role="cell">h1</span> </div> <div role="row" aria-rowindex="16"> <span role="cell">header</span> <span role="cell">h6</span> </div> <div role="row" aria-rowindex="18"> <span role="cell">rowgroup</span> <span role="cell">thead</span> </div> <div role="row" aria-rowindex="24"> <span role="cell">term</span> <span ...
...role="cell">dt</span> </div> </div> </div> description an element with role="table" is a static tabular structure with rows containing cells.
... the cells are not focusable or selectable, though widgets within individual cells of the table can be interactive.
...And 12 more matches
Tree Widget Changes - Archive of obsolete content
for example, nsitreeview.getcellvalue() takes a row index and a nsitreecolumn as arguments, whereas before it took a row index and a column id.
... the invalidateprimarycell(row) method has been removed, instead use nsitreeboxobject.invalidatecell() like this invalidatecell(row, tree.columns.getprimarycolumn()).
... this may be used to redraw a cell after it or its data has been changed.
...And 11 more matches
Garbage collection
principal data structures cell a cell is the unit of memory that is allocated and collected by the gc, as used externally.
... in other words, from the point of view of the rest of the engine, the job of the gc is to allocate cells and automatically collect them.
... cell is the base class for all classes that are allocated by the gc, e.g., jsobject.
...And 11 more matches
HTMLTableRowElement - Web APIs
htmltablerowelement.bgcolor is a domstring containing the background color of the cells.
... htmltablerowelement.cells read only returns a live htmlcollection containing the cells in the row.
... the htmlcollection is live and is automatically updated when cells are added or removed.
...And 11 more matches
HTML table advanced features and accessibility - Learn web development
rather than have a screenreader read out the contents of many cells just to find out what the table is about, he or she can rely on a caption and then decide whether or not to read the table in greater detail.
... next, add a colspan attribute to make the "sum" cell span across the first four columns, so the actual number appears at the bottom of the "cost" column.
...this is generally not really advised, as it makes the markup more confusing and less accessible to screenreader users, and in many cases you might as well just insert extra cells/rows/columns into the existing table.
...And 10 more matches
<tbody>: The Table Body element - HTML: Hypertext Markup Language
WebHTMLElementtbody
deprecated attributes align this enumerated attribute specifies how horizontal alignment of each cell content will be handled.
... possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes.
... char this attribute is used to set the character to align the cells in a column on.
...And 10 more matches
List Controls - Archive of obsolete content
each cell may have arbitrary content within it, although usually only text is used.
...you cannot have a single cell selected.
...the listcell element may be used for each cell in a row.
...And 9 more matches
Mozilla Quirks Mode Behavior
miscellaneous & style all of the style rules in layout/style/res/quirk.css apply only in quirks mode: orphaned li has an inside bullet (bug 1049).
... maybe (firefox 3) when computing the minimum intrinsic width of an inline flow directly in a table cell (no blocks in between), it is assumed that it is not possible to break before and after an image (when otherwise it would be).
...should look into tablequirkcolorrule, re-describe, and figure out when it changed.] obsolete since gecko 37 the empty-cells property defaulted to hide in quirks mode but show (according to css2.1) in standards mode (see bug 33244) (though the correct fix would be to specify it on the html table element in quirk.css).
...And 9 more matches
clip-path - CSS: Cascading Style Sheets
WebCSSclip-path
examples comparison of html and svg <svg class="defs"> <defs> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="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" /> </clippath> </defs> </svg> <div class="grid"> <div class="col"> <div class="note">clip-path: none</div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="none"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="none"> <rect x="24" y="24" width="144" height="144" /> <text x="96"...
...th: url(#mypath)<br><br> assuming the following clippath definition: <pre> &lt;svg&gt; &lt;clippath id="mypath" clippathunits="objectboundingbox"&gt; &lt;path d="m0.5,1 c 0.5,1,0,0.7,0,0.3 a 0.25,0.25,1,1,1,0.5,0.3 a 0.25,0.25,1,1,1,1,0.3 c 1,0.7,0.5,1,0.5,1 z" /&gt; &lt;/clippath&gt; &lt;/svg&gt;</pre> </div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="svg"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y...
...="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: path('m15,45 a30,30,0,0,1,75,45 a30,30,0,0,1,135,45 q135,90,75,130 q15,90,15,45 z') </div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="svg2"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg2"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping...
...And 9 more matches
<color> - CSS: Cascading Style Sheets
-moz-cellhighlight background color for selected item in a tree widget.
... should be used with the -moz-cellhighlighttext foreground color.
... see also -moz-html-cellhighlight.
...And 9 more matches
treecol - Archive of obsolete content
<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).
... treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells.
... */ list-style-image: none; } treechildren::-moz-tree-checkbox(checked){ /* css for checked cells.
...And 8 more matches
Mork
MozillaTechMork
mid ( cell | metarow | '-' )* ']' group = '@$${' hex '{@' (dictionary|table|row)* ('@$$}' hex '}@' | '@$$}~~}@') metadictionary = '<' cell* '>' metatable = '{' ( cell | row | rowreference )* '}' metarow = '[' cell* ']' rowreference = hex ( '!' hex )?
... cell = '(' ( '^' mid | name ) ( '=' value | '^' mid ) ')' alias = '(' hex '=' value ')' mid = hex ( ':' ( name | '^' hex ) )?
... some notes on further terminology: when referring to cells or aliases, the first component is the key and the second component is the value.
...And 8 more matches
Index
MozillaTechXPCOMIndex
161 iaccessible2 interfaces, needscontent, xpcom, xpcom interface reference returns the attributes specific to this iaccessible2 object, such as a cell's formula.
... 170 iaccessibletable interfaces, xpcom, xpcom interface reference typically all accessible objects that represent cells or cell-clusters of a table will be at the same time children of the table.
...when the table cells are not direct children of a table, the object representing the cell can define a "table-cell-index" object attribute identifying the 0 based table cell index.
...And 8 more matches
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
ly (sample1.html) html <input type="button" value="generate a table." onclick="generate_table()"> javascript function generate_table() { // get the reference for the body var body = document.getelementsbytagname("body")[0]; // creates a <table> element and a <tbody> element var tbl = document.createelement("table"); var tblbody = document.createelement("tbody"); // creating all cells for (var i = 0; i < 2; i++) { // creates a table row var row = document.createelement("tr"); for (var j = 0; j < 2; j++) { // create a <td> element and a text node, make the text // node the contents of the <td>, and put the <td> at // the end of the table row var cell = document.createelement("td"); var celltext = document.createtextnode("cell in row...
... "+i+", column "+j); cell.appendchild(celltext); row.appendchild(cell); } // add the row to the end of the table body tblbody.appendchild(row); } // put the <tbody> in the <table> tbl.appendchild(tblbody); // appends <table> into <body> body.appendchild(tbl); // sets the border attribute of tbl to 2; tbl.setattribute("border", "2"); } note the order in which we created the elements and the text node: first we created the <table> element.
... for each <td> element, we then created the text node with the table cell's text.
...And 8 more matches
<table>: The Table element - HTML: Hypertext Markup Language
WebHTMLElementtable
the html <table> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
... cellpadding this attribute defines the space between the content of a cell and its border, displayed or not.
... if the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content.
...And 8 more matches
Grids - Archive of obsolete content
ArchiveMozillaXULTutorialGrids
note that you do not need an element to declare a cell -- there is no equivalent of the html td element.
... instead, you put the contents of cells directly in the row elements.
...if you wanted one particular cell to contain multiple elements, you can use a nested hbox or other box element.
...And 7 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
control of overlapping content more than one item can be placed into a grid cell or area and, they can partially overlap each other.
...the child items will be laid out on this grid one in each grid cell.
...using auto means that the size will look at the content size and will stretch to give space for the tallest item in a cell, in this row.
...And 7 more matches
Download
this property becomes true as soon as the cancel() method is called, though the stopped property might remain false until the cancellation request has been processed.
... if the cancel() method was called but the cancellation process has not finished yet, this method waits for the cancellation to finish, then restarts the download immediately.
... the cancellation request is asynchronous.
...And 6 more matches
nsIAccessibleRole
role_table 24 represents a table that contains rows and columns of cells, and optionally, row headers and column headers.
...also refer to the following roles: role_columnheader, role_rowheader, role_column, role_row, role_cell.
... role_column 27 represents a column of cells within a table.
...And 6 more matches
Drag Operations - Web APIs
if you want to allow a drop, you must prevent the default handling by cancelling both the dragenter and dragover events.
...if the drag data does not contain a link, the event will not be cancelled, and a drop cannot occur at that location.
...the dragleave event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.
...And 6 more matches
ARIA: rowgroup role - Accessibility
a rowgroup contains one or more rows of cells, grid cells, column headers, or row headers within a grid, table or treegrid.
...ns" aria-describedby="country_population_desc"> <div id="country_population_desc">world populations by country</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="descending">country</span> <span role="columnheader"aria-sort="none">population</span> </div> </div> <div role="rowgroup"> <div role="row"> <span role="cell">finland</span> <span role="cell">5.5 million</span> </div> <div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </div> </div> </div> description rowgroup establishes a relationship between owned row elements and is a structural equivalent to the thead, tfoot and tbody elements in html.
...each row, in turn, contains child cells.
...And 6 more matches
vertical-align - CSS: Cascading Style Sheets
the vertical-align css property sets vertical alignment of an inline, inline-block or table-cell box.
...c61c3b6.png"/> -100%:<img style="vertical-align:-100%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> </p> #* { box-sizing: border-box; } img { margin-right: 0.5em; } p { height: 3em; padding: 0 .5em; font-family: monospace; text-decoration: underline overline; margin-left: auto; margin-right: auto; width: 80%; } to vertically align the content of a cell in a table: <table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> <td style="vertical-align: middle">middle</td> <td style="vertical-align: bottom">bottom</td> <td> <p>there is a theory which states that if ever anyone discovers exactly what the universe is for and why it is here, it will instantly disappear and be ...
...y something even more bizarre and inexplicable.</p> <p>there is another theory which states that this has already happened.</p> </td> </tr> </table> table { margin-left: auto; margin-right: auto; width: 80%; } table, th, td { border: 1px solid black; } td { padding: 0.5em; font-family: monospace; } note that vertical-align only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements.
...And 6 more matches
Table Layout Strategy - Archive of obsolete content
the words the table layout is width oriented and knows the following widths: minimum content width - min the minimum width that is required to layout the content, all linebreak possibilities will be used percent width - pct the cell width specified in percent, fixed width - fix the cell width specified as px, mm etc., proportional width - prop the cell width specified via 1*, 2* etc.
... cells can be members of colspans.
..._adj pct pct_adj min_pro final the width parameter have the following meaning: #define width_not_set -1 #define num_widths 10 #define num_major_widths 3 // min, des, fix #define min_con 0 // minimum width required of the content + padding #define des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, etc.
...And 5 more matches
Vue conditional rendering: editing existing todos - Learn web development
ult { props: { label: { type: string, required: true }, id: { type: string, required: true } }, data() { return { newlabel: this.label }; }, methods: { onsubmit() { if (this.newlabel && this.newlabel !== this.label) { this.$emit("item-edited", this.newlabel); } }, oncancel() { this.$emit("edit-cancelled"); } } }; </script> <style scoped> .edit-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0b0c0c; display: block; margin-bottom: 5px; } input { display: inline-block; margin-top: 0.4rem; width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } form { display: flex...
... when the "cancel" button is clicked, the component signals this by emitting an edit-cancelled event.
... add it now, below your existing methods: itemedited(newlabel) { this.$emit('item-edited', newlabel); this.isediting = false; } next, we'll need an editcancelled() method.
...And 5 more matches
nsINavHistoryResultViewObserver
inherits from: nsisupports last changed in gecko 1.9.0 method overview boolean candrop(in long index, in long orientation); void ondrop(in long row, in long orientation); void ontoggleopenstate(in long index); void oncycleheader(in nsitreecolumn column); void oncyclecell(in long row, in nsitreecolumn column); void onselectionchanged(); void onperformaction(in wstring action); void onperformactiononrow(in wstring action, in long row); void onperformactiononcell(in wstring action, in long row, in nsitreecolumn column); constants constant value description drop_before -1 the drag operation wishe...
... oncyclecell() called when a cell in a non-selectable cycling column (such as unread or flagged in thunderbird) is clicked.
... void oncyclecell( in long row, in nsitreecolumn column ); parameters row the row on which the clicked cell is located.
...And 5 more matches
WAI-ARIA Roles - Accessibility
this role can be used in combination with the aria-pressed attribute to create toggle buttons.aria: cell rolethe cell value of the aria role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information.
... 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.
...a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.aria: form rolethe form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an html form.aria: grid rolethe grid role is for a widget that contains one or more rows of cells.
...And 5 more matches
Accessibility documentation index - Accessibility
56 aria: cell role aria, html, cell, table the cell value of the aria role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information.
... to be supported, the cell must be nested in an element with the role of row.
... 64 aria: grid role aria, html the grid role is for a widget that contains one or more rows of cells.
...And 5 more matches
Examples of web and XML development using the DOM - Web APIs
the event listener handles the event by executing the function stopevent, which changes the value in the bottom cell of the table.
... <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>show event properties</title> <style> table { border-collapse: collapse; } thead { font-weight: bold; } td { padding: 2px 10px 2px 10px; } .odd { background-color: #efdfef; } .even { background-color: #ffffff; } </style> <script> function showeventproperties(e) { function addcell(row, text) { var cell = row.insertcell(-1); cell.appendchild(document.createtextnode(text)); } var e = e || window.event; document.getelementbyid('eventtype').innerhtml = e.type; var table = document.createelement('table'); var thead = table.createthead(); var row = thead.insertrow(-1); var lablelist = ['#', 'property', 'value']; var len = lablelist.length; for (var i...
...=0; i<len; i++) { addcell(row, lablelist[i]); } var tbody = document.createelement('tbody'); table.appendchild(tbody); for (var p in e) { row = tbody.insertrow(-1); row.classname = (row.rowindex % 2)?
...And 4 more matches
Grid template areas - CSS: Cascading Style Sheets
leaving a grid cell empty we have completely filled our grid with areas in this example, leaving no white space.
... however you can leave grid cells empty with this method of layout.
... to leave a cell empty use the full stop character, '.'.
...And 4 more matches
overflow-wrap - CSS: Cascading Style Sheets
html <p>they say the fishing is excellent at lake <em class="normal">chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though i've never been there myself.
... (<code>normal</code>)</p> <p>they say the fishing is excellent at lake <em class="ow-anywhere">chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though i've never been there myself.
... (<code>overflow-wrap: anywhere</code>)</p> <p>they say the fishing is excellent at lake <em class="ow-break-word">chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though i've never been there myself.
...And 4 more matches
<col> - HTML: Hypertext Markup Language
WebHTMLElementcol
the html <col> element defines a column within a table and is used for defining common semantics on all common cells.
... align this enumerated attribute specifies how horizontal alignment of each column cell content will be handled.
... possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell if this attribute is not set, its value is inherited from the align of the <colgroup> element this <col> element belongs too.
...And 4 more matches
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
WebHTMLElementtfoot
deprecated attributes align deprecated since html4obsolete since html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled.
... possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes unimplemented (see bug 2212).
... bgcolor this attribute defines the background color of each cell of the column.
...And 4 more matches
<thead>: The Table Head element - HTML: Hypertext Markup Language
WebHTMLElementthead
deprecated attributes align in html 4, in html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled.
... possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes unimplemented (see bug 2212).
... bgcolor this attribute defines the background color of each cell of the column.
...And 4 more matches
Forms related code snippets - Archive of obsolete content
s.otbody = document.createelement("tbody"); for (var nday, oday, niter = 0; niter < ntotal; niter++) { if (niter % 7 === 0) { otr = document.createelement("tr"); this.otbody.appendchild(otr); } nday = niter - nendblanks + 1; otd = document.createelement("td"); if (niter + 1 > nendblanks && niter < nend) { otd.classname = sprefs + "-active-cell"; otd.id = sprefs + "-day-" + this.id + "-" + nday; otd.onclick = ondayclick; otd.appendchild(document.createtextnode(nday)); } else { otd.classname = sprefs + "-empty-cell"; } otr.appendchild(otd); } this.display.innerhtml = smonthsnames[this.current.getmonth()] + " " + this.current.getfullyear(); this.container.appendchild(this.otbo...
...rease-year, span.zdp-decrease-month, span.zdp-decrease-year { display: block; padding: 0 2px; height: 16px; font-weight: bold; background-color: #999999; border-radius: 5px; cursor: pointer; } span.zdp-decrease-month, span.zdp-decrease-year { float: left; margin-right: 2px; } span.zdp-increase-month, span.zdp-increase-year { float: right; margin-left: 2px; } td.zdp-active-cell { padding: 1px 3px; cursor: pointer; color: #000000; text-align: center; vertical-align: middle; } td.zdp-active-cell:hover { background-color: #999999; cursor: pointer; } td.zdp-empty-cell { cursor: not-allowed; } </style> </head> <body> <form name="myform"> <p> from: <input type="text" readonly class="date-picker" name="date-from" /> to: <input type="text" readonly...
...n id="zdp-incr-year-1" class="zdp-increase-year">&raquo;</span><span id="zdp-incr-month-1" class="zdp-increase-month">&gt;</span> <span class="zdp-current-month">aug 1998</span> </caption> <thead> <tr> <th>m</th> <th>t</th> <th>w</th> <th>t</th> <th>f</th> <th>s</th> <th>s</th> </tr> </thead> <tbody> <tr> <td class="zdp-empty-cell">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> <td id="zdp-day-1-1" class="zdp-active-cell">1</td> <td id="zdp-day-1-2" class="zdp-active-cell">2</td> </tr> <tr> <td id="zdp-day-1-3" class="zdp-active-cell">3</td> <td id=...
...And 3 more matches
Monitoring downloads - Archive of obsolete content
.getservice(components.interfaces.mozistorageservice); var dbconn = this.storageservice.opendatabase(this.dbfile); var loglist = document.getelementbyid("loglist"); var statement = dbconn.createstatement("select * from items"); // get all items in table try { while (statement.executestep()) { var row = document.createelement('listitem'); // add the cells to the row var cell = document.createelement('listcell'); var sourcestr = statement.getstring(0); row.setattribute("tooltiptext", sourcestr); sourcestr = sourcestr.slice(sourcestr.lastindexof("/")+1); cell.setattribute("label", sourcestr); // source row.appendchild(cell); cell = document.createelement('listcell'); cell.setattribute("lab...
...el", (statement.getint64(1) / 1024).tofixed(1) + "kb"); // size cell.setattribute("style", "text-align:right"); row.appendchild(cell); var thedate = new date(statement.getint64(2) / 1000); // start time cell = document.createelement('listcell'); var datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); thedate = new date(statement.getint64(3)); // end time cell = document.createelement('listcell'); datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); var speed = statement.getdouble(4) / 1024.0; cell = document.createelement('listcell'); cell.setattribute("label", speed.tofixed(1) + "...
...kb/sec"); cell.setattribute("style", "text-align:right"); row.appendchild(cell); var status = statement.getint32(5); var style = "color:black"; cell = document.createelement('listcell'); var statusstr; switch(status) { case 0: statusstr = "downloading"; break; case 1: statusstr = "complete"; style = "color:green"; break; case 2: statusstr = "failed"; style = "color:red"; break; case 3: statusstr = "canceled"; style = "color:purple"; break; case 4: statusstr = "paused"; style = "color:blue"; break; case 5: statusstr = "queued"; ...
...And 3 more matches
Accessibility API cross-reference
in tagged pdf n/a n/a expressed with aria-labelledby if visible on screen or aria-label otherwise <caption> (for tables), <figcaption> (for figures), and <label> with a for attribute (for input elements) a <toc> or <l> may contain a <caption> as its first item <caption> or <lbl> a cell in a table cell n/a table_cell cell <td> td not what you think - this is for the damn paperclip character n/a n/a n/a for graphics representing data chart n/a figure ?
... 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?
... graphic n/a n/a img <img> a cell in a grid or treegrid.
...And 3 more matches
A guide to searching crash reports
the first link in each "signature" column cell links to a signature report, which contains additional details about crash reports with that signature.
... the "add term" link in each "signature" column cell lets you perform a narrower subsequent search among crash reports with that signature.
... the links in each "bugs" column cell link to bug reports in bugzilla.
...And 3 more matches
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
browser support for the up-to-date version of the specification is excellent from this point forward.
... status in browsers browser support for flexbox is excellent, and the majority of browsers do not need a prefix at this point.
... if you use display: table-cell on an item in your html it takes on the styling of an html table cell.
...And 3 more matches
border-spacing - CSS: Cascading Style Sheets
the border-spacing css property sets the distance between the borders of adjacent <table> cells.
... the border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.
... note: the border-spacing property is equivalent to the deprecated cellspacing <table> attribute, except that it has an optional second value that can be used to set different horizontal and vertical spacing.
...And 3 more matches
table-layout - CSS: Cascading Style Sheets
the table-layout css property sets the algorithm used to lay out <table> cells, rows, and columns.
...the widths of the table and its cells are adjusted to fit the content.
... fixed table and column widths are set by the widths of table and col elements or by the width of the first row of cells.
...And 3 more matches
<colgroup> - HTML: Hypertext Markup Language
WebHTMLElementcolgroup
note: this attribute is applied on the attributes of the column group, it has no effect on the css styling rules associated with it or, even more, to the cells of the column's members of the group.
... align this enumerated attribute specifies how horizontal alignment of each column cell content will be handled.
... possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes.
...And 3 more matches
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
<col> the html <col> element defines a column within a table and is used for defining common semantics on all common cells.
... <table> the html <table> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
... <td> the html <td> element defines a cell of a table that contains data.
...And 3 more matches
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
81 <col> element, html, html tabular data, reference, tables, web the html <col> element defines a column within a table and is used for defining common semantics on all common cells.
... 202 <table>: the table element element, html, html tabular data, reference, tables, web the html <table> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
... 204 <td>: the table data cell element cells, data cell, element, html, html tabular data, reference, table cell, table data, tables, web, cell, data, td the html <td> element defines a cell of a table that contains data.
...And 3 more matches
Tree - Archive of obsolete content
for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } getting the text from the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following javascript: function ontreeselected(){ var tree = document.getelementbyid("my-tree"); var cellindex = 0; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(cellindex)); alert(celltext); } getting the tree item from the focused row assuming <tree id="my-tree">, you can use the following to get the tree item: var view = document.getelementbyid("my-tree").view; var sel = view.selection.currentindex; //returns -1 if the tree is not focused var treeitem ...
... getting the cell from a mouse click your first choice is likely to try <treecell onclick="yourfunc();"/> or something similar.
...you can't add event handlers to <treecell>.
...And 2 more matches
Trees and Templates - Archive of obsolete content
in the template, there will be one treecell for each column in the tree.
... the cells should have a label attribute to set the label for the cell.
...mple 1 : source <tree id="my-tree" flex="1" datasources="rdf:files" ref="nc:filesroot" flags="dont-build-content"> <treecols> <treecol id="name" label="name" primary="true" flex="1"/> <splitter/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://home.netscape.com/nc-rdf#name"/> <treecell label="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> </treerow> </treeitem> </treechildren> </rule> </template> </tree> here, a tree is created with two columns, for the name and date of a file.
...And 2 more matches
Grids - Learn web development
.container { display: grid; grid-template-columns: 200px 200px 200px; } add the 2nd declaration to your css rule, then reload the page, and you should see that the items have rearranged themselves one into each cell of the created grid.
...you can see that auto-placement is placing items one into each cell of the grid that we have created.
...phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> </aside> <footer>contact me@mysite.com</footer> </div> the rules for grid-template-areas are as follows: you need to have every cell of the grid filled.
...And 2 more matches
Debugging Frame Reflow
c=9180,4470 cnt=866 area 02d7afe4 r=1 a=9180,uc c=9180,uc cnt=867 block 02d7b210 r=1 a=9180,uc c=8940,uc cnt=868 text 02d7b3f8 r=0 a=8940,uc c=uc,uc cnt=869 text 02d7b3f8 d=0,0 tblo 02d7b5f0 r=0 a=8940,uc c=0,0 cnt=870 tbl 02d7b7ec r=0 a=8940,uc c=1500,uc cnt=871 rowg 00b984a4 r=0 a=uc,uc c=uc,uc cnt=872 row 02d7baf8 r=0 a=uc,uc c=uc,uc cnt=873 cell 02d7bc98 r=0 a=uc,uc c=uc,uc cnt=874 block 02d7bcf8 r=0 a=uc,uc c=uc,uc cnt=875 text 02d7be84 r=0 a=uc,uc c=uc,uc cnt=876 text 02d7be84 d=300,285 me=300 block 02d7bcf8 d=300,300 me=300 cell 02d7bc98 d=330,330 me=330 row 02d7baf8 d=uc,330 rowg 00b984a4 d=uc,330 colg 02d7bfb0 r=0 a=uc,uc c=uc,uc cnt=877 col 02d7c0d8 r=...
...0 a=0,0 c=1500,uc cnt=878 col 02d7c0d8 d=0,0 colg 02d7bfb0 d=0,0 rowg 00b984a4 r=2 a=1500,uc c=1500,uc cnt=879 row 02d7baf8 r=2 a=1500,uc c=1500,uc cnt=880 cell 02d7bc98 r=2 a=1440,uc c=1410,uc cnt=881 block 02d7bcf8 r=2 a=1410,uc c=1410,uc cnt=882 block 02d7bcf8 d=1410,300 cell 02d7bc98 d=1440,330 row 02d7baf8 d=1500,330 rowg 00b984a4 d=1500,330 colg 02d7bfb0 r=2 a=1500,uc c=1500,uc cnt=883 col 02d7c0d8 r=0 a=0,0 c=1500,uc cnt=884 col 02d7c0d8 d=0,0 colg 02d7bfb0 d=0,0 tbl 02d7b7ec d=1500,390 tblo 02d7b5f0 d=1500,390 text 02d7c130 r=0 a=8940,uc c=uc,uc cnt=885 text 02d7c130 d=0,0 block 02d7b210 d=8940,390 area 02d7afe4 d=9180,630 canvas 00b97c6c d=9180...
...the table cell requires its children to compute the mes.
...And 2 more matches
InstallListener
method overview void onnewinstall(in addoninstall install) void ondownloadstarted(in addoninstall install) void ondownloadprogress(in addoninstall install) void ondownloadended(in addoninstall install) void ondownloadcancelled(in addoninstall install) void ondownloadfailed(in addoninstall install) void oninstallstarted(in addoninstall install) void oninstallended(in addoninstall install, in addon addon) void oninstallcancelled(in addoninstall install) void oninstallfailed(in addoninstall install) void onexternalinstall(in addon install, in addon existingaddon, in ...
... void ondownloadended( in addoninstall install ) parameters install the addoninstall representing the install ondownloadcancelled() called when downloading is cancelled.
... void ondownloadcancelled( in addoninstall install ) parameters install the addoninstall representing the install ondownloadfailed() called if there is some error downloading the add-on.
...And 2 more matches
Mozilla Web Developer FAQ
the almost standards mode is like the standards mode except it addresses the issue of the next question by rendering table cells with images in the traditional way.
... if the table cells that contain only an image are marked with <td class="imgcell">, the required css rule is: .imgcell img, .imgcell a { display: block; } longer explanation… why are there still gaps even between text rows in tables when the layout engine is in the standards mode or in the almost standards mode?
... in the standards mode and in the almost standards mode mozilla does not suppress the default margins of the first and last child element in table cells.
...And 2 more matches
Gecko object attributes
tree related attributes cycles "true" when the tree cell is a cycler, which means each click will cycle to the next option.
... applied to: role_cell for the <xul:tree/> note: it's not exposed currently table related attributes layout-guess true when gecko's heuristic determines that it is a table that is probably used for layout, not for table.
... applied to: role_table table-cell-index the index of the table cell accessible.
...And 2 more matches
HTMLTableElement - Web APIs
htmltableelement.bgcolor is a domstring containing the background color of the cells.
... htmltableelement.cellpadding is a domstring containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders.
... it reflects the obsolete cellpadding attribute.
...And 2 more matches
RTCIceCandidateStats.networkType - Web APIs
cellular the connection uses a cellular data service to connect.
... this includes all cellular data services including edge (2g), hspa (3g), lte (4g), and nr (5g).
...for example, if the networktype is wifi but the user is connected using a cellular hotspot, the connection will be bottlenecked by the underlying cellular network (and any other networks between the two peers).
...And 2 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
if you give the items no placement information they will position themselves on the grid, one in each grid cell.
...g: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> default rules for auto-placement as you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell.
...grid will lay an item out into each cell of row 1.
...And 2 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
*/ } } feature queries have excellent browser support, and all of the browsers that support the updated grid specification support feature queries too.
... if you are using display: table for your legacy layout, an item set to display: table-cell generates anonymous boxes.
... therefore, if you use display: table-cell without any parent element set to display-table, an anonymous table wrapper is created around any adjacent cells, just as if you had wrapped them in a div or other element set to display: table.
...And 2 more matches
Mozilla CSS extensions - CSS: Cascading Style Sheets
ollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels tab-scroll-arrow-back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window background-image gradients -moz-linear-gradient -moz-radial-gradient elements -moz-element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 1306214); use currentcolor instead.
... border-style and outline-style -moz-bg-insetobsolete since gecko 1.9 -moz-bg-outsetobsolete since gecko 1.9 -moz-bg-solidobsolete since gecko 1.9 <color> keywords -moz-activehyperlinktext -moz-hyperlinktext -moz-visitedhyperlinktext -moz-buttondefault -moz-buttonhoverface -moz-buttonhovertext -moz-default-background-color -moz-default-color -moz-cellhighlight -moz-cellhighlighttext -moz-field -moz-fieldtext -moz-dialog -moz-dialogtext -moz-dragtargetzone -moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-accentlightshadow -moz-mac-accentregularhighlight -moz-mac-accentregularshadow -moz-mac-chrome-active -moz-mac-chrome-inactive -moz-mac-focusring -moz-mac-menuselect -moz-mac-menushadow...
...-moz-inline-box -moz-inline-gridobsolete since gecko 62 -moz-inline-stackobsolete since gecko 62 -moz-inline-table -moz-gridobsolete since gecko 62 -moz-grid-groupobsolete since gecko 62 -moz-grid-lineobsolete since gecko 62 -moz-groupbox -moz-deckobsolete since gecko 62 -moz-popupobsolete since gecko 62 -moz-stackobsolete since gecko 62 -moz-markerobsolete since gecko 62 empty-cells -moz-show-background (default value in quirks mode) font -moz-button -moz-info -moz-desktop -moz-dialog (also a color) -moz-document -moz-workspace -moz-window -moz-list -moz-pull-down-menu -moz-field (also a color) font-family -moz-fixed image-rendering -moz-crisp-edges <length> -moz-calc list-style-type -moz-arabic-indic -moz-bengali -moz-cjk-e...
...And 2 more matches
border-collapse - CSS: Cascading Style Sheets
the border-collapse css property sets whether cells inside a <table> have shared or separate borders.
... when cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge.
... when cells are separated, the distance between cells is defined by the border-spacing property.
...And 2 more matches
MathML attribute reference - MathML
columnalign <mtable>, <mtd>, <mtr>, <mlabeledtr> specifies the horizontal alignment of table cells.
... columnspan <mtd> a non-negative integer value that indicates over how many table columns the cell extends.
... unimplemented minlabelspacing <mtable> a length value specifing the minimum space between a label and the adjacent cell in the row.
...And 2 more matches
<mtd> - MathML
WebMathMLElementmtd
the mathml <mtd> element represents a cell in a table or a matrix.
... columnalign specifies the horizontal alignment of this cell and overrides values specified by <mtable> or <mtr>.
... columnspan a non-negative integer value that indicates on how many columns does the cell extend.
...And 2 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]; }, iscontainerempty: function(idx) { return false; }, isseparator: function(idx) { return false; }, issorted: function() { return false; }, iseditable: fu...
... the getcelltext, iscontainer and iscontaineropen functions just return the corresponding element from the visibledata array.
...{ solids: ["silver", "gold", "lead"], liquids: ["mercury"], gases: ["helium", "nitrogen"] }, visibledata : [ ["solids", true, false], ["liquids", true, false], ["gases", true, false] ], 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]; }, iscontainerempty: function(idx) { return false; }, isseparator: function(idx) { return false; }, issorted: function() { return false; }, iseditable: fu...
...his.visibledata[idx][0]; var toinsert = this.childdata[label]; for (var i = 0; i < toinsert.length; i++) { this.visibledata.splice(idx + i + 1, 0, [toinsert[i], false]); } this.treebox.rowcountchanged(idx + 1, toinsert.length); } this.treebox.invalidaterow(idx); }, getimagesrc: function(idx, column) {}, getprogressmode : function(idx,column) {}, getcellvalue: function(idx, column) {}, cycleheader: function(col, elem) {}, selectionchanged: function() {}, cyclecell: function(idx, column) {}, performaction: function(action) {}, performactiononcell: function(action, index, column) {}, getrowproperties: function(idx, prop) {}, getcellproperties: function(idx, column, prop) {}, getcolumnproperties: function(column, element, prop) {}, }...
XUL Questions and Answers - Archive of obsolete content
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"/> </listhead> <listitem type="checkbox" val...
...ue="1" label="vghkvghk"/> <listitem type="checkbox" value="2" label="vghjkvk" checked="true"/> <listitem type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listbox> </window> list box handlers can only check for listitems not listcells.
...(server can just send the xul code to use for popup - alternatively it can send generic xml describing the attributes of the items in the menu and you generate the xul on client by applying an xslt transform.) can i change a xul tree cell/row/item background color with javascript?
... to set the background color you need to set the property for the cell/row and not for the item.
display-outside - Archive of obsolete content
/* keyword values */ display-outside: block-level; display-outside: inline-level; display-outside: run-in; display-outside: contents; display-outside: none; display-outside: table-row-group; display-outside: table-header-group; display-outside: table-footer-group; display-outside: table-row; display-outside: table-cell; display-outside: table-column-group; display-outside: table-column; display-outside: table-caption; display-outside: ruby-base; display-outside: ruby-text; display-outside: ruby-base-container; display-outside: ruby-text-container; /* global values */ display-outside: inherit; display-outside: initial; display-outside: unset; value not found in db!
... table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption the element is an internal table element, and participates in a table layout context.
... table-cell and table-caption are layout-specific leaf types; the rest are layout-specific internal types.
...for example, a table-row box requires its parent to be a table row group box and its children to be table-cell boxes.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
126 effective connection type glossary, navigator, network information api, networkinformation, performance, reference, web performance, connect, effective connection type, effectivetype effective connection type (ect) refers to the measured network performance, returning a cellular connection type, like 3g, even if the actual connection is tethered broadband or wifi, based on the time between the browser requesting a page and effective type of the connection.
... 180 grid areas css, css grids, reference a grid area is one or more grid cells that make up a rectangular area on the grid.
... 182 grid cell css grids in a css grid layout, a grid cell is the smallest unit you can have on your css grid.
... it is the space between four intersecting grid lines and conceptually much like a table cell.
Gecko info for Windows accessibility vendors
it is not obvious where the role_system_row should exist in the tree when the html rowspan attribute is used to combine to cells in different rows.
... there are currently two techniques for parsing tables: 1) use acclocation() to get the coordinates for each cell and feed that into an algorithm that builds up your own table data structure, or 2) use isimpledomnode and parse the table see below for the complete list of roles and notes about what we support intentional differences with internet explorer for the most part, where we support an msaa feature, we have tried to duplicate internet explorer's use of it.
...see the section intentional differences with ie role_cell html: <td> dhtml: role="wairole:gridcell" sets state_readonly in normal table.
... sets state_selected in spreadsheets when a cell has selection.
Debugging Table Reflow
the table layout strategy can be visualized by defining in the makefiles the constant debug_table_strategy.if one takes for instance the following table code: <table border width="300"> <colgroup> <col> <col width="50%"> <col width="1*"> <col> </colgroup> <tr> <td style="width:80px">cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> </table> rendering: <colgroup><col><col width="50%"><col width="1*"><col></colgroup>cell 1cell 2cell 3cell 4 it will produce the following log at the entrance of assignnonpctcolwidths: assignnonpctcolwidths en max=4500 count=0 ***start table dump*** mcolwidths=-1 -1 -1 -1 col frame cache -> 0=00b93138 1=00b931f0 2=024dd728 3...
...nformation for each column: widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 the table code knows ten different width's: #define num_widths 10 #define num_major_widths 3 // min, des, fix #define min_con 0 // minimum width required of the content + padding #define des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, etc.
... + padding #define min_adj 3 // minimum width + padding due to col spans #define des_adj 4 // desired width + padding due to col spans #define fix_adj 5 // fixed width + padding due to col spans #define pct 6 // percent width of cell or col #define pct_adj 7 // percent width of cell or col from percent colspan #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // width after the table has been balanced, considering all of the others in the last log snippet none of these width's has been set.
...ndex=2 isanonymous=0 constraint=3 widths=360 540 -1 -1 -1 -1 -1 -1 540 360 **end col dump** **start col dump** colindex=3 isanonymous=0 constraint=0 widths=360 540 -1 -1 -1 -1 -1 -1 -1 360 **end col dump** ***end table dump*** the first column has already the minimum content width, the table column can't shrink below that, the desired content width of 540 twips, that's the space to layout cell 1 without wrapping the text and the 1230 which correspond to the style="width:80px" at the first cell.
Gecko Roles
role_table represents a table that contains rows and columns of cells, and optionally, row headers and column headers.
... role_column represents a column of cells within a table.
... role_row represents a row of cells within a table.
... role_cell represents a cell within a table.
nsIAuthPromptCallback
method overview void onauthavailable(in nsisupports acontext, in nsiauthinformation aauthinfo); void onauthcancelled(in nsisupports acontext, in boolean usercancel); methods onauthavailable() authentication information is available.
... onauthcancelled() notification that the prompt was cancelled.
... void onauthcancelled( in nsisupports acontext, in boolean usercancel ); parameters acontext the context that was passed to nsiauthprompt2.asyncpromptauth().
... usercancel if false, this prompt was cancelled by calling the the cancel method on the nsicancelable; otherwise, it was cancelled by the user.
Creating a Custom Column
from nsitreeview: getcellproperties(row, col, props): optionally modify the props array getrowproperties(row, props): optionally modify the props array getimagesrc(row, col): return a string (or null) getcelltext(row, col): return a string representing the actual text to display in the column from nsimsgcustomcolumnhandler: getsortstringforrow(hdr): return the string value that the column will be sorted by getsor...
...do not get confused between getcelltext() and getsortstring/longforrow()!
...getcelltext() is the text that is displayed to the user while getsort*forrow() is what is used internally when sorting by your column a simple implementation objects in javascript are just "advanced" variables, so an implementation of the nsimsgcustomcolumnhandler interface looks like: var columnhandler = { getcelltext: function(row, col) { //get the message's header so that we can extract the reply to field var hdr = gdbview.getmsghdrat(row); return hdr.getstringproperty("replyto"); }, getsortstringforrow: function(hdr) {return hdr.getstringproperty("replyto");}, isstring: function() {return true;}, getcellproperties: function(row, col, props){}, getrowp...
...roperties: function(row, props){}, getimagesrc: function(row, col) {return null;}, getsortlongforrow: function(hdr) {return 0;} } basically, all we are doing here is making sure that both the text that is displayed to the user (getcelltext()) and the string we sort according to (when the user decided to sort the view by our custom column) are identical.
HTMLImageElement.x - Web APIs
let logbox = document.queryselector("pre"); let tbl = document.getelementbyid("userinfo") let log = msg => { logbox.innerhtml += `${msg}<br>`; } let cell = tbl.rows[1].cells[2]; let image = cell.queryselector("img"); log(`image's global x: ${image.x}`); log(`image's global y: ${image.y}`); this uses the <table>'s rows property to get a list of the rows in the table, from which it looks up row 1 (which, being a zero-based index, means the second row from the top).
... then it looks at that <tr> (table row) element's cells property to get a list of the cells in that row.
... the third cell is taken from that row (once again, specifying 2 as the zero-based offset).
... from there, we can get the <img> element itself from the cell by calling queryselector() on the htmltablecellelement representing that cell.
HTMLImageElement.y - Web APIs
let logbox = document.queryselector("pre"); let tbl = document.getelementbyid("userinfo") let log = msg => { logbox.innerhtml += `${msg}<br>`; } let cell = tbl.rows[1].cells[2]; let image = cell.queryselector("img"); log(`image's global x: ${image.x}`); log(`image's global y: ${image.y}`); this uses the <table>'s rows property to get a list of the rows in the table, from which it looks up row 1 (which, being a zero-based index, means the second row from the top).
... then it looks at that <tr> (table row) element's cells property to get a list of the cells in that row.
... the third cell is taken from that row (once again, specifying 2 as the zero-based offset).
... from there, we can get the <img> element itself from the cell by calling queryselector() on the htmltablecellelement representing that cell.
HTMLTableSectionElement - Web APIs
this character is the one to align all the cell of a column on.
... htmltablesectionelement.valign is a domstring representing an enumerated value indicating how the content of the cell must be vertically aligned.
... htmltablesectionelement.deleterow() removes the cell at the given position in the section.
... recommendation the parameter of insertcell is now optional.
Accessibility Information for Web Authors - Accessibility
highly recommended, an excellent resource.
... dive into accessibility by mark pilgrim an excellent, easy-to-understand resource (available in english and in 9 other languages) on accessible website authoring, which goes into greater depth.
...color contrast analyzer is an excellent tool for such task.
... effective color contrast and effective color brightness difference have a decisive importance for reading, furthermore for people with partial color deficiency (see the excellent examples in effective color contrast by lighthouse international).
Box alignment for block, absolutely positioned and table layout - CSS: Cascading Style Sheets
align-content and justify-content the justify-content property does not apply to block containers or table cells.
... this property does not apply to floated elements or table cells.
...it also does not apply to table cells.
...a margin of auto will absorb all available space in that dimension, therefore setting a left and right margin of auto, you can push a block into the center: .container { width: 20em; margin-left: auto; margin-right: auto; } in table layout, you have access to the vertical-align property to align the contents of a cell inside that cell.
border-style - CSS: Cascading Style Sheets
in the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
...in the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won't be displayed.
...when applied to a table cell with border-collapse set to collapsed, this value behaves like groove.
...when applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.
grid-template-areas - CSS: Cascading Style Sheets
the grid-template-areas css property specifies named grid areas, establishing the cells in the grid and assigning them names.
... <string>+ a row is created for every separate string listed, and a column is created for each cell in the string.
... multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells.
... unless those cells form a rectangle, the declaration is invalid.
justify-items - CSS: Cascading Style Sheets
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: stret...
... in table cell layouts, this keyword has no meaning as this property is ignored.
...initially the grid container is given a justify-items value of stretch (the default), which causes the grid items to stretch across the entire width of their cells.
... if you hover or tab onto the grid container however, it is given a justify-items value of center, which causes the grid items to span only as wide as their content width, and align in the center of their cells.
justify-self - CSS: Cascading Style Sheets
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; /* ...
... in table cell layouts, this keyword has no meaning as this property is ignored.
...initially the grid container is given a justify-items value of stretch — the default — which causes the grid items to stretch across the entire width of their cells.
...these values cause the grid items to span only as wide as their content width, and align in different positions across their cells.
Adding sidebars - Archive of obsolete content
here's an example of a simple tree: <tree flex="1"> <treecols> <treecol label="&xulschoolhello.namecolumn.label;" flex="1" /> <treecol label="&xulschoolhello.greetingcolumn.label;" flex="3" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="peter" /> <treecell label="hey, what's up?" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="john"/> <treecell label="good evening, how are you doing?" /> </treerow> </treeitem> </treechildren> </tree> the text in the rows of the tree is hardcoded because we wouldn't generally use text from locale files.
...a more elaborate tree would look like this: <tree flex="1"> <treecols> <treecol label="&xulschoolhello.namecolumn.label;" flex="1" /> <treecol label="&xulschoolhello.greetingcolumn.label;" flex="3" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="peter" /> <treecell label="hey, what's up?" /> </treerow> </treeitem> <!-- notice that you need to specify the container attribute.
... --> <treeitem container="true" open="true"> <treerow> <treecell label="john"/> <treecell label="good evening, how are you doing?" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="john jr."/> <treecell label="bah, bah!" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> in this case, the row for "john" has a child row for "john jr.".
cycler - Archive of obsolete content
in the case, clicking on a cell in the column will alternate its state between on and off.
... this is used, for example, in a mail window, for a column that indicates that the message is read or unread with a small mark in the cell.
... if the cycler attribute is not set, the cell is a regular text cell.
treecol.editable - Archive of obsolete content
« xul reference home editable type: boolean allows the contents of cells in the column to be changed, especially useful when type="checkbox".
... when the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell.
...individual treecell elements in the column may be marked editable="false" in order to disable editing.
treecol.type - Archive of obsolete content
here is an example css style using the current theme's checkboxes: treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells.
...*/ list-style-image: none; } treechildren::-moz-tree-checkbox(checked) { /* checked checkbox treecells.
...*/ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } treechildren::-moz-tree-checkbox(disabled) { /* disabled checkbox treecells.
stopEditing - Archive of obsolete content
« xul reference home stopediting( shouldaccept ) return type: no return value stops editing the cell currently being edited.
... if the shouldaccept parameter is true, the cell's label is changed to the edited value (the tree view's nsitreeview.setcelltext() method is called to change the cell contents).
... otherwise the cell label is reverted to the value it had prior to editing.
Tooltips - Archive of obsolete content
tooltips in trees as the entire body of the tree is displayed using a single element, the tooltip and tooltiptext attributes do not apply to individual rows or cells of a tree.
... however, the tree will automatically display tooltips for a cell when the value is cropped.
... for instance, if a cell has a long label and the column is shorter than the label's length, a tooltip will appear when the mouse is moved over the cell so that the user can see the entire value.
Things I've tried to do with XUL - Archive of obsolete content
multi-column listboxes when adding items to multi-column listboxes, you can't use the appenditem api: // auto-create and attach 1st cell var row = mylistbox.appenditem( label, value ); // create and attach 2nd cell var cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ...
... while this works at first, after a number of rows have been added it breaks and stops displaying the first cell (the one specified by the appenditem call).
... instead, you must build up your own listitem full of listcells, and then add that listitem to the listbox, using generic dom calls: var row = document.createelement('listitem'); // create and attach 1st cell var cell = document.createelement('listcell'); cell.setattribute('label', label ); cell.setattribute('value', value ); row.appendchild( cell ); // create and attach 2nd cell cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ...
More Tree Features - Archive of obsolete content
this causes a small triangle or plus sign to appear before the cells in that column to indicate the cells that can be expanded.
...example hierarchical tree the following is a simple example: example 1 : source view <tree rows="6"> <treecols> <treecol id="firstname" label="first name" primary="true" flex="3" /> <treecol id="lastname" label="last name" flex="7" /> </treecols> <treechildren> <treeitem container="true" open="true"> <treerow> <treecell label="guys" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="bob" /> <treecell label="carpenter" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="jerry" /> <treecell label="hodge" /> </treerow> </treeitem> </treechildren> ...
...d="city" label="home city" flex="2" persist="width ordinal hidden" /> <splitter class="tree-splitter" /> <treecol id="starttime" label="start time" flex="1" persist="width ordinal hidden" /> <splitter class="tree-splitter" /> <treecol id="endtime" label="end time" flex="1" persist="width ordinal hidden" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joshua granville" /> <treecell label="vancouver" /> <treecell label="7:06:00" /> <treecell label="9:10:26" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="robert valhalla" /> <treecell label="seattle" /> <treecell label="7:08:00" /> <treecell label="9:15:51" /> </treerow> </treeitem> </t...
RDF Datasources - Archive of obsolete content
to use them, just put the url values above in the label attributes of the buttons or treecells.
...example 1 : source <tree flex="1" datasources="rdf:history" ref="nc:historyroot"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="url" label="url" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://home.netscape.com/nc-rdf#name"/> <treecell label="rdf:http://home.netscape.com/nc-rdf#url"/> <treecell label="rdf:http://home.netscape.com/nc-rdf#date"/> </treerow> </treeitem> </treechildren> </rule> </template> </tree> other datasources the tables below list some of the other datasources available with mozilla.
...ple 2 : source view <tree flex="1" width="200" height="200" datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/all-animals"> <treecols> <treecol id="name" label="name" primary="true" flex="1"/> <treecol id="species" label="species" flex="1"/> </treecols> <template> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/> <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#species"/> </treerow> </treeitem> </treechildren> </rule> </template> </tree> here, the data has been generated from the file.
Writing Skinnable XUL and CSS - Archive of obsolete content
treehead treerow treecell { bad!
...} this evil rule caused the style system, for every treecell that wasn't in a treehead (which is practically every treecell in a typical tree), to crawl up the whole parent chain to the root of the document in order to determine that the style rule wasn't a match.
...i should have used treehead > treerow > treecell.
XUL Reference - Archive of obsolete content
tical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorn...
...ingbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple vbox where window wizard wizardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring ...
...olbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param query queryset rule template textnode triple where script commandset command broadcas...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
tabpanels see tabbox tabs see tabbox textbox <label control="inputid"> <!--first name:--> </label> <textbox id='inputid'> tree <tree hidecolumnpicker="true" > <treecols> <treecol label="cats" primary="true"/> </treecols> <treechildren> <treeitem container="true" open="true"> <treerow> <treecell label="<!--male-->" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="<!--aramis-->" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="<!--fergus-->" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> th...
... treecell see tree treechildren see tree treecol see tree treecols see tree treeitem see tree treerow see tree elements that do not expose anything to screen readers/have no discovered accessibility issues yet: arrowscrollbox bbox box grippy hbox menuseparator overlay page script spacer splitte...
...r stringbundle stringbundleset vbox window elements not processed yet: action binding bindings broadcaster broadcasterset conditions content dialog dialogheader editor listcell member observes preference preferences prefpane prefwindow resizer richlistbox richlistitem resizer rule scrollbar scrollbox scrollcorner separator template textnode titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip treeseparator triple wizard wizardpage cases to revisit: ...
XUL controls - Archive of obsolete content
listbox reference related elements: listcell listcols listcol listhead listheader listitem <menulist> a menulist (or combobox) is used to create a control with a drop down to select a value.
... <tree> <treecols> <treecol label="name" flex="1"/> <treecol label="size" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="popcorn"/> <treecell label="large"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="root beer"/> <treecell label="small"/> </treerow> </treeitem> </treechildren> </tree> more information about the tree element.
... tree reference related elements: treecell treechildren treecol treecols treeitem treerow ...
listbox - Archive of obsolete content
/listcols> </listbox> var thelist = document.getelementbyid('thelist'); gems = [ {gem: "ruby", price: "$3,500 - $4,600"}, {gem: "emerald", price: "$700 - 4,250"}, {gem: "blue sapphire", price: "$3,400 - $4,500"}, {gem: "diamond", price: "$5,600 - $16,000"} ]; for (var i = 0; i < gems.length; i++) { var row = document.createelement('listitem'); var cell = document.createelement('listcell'); cell.setattribute('label', gems[i].gem); row.appendchild(cell); cell = document.createelement('listcell'); cell.setattribute('label', gems[i].price ); row.appendchild(cell); thelist.appendchild(row); } attributes disabled type: boolean indicates whether the element is disabled or not.
...(default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column.
... related elements listcell, listcol, listcols, listhead, listheader, listitem interfaces nsiaccessibleprovider, nsidomxulmultiselectcontrolelement ...
listitem - Archive of obsolete content
the text of the listitem is specified either using listcell elements, or by placing a label attribute directly on the listitem element.
... by default it contains a single listcell element of type and class appropriate to that of the listitem.
... related elements listbox, listcell, listcol, listcols, listhead, listheader interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement ...
Browser Feature Detection - Archive of obsolete content
ontent true false true counterincrement true false true counterreset true false true cue true false false cueafter true false false cuebefore true false false cursor true true true direction true true true elevation true false false emptycells true false true fontsizeadjust true false true fontstretch true false true left true true true markeroffset true false true marks true false true maxheight true ie7 only true maxwidth true ie7 only true minheight true true true minwidth...
... {name: 'content', 'supported': false}, {name: 'counterincrement', 'supported': false}, {name: 'counterreset', 'supported': false}, {name: 'cue', 'supported': false}, {name: 'cueafter', 'supported': false}, {name: 'cuebefore', 'supported': false}, {name: 'cursor', 'supported': false}, {name: 'direction', 'supported': false}, {name: 'elevation', 'supported': false}, {name: 'emptycells', 'supported': false}, {name: 'fontsizeadjust', 'supported': false}, {name: 'fontstretch', 'supported': false}, {name: 'left', 'supported': false}, {name: 'markeroffset', 'supported': false}, {name: 'marks', 'supported': false}, {name: 'maxheight', 'supported': false}, {name: 'maxwidth', 'supported': false}, {name: 'minheight', 'supported': false}, {name: 'minwidth', 'supported...
...orted = true; ++level; } return math.floor( (100 * level) / features.length ); } function generatereport(object, featureset, description) { var i; var features = _features[featureset]; document.write('<p><b>' + featureset + ' support for properties/methods in ' + description + ', percentage of names defined = ' + supports(object, featureset) + '%<\/b><\/p>'); document.write('<table cellspacing="0">'); for (i = 0; i < features.length; i++) { if (features[i].supported) document.write('<tr><td>' + features[i].name + '<\/td><td>' + features[i].supported + '<\/td><\/tr>'); else document.write('<tr><td>' + features[i].name + '<\/td><td style="background-color:red">' + features[i].supported + '<\/td><\/tr>'); } document.write('<\/table>'); } var oldonerror...
ActiveXObject - Archive of obsolete content
in the following example, you access properties and methods of the new object using the object variable excelsheet and other excel objects, including the application object and the activesheet.cells collection.
...excelsheet.application.visible = true; // place some text in the first cell of the sheet.
... excelsheet.activesheet.cells(1,1).value = "this is column a, row 1"; // save the sheet.
HTML: A good basis for accessibility - Learn web development
text content one of the best accessibility aids a screen reader user can have is an excellent content structure with headings, paragraphs, lists, etc.
... an excellent semantic example might look something like the following: <h1>my heading</h1> <p>this is the first section of my document.</p> <p>i'll add another paragraph here too.</p> <ol> <li>here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>my subheading</h2> <p>this is the first subsection of my document.
... page layouts in the bad old days, people used to create page layouts using html tables — using different table cells to contain the header, footer, sidebar, main content column, etc.
HTML: A good basis for accessibility - Learn web development
text content one of the best accessibility aids a screen reader user can have is an excellent content structure with headings, paragraphs, lists, etc.
... an excellent semantic example might look something like the following: <h1>my heading</h1> <p>this is the first section of my document.</p> <p>i'll add another paragraph here too.</p> <ol> <li>here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>my subheading</h2> <p>this is the first subsection of my document.
... page layouts in the bad old days, people used to create page layouts using html tables — using different table cells to contain the header, footer, sidebar, main content column, etc.
Styling tables - Learn web development
we've set some letter-spacing on the headings and cells, as we feel it aids readability.
... we've center-aligned the text in the table cells inside the <tbody> so that they line up with the headings.
... by default, cells are given a text-align value of left, and headings are given a value of center, but generally it looks better to have the alignments set the same for both.
Introduction to CSS layout - Learn web development
i don’t need to put any rules on the child elements; they are automatically placed into the cells our grid has created.
...the <form>, <div>s, and <label>s and <input>s have been told to display like a table, table rows, and table cells respectively — basically, they'll act like html table markup, causing the labels and inputs to line up nicely by default.
... html { font-family: sans-serif; } form { display: table; margin: 0 auto; } form div { display: table-row; } form label, form input { display: table-cell; margin-bottom: 10px; } form label { width: 200px; padding-right: 5%; text-align: right; } form input { width: 300px; } form p { display: table-caption; caption-side: bottom; width: 300px; color: #999; font-style: italic; } this gives us the following result: you can also see this example live at css-tables-example.html (see the source code too.) multi-column layout t...
Handling common accessibility problems - Learn web development
vo + r + r (two rs in succession) (when inside a table) read the entire current row, including the headers that correspond to each cell.
... ctrl + alt + cursor keys (when a table is selected) move between table cells.
...in bad-table.html, none of the cells can be associated at all.
Displaying Places information using views
the following javascript creates a new placestreeview instance but overrides two of its nsitreeview methods to display columns not present in the built-in tree view: var view = new placestreeview(); view._getcelltext = view.getcelltext; view.getcelltext = function (arowindex, acol) { // handle our special columns.
..."even" : "odd"); break; } // otherwise, pass off to the original getcelltext method.
... return this._getcelltext(arowindex, acol); }; view._cycleheader = view.cycleheader; view.cycleheader = function (acol) { switch (acol.id || acol.element.getattribute("anonid")) { case "fulluri": case "indexinparent": case "parity": // you might resort by column here.
AddonListener
void onenabled(in addon addon) void ondisabling(in addon addon, in boolean needsrestart) void ondisabled(in addon addon) void oninstalling(in addon addon, in boolean needsrestart) void oninstalled(in addon addon) void onuninstalling(in addon addon, in boolean needsrestart) void onuninstalled(in addon addon) void onoperationcancelled(in addon addon) void onpropertychanged(in addon addon, in string properties[]) methods onenabling() called when an add-on is about to be enabled.
... void onuninstalled( in addon addon, ) parameters addon the addon that has been uninstalled onoperationcancelled() called when a pending operation for an add-on is cancelled.
... void onoperationcancelled( in addon addon, ) parameters addon the addon that has had a pending operation cancelled onpropertychanged() called when one or more properties of addon has changed.
Sqlite.jsm
if statements are in progress at the time this function is called, they will be cancelled.
...when cancelled, subsequent rows will not be processed and no more onrow invocations will be made.
...t_id, username from accounts order by username asc"; try { const result = await conn.executecached(statement, null, function(row, cancel) { accountid = row.getresultbyname("account_id"); username = row.getresultbyname("username"); accounts.push({ accountid: accountid, username: username }); // if the cancel function is called here, the statement being executed will // be cancelled, and no more rows will be processed.
nsIAuthPrompt2
if the user closes the dialog using a cancel button or similar, the callback's nsiauthpromptcallback.onauthcancelled() method must be called.
... calling nsicancelable.cancel() on the returned object should close the dialog and must call nsiauthpromptcallback.onauthcancelled() on the provided callback.
... return value false, authentication should be cancelled, usually because the user did not provide username/password.
nsIMsgCustomColumnHandler
you must implement: nsitreeview.iseditable() nsitreeview.getcellproperties() nsitreeview.getimagesrc() nsitreeview.getcelltext() nsitreeview.cyclecell() nsimsgcustomcolumnhandler.getsortstringforrow() nsimsgcustomcolumnhandler.getsortlongforrow() nsimsgcustomcolumnhandler.isstring() and optionally: nsitreeview.getrowproperties() from c++ you must implement all of nsitreeview and nsimsgcustomcolumnhandler.
... example implementation an example javascript implementation that does nothing: var columnhandler = { iseditable: function(arow, acol) {return false;}, cyclecell: function(arow, acol) { }, getcelltext: function(arow, acol) { }, getsortstringforrow: function(ahdr) { return ""; }, isstring: function() {return true;}, getcellproperties: function(arow, acol, aprops) { }, getrowproperties: function(arow, aprops) { }, getimagesrc: function(arow, acol) {return null;}, getsortlongforrow: function(ahdr) {return 0;} } to attach it use the nsimsgdbview.addcolumnhandler() method (recall gdbview is the global nsimsgdbview in thunderbird): gdbview.addcolumnhandler("newcolumn", columnhandler); after which it can be retrieved using the nsimsgdbview.getcol...
...it does not affect whether getcelltext vs.
nsITreeColumn
if the cycler attribute is not set, the column cells are regular text cells.
...if the editable attribute is not set, the column cells are not editable.
...if the selectable attribute is not set, the column cells are not selectable.
GlobalEventHandlers.ontransitioncancel - Web APIs
the transitioncancel event is sent when a css transition is cancelled.
... the transition is cancelled when: the value of the transition-property property that applies to the target is changed the display property is set to "none".
... syntax var transitioncancelhandler = target.ontransitioncancel; target.ontransitioncancel = function value a function to be called when a transitioncancel event occurs indicating that a css transition has been cancelled on the target, where the target object is an html element (htmlelement), document (document), or window (window).
HTMLTableColElement - Web APIs
htmltablecolelement.align is a domstring that indicates the horizontal alignment of the cell data in the column.
... htmltablecolelement.ch is a domstring representing the alignment character for cell data.
... htmltablecolelement.valign is a domstring that indicates the vertical alignment of the cell data in the column.
HTMLTableElement.insertRow() - Web APIs
we then use htmltablerowelement.insertcell() to insert a new cell in the new row.
... (to be valid html, a <tr> must have at least one <td> element.) finally, we add some text to the cell using document.createtextnode() and node.appendchild().
... html <table id="my-table"> <tr><td>row 1</td></tr> <tr><td>row 2</td></tr> <tr><td>row 3</td></tr> </table> javascript function addrow(tableid) { // get a reference to the table let tableref = document.getelementbyid(tableid); // insert a row at the end of the table let newrow = tableref.insertrow(-1); // insert a cell in the row at index 0 let newcell = newrow.insertcell(0); // append a text node to the cell let newtext = document.createtextnode('new bottom row'); newcell.appendchild(newtext); } // call addrow() with the table's id addrow('my-table'); result specifications specification status comment html living standardthe definition of 'htmltableelement.insertrow()' in that specification.
RTCNetworkType - Web APIs
cellular the connection uses a cellular data service to connect.
... this includes all cellular data services including edge (2g), hspa (3g), lte (4g), and nr (5g).
...for example, if the networktype is wifi but the user is connected using a cellular hotspot, the connection will be bottlenecked by the underlying cellular network (and any other networks between the two peers).
ReadableStream.cancel() - Web APIs
syntax var promise = readablestream.cancel(reason); parameters reason a domstring providing a human-readable reason for the cancellation.
... examples in jake archibald's cancelling a fetch example, a stream is used to fetch the whatwg html spec chunk by chunk; each chunk is searched for the string "service workers".
...ffer).indexof(tomatch); } if (matchfoundat === -1) { buffer = buffer.slice(-buffersize); } else if (buffer.slice(matchfoundat + tomatch.length).length >= contextafter) { console.log("here's the match:") console.log(buffer.slice( math.max(0, matchfoundat - contextbefore), matchfoundat + tomatch.length + contextafter )); console.log("cancelling fetch"); reader.cancel(); return; } else { console.log('found match, but need more context…'); } // keep reading return reader.read().then(process); }); }).catch(err => { console.log("something went wrong.
Selection.rangeCount - Web APIs
gecko browsers allow multiple selections across table cells.
... firefox allows to select multiple ranges in the document by using ctrl+click (unless the click within an element with display: table-cell).
...in gecko browsers, you can select multiple ranges across table cells by holding down ctrl while dragging with the mouse.
Using readable streams - Web APIs
cancel() — a method that, when included, will be called if the app signals that the stream is to be cancelled (e.g.
...when the button is pressed, the interval is cancelled, and a function called readstream() is invoked to read the data back out of the stream again.
...current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } closing and cancelling streams we’ve already shown examples of using readablestreamdefaultcontroller.close() to close a reader.
Writing WebSocket servers - Web APIs
the client will send a pretty standard http request with headers that looks like this (the http version must be 1.1 or greater, and the method must be get): get /chat http/1.1 host: example.com:8000 upgrade: websocket connection: upgrade sec-websocket-key: dghlihnhbxbszsbub25jzq== sec-websocket-version: 13 the client can solicit extensions and/or subprotocols here; see miscellaneous for details.
...that header looks something like the following (remember each header line ends with \r\n and put an extra \r\n after the last one to indicate the end of the header): http/1.1 101 switching protocols upgrade: websocket connection: upgrade sec-websocket-accept: s3pplmbitxaq9kygzzhzrbk+xoo= additionally, the server can decide on extension/subprotocol requests here; see miscellaneous for details.
... miscellaneous websocket codes, extensions, subprotocols, etc.
ARIA Test Cases - Accessibility
markup used: role="grid", "gridcell", "rowheader", "columnheader" aria-selected, aria-readonly notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass ...
... zoomtext - - - - orca - - - - treegrid examples: grid with expandable rows expected at behavior: (mz) screen readers should announce the current cell or row depending on the default behavior of the at in other similar situations (e.
...when navigating cells horizontally, the column header should be spoken for each cell.
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
if we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells.
...we will take a proper look at how these work in a later guide but you can see as you work that grid is laying out un-placed items into empty cells of the grid.
...note that we can leave cells empty if we wish.
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
we do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid.
...when you use css grid layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid.
...in this case that is a single grid cell, but it could be an area made up of several grid cells.
animation - CSS: Cascading Style Sheets
WebCSSanimation
rames name | duration | timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein 3s; <div class="grid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre> </div> <div class="row"> <div class="cell"> <button class="play" title="play"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div> <div class="animation a1"></div> </div> </div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> ...
... <div class="overlay">animation: 3s linear 1s slidein;</div> <div class="animation a2"></div> </div> </div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a...
...l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid { width: 100%; height: 100%; display: flex; background: #eee; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { a...
place-self - CSS: Cascading Style Sheets
the property doesn't apply to block-level boxes, and to table cells.
...initially the grid container has justify-items and align-items values of stretch — the defaults — which causes the grid items to stretch across the entire width of their cells.
...these values cause the grid items to span only as wide/tall as their content width/height, and align in different positions across their cells, in the block and inline directions.
Creating and triggering events - Developer guides
function simulateclick() { const event = new mouseevent('click', { view: window, bubbles: true, cancelable: true }); const cb = document.getelementbyid('checkbox'); const cancelled = !cb.dispatchevent(event); if (cancelled) { // a handler called preventdefault.
... alert("cancelled"); } else { // none of the handlers called preventdefault.
... alert("not cancelled"); } } ...
HTML attribute reference - HTML: Hypertext Markup Language
colspan <td>, <th> the colspan attribute defines the number of columns a cell should span.
... rowspan <td>, <th> defines the number of rows a table cell should span over.
... scope <th> defines the cells that the header test (defined in the th element) relates to.
<mtable> - MathML
WebMathMLElementmtable
columnalign specifies the horizontal alignment of the cells.
... unimplemented minlabelspacing a length value specifing the minimum space between a label and the adjacent cell in the row.
... rowalign specifies the vertical alignment of the cells.
Chapter 1: Introduction to Extensions - Archive of obsolete content
about extensions management using the add-ons manager firefox's add-ons manager is an excellent way to manage extensions, and is a great step up in ease of use.
... because firefox and its extensions are designed to support multiple languages, excellent extensions come from all over the world, and can be quickly localized by anyone interested.
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
the sheer amount [sic] of redundant <font> tags inside every cell was probably enough to double file size.
...whatever the situation, if the conversion is something deemed worthwhile, it's an excellent opportunity to restructure your data the right way, so it can ultimately be as flexible as you need it to be.
Index of archived content - Archive of obsolete content
nippets html in xul for rich tooltips html to dom isdefaultnamespace js xpcom javascript debugger service javascript timers javascript daemons management label and description lookupnamespaceuri lookupprefix 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 ...
... space manager high level design standalone xpcom standard makefile header static analysis for windows code under linux stress testing string quick reference string rosetta stone structure of an installable bundle supporting per-window private browsing supporting private browsing mode table cellmap table cellmap - border collapse table layout regression tests table layout strategy tamarin abcasm tamarin acceptance testing abc assembler tests actionscript acceptance tests tamarin acceptance test temp...
Drag and Drop JavaScript Wrapper - Archive of obsolete content
var textobserver = { ondragstart: function (event) { var txt = event.target.getattribute("label"); transferdata.data = new transferdata(); transferdata.data.adddataforflavour("text/unicode",txt); } } this might be useful when implementing drag and drop for cells in a tree.
... you can use the value of a cell, or some resource from an rdf file if the tree is built from a template, as the value of a drag.
Block and Line Layout Cheat Sheet - Archive of obsolete content
this is set by default for document, table cell inner, and absolutely positioned wrapper frames.
...this is set by default for document frames, area frames, table cell inner frames, absolutely positioned wrapper frames, and floated frames when the frame is created.
Return Codes - Archive of obsolete content
no_matching_certificate -206 extracted file was not signed by the certificate used to sign the installation script cant_read_archive -207 xpi package cannot be read invalid_arguments -208 bad parameters to a function illegal_relative_path -209 illegal relative path user_cancelled -210 user clicked cancel on install dialog install_not_started -211 a problem occurred with the parameters to initinstall, or initinstall was not called first silent_mode_denied -212 the silent installation privilege has not been granted.
... filename_already_used -226 same filename being used in install install_cancelled -227 raised when installation is cancelled in medias res.
startEditing - Archive of obsolete content
« xul reference home startediting( row, column ) return type: no return value activates user editing of the given cell, which is specified by row index number and the nsitreecolumn in which it is located.
... the tree view's nsitreeview.getcelltext() method is called to obtain the cell contents.
currentIndex - Archive of obsolete content
example // one way of retrieving the text of a cell.
... <script language ="javascript"> function treerowclicked(){ var tree = document.getelementbyid("my-tree"); var selection = tree.view.selection; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(0)); alert(celltext); } </script> <tree id="my-tree" seltype="single" onselect="treerowclicked()"> <treecols> <treecol label="title" flex="1"/><treecol label="url" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lunch"/> </treerow> </treeitem> </treechildren> </tree> see also ...
Sorting and filtering a custom tree view - Archive of obsolete content
ment) { //we'll match on every property for (var i in element) { if (prepareforcomparison(element[i]).indexof(filtertext) != -1) { table.push(element); break; } } }); } sort(); //restore scroll position if (topvisiblerow) { settopvisiblerow(topvisiblerow); } } //generic custom tree view stuff function treeview(table) { this.rowcount = table.length; this.getcelltext = function(row, col) { return table[row][col.id]; }; this.getcellvalue = function(row, col) { return table[row][col.id]; }; this.settree = function(treebox) { this.treebox = treebox; }; this.iseditable = function(row, col) { return col.editable; }; this.iscontainer = function(row){ return false; }; this.isseparator = function(row){ return false; }; this.issorted = function()...
...{ return false; }; this.getlevel = function(row){ return 0; }; this.getimagesrc = function(row,col){ return null; }; this.getrowproperties = function(row,props){}; this.getcellproperties = function(row,col,props){}; this.getcolumnproperties = function(colid,col,props){}; this.cycleheader = function(col, elem) {}; } function sort(column) { var columnname; var order = tree.getattribute("sortdirection") == "ascending" ?
Building Hierarchical Trees - Archive of obsolete content
ood" flags="dont-build-content" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <treecols> <treecol id="address" primary="true" label="address" flex="1"/> <treecol id="floors" label="floors" flex="1"/> </treecols> <template> <rule rdf:type="http://www.xulplanet.com/rdf/house"> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://www.xulplanet.com/rdf/address"/> <treecell label="rdf:http://www.xulplanet.com/rdf/floors"/> </treerow> </treeitem> </treechildren> </rule> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://purl.org/dc/elements/1.1/title"/> </treerow> </treeitem> ...
... <tree datasources="people2.xml" ref="*" querytype="xml" rows="10" flags="dont-build-content"> <treecols> <treecol id="name" primary="true" label="name" flex="1"/> </treecols> <template> <query expr="*"/> <action> <treechildren> <treeitem uri="?"> <treerow> <treecell label="?name"/> </treerow> </treeitem> </treechildren> </action> </template> </tree> « previousnext » ...
Templates - Archive of obsolete content
creating an element for every cell would be too costly.
... however, the tradeoff is that trees may only display text, and, since no elements are created, you can't use css properties to style tree cells in the same way.
XUL accessibility guidelines - Archive of obsolete content
an excellent guide for determining unused key combinations and cross platform issues.
...it is an excellent indicator regarding the accessibility of a user interface, but is by no means a complete test.
The Implementation of the Application Object Model - Archive of obsolete content
the personal toolbar must show up in a tree widget (in which case it has to be faking a tree content model, complete with <tt><treeitem></tt> and <tt><treecell></tt> nodes), or it must be able to show up on a toolbar (complete with <tt><button></tt> nodes and popup trees attached to folder buttons).
...but suppose that instead we could store additional information about the tree's columns, namely in which order they occur, then the act of persistently saving a column reordering would take far less time (o(1) to swap two columns, as opposed to a worst case o(n) where n is the number of cells in the tree).
elements - Archive of obsolete content
a action arrowscrollbox b bbox binding bindings box broadcaster broadcasterset button browser c checkbox caption colorpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorne...
...r separator spacer splitter stack statusbar statusbarpanel stringbundle stringbundleset t tab tabbrowser tabbox tabpanel tabpanels tabs template textnode textbox titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple v vbox w window wizard wizardpage ...
listcol - Archive of obsolete content
examples example <!-- a two column listbox with one column flexible --> <listbox> <listhead> <listheader label="first"/> <listheader label="last"/> </listhead> <listcols> <listcol flex="1"/> <listcol/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden...
...before(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcols, listhead, listheader, listitem ...
listcols - Archive of obsolete content
example <!-- creates a two column listbox --> <listbox> <listcols> <listcol flex="1"/> <listcol flex="1"/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden...
...before(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcol, listhead, listheader, listitem ...
listheader - Archive of obsolete content
attributes disabled properties acesssibletype examples <listbox> <listhead> <listheader label="name"/> <listheader label="occupation"/> </listhead> <listitem> <listcell label="george"/> <listcell label="house painter"/> </listitem> <listitem> <listcell label="mary ellen"/> <listcell label="candle maker"/> </listitem> <listitem> <listcell label="roger"/> <listcell label="swashbuckler"/> </listitem> </listbox> attributes disabled type: boolean indicates whether the element is disabled or not.
...before(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcol, listcols, listhead, listitem ...
treerow - Archive of obsolete content
children of the treerow should be treecell elements.
...ode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, treeitem, treecell and treeseparator.
2006-09-29 - Archive of obsolete content
27 status meeting cancelled most of the mozilla calendar participants were unavailable during sept.
... 27, the meeting was cancelled and rescheduled for a later date.
Grid Areas - MDN Web Docs Glossary: Definitions of Web-related terms
a grid area is one or more grid cells that make up a rectangular area on the grid.
...this creates two grid areas, one covering four grid cells, the other two.
Assessment: Structuring planet data - Learn web development
ensure all the content is placed into the right cells — in the raw data, each row of planet data is shown next to its associated planet.
... hints and tips the first cell of the header row needs to be blank, and span two columns.
Index - Learn web development
229 html table basics article, beginner, codingscripting, html, learn, tables, basics, cell, col, colgroup, colspan, header, row, rowspan that just about wraps up the basics of html tables.
... 271 adding a new todo form: vue events, methods, and models beginner, forms, frameworks, javascript, learn, methods, client-side, events, models, vue excellent.
Server-side web frameworks - Learn web development
there are many excellent independent components, but sometimes it can be hard to work out which is the best for a particular purpose!
...like many microsoft products it benefits from excellent tools (often free), an active developer community, and well-written documentation.
Focus management with Vue refs - Learn web development
to do that, we need to handle focus in the todoitem component’s itemedited() and editcancelled() methods.
... focusoneditbutton() { const editbuttonref = this.$refs.editbutton; editbuttonref.focus(); } next, add a call to this.focusoneditbutton() at the end of the itemedited() and editcancelled() methods: itemedited(newitemname) { this.$emit("item-edited", newitemname); this.isediting = false; this.focusoneditbutton(); }, editcancelled() { this.isediting = false; this.focusoneditbutton(); }, try editing and then saving/cancelling a to-do item via your keyboard.
Deploying our app - Learn web development
github help pages has an excellent and simple walkthrough covering how to get one.
...we can optionally change the name of the netlify project or specify to use our own domain name, which netlify offers some excellent documentation on.
Mozilla accessibility architecture
the atk has more convenience methods than msaa does for traversal - for example it is possible to go straight to the accessible for a specific row and column of a table, using nsiaccessibletable::cellrefat().
...for example, nshtmltablecellframe::getaccessible() will eventually call nsiaccessibilityservice::createhtmltablecellaccessible(), which uses |new nshtmltablecellaccessible(domnode, weakpresshell); special exception: traversal overloading in some cases the necessary accessible children are not in the dom subtree for a node.
Links and Resources
online accessibility validators there are now a few available and excellent online accessibility validators which check single webpages according to checkpoints of wcag guidelines and then reports errors or warnings.
... color contrast analyzer by juicy studio: an excellent tool for checking if webpages use/have sufficient color contrast, sufficient brightness difference by comparing background and foreground (text) colors.
Embedding Tips
use the callbacks for after-the-fact cancellation.
... times within the browser window, you can use a javascript constructor instead of a javascript property: catman->addcategoryentry("javascript global constructor", "my_prop_name", "my_prop_contract_id", pr_true, pr_true, getter_copies(previous)); that way you will be able to do: var my_comp = new my_prop_name(); this was taken from weirdal's excellent "burning chrome" article.
Mozilla DOM Hacking Guide
seriously hacking on it requires excellent knowledge of c++ and xpcom, mozilla's own component model.
... "where is getclassinfoinstance used and why should i use it", would be an excellent question for now.
NSPR Types
miscellaneous types are used for representing size, pointer difference, boolean values, and return values.
... printn pruintn miscellaneous types size type pointer difference types boolean types status type for return values size type prsize pointer difference types types for pointer difference.
NSS_3.12_release_notes.html
bug 402114: fix the incorrect function prototypes of ssl handshake callbacks bug 402308: fix miscellaneous compiler warnings in nss/cmd bug 402777: lib/util can't be built stand-alone.
...oved and documented bug 323570: make dbck debug mode work with softoken bug 371470: vfychain needs option to verify for specific date bug 387621: certutil's random noise generator isn't very efficient bug 390185: signtool error message wrongly uses the term database bug 391651: need config.mk file for windows vista bug 396322: fix secutil's code and nss tools that print public keys bug 417641: miscellaneous minor nss bugs bug 334914: hopefully useless null check of out it in jar_find_next bug 95323: ckfw should support cipher operations.
Parser API
miscellaneous interface identifier <: node, expression, pattern { type: "identifier"; name: string; } an identifier.
... miscellaneous identifier(name[, loc]) name: string loc: sourcelocation returns: customidentifier/custompattern/customexpression callback to produce a custom identifier node.
ROLE_TABLE
« gecko roles page represents a table that contains rows and columns of cells, and optionally, row headers and column headers.
... also refer to the following roles: role_columnheader, role_rowheader, role_column, role_row, role_cell.
nsIAccessibleTreeCache
inherits from: nsisupports method overview nsiaccessible getcachedtreeitemaccessible(in long arow, in nsitreecolumn acolumn); void invalidatecache(in long arow, in long acount); void treeviewchanged(); void treeviewinvalidated(in long astartrow, in long aendrow, in long astartcol, in long aendcol); methods getcachedtreeitemaccessible() returns the tree item from the cache for the cell in the specified row and column; the nsiaccessible is created if it doesn't already exist in the cache.
... return value the nsiaccessible corresponding to the specified tree cell.
nsIHTMLEditor
an example of use is for testing if a node is in a table cell given a selection anchor node.
... nsidomelement getelementorparentbytagname( in astring atagname, in nsidomnode anode ); parameters atagname the html tagname special input values: use "href" to get a link node (an "a" tag with the "href" attribute set) use "list" to get an ol, ul, or dl list node use "td" to get either a td or th cell node.
nsISelectionController
methods native code only!characterextendforbackspace will extend the selection one character cell backward in the document.
...native code only!characterextendfordelete will extend the selection one character cell forward in the document.
XPCOM Interface Reference
component; nsiprefbranchextensionmanager (toolkit)iaccessible2iaccessibleactioniaccessibleapplicationiaccessiblecomponentiaccessibleeditabletextiaccessiblehyperlinkiaccessiblehypertextiaccessibleimageiaccessiblerelationiaccessibletableiaccessibletable2iaccessibletablecelliaccessibletextiaccessiblevalueidispatchijsdebuggeramiinstallcallbackamiinstalltriggeramiwebinstallinfoamiwebinstalllisteneramiwebinstallpromptamiwebinstallerimgicacheimgicontainerimgicontainerobserverimgidecoderimgidecoderobserverimgiencoderimgiloaderimgirequestinidomutilsjsdistackframemoziasyncfaviconsmoziasynchistorymozicoloranalyzermozijssubscriptloadermozipersonaldictionarymoziplaceinfomoziplacesautocompletemoziregistrymozirepresentativ...
...ccessiblensiaccessiblecaretmoveeventnsiaccessiblecoordinatetypensiaccessibledocumentnsiaccessibleeditabletextnsiaccessibleeventnsiaccessiblehyperlinknsiaccessiblehypertextnsiaccessibleimagensiaccessibleprovidernsiaccessiblerelationnsiaccessibleretrievalnsiaccessiblerolensiaccessiblescrolltypensiaccessibleselectablensiaccessiblestatechangeeventnsiaccessiblestatesnsiaccessibletablensiaccessibletablecellnsiaccessibletablechangeeventnsiaccessibletextnsiaccessibletextchangeeventnsiaccessibletreecachensiaccessiblevaluensiaccessiblewin32objectnsialertsservicensiannotationobservernsiannotationservicensiappshellnsiappshellservicensiappstartupnsiappstartup_mozilla_2_0nsiapplicationcachensiapplicationcachechannelnsiapplicationcachecontainernsiapplicationcachenamespacensiapplicationcacheservicensiapplicat...
DB Views (message lists)
properties these nsmsgdbview methods set properties, nsitreeview.getrowproperties (implementation) nsitreeview.getcellpropreties (implementation) theming the theme uses these properties to style the thread pane.
... text nsitreeview.getcelltext (implementation) tells the nsitreeview what text to display for a particular row and text column.
customDBHeaders Preference
this is the superfluous.js file referenced from within the superfluous_overlay.xul file: dump(" ~ ~ ~ ~ superfluous ~ ~ ~ ~ \n"); var columnhandler = { getcelltext: function(row, col) { //get the messages header so that we can extract the 'x-superfluous' field var key = gdbview.getkeyat(row); var hdr = gdbview.db.getmsghdrforkey(key); var retval = hdr.getstringproperty("x-superfluous"); dump("x-superfluous: " + retval + "\n"); return retval; }, getsortstringforrow: function(hdr) { return hdr.getstringproperty("x-superfl...
...uous"); }, isstring: function() {return true;}, getcellproperties: function(row, col, props){}, getimagesrc: function(row, col) {return null;}, getsortlongforrow: function(hdr) {return 0;} } function addcustomcolumnhandler() { gdbview.addcolumnhandler("colsuperfluous",columnhandler); dump("column handler being added: " + columnhandler + "\n"); } var createdbobserver = { // components.interfaces.nsiobserver observe: function(amsgfolder, atopic, adata) { dump("here here!"); addcustomcolumnhandler(); } } function doonceloaded(){ var observerservice = components.classes["@mozilla.org/observer-service;1"].getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(createdbobserver, "msgcreatedbview", fals...
Animation.cancel() - Web APIs
WebAPIAnimationcancel
when an animation is cancelled, its starttime and currenttime are set to null.
... exceptions this method doesn't directly throw exceptions; however, if the animation's playstate is anything but "idle" when cancelled, the current finished promise is rejected with a domexception named aborterror.
DataTransfer - Web APIs
datatransfer.mozusercancelled read only this property applies only to the dragend event, and is true if the user canceled the drag operation by pressing escape.
... living standard mozcursor, mozitemcount, mozsourcenode, mozusercancelled, addelement(), mozcleardataat(), mozgetdataat(), mozsetdataat() and moztypesat are gecko specific.
Element: cut event - Web APIs
WebAPIElementcut event
a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the default action using event.preventdefault().
... note though that cancelling the default action will also prevent the document from being updated.
Element.getElementsByTagNameNS() - Web APIs
example // check the alignment on a number of cells in a table in an xhtml document.
... var table = document.getelementbyid("forecast-table"); var cells = table.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "td"); for (var i = 0; i < cells.length; i++) { var axis = cells[i].getattribute("axis"); if (axis == "year") { // grab the data } } specifications specification status comment domthe definition of 'element.getelementsbytagnamens()' in that specification.
HTMLTableElement.rules - Web APIs
the htmltableelement.rules property indicates which cell borders to render in the table.
... syntax htmltableelement.rules = rules; var rules = htmltableelement.rules; parameters rules is a string with one of the following values: none no rules groups lines between groups only rows lines between rows cols lines between cols all lines between all cells example // turn on all the internal borders of a table var t = document.getelementbyid("tableid"); t.rules = "all"; specification w3c dom 2 html specification ...
The HTML DOM API - Web APIs
etaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement htmltableelement htmltablerowelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement deprecated html element interfaces htmlmarqueeelement obsolete html element interfaces htmlbasefontelement htmlfontelement htmlframeel...
... customelementregistry miscellaneous and supporting interfaces these supporting object types are used in a variety of ways in the html dom api.
Basic concepts - Web APIs
error events, on the other hand, do bubble, and can be cancelled.
... this is quite important, as error events abort whatever transactions they're running in, unless they are cancelled.
Network Information API - Web APIs
the network information api provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.).
...if a cellular connection is found, then the preloadvideo flag is set to false.
Using the Payment Request API - Web APIs
const checkoutbutton = document.getelementbyid('checkout-button'); if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.addeventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment.
...paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; successpanel.style.display = 'block'; }); }).catch(function(error) { if (error.code == domexception.not_supported_err) { window.location.href = 'https://bobpay.xyz/#download'; } else { // other kinds of errors; cancelled or failed payment.
ReadableStream.ReadableStream() - Web APIs
cancel(reason) optional this method, also defined by the developer, will be called if the app signals that the stream is to be cancelled (e.g.
...the reason parameter contains a domstring describing why the stream was cancelled.
SVGGraphicsElement: cut event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the default action using event.preventdefault().
... note though that cancelling the default action will also prevent the document from being updated.
SVGSVGElement - Web APIs
this interface contains also various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering devices.
...this method is most useful at the very end of a set of svg dom calls to ensure that all pending suspendredraw() method calls have been cancelled.
Using ARIA: Roles, states, and properties - Accessibility
roles widget roles button checkbox gridcell link menuitem menuitemcheckbox menuitemradio option progressbar radio scrollbar searchbox separator (when focusable) slider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and optional child roles.
... combobox grid (including row, gridcell, rowheader, columnheader roles) listbox (including option role) menu menubar radiogroup (see radio role) tablist (including tab and tabpanel roles) tree treegrid document structure roles application article cell columnheader definition directory document feed figure group heading img list listitem math none note presentation row rowgroup rowheader separator table term textbox toolbar tooltip landmark roles banner complementary contentinfo form main navigation region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
is it a link, static text, editable text, a checkbox, or a table cell, etc.
...nuitem [important] role_tooltip role_application role_document role_pane [important] role_chart role_dialog [semi-important, not currently used by all at's] role_border role_grouping role_separator [important] role_toolbar role_statusbar [important] role_table [important] role_columnheader role_rowheader role_column role_row role_cell [important] role_link [important] role_helpballoon role_character role_list [important] role_listitem [important] role_outline [important] role_outlineitem [important] role_pagetab [important] role_propertypage [important] role_indicator role_graphic [important] role_statictext [important] role_text [important] role_pushbutton [important] ...
Keyboard-navigable JavaScript widgets - Accessibility
grouping controls for grouping widgets such as menus, tablists, grids, or tree views, the parent element should be in the tab order (tabindex="0"), and each descendent choice/tab/cell/row should be removed from the tab order (tabindex="-1").
... managing focus inside groups when a user tabs away from a widget and returns, focus should return to the specific element that had focus, for example, the tree item or grid cell.
Operable - Accessibility
understanding pointer gestures 2.5.2 pointer cancellation (a) added in 2.1 for functionality that can be operated using a single-pointer at least one of the following is true: no down-event, abort/undo, up reversal or essential.
... understanding pointer cancellation 2.5.3 label in name (a) added in 2.1 for each user interface component that includes a visible text label, make sure the accessible name matches (or includes) the visible text in the label.
@supports - CSS: Cascading Style Sheets
WebCSS@supports
the following example returns true if and only if the two shorter expressions are simultaneously true: @supports (display: table-cell) and (display: list-item) {} multiple conjunctions can be juxtaposed without the need of more parentheses.
... the following are both equivalent: @supports (display: table-cell) and (display: list-item) and (display:run-in) {} @supports (display: table-cell) and ((display: list-item) and (display:run-in)) {} the or operator the or operator creates a new expression from the disjunction of two shorter expressions.
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
if you want to dig into writing modes further, however, then i would recommend that you read jen simmons excellent article on css writing modes.
...in default writing mode, grid auto-places items starting at the top left, moving along to the right, filling up the three cells on the inline axis.
align-self - CSS: Cascading Style Sheets
the property doesn't apply to block-level boxes, or to table cells.
... the property doesn't apply to block-level boxes, and to table cells.
cursor - CSS: Cascading Style Sheets
WebCSScursor
selection cell the table cell or set of cells can be selected.
..., ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ] examples setting cursor types .foo { cursor: crosshair; } .bar { cursor: zoom-in; } ...
direction - CSS: Cascading Style Sheets
WebCSSdirection
it also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row.
... unlike the dir attribute in html, the direction property is not inherited from table columns into table cells, since css inheritance follows the document tree, and table cells are inside of rows but not inside of columns.
<display-internal> - CSS: Cascading Style Sheets
table-cell these elements behave like <td> html elements.
... html <main> <div> <label for="name">name</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">age</label> <input type="text" id="age" name="age"> </div> </main> css main { display: table; } div { display: table-row; } label, input { display: table-cell; margin: 5px; } result specifications specification status css display module level 3the definition of 'display-internal' in that specification.
display - CSS: Cascading Style Sheets
WebCSSdisplay
table-cell these elements behave like <td> html elements.
...&& list-item<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container<display-box> = contents | none<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid examples display value comparison in this example we have two block-level container elements, each one with three inline children.
text-align - CSS: Cascading Style Sheets
the text-align css property sets the horizontal alignment of a block element or table-cell box.
... <string> when applied to a table cell, specifies the alignment character around which the cell's contents will align.
visibility - CSS: Cascading Style Sheets
however, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present.
... visibility: collapse may change the layout of a table if the table has nested tables within the cells that are collapsed, unless visibility: visible is specified explicitly on nested tables.
Block formatting context - Developer guides
table cells (elements with display: table-cell, which is the default for html table cells).
... anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group (which is the default for html tables, table rows, table bodies, table headers, and table footers, respectively), or inline-table.
<input type="hidden"> - HTML: Hypertext Markup Language
WebHTMLElementinputhidden
the edit form's html might look a little bit like this: <form> <div> <label for="title">post title:</label> <input type="text" id="title" name="title" value="my excellent blog post"> </div> <div> <label for="content">post content:</label> <textarea id="content" name="content" cols="60" rows="5"> this is the content of my excellent blog post.
... when submitted, the form data sent to the server will look something like this: title=my+excellent+blog+post&content=this+is+the+content+of+my+excellent+blog+post.+i+hope+you+enjoy+it!&postid=34657 even though the hidden input cannot be seen at all, its data is still submitted.
Warning - HTTP
WebHTTPHeadersWarning
199 miscellaneous warning arbitrary, non-specific warning 214 transformation applied added by a proxy if it applies any transformation to the representation, such as changing the content-coding, media-type or the like.
... 299 miscellaneous persistent warning same as 199, but indicating a persistent warning examples warning: 110 anderson/1.3.37 "response is stale" date: wed, 21 oct 2015 07:28:00 gmt warning: 112 - "cache down" "wed, 21 oct 2015 07:28:00 gmt" specifications specification title rfc 7234, section 5.5: warning hypertext transfer protocol (http/1.1): caching ...
<mlabeledtr> - MathML
columnalign overrides the horizontal alignment of cells specified by <mtable> for this row.
... rowalign overrides the vertical alignment of cells specified by <mtable> for this row.
<mtr> - MathML
WebMathMLElementmtr
columnalign overrides the horizontal alignment of cells specified by <mtable> for this row.
... rowalign overrides the vertical alignment of cells specified by <mtable> for this row.
Digital audio concepts - Web media technologies
generally, lossy compression results in significantly smaller output than lossless compression methods; also, many lossy codecs are excellent, with the loss in quality and detail being difficult or even impossible for the average listener to discern.
...the vastly superior compression ratios possible with lossy compression usually make it a compelling choice, and adequate or excellent audio quality is possible with well-chosen codec configurations.
Web video codec guide - Web media technologies
if you're able to use the high or professional profile when encoding av1, at a high level like 6.3, you can get very high bit rates at 4k or 8k resolution, while maintaining excellent video quality.
...at a high bit rate, this provides excellent graphics quality with remarkable color reproduction.
Populating the page: how browsers work - Web Performance
when a user is on a mobile network, each dns lookup has to go from the phone to the cell tower to reach an authoritative dns server.
... the distance between a phone, a cell tower, and the name server can add significant latency.
Content Processes - Archive of obsolete content
neither content or add-on proceses were ever actually implemented, but by the time they were cancelled, the sdk was already designed with them in mind.
Contributor's Guide - Archive of obsolete content
neither content or add-on proceses were ever actually implemented, but by the time they were cancelled, the sdk was already designed with them in mind.
simple-storage - Archive of obsolete content
important: if you use this method, you must end your debugging session by quitting firefox normally, not by cancelling the shell command.
Code snippets - Archive of obsolete content
miscellaneous miscellaneous useful code fragments html to dom using a hidden browser element to parse html to a window's dom javascript libraries here are some javascript libraries that may come in handy.
Handling Preferences - Archive of obsolete content
it's the best place to put miscellaneous files your extension needs.
Security best practices in extensions - Archive of obsolete content
this blog post offers some excellent reasons not to use eval().
CSS3 - Archive of obsolete content
the ability to define the hotspot of a cursor as well as the new none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out, extending the cursor property.
MozBeforeResize - Archive of obsolete content
cancelable read only boolean whether the event is cancellable or not.
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
the xml document is an excellent structure for storing data.
Misc top level - Archive of obsolete content
back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained.no proxy for configurationthis document provides a comprehensive discussion of the manual proxy feature "no proxy for:", including configuration issues, testing and bugs.same-origin policy for file: urisin gecko 1.8 or earlier, any two file: uris are considered to be same-origin.
In-Depth - Archive of obsolete content
button, checkbox-container, checkbox, dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper-horizontal -moz-border-bott...
Dehydra Function Reference - Archive of obsolete content
builtin objects sys this.sys is a container for miscellaneous properties exposes by dehydra sys.gcc_version is a gcc version string sys.include_path exposes the search path used by include().
JavaScript crypto - Archive of obsolete content
// arguments js_err_add_module = -5 // error adding a module js_err_bad_module_name = -6 // the module name is invalid js_err_add_module_duplicate = -10 // the module being installed has the // same name as one of the modules that // has already been installed miscellaneous domstring random(in long numbytes); unimplementedyou can use window.crypto.getrandomvalues instead.
System - Archive of obsolete content
ipod, zune, cell phones, usb devices) ...
jspage - Archive of obsolete content
false,cash:!r}):null;};var e={html:"innerhtml","class":"classname","for":"htmlfor",defaultvalue:"defaultvalue",text:(browser.engine.trident||(browser.engine.webkit&&browser.engine.version<420))?"innertext":"textcontent"}; var b=["compact","nowrap","ismap","declare","noshade","checked","disabled","readonly","multiple","selected","noresize","defer"];var k=["value","type","defaultvalue","accesskey","cellpadding","cellspacing","colspan","frameborder","maxlength","readonly","rowspan","tabindex","usemap"]; b=b.associate(b);hash.extend(e,b);hash.extend(e,k.associate(k.map(string.tolowercase)));var a={before:function(m,l){if(l.parentnode){l.parentnode.insertbefore(m,l); }},after:function(m,l){if(!l.parentnode){return;}var n=l.nextsibling;(n)?l.parentnode.insertbefore(m,n):l.parentnode.appendchild(m);}...
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
or xhtml mimetype for any "doctype html system" doctype (for example, <!doctype html system "http://www.w3.org/tr/rec-html40/strict.dtd">), except for the ibm doctype for unknown doctypes or doctypes without dtds almost standards mode mozilla introduced almost standards mode for one reason: a section in the css 2 specification breaks designs based on a precise layout of small images in table cells.
Mozilla Application Framework in Detail - Archive of obsolete content
xul provides an excellent answer for organizations with heterogeneous computing environments.
LIR - Archive of obsolete content
category op code code name return type featured description miscellaneous 0 start void start of a fragment 1 regfence void a register fence causes no code to be generated, but it affects register allocation so that no registers are live when it is reached.
Porting NSPR to Unix Platforms - Archive of obsolete content
for thread management and synchronization: <tt>cvar -d</tt> <tt>cvar2</tt> <tt>./join -d</tt> <tt>perf</tt> <tt>./switch -d</tt> <tt>intrupt -d</tt> for i/o: <tt>cltsrv -d</tt>, <tt>cltsrv -gd</tt> <tt>socket</tt> <tt>testfile -d</tt> <tt>tmocon -d</tt> '<tt>tmoacc -d</tt>' in conjunction with '<tt>writev -d</tt>' miscellaneous: <tt>dlltest -d</tt> <tt>forktest</tt> original document information author: larryh@netscape.com last updated date: 16 july 1998 ...
RDF Datasource How-To - Archive of obsolete content
resource (http://foo.bar.com/) that your datasource describes: <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/tr/wd-rdf-syntax#" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <tree datasources="rdf:my-datasource" ref="http://foo.bar.com/"> <template> <treechildren> <treeitem uri="..."> <treerow> <treecell> <text value="rdf:http://home.netscape.com/nc-rdf#name" /> </treecell> <treecell> <text value="rdf:http://home.netscape.com/nc-rdf#url" /> </treecell> </treerow> </treeitem> </treechildren> </template> <treehead> <treeitem> <treecell>name</treecell> <treecell>url</treecell> ...
Table Layout Regression Tests - Archive of obsolete content
for appendcells1.html a file appendcells1.rgd will be created in the baseline or verify subdirectory.
Elements - Archive of obsolete content
firefox 2) it is impossible to attach bindings to table sub-elements (rows, cells etc.) you can attach binding only to the table element itself.
Install script template - Archive of obsolete content
l to the plugins directory -- this works well in mozilla 1.0 clients // in mozilla 1.0 clients, the components directory can be avoided for xpt files errblock1 = addfile (plid, version, component_file, pluginsfolder, null); if (errblock1!=0) { logcomment("could not add " + component_file + " to " + pluginsfolder + ":" + errblock1); cancelinstall(errblock1); } } else { logcomment("cancelling current browser install due to lack of space..."); cancellinstall(); } // secondary install block, which sets up plugins and xpt in another location in addition to the current browser errblock2 = createsecondaryinstall(); // performinstall block, in which error conditions from previous blocks are checked.
File.macAlias - Archive of obsolete content
xpisrc = "miscellaneous program"; var vi = "1.1.1.1"; initinstall( "macintosh alias", "misc", vi, 0); f = getfolder("program"); g = getfolder("mac desktop"); addfile( "filemacalias", "2.2.2.2", xpisrc, f, xpisrc, true); err = file.macalias(f, xpisrc, g, xpisrc + " alias"); logcomment("file.macalias returns: " + err); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
Learn XPI Installer Scripting by Example - Archive of obsolete content
note that in the example above, the installation is cancelled if the error code from the file addition process returns success (0), and also cancelled outside the main block if the earlier verification process is not successful.
flags - Archive of obsolete content
« xul reference home flags type: space-separated list of the values below a set of flags used for miscellaneous purposes.
mode - Archive of obsolete content
ArchiveMozillaXULAttributemode
see progressmeter.mode toolbar.mode treecell.mode ...
seltype - Archive of obsolete content
(default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column.
sort - Archive of obsolete content
ArchiveMozillaXULAttributesort
the property will usually be the same as that of the cell label.
src - Archive of obsolete content
ArchiveMozillaXULAttributesrc
examples <iframe id="content-body" src="http://www.mozilla.org/"/> <browser src="http://www.mozilla.org" flex="1"/> <image src='firefoxlogo.png' width='135' height='130'/> see also prefpane.src treecell.src treecol.src script.src stringbundle.src checkbox.src ...
tree.editable - Archive of obsolete content
« xul reference home editable type: boolean indicates that the cells of the tree may be edited.
type - Archive of obsolete content
ArchiveMozillaXULAttributetype
see button.type browser.type colorpicker.type datepicker.type editor.type listcell.type listitem.type menuitem.type notification.type prefwindow.type query.type script.type textbox.type toolbarbutton.type treecol.type ...
DOMMenuItemActive - Archive of obsolete content
cancelable read only boolean whether the event is cancellable or not.
DOMMenuItemInactive - Archive of obsolete content
cancelable read only boolean whether the event is cancellable or not.
broadcast - Archive of obsolete content
cancelable read only boolean whether the event is cancellable or not.
close - Archive of obsolete content
cancelable read only boolean whether the event is cancellable or not.
command - Archive of obsolete content
ArchiveMozillaXULEventscommand
bubbles read only boolean whether the event normally bubbles or not cancelable read only boolean whether the event is cancellable or not?
commandupdate - Archive of obsolete content
cancelable read only boolean whether the event is cancellable or not.
popuphidden - Archive of obsolete content
cancelable read only boolean whether the event is cancellable or not.
popuphiding - Archive of obsolete content
cancelable read only boolean whether the event is cancellable or not.
popupshowing - Archive of obsolete content
cancelable read only boolean whether the event is cancellable or not.
popupshown - Archive of obsolete content
cancelable read only boolean whether the event is cancellable or not.
Introduction to XUL - Archive of obsolete content
most of the details of writing a xul document are identical to those for writing an xml document, a description of which we will leave to other excellent xml documentation which we assume must exist but have never seen.
cancel - Archive of obsolete content
ArchiveMozillaXULMethodcancel
the code in the onwizardcancel attribute is called before the wizard is cancelled.
Menus - Archive of obsolete content
when a menu command is selected or the menu is cancelled, the menupopup disappears from the screen again.
Panels - Archive of obsolete content
this process of removing the focus when opening and closing a popup occurs after the popupshowing event or popuphiding event is fired, which means that if those events are cancelled, the focus is not adjusted.
accessibleType - Archive of obsolete content
xulcolorpicker 1004 xulcolorpickertile 1005 xulcombobox 1006 xuldropmarker 1007 xulgroupbox 1008 xulimage 1009 xullink 100a xullistbox 100b xullistcell 1026 xullisthead 1024 xullistheader 1025 xullistitem 100c xulmenubar 100d xulmenuitem 100e xulmenupopup 100f xulmenuseparator 1010 xulpane 1011 ...
editingColumn - Archive of obsolete content
« xul reference editingcolumn type: nsitreecolumn the column of the tree cell currently being edited, or null if there is no cell being edited.
editingRow - Archive of obsolete content
« xul reference editingrow type: integer the row index of the tree cell currently being edited, or -1 if there is no cell currently being edited.
treeBoxObject - Archive of obsolete content
this object implements the nsitreeboxobject interface and contains functions for retrieving the cells at certain coordinates, redrawing cells and scrolling the tree.
view - Archive of obsolete content
ArchiveMozillaXULPropertyview
functions available in the view allow one to retrieve the data within the cells, and determine which rows are nested within others.
Style classes - Archive of obsolete content
ArchiveMozillaXULStyle
« xul reference home alert-icon chromeclass-toolbar error-icon groove header indent listcell-iconic listitem-iconic menuitem-iconic menuitem-non-iconic message-icon monospace plain question-icon small-margin statusbarpanel-iconic statusbarpanel-iconic-text statusbarpanel-menu-iconic text-link thin tree-splitter treecol-image ...
Sorting Results - Archive of obsolete content
usually, this would be the same variable that is used to generate the label for the cells in that column, however this is not actually necessary.
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
if you're unfamiliar with how that works, read the skinning section of jonah bishop's excellent toolbar tutorial.
Adding HTML Elements - Archive of obsolete content
<html:img src="banner.jpg"/> <html:input type="checkbox" value="true"/> <html:table> <html:tr> <html:td> a simple table </html:td> </html:tr> </html:table> these examples will create an image from the file banner.jpg, a checkbox and a single-cell table.
Advanced Rules - Archive of obsolete content
<triple subject="?city" predicate="http://www.xulplanet.com/rdf/weather#name" object="?name"/> <triple subject="?city" predicate="http://www.xulplanet.com/rdf/weather#prediction" object="?pred"/> </conditions> <action> <treechildren> <treeitem uri="?city"> <treerow> <treecell label="?name"/> <treecell label="?pred"/> </treerow> </treeitem> </treechildren> </action> </rule> </template> </tree> two columns appear in this tree, one which displays the value of the name for each row and the other which displays the value of the prediction.
Creating a Wizard - Archive of obsolete content
as soon as one returns false, the navigation will be cancelled.
Localization - Archive of obsolete content
l="&matchfilename;"/> </tabpanel> </tabpanels> </tabbox> <tree id="results" style="display: none;" flex="1"> <treecols> <treecol id="name" label="&results.filename;" flex="1"/> <treecol id="location" label="&results.location;" flex="2"/> <treecol id="size" label="&results.size;" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="mozilla"/> <treecell label="/usr/local"/> <treecell label="&bytes.before;2520&bytes.after;"/> </treerow> </treeitem> </treechildren> </tree> <splitter id="splitbar" resizeafter="grow" style="display: none;"/> <spacer class="titlespace"/> <hbox> <progressmeter id="progmeter" value="50%" style="display: none;"/> <spacer flex="1"/> <button id="...
Manipulating Lists - Archive of obsolete content
view <script> function doselect(){ var val = document.getelementbyid('number').value; val = number(val); if (val != null) document.getelementbyid('level').selectedindex = val - 1; } </script> <hbox align="center"> <label value="enter a number from 1 to 3:"/> <textbox id="number"/> <button label="select" oncommand="doselect();"/> </hbox> <radiogroup id="level"> <radio label="excellent"/> <radio label="good"/> <radio label="poor"/> </radiogroup> listboxes also support multiple selection and the functions of the nsidomxulmultiselectcontrolelement interface.
XUL element attributes - Archive of obsolete content
flags type: space-separated list of the values below a set of flags used for miscellaneous purposes.
colorpicker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a palette of colors from which a user may select by clicking on one of the grid cells.
column - Archive of obsolete content
each child of the column element is placed in each successive cell of the grid.
editor - Archive of obsolete content
however, text editing, image resizing, and table row and cell editing capabilities are provided.
grid - Archive of obsolete content
ArchiveMozillaXULgrid
the size and attributes defined on columns and rows will affect the size and placement of elements in each cell.
listhead - Archive of obsolete content
before(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcol, listcols, listheader, listitem ...
richlistbox - Archive of obsolete content
(default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column.
row - Archive of obsolete content
ArchiveMozillaXULrow
each child of the row element is placed in each successive cell of the grid.
treechildren - Archive of obsolete content
ibutenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata example <tree flex="1"> <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> <treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lunch"/> </treerow> </treeitem> </treechildren> </tree> related elements tree, treecols, treecol, treeitem, treerow, treecell and treeseparator.
treecols - Archive of obsolete content
node, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecol, treechildren, treeitem, treerow, treecell and treeseparator.
treeitem - Archive of obsolete content
node, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, treerow, treecell and treeseparator.
treeseparator - Archive of obsolete content
ode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, treeitem, treerow and treecell.
Archived Mozilla and build documentation - Archive of obsolete content
table cellmap the table layout use the cellmap for two purposes: table cellmap - border collapse this document describes the additional information that is stored for border collapse tables in the cellmap.
Gecko Compatibility Handbook - Archive of obsolete content
in older browsers, this results in the td cell tightly wrapping around the input element.
2006-11-03 - Archive of obsolete content
perf question (reflow branch) a look into bug #352367 and the mention of possibly reducing the number of times nsframe::intrinsicwidthoffsets is called for each cell within a table.
2006-12-01 - Archive of obsolete content
discussions cancellable async requests discussions about a bug of calicalendar's async methods.
Common Firefox theme issues and solutions - Archive of obsolete content
miscellaneous issues html 5 media controls html 5 media controls are not styled the html5 video control bar is not styled.
Theme changes in Firefox 2 - Archive of obsolete content
int-button:hover:active #reload-button:hover #reload-button:hover:active #searchbar[empty="true"] .searchbar-textbox #stop-button:hover #stop-button:hover:active #urlbar-icons-spacer #urlbar-spacer #urlbar[level="high"] #lock-icon:active #urlbar[level="high"] #lock-icon:hover #urlbar[level="low"] #lock-icon:active #urlbar[level="low"] #lock-icon:hover .autocomplete-treebody::-moz-tree-cell(suggesthint) .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolautocompletecomment) .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolautocompletecomment) .bookmark-item[livemark] .openintabs-menuitem .toolbarbutton-icon .toolbarbutton-menubutton-dropmarker toolbar[iconsize="small"] #back-button .toolbarbutton-menubutton-dropmarker toolbar[iconsize="small"] #b...
Using Web Standards in your Web Pages - Archive of obsolete content
the last section offers excellent and best references for those wishing to learn more about upgrading techniques presented in this article and more for those wishing to perfect their web pages.
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
for example, if an author writes: <style type="text/css"> body {font-size: 11px;} </style> ...then the text inside table cells should also be 11 pixels in size.
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
however, rules of this type are usually seen in conjunction with markup like this: <td class="nav"> <a href="one.html" class="nav">one</a> | <a href="two.html" class="nav">two</a> | <a href="thr.html" class="nav">three</a> | <a href="fou.html" class="nav">four</a> </td> because the enclosing table cell has a class of nav, the vertical-bar characters will turn red when the user moves the mouse pointer anywhere within the table cell.
Anatomy of a video game - Game development
it is an excellent idea to attach your code to the moments that are appropriate for them.
Game distribution - Game development
it's more like an excellent promotional opportunity than a way to earn a lot of money, however, as the prices paid for the games in a bundle are usually quite low.
Game monetization - Game development
remember that it can be cancelled, so it's not an indefinitely working solution.
Mobile touch controls - Game development
touchmove is fired when they move the finger on the screen while touching it touchend is fired when the user stops touching the screen touchcancel is fired when a touch is cancelled, for example when the user moves their finger outside of the screen.
Alignment subject - MDN Web Docs Glossary: Definitions of Web-related terms
block containers (including table cells) the entire content of the block as a single unit.
CSS pixel - MDN Web Docs Glossary: Definitions of Web-related terms
when a user is sitting at a desk in front of a desktop, the display is generally substantially farther away from their eyes than when they're on a cell phone, for instance.
Effective connection type - MDN Web Docs Glossary: Definitions of Web-related terms
effective connection type (ect) refers to the measured network performance, returning a cellular connection type, like 3g, even if the actual connection is tethered broadband or wifi, based on the time between the browser requesting a page and effective type of the connection.
Modem - MDN Web Docs Glossary: Definitions of Web-related terms
different kinds are used for different networks: dsl modems for telephone wires, wifi modems for short-range wireless radio signals, 3g modems for cellular data towers, and so on.
Synthetic monitoring - MDN Web Docs Glossary: Definitions of Web-related terms
combined with other tools, such as network throttling, can provide excellent insight into potential problem areas.
markup - MDN Web Docs Glossary: Definitions of Web-related terms
for example, the html <td> defines a cell in a html table.
MDN Web Docs Glossary: Definitions of Web-related terms
fuzz testing g gaia garbage collection gecko general header gif gij git global object global scope global variable glyph gonk google chrome gpl gpu graceful degradation grid grid areas grid axis grid cell grid column grid container grid lines grid row grid tracks guard gutters gzip compression h hash head high-level programming language hmac hoisting host hotlink houdini hpkp hsts html html5 http...
WAI-ARIA basics - Learn web development
as an example, you could use aria-labelledby to specify that a key description contained in a <div> is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing information on the page as an image's alt text, rather than having to repeat it inside the alt attribute.
Debugging CSS - Learn web development
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.
Images, media, and form elements - Learn web development
to force the image to stretch to fill the grid cell it is in, you'd have to do something like following: img { width: 100%; height: 100%; } this would however stretch the image, so probably isn't what you'd want to do.
CSS selectors - Learn web development
the majority of selectors that you will come across are defined in the level 3 selectors specification, which is a mature specification, therefore you will find excellent browser support for these selectors.
Video and audio content - Learn web development
it turns out that several popular formats, such as mp3 and mp4/h.264, are excellent but are encumbered by patents; that is, there are patents covering some or all of the technology that they're based upon.
HTML Tables - Learn web development
LearnHTMLTables
guides this module contains the following articles: html table basics this article gets you started with html tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
Choosing the right approach - Learn web development
for a much more complete treatment, see the excellent we have a problem with promises, by nolan lawson.
Multimedia: Images - Learn web development
doesn't support progressive display and the image decoding is not hardware accellerated and therefore resource intensive on the browser's main thread.
The "why" of web performance - Learn web development
the same site will be slow to load, possibly verging on unusable depending on cell coverage.
Client-Server Overview - Learn web development
note: static sites are excellent when you have a small number of pages and you want to send the same content to every user.
Accessibility in React - Learn web development
moving focus back to the edit button at first glance, getting react to move focus back to our "edit" button when the edit is saved or cancelled appears deceptively easy.
Adding a new todo form: Vue events, methods, and models - Learn web development
summary excellent.
Handling common JavaScript problems - Learn web development
note: addy osmani's writing fast, memory-efficient javascript contains a lot of detail and some excellent tips for boosting javascript performance.
Command line crash course - Learn web development
with prettier there's a number of ways automation can be achieved and though they're beyond the scope of this article, there's some excellent resources online to help (some of which have been linked to).
Package management basics - Learn web development
an excellent way to try out semver values is to use the semver calculator.
omni.ja (formerly omni.jar)
/res/ miscellaneous resource files.
Accessibility Features in Firefox
thanks to sun's efforts we already have excellent support for the gnome onscreen keyboard (gok).
CSUN Firefox Materials
thanks to sun's efforts we already have excellent support for the gok onscreen keyboard.
Information for External Developers Dealing with Accessibility
in addition, here is a list of official keyboard ui guidelines for each desktop: windows keys: guidelines on keyboard ui design and on implementing keyboard shortcuts: an excellent resource from microsoft.
Information for users
firefox accessibility skins and themes at the excellent access firefox website, you will find many valuable resources, including a list of firefox themes that have been specially designed for those with low vision: themes with high color constrast themes with big icons themes with extra large and bright icons themes with extra large and extra bold text join the mozilla accessibility community live chat both end users and de...
Accessible Toolkit Checklist
is it a link, static text, editable text, a checkbox, or a table cell, etc.
Command line options
miscellaneous -attach-console write messages for the debugging console into the window which launched the application instead of opening a new window for the debugging messages.
Debugging
miscellaneous debugging safari some tips for debugging safari debugging chrome some tips for debugging chrome debugging internet explorer some tips for debugging internet explorer providing useful information to the mozilla developers how to get a stacktrace for a bug report useful information you can provide about a crash.
Error codes returned by Mozilla APIs
t_bad_value (0x80600007) ns_error_xslt_nodeset_expected (0x80600008) ns_error_xslt_aborted (0x80600009) ns_error_xslt_network_error (0x8060000a) ns_error_xslt_wrong_mime_type (0x8060000b) ns_error_xslt_load_recursion (0x8060000c) ns_error_xslt_load_blocked_error (0x8060001b) ns_error_xslt_bad_node_name (0x8060001e) ns_error_xslt_var_already_set (0x8060001f) miscellaneous errors other errors that can occur.
Performance best practices for Firefox front-end engineers
there’s plenty of excellent documentation on mdn about the gecko profiler: basic instructions for gathering and sharing a performance profile advanced profile analysis don’t guess—measure.
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
it was originally used in firefox os to implement browser applications before that project was cancelled; since firefox 47 it is available to desktop chrome code and used in places like the firefox devtools.
mozbrowseractivitydone
cancelable read only boolean whether the event is cancellable or not.
mozbrowserasyncscroll
cancelable read only boolean whether the event is cancellable or not.
mozbrowseraudioplaybackchange
cancelable read only boolean whether the event is cancellable or not.
mozbrowsercaretstatechanged
cancelable read only boolean whether the event is cancellable or not.
mozbrowserclose
cancelable read only boolean whether the event is cancellable or not.
mozbrowsercontextmenu
cancelable read only boolean whether the event is cancellable or not.
mozbrowserdocumentfirstpaint
cancelable read only boolean whether the event is cancellable or not.
mozbrowsererror
cancelable read only boolean whether the event is cancellable or not.
mozbrowserfindchange
cancelable read only boolean whether the event is cancellable or not.
mozbrowserfirstpaint
cancelable read only boolean whether the event is cancellable or not.
mozbrowsericonchange
cancelable read only boolean whether the event is cancellable or not.
mozbrowserloadend
cancelable read only boolean whether the event is cancellable or not.
mozbrowserloadstart
cancelable read only boolean whether the event is cancellable or not.
mozbrowserlocationchange
cancelable read only boolean whether the event is cancellable or not.
mozbrowsermanifestchange
cancelable read only boolean whether the event is cancellable or not.
mozbrowsermetachange
cancelable read only boolean whether the event is cancellable or not.
mozbrowseropensearch
cancelable read only boolean whether the event is cancellable or not.
mozbrowseropentab
cancelable read only boolean whether the event is cancellable or not.
mozbrowseropenwindow
cancelable read only boolean whether the event is cancellable or not.
mozbrowserresize
cancelable read only boolean whether the event is cancellable or not.
mozbrowserscroll
cancelable read only boolean whether the event is cancellable or not.
mozbrowserscrollareachanged
cancelable read only boolean whether the event is cancellable or not.
mozbrowserscrollviewchange
cancelable read only boolean whether the event is cancellable or not.
mozbrowsersecuritychange
cancelable read only boolean whether the event is cancellable or not.
mozbrowserselectionstatechanged
cancelable read only boolean whether the event is cancellable or not.
mozbrowsershowmodalprompt
cancelable read only boolean whether the event is cancellable or not.
mozbrowsertitlechange
cancelable read only boolean whether the event is cancellable or not.
mozbrowserusernameandpasswordrequired
cancelable read only boolean whether the event is cancellable or not.
mozbrowservisibilitychange
cancelable read only boolean whether the event is cancellable or not.
::-moz-tree-image
associated elements <xul:treeitem> <xul:treecell> style properties margin list-style position examples bookmark icons in the places window - mozillazine forum ...
::-moz-tree-progressmeter
associated elements <xul:treecell> style properties margin color ...
::-moz-tree-twisty
associated elements <xul:treecell> style properties border margin padding display list-style position -moz-appearance ...
Chrome-only CSS reference
MozillaGeckoChromeCSS
true and a theme is selected.:-moz-lwtheme-brighttextthe :-moz-lwtheme-brighttext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a bright text color is selected.:-moz-lwtheme-darktextthe :-moz-lwtheme-darktext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a dark text color is selected.::-moz-tree-cellactivated by the properties attribute.::-moz-tree-cell-textactivated by the properties attribute.::-moz-tree-cell-text(hover)the :-moz-tree-cell-text(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over text in a tree cell.::-moz-tree-columnactivated by the properties attribute.::-moz-tree-drop-feedbackactivated by the properties attribute.::-moz-tree-imagea...
MozScrolledAreaChanged
cancelableread only boolean whether the event is cancellable or not.
smartcard-insert
cancelableread only boolean whether the event is cancellable or not.
smartcard-remove
cancelableread only boolean whether the event is cancellable or not.
Gecko's "Almost Standards" Mode
a common case that this affects is the layout of images inside table cells.
AddonManager
state_cancelled an install that has been canceled.
Code Samples
var beinguninstalled; let listener = { onuninstalling: function(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = true; } }, onoperationcancelled: function(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = (addon.pendingoperations & addonmanager.pending_uninstall) != 0; } } } try { components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.addaddonlistener(listener); } catch (ex) {} ...
Webapps.jsm
flinecachedownload: function(amanifest, aapp, aprofiledir, aisupdate) computemanifesthash: function(amanifest) updateapphandlers: function(aoldmanifest, anewmanifest, aapp) checkforupdate: function(adata, amm) doinstall: function doinstall(adata, amm) doinstallpackage: function doinstallpackage(adata, amm) pushcontentaction: function(windowid) popcontentaction: function(windowid) actioncancelled: function(windowid) denyinstall: function(adata) _setupapp: function(adata, aid) _cloneapp: function(adata, anewapp, alocalemanifest, amanifest, aid, alocalid) _writemanifestfile: function(aid, aispackage, ajsonmanifest) _nextlocalid: function() _appidformanifesturl: function(auri) makeappid: function() _saveapps: function() _readmanifests: function(adata) _ensuresufficientstorage: fu...
MathML Demo: <mtable> - tables and matrices
d+p ( α β γ δ ) ...--- , but note that setting the baseline relative to a particular row is meaningless if the row doesn't have at least one cell with "rowalign=baseline" where to anchor the baseline (in which case mozilla will behave as if it was align="center#rownumber").
Profiling with Concurrency Visualizer - Performance
concurrency visualizer is an excellent alternative to xperf.
Refcount tracing and balancing
more likely, it indicates that one addref() is cancelled by another release() somewhere else in the code.
PR_CancelJob
syntax #include <prtpool.h> nspr_api(prstatus) pr_canceljob(prjob *job); parameter the function has the following parameter: job a pointer to a prjob structure returned by a pr_queuejob function representing the job to be cancelled.
PR_JoinJob
syntax #include <prtpool.h> nspr_api(prstatus) pr_joinjob(prjob *job); parameter the function has the following parameter: job a pointer to a prjob structure returned by a pr_queuejob function representing the job to be cancelled.
NSPR API Reference
ting threads interrupting threads nspr thread synchronization locks and monitors condition variables nspr sample code nspr types calling convention types algebraic types 8-, 16-, and 32-bit integer types signed integers unsigned integers 64-bit integer types floating-point integer type native os integer types miscellaneous types size type pointer difference types boolean types status type for return values threads threading types and constants threading functions creating, joining, and identifying threads controlling thread priorities controlling per-thread private data interrupting and yielding setting global thread concurrency getting a thread's scope pr...
Index
return codes o 0 - no error o 1 - user cancelled o 2 - usage error o 6 - nls init error o 8 - certificate db open error o 9 - key db open error o 10 - file initialization error o 11 - unicode conversion error o 12 - temporary file creation error o 13 - pkcs11 get slot error o 14 - pkcs12 decoder start error o 15 - error read from import file o 16 - pkcs12 decode error o 1...
NSS 3.12.4 release notes
bug 470500: firefox 3.1b2 crash report [[@ nssutil3.dll@0x34c0 ] bug 482742: enable building util independently of the rest of nss bug 483653: unable to build certutil.exe for fennec/wince bug 485145: miscellaneous crashes in signtool on windows bug 485155: nss_enable_pkix_verify=1 causes sec_error_unknown_issuer errors bug 485527: rename the _x86_ macro in lib/freebl bug 485658: vfychain -p reports revoked cert bug 485745: modify fipstest.c to support cavs 7.1 drbg testing bug 486304: cert7.db/cert8.db corruption when importing a large certificate (>64k) bug 486405: allocator mismatches in pk12util.c...
NSS Developer Tutorial
miscellaneous goto can be used, to simplify resource deallocation, before returning from a function.
nss tech note4
secitem_freeitem(&data.maxusers, pr_false); } } some miscellaneous helper functions compare two secitems (e.g., two oids) prbool secitem_itemsareequal(const secitem *a, const secitem *b); interpreting a secitem value as an integer if secitem *item->len <=4, then int value = der_getinteger(item); interpreting a secitem value as a string use string copy functions to copy item->len bytes from item->data and nu...
nss tech note5
using nss to perform miscellaneous cryptographic operations nss technical note: 5 nss project info is at http://www.mozilla.org/projects/security/pki/nss/ you can browse the nss source online at http://lxr.mozilla.org/mozilla/source/security/nss/ and http://lxr.mozilla.org/security/ be sure to look for sample code first for things you need to do.
NSS Tech Notes
tn5: using nss to perform miscellaneous cryptographic operations.
PKCS11 Implement
miscellaneous nss semantics that affect module implementation.
NSS tools : pk12util
return codes o 0 - no error o 1 - user cancelled o 2 - usage error o 6 - nls init error o 8 - certificate db open error o 9 - key db open error o 10 - file initialization error o 11 - unicode conversion error o 12 - temporary file creation error o 13 - pkcs11 get slot error o 14 - pkcs12 decoder start error o 15 - error read from import file o 16 - pkcs12 decode error o 17 - pkcs12 decoder verify error o 18 - pkcs12 decoder valid...
sslerr.html
sec_error_user_cancelled -8105 the user clicked cancel.
NSS Tools pk12util
error codes pk12util can return the following values: 0 - no error 1 - user cancelled 2 - usage error 6 - nls init error 8 - certificate db open error 9 - key db open error 10 - file initialization error 11 - unicode conversion error 12 - temporary file creation error 13 - pkcs11 get slot error 14 - pkcs12 decoder start error 15 - error read from import file 16 - pkcs12 decode error 17 - pkcs12 decoder verify error 18 - pkcs12 decoder validate bags error 19 - pkcs12 decoder impo...
NSS tools : pk12util
return codes o 0 - no error o 1 - user cancelled o 2 - usage error o 6 - nls init error o 8 - certificate db open error o 9 - key db open error o 10 - file initialization error o 11 - unicode conversion error o 12 - temporary file creation error o 13 - pkcs11 get slot error o 14 - pkcs12 decoder start error o 15 - error read from import file o 16 - pkcs12 decode error o 1...
SpiderMonkey Build Documentation
no configure: error: installation or configuration problem: c compiler cannot create executables." you can try configuring like so: cc=clang cxx=clang++ ../configure it is also possible that baldrdash may fail to compile with /usr/local/cellar/llvm/7.0.1/lib/clang/7.0.1/include/inttypes.h:30:15: fatal error: 'inttypes.h' file not found /usr/local/cellar/llvm/7.0.1/lib/clang/7.0.1/include/inttypes.h:30:15: fatal error: 'inttypes.h' file not found, err: true this is because, starting from mohave, headers are no longer installed in /usr/include.
FOSS
ms to provide an extensible tooling framework http://www.synchro.net/ - a telnet/ssh bulletin board system (bbs) and internet server (http/smtp/ftp) with extra internet services written in javascript (irc, imap, gopher, and many more) https://github.com/mindbit/libjssql/wiki - a library that aims to provide a generic sql api for javascript that is as similar as possible to jdbc miscellaneous serverjs, a standardization effort for the fragmented server-side javascript world 0 a.d., historical rts game with javascript scripting http://soubok.googlepages.com/javascript malzilla - tool for hunting malware by deobfuscating javascripts on web pages, using spidermonkey ...
Hacking Tips
debugging gc marking/rooting the js::debug namespace contains some functions that are useful for watching mark bits for an individual jsobject* (or any cell*).
JSID_IS_GCTHING
syntax bool jsid_is_gcthing(jsid id); js::gccellptr jsid_to_gcthing(jsid id); name type description id jsid the property identifier to test or convert.
JSAPI reference
jsapi 23 js_call_value_tracer added in spidermonkey 1.8 obsolete since jsapi 23 js_call_object_tracer added in spidermonkey 1.8 obsolete since jsapi 23 js_call_string_tracer added in spidermonkey 1.8 obsolete since jsapi 23 js_call_double_tracer added in spidermonkey 1.8 obsolete since javascript 1.8.5 js_printtracethinginfo (debug-only) added in spidermonkey 1.8 obsolete since jsapi 16 miscellaneous gc apis: js_updatemalloccounter added in spidermonkey 17 js::setlargeallocationfailurecallback added in spidermonkey 31 js::setoutofmemorycallback added in spidermonkey 31 js_enumeratediagnosticmemoryregions added in spidermonkey 17 jsval_lock obsolete since jsapi 18 jsval_unlock obsolete since jsapi 18 js_lockgcthing obsolete since jsapi 21 js_lockgcthingrt obsolete since jsap...
Secure Development Guidelines
s the destructor never gets called this can lead to memory leaks constructor/destructor issues example class foo { private: char *ptr; public: foo() {} ~foo() { if (ptr) free(ptr); } }; constructor/destructor issues: prevention initialize the data members of an object in the constructor writing secure code: miscellaneous file i/o a lot can go wrong because a lot can be done with file input and output filenames permissions file handles and descriptors file i/o: filename divided in directories, subdirectories, and the file itself ‘/’ is separator; in windows ‘\’ would work too int openfile(char *file) { handle fh; if (strstr(file, “\”)) return -1;...
Gecko events
is supported: yes targets: table_cell - the cell of <xul:tree/>, any accessible for html element when @title or @alt attribute is changed.
ROLE_ROW
« gecko roles page represents a row of cells within a table.
Gecko states
applied to: role_menuitem, role_cell, role_outlineitem, xxx: continue events: event_state_change Сoncomitant state: state_selectable state_focused the object is focused applied to: events: concomitant state: state_focusable state_pressed the object is pressed.
Using the Places history service
miscellaneous nsinavhistoryservice.addobserver: adds a history observer, which will be notified of changes to the history system.
XPCOM changes in Gecko 2.0
miscellaneous xpcnativewrapper changes using the delete operator on "expando" properties of an xpcnativewrapper no longer throws a security exception.
Component Internals
in order to support something like an "are you sure you want to quit" dialog, the application needs to provide a higher-level event (e.g., startshutdown()) which allows for cancellation.
Observer Notifications
em-action-requested item-cancel-action a previous action has been cancelled.
IAccessible2
in] enum ia2scrolltype scrolltype ); hresult scrolltopoint([in] enum ia2coordinatetype coordinatetype, [in] long x, [in] long y ); [propget] hresult states([out] accessiblestates states ); [propget] hresult uniqueid([out] long uniqueid ); [propget] hresult windowhandle([out] hwnd windowhandle ); methods attributes() returns the attributes specific to this iaccessible2 object, such as a cell's formula.
imgIRequest
status_load_partial 0x2 used internally by imgrequest to flag that a request is being cancelled as a result of a failure of a proxy holder and not an internal failure.
nsIAbCard
e astring phoneticfirstname astring phoneticlastname astring displayname astring nickname astring primaryemail astring secondemail astring workphone astring homephone astring faxnumber astring pagernumber astring cellularnumber astring workphonetype astring homephonetype astring faxnumbertype astring pagernumbertype astring cellularnumbertype astring homeaddress astring homeaddress2 astring homecity astring homestate astring homezipcode ast...
nsIAccessibilityService
erence apresshell); nsiaccessible createhtmlobjectframeaccessible(in nsobjectframe aframe); nsiaccessible createhtmlradiobuttonaccessible(in nsisupports aframe); nsiaccessible createhtmlselectoptionaccessible(in nsidomnode anode, in nsiaccessible aaccparent, in nsiweakreference apresshell); nsiaccessible createhtmltableaccessible(in nsisupports aframe); nsiaccessible createhtmltablecellaccessible(in nsisupports aframe); nsiaccessible createhtmltableheadaccessible(in nsidomnode adomnode); nsiaccessible createhtmltextaccessible(in nsisupports aframe); nsiaccessible createhtmltextfieldaccessible(in nsisupports aframe); nsiaccessible createhtmlcaptionaccessible(in nsisupports aframe); nsiaccessible getaccessible(in nsidomnode anode, in nsipresshell apresshell, in nsiw...
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 xulmenupopup 0x0000100f xulmenuseparator 0x00001010 xulpane 0x00001011 xulprogressmeter 0x00001012 xulscale 0x00001013 xulstatusbar 0x00001014 xulradiobutton 0x00001015 xulradiogroup 0x00001016 xultab 0x00001017 the ...
nsICacheDeviceInfo
usagereport string get a usage report, statistics, miscellaneous data about the cache device.
nsIProtocolProxyService
if canceled, the cancellation status (areason) will be forwarded to the callback's nsiprotocolproxycallback.onproxyavailable() method via the astatus parameter.
nsISelectionPrivate
constants constant value description endofprecedingline 0 startofnextline 1 tableselection_none 0 tableselection_cell 1 tableselection_row 2 tableselection_column 3 tableselection_table 4 tableselection_allcells 5 methods addselectionlistener() void addselectionlistener( in nsiselectionlistener newlistener ); parameters newlistener endbatchchanges() will resume user interface updates after a previous call to startba...
nsIStringBundleService
see also code snippets : miscellaneous : using string bundles from javascript how to localize html pages, xul files, and js/jsm files from bootstrapped add-ons.
nsITimer
a user must keep a reference to this timer till it is no longer needed or has been cancelled.
nsIWebBrowserPersist
persist_flags_cleanup_on_failure 8192 automatically cleanup after a failed or cancelled operation, deleting all created files and directories.
nsIAbCard/Thunderbird3
same as home, but with `work' instead of `home' other contact: faxnumber, faxnumbertype pagernumber, pagernumbertype cellularnumber, cellularnumbertype jobtitle, department, company _aimscreenname dates: anniversaryyear, anniversarymonth, anniversaryday birthyear, birthmonth, birthday webpage1 (work), webpage2 (home) custom1, custom2, custom3, custom4 notes integral properties: lastmodifieddate popularityindex prefermailformat (see nsiabprefermailformat) boolean pro...
nsIMsgCloudFileProvider
uploadcanceled 0x8055311d returned when uploading has stopped because it was cancelled by the user.
LDAP Support
displayname commonname displayname displayname nickname xmozillanickname primaryemail mail secondemail xmozillasecondemail workphone telephonenumber homephone homephone faxnumber fax faxnumber facsimiletelephonenumber pagernumber pager pagernumber pagerphone cellularnumber mobile cellularnumber cellphone cellularnumber carphone workaddress postofficebox workaddress streetaddress workcity l workcity locality workstate st workstate region workzipcode postalcode workzipcode zip workcountry countryname jobtitle tit...
Adding items to the Folder Pane
must persist over sessions text (attribute) the text to display in the tree level (attribute) the level in the tree to display the item at open (rw, attribute) whether or not this container is open children (attribute) an array of child items also conforming to this spec getproperties (function) a call from getrowproperties or getcellproperties for this item will be passed into this function command (function) this function will be called when the item is double-clicked for our example extension, two different types of folder-tree-items will be defined.
Styling the Folder Pane
treeview row/cell properties css property equivalent call explanation foldernamecol -- a property for indicating that a column is the folder name column.
Working with data
if type is an array type of unspecified length, the following steps are taken: if the value is a size value, a new array of that length is created, with its cells ready to accept values of the same type as those in the specified array.
js-ctypes reference
it is obtained by by loading the ctypes module: components.utils.import("resource://gre/modules/ctypes.jsm"); you can use the ctypes object to load libraries, construct types, and perform miscellaneous tasks such as type casting.
Accessibility Inspector - Firefox Developer Tools
note, however, that if you hold the shift key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the picker does not get cancelled) until you release the shift key.
Network request list - Firefox Developer Tools
if the resource was fetched from a service worker cache, then this cell displays "service worker".
Cookies - Firefox Developer Tools
you can edit cookies by double-clicking inside cells in the table widget and editing the values they contain, and add new cookies by clicking the "plus" (+) button and then editing the resulting new row to the value you want.
Local Storage / Session Storage - Firefox Developer Tools
you can edit local and session storage items by double-clicking inside cells in the table widget and editing the values they contain: you can delete local storage and session storage entries using the context menu: you can also delete local and session storage entries by selecting an item and pressing the delete or backspace key.
Animation.oncancel - Web APIs
syntax var cancelhandler = animation.oncancel; animation.oncancel = cancelhandler; value a function to be executed when the animation is cancelled, or null if there is no cancel event handler.
AudioParam.cancelAndHoldAtTime() - Web APIs
syntax var audioparam = audioparam.cancelandholdattime(canceltime) parameters canceltime a double representing the time (in seconds) after the audiocontext was first created after which all scheduled changes will be cancelled.
AudioParam.cancelScheduledValues() - Web APIs
syntax var audioparam = audioparam.cancelscheduledvalues(starttime) parameters starttime a double representing the time (in seconds) after the audiocontext was first created after which all scheduled changes will be cancelled.
Using images - Web APIs
insertbefore() is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).
Clients - Web APIs
WebAPIClients
addeventlistener('notificationclick', event => { event.waituntil(async function() { const allclients = await clients.matchall({ includeuncontrolled: true }); let chatclient; // let's see if we already have a chat window open: for (const client of allclients) { const url = new url(client.url); if (url.pathname == '/chat/') { // excellent, let's use it!
Constraint validation API - Web APIs
for this to happen, the custom validity has to be cancelled, by invoking setcustomvalidity() with an empty string value.
DataTransferItem.webkitGetAsEntry() - Web APIs
#dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
Document.ononline - Web APIs
WebAPIDocumentononline
both events are non-cancellable (you can't prevent the user from coming online, or going offline).
Document: pointercancel event - Web APIs
examples using addeventlistener(): document.addeventlistener('pointercancel', (event) => { console.log('pointer event cancelled') }); using the onpointercancel event handler property: document.onpointercancel = (event) => { console.log('pointer event cancelled') }; specifications specification status pointer events obsolete ...
Document - Web APIs
WebAPIDocument
globaleventhandlers.ontransitioncancel an eventhandler called when a transitioncancel event is sent, indicating that a css transition has been cancelled.
Events and the DOM - Web APIs
there is an excellent diagram that clearly explains the three phases of event flow through the dom in the dom level 3 events draft.
Introduction to the DOM - Web APIs
every element in a document—the document as a whole, the head, tables within the document, table headers, text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the dom and a scripting language like javascript.
Element: beforescriptexecute event - Web APIs
cancelling the event prevents the script from executing.
Element: copy event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the event's default action using event.preventdefault().
Element.getElementsByTagName() - Web APIs
example // check the status of each data cell in a table const table = document.getelementbyid('forecast-table'); const cells = table.getelementsbytagname('td'); for (let cell of cells) { let status = cell.getattribute('data-status'); if (status === 'open') { // grab the data } } specifications specification status comment domthe definition of 'element.getelementsbytagname()' in that specification.
Event() - Web APIs
WebAPIEventEvent
cancelable optional a boolean indicating whether the event can be cancelled.
EventSource - Web APIs
that makes them an excellent choice when there's no need to send data from the client to the server in message form.
EventTarget.dispatchEvent() - Web APIs
syntax cancelled = !target.dispatchevent(event) parameter event is the event object to be dispatched.
FileReader.readyState - Web APIs
this could mean that: the entire file or blob has been read into memory, a file read error occurred, or abort() was called and the read was cancelled.
FileSystemDirectoryReader.readEntries() - Web APIs
#dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function.
FormDataEvent() - Web APIs
cancelable: a boolean indicating whether the event can be cancelled.
GlobalEventHandlers - Web APIs
globaleventhandlers.ontransitioncancel an eventhandler called when a transitioncancel event is sent, indicating that a css transition has been cancelled.
HTMLElement: pointercancel event - Web APIs
examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointercancel', (event) => { console.log('pointer event cancelled'); }); using the onpointercancel event handler property: const para = document.queryselector('p'); para.onpointercancel = (event) => { console.log('pointer event cancelled'); }; specifications specification status pointer events obsolete ...
HTMLElement: transitioncancel event - Web APIs
tionrun fired'; }); el.addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); el.addeventlistener('transitioncancel', function() { message.textcontent = 'transitioncancel fired'; }); el.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the transitioncancel event is fired if the transition is cancelled in either direction after the transitionrun event occurs and before the transitionend is fired.
HTMLFormElement.elements - Web APIs
the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
HTMLFormElement.length - Web APIs
the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
HTMLFormElement - Web APIs
elements that are considered form controls the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
HTMLTableElement.bgColor - Web APIs
also available on dom tbody, row and cell objects.
HTMLTableElement.createCaption() - Web APIs
html <table> <tr><td>cell 1.1</td><td>cell 1.2</td><td>cell 1.3</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td><td>cell 2.3</td></tr> </table> javascript let table = document.queryselector('table'); let caption = table.createcaption(); caption.textcontent = 'this caption was created by javascript!'; result specifications specification status comment html living standardthe definition ...
HTMLTableElement.deleteCaption() - Web APIs
html <table> <caption>this caption will be deleted!</caption> <tr><td>cell 1.1</td><td>cell 1.2</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td></tr> </table> javascript let table = document.queryselector('table'); table.deletecaption(); result specifications specification status comment html living standardthe definition of 'htmltableelement: deletecaption' in that specification.
HTMLTableElement.deleteRow() - Web APIs
html <table> <tr><td>cell 1.1</td><td>cell 1.2</td><td>cell 1.3</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td><td>cell 2.3</td></tr> <tr><td>cell 3.1</td><td>cell 3.2</td><td>cell 3.3</td></tr> </table> javascript let table = document.queryselector('table'); // delete second row table.deleterow(1); result specifications specification status comment html living standardthe definiti...
HTMLTableElement.tBodies - Web APIs
for example: <table> <tr> <td>cell one</td> </tr> </table> the html dom generated from the above html will have a <tbody> element even though the tags are not included in the source html.
Dragging and Dropping Multiple Items - Web APIs
you may wish to do both in case another listener has already cancelled the event.
Ajax navigation example - Web APIs
$page_content; ?> </div> <p>this paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</html>"; } ?> css/style.css: #ajax-loader { position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%; } #ajax-loader > div { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; background-color: #000000; opacity: 0.65; } include/after_content.php: <p>this is the footer.
KeyboardEvent.key - Web APIs
WebAPIKeyboardEventkey
when they occur, the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet).
KeyboardEvent.keyCode - Web APIs
example window.addeventlistener("keydown", function (event) { if (event.defaultprevented) { return; // should do nothing if the default action has been cancelled } var handled = false; if (event.key !== undefined) { // handle the event with keyboardevent.key and set handled true.
Location - Web APIs
WebAPILocation
ol" title="protocol">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span> css html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;} [title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%...
MSManipulationEvent.initMSManipulationEvent() - Web APIs
rentstate: number; readonly inertiadestinationx: number; readonly inertiadestinationy: number; readonly laststate: number; initmsmanipulationevent(typearg: string, canbubblearg: boolean, cancelablearg: boolean, viewarg: window, detailarg: number, laststate: number, currentstate: number): void; readonly ms_manipulation_state_active: number; readonly ms_manipulation_state_cancelled: number; readonly ms_manipulation_state_committed: number; readonly ms_manipulation_state_dragging: number; readonly ms_manipulation_state_inertia: number; readonly ms_manipulation_state_preselect: number; readonly ms_manipulation_state_selecting: number; readonly ms_manipulation_state_stopped: number; } see also msmanipulationevent microsoft api extensions ...
MSManipulationEvent - Web APIs
rentstate: number; readonly inertiadestinationx: number; readonly inertiadestinationy: number; readonly laststate: number; initmsmanipulationevent(typearg: string, canbubblearg: boolean, cancelablearg: boolean, viewarg: window, detailarg: number, laststate: number, currentstate: number): void; readonly ms_manipulation_state_active: number; readonly ms_manipulation_state_cancelled: number; readonly ms_manipulation_state_committed: number; readonly ms_manipulation_state_dragging: number; readonly ms_manipulation_state_inertia: number; readonly ms_manipulation_state_preselect: number; readonly ms_manipulation_state_selecting: number; readonly ms_manipulation_state_stopped: number; } see also touchevent msmanipulationstatechanged microsoft api...
MediaStreamConstraints.audio - Web APIs
color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, echocancellation: true } }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of audio constraints requesting that echo cancellation be enabled and that, if possible, the sample rate be 8 bits per sample instead of the more common 16 bits (possibly...
MediaTrackConstraints - Web APIs
echocancellation a constrainboolean object specifying whether or not echo cancellation is preferred and/or required.
MediaTrackSettings - Web APIs
echocancellation a boolean indicating the current value of the echocancellation property, specifying true if echo cancellation is enabled, otherwise false.
MediaTrackSupportedConstraints - Web APIs
echocancellation a boolean value whose value is true if the echocancellation constraint is supported in the current environment.
Capabilities, constraints, and settings - Web APIs
let videodefaultconstraintstring = '{\n "width": 320,\n "height": 240,\n "framerate": 30\n}'; let audiodefaultconstraintstring = '{\n "samplesize": 16,\n "channelcount": 2,\n "echocancellation": false\n}'; these defaults ask for a pretty common camera configuration, but don't insist on any property being of special importance.
NDEFReader.scan() - Web APIs
WebAPINDEFReaderscan
signal -- optional abortsignal that allows to cancell this scan() operation.
NDEFWriter.write() - Web APIs
WebAPINDEFWriterwrite
signal -- optional abortsignal that allows to cancell this write operation.
Online and offline events - Web APIs
both events are non-cancellable (you can't prevent the user from coming online, or going offline).
NavigatorPlugins.plugins - Web APIs
ginslength = navigator.plugins.length; document.body.innerhtml = pluginslength + " plugin(s)<br>" + '<table id="plugintable"><thead>' +'<tr><th>name</th><th>filename</th><th>description</th><th>version</th></tr>' +'</thead><tbody></tbody></table>'; var table = document.getelementbyid('plugintable'); for(var i = 0; i < pluginslength; i++) { let newrow = table.insertrow(); newrow.insertcell().textcontent = navigator.plugins[i].name; newrow.insertcell().textcontent = navigator.plugins[i].filename; newrow.insertcell().textcontent = navigator.plugins[i].description; newrow.insertcell().textcontent = navigator.plugins[i].version?navigator.plugins[i].version:""; } notes the plugin object exposes a small interface for getting information about the various plugins installed in your...
NetworkInformation.type - Web APIs
syntax var type = netinfo.type return value an enumerated value that is one of the following values: "bluetooth" "cellular" "ethernet" "none" "wifi" "wimax" "other" "unknown" specifications specification status comment network information apithe definition of 'type' in that specification.
NetworkInformation - Web APIs
it will be one of the following values: bluetooth cellular ethernet none wifi wimax other unknown event handlers networkinformation.onchange the event that's fired when connection information changes and the change is fired on this object.
PaymentRequest.show() - Web APIs
yrequest = new paymentrequest(methoddata, details, options); payrequest.onshippingaddresschange = ev => ev.updatewith(checkaddress(payrequest)); payrequest.onshippingoptionchange = ev => ev.updatewith(checkshipping(payrequest)); const repsonse = await payrequest.show(); await validateresponse(response); } catch(err) { /* handle the error; aborterror usually means a user cancellation */ } } in this code, the methods checkaddress() and checkshipping(), respectively, check the shipping address and the shipping option changes and supply in response either a paymentdetailsupdate object or a promise to return one; this object contains the fields in the paymentresponse which have been or need to be changed.
PluginArray - Web APIs
ginslength = navigator.plugins.length; document.body.innerhtml = pluginslength + " plugin(s)<br>" + '<table id="plugintable"><thead>' +'<tr><th>name</th><th>filename</th><th>description</th><th>version</th></tr>' +'</thead><tbody></tbody></table>'; var table = document.getelementbyid('plugintable'); for(var i = 0; i < pluginslength; i++) { let newrow = table.insertrow(); newrow.insertcell().textcontent = navigator.plugins[i].name; newrow.insertcell().textcontent = navigator.plugins[i].filename; newrow.insertcell().textcontent = navigator.plugins[i].description; newrow.insertcell().textcontent = navigator.plugins[i].version?navigator.plugins[i].version:""; } the following example displays information about the installed plugin(s).
Multi-touch interaction - Web APIs
touch-action:none"> <div id="target1"> tap, hold or swipe me 1</div> <div id="target2"> tap, hold or swipe me 2</div> <div id="target3"> tap, hold or swipe me 3</div> <!-- ui for logging/debugging --> <button id="log" onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog" onclick="clearlog(event);">clear the log</button> <p></p> <output></output> </body> miscellaneous functions these functions support the application but aren't directly involved with the event flow.
Pinch zoom gestures - Web APIs
pinch in or out.<br/> the background color will change to pink if the pinch is opening (zoom in) or changes to lightblue if the pinch is closing (zoom out).</div> <!-- ui for logging/debugging --> <button id="log" onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog" onclick="clearlog(event);">clear the log</button> <p></p> <output></output> </body> miscellaneous functions these functions support the application but aren't directly involved in the event flow.
ProgressEvent.initProgressEvent() - Web APIs
abort the operation was cancelled and didn't complete.
RTCIceCandidateStats - Web APIs
const isusablenetworktype = stats => { switch(stats.networktype) { case "ethernet": case "vpn": return true; case "bluetooth": case "cellular": case "wimax": case "unknown": default: return false; } } if (rtcstats && rtcstats.type === "local-candidate") { if (!isusablenetworktype(rtcstats)) { abortconnection(); return; } } this code calls a function called abortconnection() if the rtcstats object represents information about a local candidate is which would be using a network connection other than...
RTCPeerConnectionIceErrorEvent.address - Web APIs
for example, on a mobile phone, there are typically at least two network interfaces available: the cellular connection and a wifi connection.
Range.commonAncestorContainer - Web APIs
html <ul> <li>strings <ul> <li>cello</li> <li>violin <ul> <li>first chair</li> <li>second chair</li> </ul> </li> </ul> </li> <li>woodwinds <ul> <li>clarinet</li> <li>oboe</li> </ul> </li> </ul> css the .highlight class created below uses a set of css @keyframes to animate a fading outline.
ReadableStreamBYOBReader.cancel() - Web APIs
syntax var promise = readablestreambyobreader.cancel(reason); parameters reason a domstring providing a human-readable reason for the cancellation.
ReadableStreamDefaultReader.cancel() - Web APIs
syntax var promise = readablestreamdefaultreader.cancel(reason); parameters reason optional a domstring providing a human-readable reason for the cancellation.
Request.cache - Web APIs
WebAPIRequestcache
() - 86400000)) { // if older than 24 hours controller.abort() controller = new abortcontroller(); return fetch("some.json", {cache: "reload", mode: "same-origin", signal: controller.signal}) } // other possible conditions if (dt < (date.now() - 300000)) // if it's older than 5 minutes fetch("some.json", {cache: "no-cache", mode: "same-origin"}) // no cancellation or return value.
SVGEvent - Web APIs
WebAPISVGEvent
cancelable read only boolean whether the event is cancellable or not.
SVGGraphicsElement: copy event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the event's default action using event.preventdefault().
SVGTextContentElement - Web APIs
svgtextcontentelement.getextentofchar() returns a domrect representing the computed tight bounding box of the glyph cell that corresponds to a given typographic character.
Using the Screen Capture API - Web APIs
this could be refined further by specifying additional information for each of audio and video: const gdmoptions = { video: { cursor: "always" }, audio: { echocancellation: true, noisesuppression: true, samplerate: 44100 } } in this example the cursor will always be visible in the capture, and the audio track should ideally have noise suppression and echo cancellation features enabled, as well as an ideal audio sample rate of 44.1khz.
Using Service Workers - Web APIs
note: you can also chain promise calls together, for example: mypromise().then(success, failure).then(success).catch(failure); note: you can find a lot more out about promises by reading jake archibald’s excellent javascript promises: there and back again.
TextDecoder.prototype.encoding - Web APIs
the legacy miscelleanous encodings: 'utf-16be', 'utf-16le', and 'x-user-defined'.
Multi-touch interaction - Web APIs
et1"> tap, hold or swipe me 1</div> <div id="target2"> tap, hold or swipe me 2</div> <div id="target3"> tap, hold or swipe me 3</div> <div id="target4"> tap, hold or swipe me 4</div> <!-- ui for logging/bebugging --> <button id="log" onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog" onclick="clearlog(event);">clear the log</button> <p></p> <output></output> miscellaneous functions these functions support the application but aren't directly involved with the event flow.
TransitionEvent - Web APIs
types of transitionevent transitioncancel an event fired when a css transition has been cancelled.
UIEvent.initUIEvent() - Web APIs
example var e = document.createevent("uievent"); // creates a click event that bubbles, can be cancelled, // and with its view and detail property initialized to window and 1, // respectively e.inituievent("click", true, true, window, 1); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'uievent.inituievent()' in that specification.
URL API - Web APIs
WebAPIURL API
function filltablewithparameters(tbl) { let url = new url(document.location.href); url.searchparams.sort(); let keys = url.searchparams.keys(); for (let key of keys) { let val = url.searchparams.get(key); let row = document.createelement("tr"); let cell = document.createelement("td"); cell.innertext = key; row.appendchild(cell); cell = document.createelement("td"); cell.innertext = val; row.appendchild(cell); tbl.appendchild(row); }; } a working version of this example can be found on glitch.
WebGL by example - Web APIs
miscellaneous advanced examples video textures this example demonstrates how to use video files as textures.
WebGL constants - Web APIs
c_flags 0x9115 sync_fence 0x9116 sync_gpu_commands_complete 0x9117 unsignaled 0x9118 signaled 0x9119 already_signaled 0x911a timeout_expired 0x911b condition_satisfied 0x911c wait_failed 0x911d sync_flush_commands_bit 0x00000001 miscellaneous constants constant name value description color 0x1800 depth 0x1801 stencil 0x1802 min 0x8007 max 0x8008 depth_component24 0x81a6 stream_read 0x88e1 stream_copy 0x88e2 static_read 0x88e5 static_copy 0x88e6 ...
Lifetime of a WebRTC session - Web APIs
one of the users might transition from a cellular to a wifi network, or the network might become congested, for example.
Signaling and video calling - Web APIs
this can happen in a variety of situations, including: changes in the network status, such as a bandwidth change, transitioning from wifi to cellular connectivity, or the like.
Controlling multiple parameters with ConstantSourceNode - Web APIs
{ width: 400px; position: relative; vertical-align: middle; height: 44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } javascript now let's take a look at the javascript code, a piece at a time.
Example and tutorial: Simple synth keyboard - Web APIs
background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0 6px 0 0; } .settingsbar { padding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: relative; vertical-align: middle; width: 100%; height: 30px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } .right { width: 50%; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } javascript the javascript code begins by initializing a number of variables.
Web Authentication API - Web APIs
examples for security reasons, web authentication calls (create() and get()) are cancelled if the browser window loses focus while the call is pending.
Functions and classes available to Web Workers - Web APIs
10.0 (yes) 10.1 network information api provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.).
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
this[sproperty] : this); }).bind(myarray); myboundmethod(); // prints "zero,one,two" because 'this' is bound to myarray in the function myboundmethod(1); // prints "one" settimeout(myboundmethod, 1.0*1000); // still prints "zero,one,two" after 1 second because of the binding settimeout(myboundmethod, 1.5*1000, "1"); // prints "one" after 1.5 seconds notes timeouts are cancelled using cleartimeout().
Web APIs
WebAPI
tmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloptionscollection htmlorforeignelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlshadowelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement htmltableelement htmltablerowelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement hashchangeevent headers history hkdfparams hmacimportparams hmackeygenparams i idbcursor idbcursorsync idbcursorwithvalue idbdatabase idbdatabaseexception idbd...
ARIA Screen Reader Implementors Guide - Accessibility
this is particularly important for changes in data cells, where the column and row headers provide important contextual information.
Using the aria-required attribute - Accessibility
t" aria-required="true" /> <br/> <label for="lastname">last name:</label> <input id="lastname" type="text" aria-required="true" /> <br/> <label for="streetaddress">street address:</label> <input id="streetaddress" type="text" /> </form> working examples: tooltip example (includes the use of the aria-required attribute) notes used in aria roles combobox gridcell listbox radiogroup spinbutton textbox tree related aria techniques using the aria-invalid attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-required wai-aria authoring practices for forms constraint validation in html5 ...
Using the status role - Accessibility
assistive technologies may reserve some cells of a braille display to render the status.
ARIA: button role - Accessibility
a button is a widget used to perform actions such as submitting a form, opening a dialog, cancelling an action, or performing a command such as inserting a new record or displaying information.
ARIA - Accessibility
an excellent resource.
HTML To MSAA - Accessibility
a name of focused option state_system_ expanded if combobox open state_system_ collapsed if combobox is collapsed state_system_ haspopup state_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed table role_system_ table from @summary attribute n/a described_by (0x100e) points to caption element n/a n/a td, th role_system_ cell n/a n/a n/a n/a n/a n/a thead role_system_ columnheader n/a n/a n/a n/a n/a n/a abbr, acronym, blockquote, form, frame, h1-h6, iframe bstr role n/a n/a n/a n/a n/a n/a ...
Mobile accessibility checklist - Accessibility
for touch events, at least one of the following must be true (wcag 2.1: pointer cancellation): the down-event should not be used to trigger any action the action is triggered on the up event and an option to abort the action before its completion is available or an option to undo the action after its completion the up-event will undo any action that was triggered on a down event it is essential to trigger the action on the down event.
:checked - CSS: Cascading Style Sheets
WebCSS:checked
html <input type="checkbox" id="expand-toggle" /> <table> <thead> <tr><th>column #1</th><th>column #2</th><th>column #3</th></tr> </thead> <tbody> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows<...
Introduction to formatting contexts - CSS: Cascading Style Sheets
a new bfc is created in the following situations: elements made to float using float absolutely positioned elements (including position: fixed or position: sticky) elements with display: inline-block table cells or elements with display: table-cell, including anonymous table cells created when using the display: table-* properties table captions or elements with display: table-caption block elements where overflow has a value other than visible elements with display: flow-root or display: flow-root list-item elements with contain: layout, content, or strict flex items grid items multicol contain...
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
back in the early days of web design, the way we constructed page layout was to use html tables, then fragment our design into the cells of those tables in order to create a layout.
Subgrid - CSS: Cascading Style Sheets
take a look at the next example — it uses the same parent and child grid as in the example above, however inside the subgrid i have twelve items trying to autoplace into ten grid cells.
CSS Grid Layout - CSS: Cascading Style Sheets
template-columns grid-template-rows grid-template-areas grid-template grid-auto-columns grid-auto-rows grid-auto-flow grid grid-row-start grid-column-start grid-row-end grid-column-end grid-row grid-column grid-area row-gap column-gap gap css functions repeat() minmax() fit-content() css data types <flex> glossary entries grid grid lines grid tracks grid cell grid area gutters grid axis grid row grid column guides basic concepts of grid layout relationship of grid layout to other layout methods layout using line-based placement grid template areas layout using named grid lines auto-placement in css grid layout box alignment in css grid layout css grid, logical values and writing modes css grid layout and accessibility css grid and...
Basic Shapes - CSS: Cascading Style Sheets
for an excellent description of references boxes as they apply to css shapes see understanding reference boxes for css shapes.
CSS Table - CSS: Cascading Style Sheets
WebCSSCSS Table
reference properties border-collapse border-spacing caption-side empty-cells table-layout vertical-align specifications specification status comment css level 2 (revision 1) recommendation initial definition ...
Column combinator - CSS: Cascading Style Sheets
/* table cells that belong to the "selected" column */ col.selected || td { background: gray; } syntax column-selector || cell-selector { /* style properties */ } examples html <table border="1"> <colgroup> <col span="2"/> <col class="selected"/> </colgroup> <tbody> <tr> <td>a <td>b <td>c </tr> <tr> <td colspan="2">d</td> <td>e</td> </tr> <tr> <td>f</td> <td colspan="2">g</td> </tr> </tbody> </table> css col.selected || td { background: gray; color: white; font-weight: bold; } result specifications ...
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
umn-widthcolumnsconic-gradient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-o...
align-items - CSS: Cascading Style Sheets
the property doesn't apply to block-level boxes, and to table cells.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
treeheadercell firefox removed in firefox 64.
calc() - CSS: Cascading Style Sheets
WebCSScalc
math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
clamp() - CSS: Cascading Style Sheets
WebCSSclamp
notes math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
float - CSS: Cascading Style Sheets
WebCSSfloat
as float implies the use of the block layout, it modifies the computed value of the display values, in some cases: specified value computed value inline block inline-block block inline-table table table-row block table-row-group block table-column block table-column-group block table-cell block table-caption block table-header-group block table-footer-group block inline-flex flex inline-grid grid other unchanged note: if you're referring to this property from javascript as a member of the htmlelement.style object, modern browsers support float, but in older browsers you have to spell it as cssfloat, ...
max() - CSS: Cascading Style Sheets
WebCSSmax
notes math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
min() - CSS: Cascading Style Sheets
WebCSSmin
notes math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
place-items - CSS: Cascading Style Sheets
in table cell layouts, this keyword has no meaning as this property is ignored.
position - CSS: Cascading Style Sheets
WebCSSposition
its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
text-justify - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toinline-level and table-cell elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | inter-character | inter-word | none examples <p class="none"><code>text-justify: none</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit.
CSS: Cascading Style Sheets
WebCSS
the web community has created various other miscellaneous css tools for you to use.
Event reference
transitioncancel a css transition has been cancelled.
Adding captions and subtitles to HTML5 video - Developer guides
radiant media player supports multi-languages webvtt closed captions note: you can find an excellent list of html5 video players and their current "state" at html5 video player comparison.
Creating a cross-browser video player - Developer guides
interestingly document must be used for exiting/cancelling fullscreen mode, whereas any html element can request fullscreen mode, here the videocontainer is used as it also contains the custom controls which should also appear with the video in fullscreen mode.
Challenge solutions - Developer guides
solution the following rule achieves the desired result: #fixed-pin { position:fixed; top: 3px; right: 3px; } tables borders on data cells only challenge change the stylesheet to make the table have a green border around only the data cells.
Introduction to Web development - Developer guides
htmldog an excellent and comprehensive reference site on html and css for beginners.
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
linking to telephone numbers <a href="tel:+49.157.0156">+49 157 0156</a> <a href="tel:+1(555)5309">(555) 5309</a> tel: link behavior varies with device capabilities: cellular devices autodial the number.
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
for this to happen, the custom validity has to be cancelled, by invoking setcustomvalidity() with an empty string value.
itemprop - HTML: Hypertext Markup Language
in the example below, each data cell is a token.
itemref - HTML: Hypertext Markup Language
for example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells.
itemtype - HTML: Hypertext Markup Language
<time itemprop="pricevaliduntil" datetime="2020-11-05"> 5 november!</time>)<br> available from: <span itemprop="seller" itemscope itemtype="http://schema.org/organization"> <span itemprop="name">executive objects<br></span> </span> condition: <link itemprop="itemcondition" href="http://schema.org/usedcondition"/>previously owned, in excellent condition<br> <link itemprop="availability" href="http://schema.org/instock"/>in stock!
Save-Data - HTTP
after having switched from cellular to wi-fi]).
A re-introduction to JavaScript (JS tutorial) - JavaScript
you can find several excellent introductions to closures.
Loops and iteration - JavaScript
example 1 the following example iterates through the elements in an array until it finds the index of an element whose value is thevalue: for (let i = 0; i < a.length; i++) { if (a[i] === thevalue) { break; } } example 2: breaking to a label let x = 0; let z = 0; labelcancelloops: while (true) { console.log('outer loops: ' + x); x += 1; z = 1; while (true) { console.log('inner loops: ' + z); z += 1; if (z === 10 && x === 10) { break labelcancelloops; } else if (z === 10) { break; } } } continue statement the continue statement can be used to restart a while, do-while, for, or label statement.
SyntaxError: missing } after function body - JavaScript
examples forgotten closing curly bracket oftentimes, there is a missing curly bracket in your function code: var charge = function() { if (sunny) { usesolarcells(); } else { promptbikeride(); }; correct would be: var charge = function() { if (sunny) { usesolarcells(); } else { promptbikeride(); } }; it can be more obscure when using iife, closures, or other constructs that use a lot of different parenthesis and curly brackets, for example.
Promise.prototype.then() - JavaScript
return promise here, that will be rejected with 'error' after 1 second return new promise(rejectlater); }); p3.then(function(v) { // not called console.log('resolved', v); }, function(e) { console.error('rejected', e); // "rejected", 'error' }); window.setimmediate style promise-based polyfill using a function.prototype.bind() reflect.apply (reflect.apply()) method to create a (non-cancellable) window.setimmediate-style function.
Proxy - JavaScript
this example can be adapted to find a table row by its cell.
JavaScript
learn javascript an excellent resource for aspiring web developers — learn javascript in an interactive environment, with short lessons and interactive tests, guided by automated assessment.
MathML element reference - MathML
carries>) <msgroup> (grouped rows of <mstack> and <mlongdiv> elements) <msline> (horizontal lines inside <mstack> elements) <mspace> (space) <msqrt> (square root without an index) <msrow> (rows in <mstack> elements) <mstack> (stacked alignment) <mstyle> (style change) <msub> (subscript) <msup> (superscript) <msubsup> (subscript-superscript pair) t <mtable> (table or matrix) <mtd> (cell in a table or a matrix) <mtext> (text) <mtr> (row in a table or a matrix) u <munder> (underscript) <munderover> (underscript-overscript pair) other elements <semantics> (container for semantic annotations) <annotation> (data annotations) <annotation-xml> (xml annotations) mathml presentation elements by category top-level elements <math> token elements <mglyph> <mi> <...
MathML documentation index - MathML
WebMathMLIndex
35 <mtd> mathml, mathml reference, mathml:element, mathml:tabular math the mathml <mtd> element represents a cell in a table or a matrix.
Web audio codec guide - Web media technologies
it was standardized in 1999 as part of the 3gpp audio standard used for both gsm and umts cellular telephony, and uses a multi-rate narrowband algorithm to encode audio frequencies at a telephony-grade quality level at around 7.4 kbps.
Media container formats (file types) - Web media technologies
3gp the 3gp or 3gpp media container is used to encapsulate audio and/or video that is specifically intended for transmission over cellular networks for consumption on mobile devices.
Digital video concepts - Web media technologies
the human eye contains two kinds of photoreceptor (light-sensing) cells.
Progressive web app structure - Progressive web apps (PWAs)
it provides fine-grained control — the stream can be started, chained with another stream, cancelled, checked for errors, and more.
Introduction to progressive web apps - Progressive web apps (PWAs)
progressive enhancement suppport modern web apps can be developed to provide an excellent experience to fully capable browsers, and an acceptable (although not quite as shiny) experience to less capable browsers.
Progressive web apps (PWAs)
the service worker cookbook — a series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.
direction - SVG: Scalable Vector Graphics
it applies only to glyphs oriented perpendicular to the inline-base direction, which includes the usual case of horizontally-oriented latin or arabic text and the case of narrow-cell latin or arabic characters rotated 90 degrees clockwise relative to a top-to-bottom inline-base direction.
display - SVG: Scalable Vector Graphics
WebSVGAttributedisplay
&& list-item<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container<display-box> = contents | none<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid animatable yes for a description of the values, please refer to the css display property.
order - SVG: Scalable Vector Graphics
WebSVGAttributeorder
1 1"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value 3 animatable yes <number-optional-number> this value indicates the number of cells in each dimension for the kernel matrix.
How to fix a website with blocked mixed content - Web security
if nothing is said about mixed content, your website is in good shape: keep making excellent websites!
Introduction to using XPath in JavaScript - XPath
for example, the expression: '//xhtml:td/mathml:math' will select all mathml expressions that are the children of (x)html table data cell elements.
Compiling an Existing C Module to WebAssembly - WebAssembly
the pointer returned by malloc() is the address of the first memory cell of that buffer.