Search completed in 1.49 seconds.
Window: pagehide event - Web APIs
the page
hide event is sent to a window when the browser
hides the current page in the process of presenting a different page from the session's history.
... for example, when the user clicks the browser's back button, the current page receives a page
hide event before the previous page is shown.
... bubbles no cancelable no interface pagetransitionevent event handler property onpage
hide examples in this example, an event handler is established to watch for page
hide events and to perform special handling if the page is being persisted for possible reuse.
...And 2 more matches
noautohide - Archive of obsolete content
« xul reference home noauto
hide type: boolean if this attribute is set to false or omitted, the tooltip will automatically disappear after a few seconds.
... if this attribute is set to true, this will not happen and the tooltip will only
hide when the user moves the mouse to another element.
panel.noautohide - Archive of obsolete content
« xul reference home noauto
hide type: boolean if false, the default value, the panel will be hidden when the user clicks outside the panel or switches focus to another application.
... if true, the panel will only be closed when the
hidepopup method is called.
MSCandidateWindowHide - Web APIs
mscandidatewindow
hide fires after the input method editor (ime) candidate window closes and is fully hidden.
... syntax event property object.oncandidatewindow
hide = handler; addeventlistener method object.addeventlistener("mscandidatewindow
hide", handler, usecapture) nbsp; parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
ui/toolbar - Archive of obsolete content
after that, though, you can't show or
hide the toolbar programmatically.
... toolbars get a close button at the right-hand side, and users can show or
hide the toolbar using the firefox "view/toolbars" menu, alongside built-in toolbars like the bookmarks toolbar.
... toolbar events toolbars get attach and detach events when their content is loaded and unloaded, and show and
hide events when the uses shows or
hides them.
...And 13 more matches
Index - Archive of obsolete content
242 hiding browser chrome add-ons, extensions, xul, xulbrowserwindow there are times in which an extension may find it useful to
hide browser chrome (that is, toolbars, the location bar, and so forth), in order to reduce clutter when presenting a particular user interface.
...prism can be configured to show or
hide several of the ui components.
... 885
hidechrome xul attributes, xul reference no summary!
...And 10 more matches
Index - Archive of obsolete content
138
hidechrome xul attributes, xul reference no summary!
... 139
hidecolumnpicker xul attributes, xul reference no summary!
... 140
hideheader xul attributes, xul reference no summary!
...And 9 more matches
ui/sidebar - Archive of obsolete content
you specify its content using html, css, and javascript, and the user can show or
hide it in the same way they can show or
hide the built-in sidebars.
... you can
hide the sidebar by calling its
hide() method.
... called with no arguments, show() and
hide() will operate on the currently active window.
...And 8 more matches
panel - Archive of obsolete content
your add-on can receive notifications when a panel is shown or hidden by listening to its show and
hide events.
... if you want to close an existing panel without opening a new one, you can call the
hide() or the destroy() method.
...var { togglebutton } = require('sdk/ui/button/toggle'); var sdkpanels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onchange: handlechange }); var mypanel = sdkpanels.panel({ contenturl: self.data.url("panel.html"), on
hide: handle
hide }); function handlechange(state) { if (state.checked) { mypanel.show({ position: button }); } } function handle
hide() { button.state('window', {checked: false}); } updating panel content you can update the panel's content by: sending a message to a content script that updates the dom in the same document.
...And 7 more matches
JavaScript Daemons Management - Archive of obsolete content
tommethod": function () { [custom code] }, |*| "anothercustomproperty": [custom value], |*| "etc.": "etc." |*| "create": function () { [custom code] }, // optional |*| "prepare": function () { [custom code] }, // optional |*| "perform": function () { [custom code] }, // required |*| }, 200, 30); |*| \*/ var stext = "do you feel lucky, punk?", oun
hide = daemon.buildaround({ // http://tyleregeto.com/text-animation-in-javascript "letters": [], "numletters": 0, "clock": 0, "interval": 0.0, "delta": 33, "letters": [], "pool": ["0","1","2","3","4","5","6","7","8","9"], "target": document.createelement("p"), "create": function () { // build letters list this.target.textcontent = ""; this.letters.length = 0; for (v...
... oletter.val : this.pool[parseint(math.random() * this.pool.length)]; } } }, 33, 30); onload = function () { oun
hide.owner.target.id = "animate-me"; document.body.appendchild(oun
hide.owner.target); oun
hide.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #animate-me { margin: 50px; font-size: 20px; line-height: 20px; } </style> </head> <body> <h1>daemon.buildaround()</h1> <p><button onclick="oun
hide.skipto(11);...
...">skipto(11)</button> <button onclick="oun
hide.makesteps(29);">makesteps(29)</button> <button onclick="oun
hide.fixposition(-13);">fixposition(-13)</button> <button onclick="oun
hide.play();">play</button> <button onclick="oun
hide.turn();">turn</button> <button onclick="oun
hide.pause();">pause</button> <button onclick="oun
hide.reverseplay();">reverseplay</button> <button onclick="oun
hide.reversals = 2;alert('changed');">two reversals</button> <button onclick="oun
hide.makeloop();alert('changed');">makeloop</button> <button onclick="oun
hide.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="oun
hide.close();">close</button> <button onclick="oun
hide.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40px;" onkeypress="return event.
...And 5 more matches
Listening to events in Firefox extensions - Archive of obsolete content
page
hide dispatched when a page is hidden.
... if you have behaviors that fire when a user navigates away from the page, but you want to take advantage of this new caching feature, and therefore don't want to use the unload handler, use the new page
hide event.
... page
hide event if you want to define behavior that occurs when the user navigates away from the page, but you don't want to use the unload event (which would cause the page to not be cached), you can use the new page
hide event.
...And 4 more matches
Gecko info for Windows accessibility vendors
event_show, event_
hide and event_locationchange are fired for the caret object.
...event_show and event_
hide may also be fired with the reorder event, for the child who's visibility changed.
... the show and
hide events are not fired on every iaccessible when a new subtree of iaccessibles changes visibility -- only the top iaccessible.
...And 4 more matches
Menu - Archive of obsolete content
properties property type description before
hide function a function invoked just before the menu is hidden.
... if the menu is a context menu, it is called as before
hide(menu, context) and otherwise as before
hide(menu).
... menu is the menu object to which before
hide is attached.
...And 3 more matches
ContextMenus - Archive of obsolete content
in many cases, it may be easier to use a single context menu containing every possible item, and show and
hide the necessary items when needed.
... to
hide an item, set its hidden property to true.
... <script> function show
hidedeleteitem() { var deleteitem = document.getelementbyid("delete"); var rows = document.getelementbyid("rows"); deleteitem.hidden = (rows.childnodes.length == 0); } </script> <menupopup id="inssel-menu" onpopupshowing="show
hidedeleteitem()"> <menuitem label="insert"/> <menuitem id="delete" label="delete"/> </menupopup> in this example, the show
hidedeleteitem function is called when the popupshowing event is fired.
...And 3 more matches
panel - Archive of obsolete content
the panel is closed when the user clicks outside the panel, presses escape or when the panel's
hidepopup method is called.
... attributes backdrag, close, consumeoutsideclicks, fade, flip, ignorekeys, label, left, level, noautofocus, noauto
hide, norestorefocus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, titlebar, top, type properties accessibletype, label, popupboxobject, popup, state methods
hidepopup, moveto, openpopup, openpopupatscreen, sizeto examples the following example shows how a panel may be attached to a label.
... noauto
hide type: boolean if false, the default value, the panel will be hidden when the user clicks outside the panel or switches focus to another application.
...And 3 more matches
window - Archive of obsolete content
attributes accelerated, chromemargin, disablechrome, disablefastfind, drawintitlebar, fullscreenbutton, height,
hidechrome, id, lightweightthemes, lightweightthemesfooter, screenx, screeny, sizemode, title, width, windowtype examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!!
...moreover this
hides separator between titlebar and window contents.
...this is used to
hide chrome when showing in-browser ui such as the about:addons page, and causes the toolbars to be hidden, with only the tab strip (and, if currently displayed, the add-on bar) left showing.
...And 3 more matches
How to build custom form controls - Learn web development
.select .optlist.hidden { /* this is a simple way to
hide the list in an accessible way; we will talk more about accessibility in the end */ max-height: 0; visibility: hidden; } note: we could also have used transform: scale(1, 0) to give the optionlist no height and full width.
...on> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> </body> second, we need two new classes to let us
hide the unneeded element: we visually
hide the "real" <select> element if our script isn't running, or the custom control if it is running.
... note that, by default, our html code
hides our custom control.
...And 3 more matches
Hiding browser chrome - Archive of obsolete content
there are times in which an extension may find it useful to
hide browser chrome (that is, toolbars, the location bar, and so forth), in order to reduce clutter when presenting a particular user interface.
...this can be accomplished by augmenting the behavior of the xulbrowserwindow object's
hidechromeforlocation() method.
... note: don't simply replace the
hidechromeforlocation() method; this will likely hurt the functionality of firefox itself as well as other extensions.
...And 2 more matches
Extensions - Archive of obsolete content
for instance, if an image was context clicked, you may wish to
hide the menu item you have added if the operation it performed wouldn't apply to images.
... function init() { var contextmenu = document.getelementbyid("contentareacontextmenu"); if (contextmenu) contextmenu.addeventlistener("popupshowing", thumbnailsshow
hideitems, false); } function thumbnailsshow
hideitems(event) { var show = document.getelementbyid("thumbnail-show"); show.hidden = (document.popupnode.localname != "img"); } the init function should be called within the handler for the load event so that the popupshowing event handler is hooked up before it would be opened by the user.
... in this example, the thumbnailsshow
hideitems function will be called when the popup is about to be shown.
...And 2 more matches
Trees - Archive of obsolete content
a tree also allows the user to rearrange, resize and
hide individual columns.
...a drop-down menu will appear in the upper-right corner of the tree, which the user may use to show and
hide individual columns.
...the button in the upper right corner can be used to
hide and show the columns.
...And 2 more matches
HTML text fundamentals - Learn web development
nction updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<h1>my short story</h1>\n<p>i am a statistician and my name is trish.</p>\n<p>my legs are made of cardboard and i am married to a fish.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updat...
...nction updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it w...
...nction updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<ol>\n<li>drive to the end of the road</li>\n<li>turn right</li>\n<li>go straight across the first two roundabouts</li>\n<li>turn left at the third roundabout</li>\n<li>the school is on your right, 300 meters up the road</li>\n</ol>'; var solutionentry = htmlsol...
...And 2 more matches
nsIContentViewer
[noscript,notxpcom] nsidocumentptr getdocument(); void
hide(); void init(in nsiwidgetptr aparentwidget, [const] in nsintrectref abounds); native code only!
... void loadcomplete(in unsigned long astatus); void loadstart(in nsisupports adoc); void move(in long ax, in long ay); void open(in nsisupports astate, in nsishentry ashentry); void page
hide(in boolean isunload); boolean permitunload([optional] in boolean acallercloseswindow); boolean requestwindowclose(); void resetclosewindow(); void setbounds([const] in nsintrectref abounds); native code only!
...
hide() will be called, and no further destruction will happen.
...And 2 more matches
Displaying annotations - Archive of obsolete content
if it finds any it binds functions to that element's mouseenter and mouseleave events to send messages to the main module, asking it to show or
hide the annotation.
...f(annotation.url == document.location.tostring()) { createanchor(annotation); } }); $('.annotated').css('border', 'solid 3px yellow'); $('.annotated').bind('mouseenter', function(event) { self.port.emit('show', $(this).attr('annotation')); event.stoppropagation(); event.preventdefault(); }); $('.annotated').bind('mouseleave', function() { self.port.emit('
hide'); }); }); function createanchor(annotation) { annotationanchorancestor = $('#' + annotation.ancestorid); annotationanchor = $(annotationanchorancestor).parent().find( ':contains(' + annotation.anchortext + ')').last(); $(annotationanchor).addclass('annotated'); $(annotationanchor).attr('annotation', annotation.annotationtext); } save this in data as matcher.js.
...ntentscriptwhen: 'ready', contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('matcher.js')], onattach: function(worker) { if(simplestorage.storage.annotations) { worker.postmessage(simplestorage.storage.annotations); } worker.port.on('show', function(data) { annotation.content = data; annotation.show(); }); worker.port.on('
hide', function() { annotation.content = null; annotation.
hide(); }); worker.on('detach', function () { detachworker(this, matchers); }); matchers.push(worker); } }); when a new page is loaded the function assigned to onattach is called.
... this function: initializes the content script instance with the current set of annotations provides a handler for messages from that content script, handling the three messages - show,
hide and detach - that the content script might send adds the worker to an array, so we it can send messages back later.
Floating Panels - Archive of obsolete content
a floating panel can be created using the panel element with at least two additional attributes as in the following example: <panel id="tools-panel" noauto
hide="true" titlebar="normal"> <label control="name" value="name:"/> <textbox id="name"/> </panel> the noauto
hide attribute is used to indicate that the panel is not temporary.
...a label for the titlebar may be set using the label attribute, as in the following example: <panel id="info-panel" noauto
hide="true" titlebar="normal" label="image properties"> closing a floating panel unlike other panels, a floating panel does not close when clicking outside of it.
...<panel id="info-panel" noauto
hide="true" titlebar="normal" label="image properties" close="true"> the
hidepopup method may be used to manually close a popup.
...the
hidepopup method would be used if you wish to place your own close button on the panel, or wish to close the panel in response to a user action.
MenuItems - Archive of obsolete content
<script> function changetoolbarstate(event) { if (event.target.getattribute("checked") == "true") showtoolbar(); else
hidetoolbar(); } </script> ...
... <menuitem label="show toolbar" accesskey="t" type="checkbox" oncommand="changetoolbarstate();"/> in this example, we show the toolbar when the menuitem is checked and
hide the toolbar otherwise.
... <script> function changetoolbarstate(event) { if (event.target.getattribute("checked") == "true")
hidetoolbar(); event.target.removeattribute("checked"); } else { if (!showtoolbar()) return; event.target.setattribute("checked", "true"); } } </script> ...
...note that the code has been reversed in the condition blocks to
hide the toolbar when the menuitem is checked and show the toolbar when the menuitem is not checked because the checked state hasn't been modified.
Panels - Archive of obsolete content
for instance, using the search panel example above, we could add a button which closes the panel when pressed: <script> function dosearch() { document.getelementbyid("search-panel").
hidepopup(); } </script> <toolbarbutton label="search" type="panel"> <panel id="search-panel" position="after_start"> <textbox id="search"/> <button label="search" oncommand="dosearch();"/> </panel> </toolbarbutton> in this example, the dosearch() function is called when the "search" button is pressed.
... this function retrieves the popup and calls the
hidepopup method.
...to do this, set the noauto
hide attribute on the panel to true.
... <panel id="search-panel" noauto
hide="true"> <textbox id="search"/> <button label="search" oncommand="dosearch();"/> <button label="cancel" oncommand="this.parentnode.
hidepopup();"/> </panel> because the panel can no longer be closed by clicking elsewhere, the panel should always provide a means to close the panel itself.
Box Objects - Archive of obsolete content
hidden or collapsed element the hidden attribute will
hide an element such that it will not be displayed.
...example 2 : source view <script> function showpositionandsize() { var labelbox = document.getelementbyid('thelabel').boxobject; alert("position is (" + labelbox.x + "," + labelbox.y + ") and size is (" + labelbox.width + "," + labelbox.height + ")"); } </script> <button label="
hide" oncommand="document.getelementbyid('thelabel').hidden = true;"/> <button label="show" oncommand="document.getelementbyid('thelabel').hidden = false;"/> <button label="collapse" oncommand="document.getelementbyid('thelabel').collapsed = true;"/> <button label="uncollapse" oncommand="document.getelementbyid('thelabel').collapsed = false;"/> <button label="show posit...
...ion/size" oncommand="showpositionandsize();"/> <label id="thelabel" value="i am a label"/> note that if you
hide and collapse the label, it will be treated as hidden.
... you will then have to un
hide and uncollapse the label for it to appear again.
XULBrowserWindow - Archive of obsolete content
method overview boolean
hidechromeforlocation(in string alocation); attributes attribute type description incontentwhitelist string[] an array of url strings for which chrome is automatically hidden.
... methods
hidechromeforlocation determines whether or not browser chrome should be hidden for the specified location.
...you can augment the functionality of this method using chaining in order to
hide chrome for other locations.
... boolean
hidechromeforlocation( in string alocation ); parameters alocation the url to check to see if chrome should be hidden while that location is displayed.
textbox - Archive of obsolete content
attributes cols, decimalplaces, disabled, emptytext,
hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onblur, onchange, onfocus, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound properties accessibletype, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, maxlength, m...
...
hidespinbuttons type: boolean if true, the number box does not have arrow buttons next to it to allow the user to adjust the value.
...there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound,
hidespinbuttons, and textbox.value.
... password a textbox that
hides what is typed, used for entering passwords.
timepicker - Archive of obsolete content
attributes disabled,
hideseconds, increment, readonly, tabindex, value properties amindicator, datevalue, disabled,
hideseconds, hour, hourleadingzero, increment, is24hourclock, ispm, minute, minuteleadingzero, pmindicator, readonly, second, secondleadingzero, tabindex, value examples <timepicker value="12:05"/> attributes disabled type: boolean indicates whether the element is disabled or n...
...
hideseconds type: boolean indicates whether to show the seconds field.
...this should be used in combination with setting
hideseconds to true.
...
hideseconds type: boolean indicates whether the seconds field is visible or not.
tooltip - Archive of obsolete content
attributes crop, default, label, noauto
hide, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, page, position properties accessibletype, label, popupboxobject, position, state methods
hidepopup, moveto, openpopup, openpopupatscreen, showpopup, sizeto examples <tooltip id="moretip" orient="vertical" style="background-color: #33dd00;"> <label value="click here to see more information"/> <label value="really!" style="color: red;"/> ...
... noauto
hide type: boolean if this attribute is set to false or omitted, the tooltip will automatically disappear after a few seconds.
... if this attribute is set to true, this will not happen and the tooltip will only
hide when the user moves the mouse to another element.
...(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
hidepopup() return type: no return value closes the popup immediately.
Overflowing content - Learn web development
why not
hide overflowing content?
... wherever possible, css does not
hide content.
...this does exactly what it says: it
hides overflow.
...changing the value of overflow to
hide content, or to add scrollbars, is likely to be reserved for a few select use cases.
Practical positioning examples - Learn web development
note: we've put a special question mark character into our html to act as our info icon — this represents the button that will be pressed to show/
hide the panel.
... set a z-index of 1 on it — this is so that when the info panel is styled and shown, it doesn't cover up the icon; instead the icon will sit on top of it so it can be pressed again to
hide the info pane.
... the second rule sets position absolute on the actual checkbox <input> element, and
hides it off the top of the screen.
...clicking the label again unchecks the checkbox, which
hides the panel again.
nsIAppShellService
void
hidesplashscreen(); obsolete since gecko 1.8 void initialize(in nsicmdlineservice acmdlineservice, in nsisupports nativeappsupportorsplashscreen); obsolete since gecko 1.8 void quit(in pruint32 aferocity); obsolete since gecko 1.8 void registertoplevelwindow(in nsixulwindow awindow); void run(); obsolete since gecko 1.8 void toplevelwindowismodal(in nsixulw...
...
hidesplashscreen() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) remove the splash screen (if visible).
... void
hidesplashscreen(); parameters none.
... nativeappsupportorsplashscreen is an object that can be queryinterface'd to either an nsinativeappsupport or nsisplashscreen; this object will be used to implement
hidesplashscreen.
nsIAppStartup
void destroyhiddenwindow(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.9.1 void ensure1window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.9.1 void enterlastwindowclosingsurvivalarea(); void exitlastwindowclosingsurvivalarea(); void getstartupinfo(); void
hidesplashscreen(); obsolete since gecko 1.9.1 void initialize(in nsisupports nativeappsupportorsplashscreen); obsolete since gecko 1.9.1 void quit(in pruint32 amode); void restartinsafemode(in pruint32 aquitmode); void run(); attributes attribute type description interrupted boolean true if the startup process was interrupted b...
...
hidesplashscreen() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) remove the splash screen (if visible).
... void
hidesplashscreen(); parameters none.
... void initialize( in nsisupports nativeappsupportorsplashscreen ); parameters nativeappsupportorsplashscreen is an object that can be qi'd to either an nsinativeappsupport or nsisplashscreen; this object will be used to implement
hidesplashscreen.
DevTools API - Firefox Developer Tools
this api provides methods to
hide the tabstripe.
...so it's up the webconsole the
hide and show the sidebar, and select the correct tab.
... method description new toolsidebar(xul:tabbox, toolpanel, uid, showtabstripe=true) toolsidebar constructor void addtab(tabid, url, selected=false) add a tab in the sidebar void select(tabid) select a tab void
hide()
hide the sidebar void show() show the sidebar void toggle() toggle the sidebar void getwindowfortab(tabid) get the iframe containing the tab content tabid getcurrenttabid() return the id of tabid of the current tab tabbox gettab(tabid) return a tab given its id destroy() destroy the toolsidebar object events d...
...
hide the sidebar has been closed.
Window - Web APIs
windoweventhandlers.onpage
hide called when the user navigates away from the page, before the onunload event.
... see page
hide event.
... page
hide sent when the browser
hides the current document while in the process of switching to displaying in its place a different document from the session's history.
... also available through the onpage
hide event handler property.
Strict mode - JavaScript
in normal code the last duplicated argument
hides previous identically-named arguments.
...still, this hiding makes little sense and is probably undesirable (it might
hide a typo, for example), so in strict mode duplicate argument names are a syntax error: function sum(a, a, c) { // !!!
...this means that, in general, in a function containing a call to eval every name not referring to an argument or local variable must be mapped to a particular definition at runtime (because that eval might have introduced a new variable that would
hide the outer variable).
...this is a security hazard because it breaks the ability to
hide privileged values via function abstraction; it also precludes most optimizations.
OpenClose - Archive of obsolete content
closing a popup with the
hidepopup method a popup menu is closed by the user pressing the escape key or by clicking somewhere outside the popup.
... to close a popup with a script, use the popup's
hidepopup method.
... popup.
hidepopup(); determining if a popup is open for menus, you can check the open property of the menu, button or toolbarbutton.
Adding Methods to XBL-defined Elements - Archive of obsolete content
the method 'showtitle' can be used to show or
hide the label.
... xul: <box id="num" class="labeledbutton" title="number of things:" value="52"/> <button label="show" oncommand="document.getelementbyid('num').showtitle(true)"/> <button label="
hide" oncommand="document.getelementbyid('num').showtitle(false)"/> xbl: <binding id="labeledbutton"> <content> <xul:label xbl:inherits="value=title"/> <xul:label xbl:inherits="value"/> </content> <implementation> <method name="showtitle"> <parameter name="state"/> <body> if (state) { document.getanonymousnodes(this)[0].setattribute("style", "visibility: visible"); } else { document.getanonymousnodes(this)[0].setattribute("style", "visib...
...for example, we could move the show and
hide buttons into the xbl file and do the following: example 1: source <binding id="labeledbutton"> <content> <xul:label xbl:inherits="value=title"/> <xul:label xbl:inherits="value"/> <xul:button label="show" oncommand="document.getbindingparent(this).showtitle(true);"/> <xul:button label="
hide" oncommand="document.getbindingparent(this).showtitle(false);"/> </content> <impleme...
toolbar - Archive of obsolete content
attributes auto
hide, currentset, customindex, customizable, defaultset, grippyhidden, grippytooltiptext, height, iconsize, mode, toolbarname properties accessibletype, currentset, firstpermanentchild, lastpermanentchild, toolbarname, toolboxid methods insertitem style classes chromeclass-toolbar examples <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton id="nav-users" accesskey="u" label...
...="users"/> <toolbarbutton id="nav-groups" accesskey="p" label="groups"/> <toolbarbutton id="nav-events" accesskey="e" label="events" disabled="true"/> </toolbar> </toolbox> attributes auto
hide type: boolean when set to true, the toolbar will be invisible unless the alt key is pressed by the user.
... toolbarname not in seamonkey 1.x type: string the name of the toolbar, which is listed on the show/
hide toolbars menu.
tree - Archive of obsolete content
attributes disablekeynavigation, disabled, editable, enablecolumndrag, flags,
hidecolumnpicker, onselect, rows, seltype, statedatasource, tabindex, treelines properties accessibletype, builderview, columns, contentview, currentindex, disablekeynavigation, disabled, editingcolumn, editingrow, enablecolumndrag, firstordinalcolumn, inputfield, seltype, selstyle, tabindex, treeboxobject, view examples a tree with several columns <tree flex="1" rows="2"> <treecols> <...
...m> <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="single" class="tree" 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> <treechil...
...
hidecolumnpicker type: boolean when set to false, a drop-down will appear in the upper right corner of the tree, which the user may use to show and
hide columns.
treecol - Archive of obsolete content
attributes crop, cycler, dragging, editable, fixed, hidden,
hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below.
...
hideheader type: boolean set this to true to indicate that the tree column header should be displayed without any column header styling.
...you should still specify a label for use in the column picker if ignoreincolumnpicker is not true and
hidecolumnpicker is not true on the tree.
CSS and JavaScript accessibility best practices - Learn web development
on the other hand, you shouldn't use visibility:hidden or display:none, because they do
hide content from screen readers.
...as an example, you might want to make sure your main content area can handle bigger text (maybe it will start to scroll to allow it all to be seen), and won't just
hide it, or break completely.
...the code features two functions that show and
hide the zoomed-in image; these are run by the following lines that set them as event handlers: imgthumb.onmouseover = showimg; imgthumb.onmouseout =
hideimg; imgthumb.onfocus = showimg; imgthumb.onblur =
hideimg; the first two lines run the functions when the mouse pointer hovers over and stops hovering over the thumbnail, respectively.
CSS property compatibility table for form controls - Learn web development
property n t note css box model width yes yes height partial[1] partial[1] on opera, the spinners are zoomed in, which can
hide the content of the field.
... border yes yes margin yes yes padding partial[1] partial[1] on opera, the spinners are zoomed in, which can
hide the content of the field.
...order-radius no[1] no[1] box-shadow no[1] no[1] meters and progress see the <meter> and <progress> elements: property n t note css box model width yes yes height yes yes border partial yes margin yes yes padding yes partial[1] chrome
hides the <progress> and <meter> element when the padding property is applied on a tweaked element.
Advanced text formatting - Learn web development
nction updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<dl>\n <dt>bacon</dt>\n <dd>the glue that binds the world together.</dd>\n <dt>eggs</dt>\n <dd>the glue that binds the cake together.</dd>\n <dt>coffee</dt>\n <dd>the drink that gets the world running in the morning.</dd>\n <dd>a light brown color.</dd>\n</dl>...
...nction updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<p>hello and welcome to my motivation page.
...nction updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<p><abbr title="national aeronautics and space administration">nasa</abbr> sure does some exciting work.</p>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key ta...
Getting started with HTML - Learn web development
nction updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<em>this is my text.</em>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textare...
...nction updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<p>a link to my <a href="https://www.mozilla.org/" title="the mozilla homepage" target="_blank">favorite website</a>.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop t...
...nction updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<h1>some music</h1><p>i really enjoy <strong>playing the drums</strong>.
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
add the following two lines, which simply
hide the results paragraph and spinner container using display: none;.
...the start() function calls draw() to start the spinner spinning and display it in the ui,
hides the start button so you can't mess up the game by starting it multiple times concurrently, and runs a settimeout() call that runs a setendgame() function after a random interval between 5 and 10 seconds has passed.
... isover = true; } else if (e.key === "l") { result.textcontent = 'player 2 won!!'; isover = true; } if (isover) { document.removeeventlistener('keydown', keyhandler); settimeout(reset, 5000); } }; } stepping through this: first, cancel the spinner animation with cancelanimationframe() (it is always good to clean up unneeded processes), and
hide the spinner container.
Client-side storage - Learn web development
if it is true, we display a personalized greeting, display the "forget" part of the form, and
hide the "say hello" part of the form.
...we hope you have fun while you are here.'; //
hide the 'remember' part of the form and show the 'forget' part forgetdiv.style.display = 'block'; rememberdiv.style.display = 'none'; } else { // if not, display generic greeting h1.textcontent = 'welcome to our website '; personalgreeting.textcontent = 'welcome to our website.
... we hope you have fun while you are here.'; //
hide the 'forget' part of the form and show the 'remember' part forgetdiv.style.display = 'none'; rememberdiv.style.display = 'block'; } } last but not least, we need to run the namedisplaycheck() function every time the page is loaded.
Useful string methods - Learn web development
area.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list = document.queryselector(\'.output ul\');' + '\nlist.innerhtml = \'\';' + '\nlet greetings = [\'happy birthday!\',' + '\n \'merry christmas my love\',' + '\n \'a happy christmas to all the family\',' + '\n ...
...area.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list = document.queryselector(\'.output ul\');' + '\nlist.innerhtml = \'\';' + '\nlet cities = [\'london\', \'manchester\', \'birmingham\', \'liverpool\'];' + '\n' + '\nfor (let i = 0; i < cities.length; i++) {' + '\n let input = cities[i];' + '\n let lo...
...area.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list = document.queryselector(\'.output ul\');' + '\nlist.innerhtml = \'\';' + '\nlet stations = [\'man675847583748sjt567654;manchester piccadilly\',' + '\n \'gnf576746573fhdg4737dh4;greenfield\',' + '\n \'liv5hg65hd737456236d...
Detailed XPCOM hashtable guide
mozilla's hashtable implementations mozilla has several hashtable implementations, which have been tested and, tuned, and
hide the inner complexities of hashtable implementations: pldhash - low-level c api; stores keys and data in one large memory structure; uses the heap efficiently; client must declare an "entry class" and may not hold onto entry pointers.
...it
hides many of the complexities of pldhash (callback functions, the ops structure, etc).
... nsbasehashtable and friends: nsdatahashtable, nsinterfacehashtable, and nsclasshashtable these c++ templates provide a high-level interface for using hashtables that
hides most of the complexities of pldhash.
nsIDocShell
ing atitle, in domstring aurl, in boolean areplace); void beginrestore(in nsicontentviewer viewer, in boolean top); void createaboutblankcontentviewer(in nsiprincipal aprincipal); void createloadinfo(out nsidocshellloadinfo loadinfo); void detacheditorfromwindow(); violates the xpcom interface guidelines void finishrestore(); void firepage
hidenotification(in boolean isunload); native code only!
...native code only!firepage
hidenotification notify the associated content viewer and all child docshells that they are about to be hidden.
...void firepage
hidenotification( in boolean isunload ); parameters isunload if true, fire the unload event in addition to the page
hide event.
Basic animations - Web APIs
<body> <canvas id="cw"></canvas> </body> </html> output snake game <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>nokia 1100:snake..member berries</title> </head> <body> <div class="keypress
hide"> <div class="up" onclick="emit(38)">↑</div> <div class="right" onclick="emit(39)">→</div> <div class="left" onclick="emit(37)">←</div> <div class="down" onclick="emit(40)">↓</div> </div> <div class="banner" id="selector"> <div> time :<span id="time">0</span> </div> <div>lousygames ©</div> ...
...ess { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: space-around; opacity: 1; user-select: none } .keypress>div:hover { opacity: 1 } .touch { background: #8bc34a } .off { background: #f44336 } .
hide { opacity: 0 } </style> </html> javascript function tmz() { var e = new date(t), i = new date, n = math.abs(i.getminutes() - e.getminutes()), o = math.abs(i.getseconds() - e.getseconds()); return n + " : " + o } function coll(t, e) { return t.x < e.x + e.w && t.x + t.w > e.x && t.y < e.y + e.h && t.h + t.y > e.y ...
...(0,0,0,0.11)", c.fillrect(0, 0, cc.width, cc.height), fa.foreach(t => t.put()), s.draw(), document.getelementbyid("time").innertext = tmz(), settimeout(() => { requestanimationframe(anima) }, fw) } function emit(t) { key.keydown(t) } function touch(t) { t.classlist.toggle("off"), document.getelementsbyclassname("keypress")[0].classlist.toggle("
hide") } var t = new date + "", d = void 0, cc = document.getelementsbytagname("canvas")[0], c = cc.getcontext("2d"); key = {}, key.keydown = function (t) { var e = document.createevent("keyboardevent"); object.defineproperty(e, "keycode", { get: function () { return this.keycodeval } }), object.definep...
Border-image generator - CSS: Cascading Style Sheets
teid="border4"/> <img class="image" src="https://udn.realityripple.com/samples/a9/b9fff72dab.png" data-stateid="border5"/> <img class="image" src="https://udn.realityripple.com/samples/fb/c0b285d3da.svg" data-stateid="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="
hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> ...
...ite.png'); background-repeat: no-repeat; background-position: top 4px center; background-color: #888888 !important; border-radius: 2px; float: left; } #toggle-gallery:hover { cursor: pointer; } #toggle-gallery[data-action='show'] { background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png'); background-color: #888888 !important; } #toggle-gallery[data-action='
hide'] { background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); } .button { width: 100px; height: 25px; margin: 10px; color: #fff; text-align: center; font-size: 12px; line-height: 25px; background-color: #379b4a; border-radius: 2px; float: left; } .button:hover { cursor: pointer; background-color: #3380c4; } #load-image { float: left; } #load-remote { ...
... getelembyid('image-gallery'); var button = getelembyid('toggle-gallery'); var state = 1; button.addeventlistener('click', function() { state = 1 ^ state; if (state === 0) { gallery.setattribute('data-collapsed', 'true'); button.setattribute('data-action', 'show'); } else { gallery.removeattribute('data-collapsed'); button.setattribute('data-action', '
hide'); } }); }; var init = function init() { var gallery = getelembyid('image-gallery'); var browse = getelembyid('load-image'); var remote = getelembyid('remote-url'); var load_remote = getelembyid('load-remote'); remote.addeventlistener('change', function(){ loadremoteimage(this.value); }); load_remote.addeventlistener('click', function(){ loadremoteimage(...
empty-cells - CSS: Cascading Style Sheets
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.
...
hide no borders or backgrounds are drawn.
... formal definition initial valueshowapplies totable-cell elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax show |
hide example showing and hiding empty table cells html <table class="table_1"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> <br> <table class="table_2"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> css .table_1 { empty-cells: show; } .table_2 { empty-cells:
hide; } td, th { border: 1px solid gray; padding: 0.5rem; } result specifications specification status comment css level 2 (revision 1)the definition of 'empty-cells' in that specification.
text-emphasis-position - CSS: Cascading Style Sheets
formal definition initial valueover rightapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ over | under ] && [ right | left ] examples preferring ruby over emphasis marks some editors prefer to
hide emphasis marks when they conflict with ruby.
... in html, this can be done with the following style rule: ruby { text-emphasis: none; } preferring emphasis marks over ruby some other editors prefer to
hide ruby when they conflict with emphasis marks.
... in html, this can be done with the following pattern: em { text-emphasis: dot; /* set text-emphasis for <em> elements */ } em rt { display: none; /*
hide ruby inside <em> elements */ } specifications specification status comment css text decoration module level 3the definition of 'text-emphasis' in that specification.
visibility - CSS: Cascading Style Sheets
the visibility css property shows or
hides an element without changing the layout of a document.
... the property can also
hide rows or columns in a <table>.
... to both
hide an element and remove it from the document layout, set the display property to none instead of using visibility.
Event reference
session history events event name fired when page
hide a session history entry is being traversed from.
... page
hide pagetransitionevent html5 a session history entry is being traversed from.
... tab
hide addons specific a tab has been hidden.
WAI ARIA Live Regions/API Support - Developer guides
atk/at-spi event iaccessible2 event object about to be hidden or removed children_changed::remove (fired on the parent, with event data pointing to the child index of the accessible object to be removed) event_object_
hide* (fired on the actual accessible object about to go away) object shown or inserted children_changed::add (fired on the parent, with event data pointing to the child index of the inserted accessible object) event_object_show* (fired on the actual new accessible object) object replaced with different object (this happens especially if an object's interfaces or role changes) ...
... children_changed::remove followed immediately by children_change::add event_object_
hide followed immediately by event_object_show text removed text_changed::delete ia2_event_text_removed (use iaccessibletext::get_oldtext to retrieve the offsets and removed text) text inserted text_changed::insert ia2_event_text_inserted (use iaccessibletext::get_newtext to retrieve the offsets and inserted text) text replaced text_changed::delete followed immediately by text_changed::insert ia2_event_text_removed followed immediately by ia2_event_text_inserted * we do not use msaa's create/destroy at the request of screen reader vendors, who avoid those events because they cause crashes on some important system -- show/
hide are the equivalent of those ev...
...this information is available only for event_show, event_
hide, ia2_event_text_inserted and ia2_event_text_removed.
<input type="file"> - HTML: Hypertext Markup Language
next, we
hide the <input> element — we do this because file inputs tend to be ugly, difficult to style, and inconsistent in their design across browsers.
... you can activate the input element by clicking its <label>, so it is better to visually
hide the input and style the label like a button, so the user will know to interact with it if they want to upload files.
... const input = document.queryselector('input'); const preview = document.queryselector('.preview'); input.style.opacity = 0; note: opacity is used to
hide the file input instead of visibility: hidden or display: none, because assistive technology interprets the latter two styles to mean the file input isn't interactive.
Global attributes - HTML: Hypertext Markup Language
for example, html5-compliant browsers
hide content marked as <foo hidden>...</foo>, even though <foo> is not a valid html element.
...for example, it can be used to
hide elements of the page that can't be used until the login process has been completed.
...this attribute must not be used to
hide content that could legitimately be shown.
Add to Home screen - Progressive web apps (PWAs)
first of all, we declare a deferredprompt variable (which we'll explain later on), get a reference to our install button, and set it to display: none initially: let deferredprompt; const addbtn = document.queryselector('.add-button'); addbtn.style.display = 'none'; we
hide the button initially because the pwa will not be available for install until it follows the a2hs criteria.
... deferredprompt = e; // update ui to notify the user they can add to home screen addbtn.style.display = 'block'; addbtn.addeventlistener('click', (e) => { //
hide our user interface that shows our a2hs button addbtn.style.display = 'none'; // show the prompt deferredprompt.prompt(); // wait for the user to respond to the prompt deferredprompt.userchoice.then((choiceresult) => { if (choiceresult.outcome === 'accepted') { console.log('user accepted the a2hs prompt'); } else { console.log('user dismissed...
... the click handler contains the following steps:
hide the button again with display: none — it is no longer needed once the app is installed.
Mobile first - Progressive web apps (PWAs)
the main objective is to put the content first and to
hide away the navigation until the user really needs it.
...ckground: #eee; height: 100%; } body { width: 600px; height: inherit; margin: 0 auto; background: url(../img/firefox-os.png) bottom left no-repeat, linear-gradient(to bottom, #fff, #eee); } .main > p { background: rgba(255,255,255,0.3); } nav li a { padding: 0 10px; font-size: 2em; } } the first one cancels out the css display: table behaviour,
hides the links to jump to and from the navigation, as they are not needed anymore in the wider layout, and changes the vertical menu to a horizontal menu that makes better use of the horizontal space available.
...this can be very useful for mobile first, as you may well want to
hide bits of code from the "mobile version" and only include them for the "desktop version", or vice versa.
hotkeys - Archive of obsolete content
for example, this add-on defines two hotkey combinations, to show and
hide a panel: // define keyboard shortcuts for showing and hiding a custom panel.
... var { hotkey } = require("sdk/hotkeys"); var showhotkey = hotkey({ combo: "accel-shift-o", onpress: function() { showmypanel(); } }); var
hidehotkey = hotkey({ combo: "accel-alt-shift-o", onpress: function() {
hidemypanel(); } }); choosing hotkeys hotkeys should be chosen with care.
Creating annotations - Archive of obsolete content
the following code to the main() function: var annotationeditor = panels.panel({ width: 220, height: 220, contenturl: data.url('editor/annotation-editor.html'), contentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) { console.log(this.annotationanchor); console.log(annotationtext); } annotationeditor.
hide(); }, onshow: function() { this.postmessage('focus'); } }); we create the editor panel but don't show it.
...when the editor panel sends us its message we log the message and
hide the panel.
On page load - Archive of obsolete content
to attach to the unload event in above example you can use the "page
hide" event like this: appcontent.addeventlistener("page
hide", myextension.onpageunload, false); for appcontent and similarly for messagepane messagepane.addeventlistener("page
hide", myextension.onpageunload, false); and add your code to onpageunload method.
... basic onpageload for a browser window var myextension = { init: function() { // the event can be domcontentloaded, pageshow, page
hide, load or unload.
Sidebar - Archive of obsolete content
you can use this function to show,
hide, or toggle sidebars.
... // toggle the bookmarks sidebar (close it if it's open or // open it if it's currently closed) sidebarui.toggle("viewbookmarkssidebar"); // show the history sidebar, whether it's hidden or already showing sidebarui.show("viewhistorysidebar"); //
hide the sidebar, if one is showing sidebarui.
hide(); avoid opening the sidebar on startup.
textbox.type - Archive of obsolete content
there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound,
hidespinbuttons, and textbox.value.
... password a textbox that
hides what is typed, used for entering passwords.
Attribute (XUL) - Archive of obsolete content
bleclose disabled disablehistory disablekeynavigation disablesecurity dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden
hidechrome
hidecolumnpicker
hideheader
hideseconds
hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left li...
...nkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noauto
hide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpage
hide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted onunload onw...
Menus - Archive of obsolete content
if you wish to have slight differences between each window, one possibility is to show or
hide menu items in a load event listener.
... for example, to have an item initially hidden in a window: function initmenus() { var item = document.getelementbyid("menu-file-open"); item.hidden = true; } the hidden property is set to true to
hide the menu with the id 'menu-fileopen'.
textbox (Toolkit autocomplete) - Archive of obsolete content
there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound,
hidespinbuttons, and textbox.value.
... password a textbox that
hides what is typed, used for entering passwords.
Textbox (XPFE autocomplete) - Archive of obsolete content
there are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound,
hidespinbuttons, and textbox.value.
... password a textbox that
hides what is typed, used for entering passwords.
Creating a Wizard - Archive of obsolete content
a third option is to use the onpage
hide and onpageshow attributes on the wizardpage element.
... attribute place on tag when it is called page
hide wizardpage called on the page that the user is leaving.
Document Object Model - Archive of obsolete content
also, we'll add an id attribute so that we can refer to it in a script to show and
hide it.
... while we're at it, let's also
hide the splitter and results tree as we only need to show them after a search is performed.
More Tree Features - Archive of obsolete content
note also that the user cannot
hide the primary column using the drop down to the right of the columns.
...you can use the style class tree-splitter to
hide the notch, although the column may still be resized.
XUL Questions and Answers - Archive of obsolete content
hidechrome="true" doesn’t work on a mac?
... if you have a similar code base as the following: onbookmarkcontextmenu: function(event, id) { document.getelementbyid("bookmarkpopup").showpopup(document.getelementbyid(id), event.screenx + 6, event.screeny + 6, "popup", "bottomright", "bottomright"); } use the
hidepopup() function to solve this issue.
menupopup - Archive of obsolete content
attributes ignorekeys, left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top properties accessibletype, anchornode, popupboxobject, position, state, triggernode methods
hidepopup, moveto, openpopup, openpopupatscreen, setconsumerollupevent, showpopup, sizeto examples the following example shows how a menupopup may be attached to a menulist.
...), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
hidepopup() return type: no return value closes the popup immediately.
-ms-accelerator - Archive of obsolete content
when the option to "
hide keyboard navigation indicators until i use the alt key" is enabled in the user's display properties, the "n" is not underlined until the user presses the alt key.
...it enables users to
hide navigation indicators for menu items and controls until the alt key is pressed.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
it
hides the technical complexity of systems behind simpler apis.
...unlike low-level programming languages, it may use natural language elements, or may automate (or even entirely
hide) significant areas of computing systems, making the process of developing simpler and more understandable relative to a lower-level language.
Dealing with files - Learn web development
note: on windows computers, you might have trouble seeing the file names, because windows has an option called
hide extensions for known file types turned on by default.
...option, unchecking the
hide extensions for known file types check box, then clicking ok.
Images in HTML - Learn web development
nction updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="a t-rex on display in the manchester university museum">'; var s...
...nction updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<figure>\n <img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>a t-rex on display in the manchester university...
Looping code - Learn web development
area.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); let jssolution = 'const output = document.queryselector(\'.output\');\noutput.innerhtml = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createelement(\'p\');\n if(i === 10) {\n para.textcontent = \'countdown \' + i;\n } else if(i === 0) {\n para.textcontent = \'bla...
...area.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const people = [\'chris\', \'anne\', \'colin\', \'terri\', \'phil\', \'lola\', \'sam\', \'kay\', \'bruce\'];\n\nconst admitted = document.queryselector(\'.admitted\');\nconst refused = document.queryselector(\'.refused\');\n\nadmitted.textcontent = \'admit: \';\...
Making decisions in your code — conditionals - Learn web development
area.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const select = document.queryselector(\'select\');\nconst list = document.queryselector(\'ul\');\nconst h1 = document.queryselector(\'h1\');\n\nselect.onchange = function() {\n const choice = select.value;\n let days = 31;\n if(choice === \'february\') {\n days ...
...area.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const select = document.queryselector(\'select\');\nconst html = document.queryselector(\'.output\');\n\nselect.onchange = function() {\n const choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\'...
Arrays - Learn web development
area.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list = document.queryselector(\'.output ul\');\nconst totalbox = document.queryselector(\'.output p\');\nlet total = 0;\nlist.innerhtml = \'\';\ntotalbox.textcontent = \'\';\n\nlet products = [\'underpants:6.99\',\n \'socks:5.99\',\n \'t-shirt:14.99\',\n...
...area.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list = document.queryselector(\'.output ul\');\nconst searchinput = document.queryselector(\'.output input\');\nconst searchbtn = document.queryselector(\'.output button\');\n\nlist.innerhtml = \'\';\n\nlet myhistory= [];\n\nsearchbtn.onclick = function() ...
Handling common accessibility problems - Learn web development
html semantic html (where the elements are used for their correct purpose) is accessible right out of the box — such content is readable by sighted viewers (provided you don't do anything silly like make the text way too small or
hide it using css), but will also be usable by assistive technologies like screen readers (apps that literally read out a web page to their user), and confer other advantages too.
... on the other hand, you shouldn't use visibility:hidden or display:none, because they do
hide content from screenreaders.
Using the Browser API
we switch the class values on the element to toggle the show/
hide.
... if searchactive is true, meaning that a search has been done, we want to disable the search as we
hide the search options — we disable the buttons, make searchactive false, clear the entered search value, and run htmliframeelement.clearmatch(), which gets rid of any stored/highlighted search results from the browser.
CustomizableUI.jsm
pe(aareaid); domelement getcustomizetargetforarea(aareaid, awindow); void reset(); void undoreset(); void removeextratoolbar(); object getplacementofwidget(awidgetid); bool iswidgetremovable(awidgetnodeorwidgetid); bool canwidgetmovetoarea(awidgetid); void getlocalizedproperty(awidget, aprop, aformatargs, adef); void
hidepanelfornode(anode); bool isspecialwidget(awidgetid); void addpanelcloselisteners(apanel); void removepanelcloselisteners(apanel); void onwidgetdrag(awidgetid, aarea); void notifystartcustomizing(awindow); void notifyendcustomizing(awindow); void dispatchtoolboxevent(aevent, adetails, awindow); bool isareaoverflowable(aareaid)...
... if adef is not provided, and if aprop exists on awidget, we'll return that, otherwise we'll return the empty string
hidepanelfornode() given a node, walk up to the first panel in its ancestor chain, and close it.
Python binding for NSS
there is a bug in nss which
hides the existence of extensions in a csr if the extensions are not contained in the first csr attribute.
... add prnetaddr_port() utility to
hide host vs.
nsIAccessibleEvent
event_
hide 0x8003 0x0002 an object has been destroyed.
... event_asynch_
hide 0x0005 an object is hidden -- this is a layout occurrence and is thus asynchronous.
nsIBrowserSearchService
if the search engine is installed in a global location, this will just
hide the engine.
... restoredefaultengines() un-
hides all engines installed in the directory corresponding to the directory service's ns_app_search_dir key.
Flash Activation: Browser Comparison - Plugins
even if the plugin element will eventually be hidden, pages should create the plugin element so that it's visible on the page, and should resize or
hide it only after the user has activated the plugin.
... this can be done by calling a javascript function when the plugin is activated: function plugincreated() { // we don't need to see the plugin, so
hide it by resizing var plugin = document.getelementbyid('myplugin'); plugin.height = 0; plugin.width = 0; plugin.callpluginmethod(); } the html, by default, specifies the flash object to be a size that makes it visible, like this: <!-- give the plugin an initial size so it is visible --> <object type="application/x-shockwave-flash" data="myapp.swf" id="myplugin" width="300" height="300"> <param name="callback" value="plugincreated()"> </object> the callback parameter defined in the html can be called in flash using its flash.external.externalinterface api.
DOM Inspector FAQ - Firefox Developer Tools
you can
hide anonymous nodes in inspector by unchecking the view > show anonymous content menu item.
... the good news is, you can
hide these whitespace nodes in inspector by unchecking the view > show whitespace nodes menu item.
Browser Toolbox - Firefox Developer Tools
for example, here's what the frame selection popup lists when there are two browser windows open, one with one content tab, and one with two: debugging popups it's hard to debug popups, because the browser
hides them as soon as you click outside them.
...click the toolbox menu and select disable popup auto-
hide.
All keyboard shortcuts - Firefox Developer Tools
enter return enter step forward through the attributes of a node tab tab tab step backward through the attributes of a node shift + tab shift + tab shift + tab (when an attribute is selected) start editing the attribute enter return enter
hide/show the selected node h h h focus on the search box in the html pane ctrl + f cmd + f ctrl + f edit as html f2 f2 f2 stop editing html f2 / ctrl +enter f2 / cmd + return f2 / ctrl + enter copy the selected node's outer html ctrl + c cmd + c ctrl + c scroll the selected node into view s s s ...
... show/
hide more information about current property (computed view only, when a property is selected) enter or space return or space enter or space open mdn reference page about current property (computed view only, when a property is selected) f1 f1 f1 open current css file in style editor (computed view only, when more information is shown for a property and a css file r...
Migrating from Firebug - Firefox Developer Tools
only show applied styles the style side panel in firebug has an option to display only the properties of a css rule that are applied to the selected element and
hide all overwritten styles.
...the difference is that in the devtools the properties are always listed alphabetically and not grouped (see bug 977128) and there is no option to
hide the mozilla specific styles, therefore there is an input field allowing to filter the properties.
Page inspector keyboard shortcuts - Firefox Developer Tools
enter return enter step forward through the attributes of a node tab tab tab step backward through the attributes of a node shift + tab shift + tab shift + tab (when an attribute is selected) start editing the attribute enter return enter
hide/show the selected node h h h focus on the search box in the html pane ctrl + f cmd + f ctrl + f edit as html f2 f2 f2 stop editing html f2 / ctrl +enter f2 / cmd + return f2 / ctrl + enter copy the selected node's outer html ctrl + c cmd + c ctrl + c scroll the selected node into view s s s ...
... show/
hide more information about current property (computed view only, when a property is selected) enter or space return or space enter or space open mdn reference page about current property (computed view only, when a property is selected) f1 f1 f1 open current css file in style editor (computed view only, when more information is shown for a property and a css file r...
Compositing and clipping - Web APIs
in addition, the clip property allows us to
hide unwanted parts of shapes.
... clipping paths a clipping path is like a normal canvas shape but it acts as a mask to
hide unwanted parts of shapes.
Event.currentTarget - Web APIs
function
hide(e){ e.currenttarget.style.visibility = 'hidden'; console.log(e.currenttarget); // when this function is used as an event handler: this === e.currenttarget } var ps = document.getelementsbytagname('p'); for(var i = 0; i < ps.length; i++){ // console: print the clicked <p> element ps[i].addeventlistener('click',
hide, false); } // console: print <body> document.body.addeventlistener('cl...
...ick',
hide, false); // click around and make paragraphs disappear note: the value of event.currenttarget is only available while the event is being handled.
GlobalEventHandlers.onanimationcancel - Web APIs
example html <div class="main"> <div id="box" onanimationcancel="handlecancelevent(event);"> <div id="text">box</div> </div> </div> <div class="button" id="togglebox">
hide the box </div> <pre id="log"></pre> css :root { --boxwidth: 50px; } .main { width: 300px; height: 300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial"...
... function handlecancelevent(event) { log("animation canceled", event); }; then we add a method to handle toggle display between "flex" and "none" and establish it as the handler for a click event on the "
hide/show" the box button: document.getelementbyid('togglebox').addeventlistener('click', function() { if (box.style.display == "none") { box.style.display = "flex"; document.getelementbyid("togglebox").innerhtml = "
hide the box"; } else { box.style.display = "none"; document.getelementbyid("togglebox").innerhtml = "show the box"; } }); toggling the box to display: none has th...
HTMLElement.hidden - Web APIs
the hidden property applies to all presentation modes and should not be used to
hide content that is meant to be directly accessible to the user.
... javascript document.getelementbyid("okbutton") .addeventlistener("click", function() { document.getelementbyid("welcome").hidden = true; document.getelementbyid("awesome").hidden = false; }, false); this code sets up a handler for the welcome panel's "ok" button that
hides the welcome panel and makes the follow-up panel—with the curious name "awesome"—visible in its place.
Index - Web APIs
2280 mscandidatewindow
hide mscandidatewindow
hide fires after the input method editor (ime) candidate window closes and is fully hidden.
... 5050 window: page
hide event api, event, history, navigation, reference, window, page
hide the page
hide event is sent to a window when the browser
hides the current page in the process of presenting a different page from the session's history.
Key Values - Web APIs
keycode_tv_audio_description_mix_up (253) "tvcontentsmenu" displays or
hides the media contents available for playback (this may be a channel guide showing the currently airing programs, or a list of media files to play).
... keycode_tv_contents_menu (256) "tvdataservice" displays or
hides the tv's data service menu.
Window: pageshow event - Web APIs
the handler, eventlogger(), logs the type of event that occurred to the console, and includes the value of the persisted flag on pageshow and page
hide events.
... javascript const events = [ "page
hide", "pageshow", "unload", "load" ]; const eventlogger = event => { switch (event.type) { case "page
hide": case "pageshow": let ispersisted = event.persisted ?
Using the aria-hidden attribute - Accessibility
the aria-hidden attribute can either expose or
hide non-interactive content from the accessibility api.
... deciding between aria-hidden="true", role="presentation", and role="none" on the surface, the aria-hidden="true", role="presentation", and role="none" attributes seem similar because they:
hide content from assistive technology cannot be used on a focusable element cannot be used on the parent of an interactive element despite these similarities, the intent behind each attribute is different.
Cognitive accessibility - Accessibility
if moving, blinking, scrolling, or auto-updating information starts automatically, lasts more than five seconds, and is presented in parallel with other content, the user must able to pause, stop,
hide or control it, unless it's an essential functionality.
...if you have added content to links for screen readers, and that content is verbose and potentially confusing to sighted readers, consider clipping the added text to visually
hide it from those not using assistive technologies.
Operable - Accessibility
2.2.2 pausing, stopping, hiding (a) for moving/blinking content that starts automatically, lasts longer than 5 seconds, and is shown alongside other content, controls should be provided to pause, stop, or
hide it.
... for auto-updating information that starts automatically and is shown alongside other content, controls should be provided to pause, stop, or
hide it, or to control the frequency of updates.
Box-shadow generator - CSS: Cascading Style Sheets
; } if (type === 'add') active.stack.addlayer(); if (type === 'layer') active.stack.setactivelayer(node); if (type === 'delete') active.stack.deletelayer(node.parentnode); if (type === 'move-up') active.stack.movelayer(1); if (type === 'move-down') active.stack.movelayer(-1); } var setactivestack = function setactivestack(stackobj) { active.stack.
hide(); active.stack = stackobj; active.stack.show(); } /* * stack object */ var stack = function stack(subject) { var s = document.createelement('div'); var title = document.createelement('div'); var stack = document.createelement('div'); s.classname = 'container'; stack.classname = 'stack'; title.classname = 'title'; title.textcontent = subject.getattribute('...
...s.layer.setattribute('data-active', 'layer'); var shadowid = node.getattribute('data-shid') | 0; this.layerid = this.order.indexof(shadowid); tool.setactiveshadow(this.layerid, true); } stack.prototype.unsetactivelayer = function unsetactivelayer() { if (this.layer) this.layer.removeattribute('data-active'); this.layer = null; this.layerid = 0; } stack.prototype.
hide = function
hide() { this.unsetactivelayer(); this.subject.removeattribute('data-active'); var style = this.container.style; style.left = '100%'; style.zindex = '0'; } stack.prototype.show = function show() { elements.shadow_properties.style.display = 'none'; elements.element_properties.style.display = 'block'; if (this.id === 'element') { elements.zindex.style.di...
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change.” - collapsed items this behaviour is useful if you want to target flex items using javascript to show and
hide content for example.
... the difference between visibility: hidden and display: none when you set an item to display: none in order to
hide it, the item is removed from the formatting structure of the page.
backface-visibility - CSS: Cascading Style Sheets
</p> </td> <td> <div class="container"> <div class="cube
hidebf"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> <p> the three back faces (2, 4, 5) are hidden.
... </p> </td> </tr> </table> css /* classes that will show or
hide the three back faces of the "cube" */ .showbf div { backface-visibility: visible; } .
hidebf div { backface-visibility: hidden; } /* define the container div, the cube div, and a generic face */ .container { width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform:...
<input type="date"> - HTML: Hypertext Markup Language
if <input type="date"> isn't supported, we
hide the native picker and show the fallback (<select>) instead.
... // define variables var nativepicker = document.queryselector('.nativedatepicker'); var fallbackpicker = document.queryselector('.fallbackdatepicker'); var fallbacklabel = document.queryselector('.fallbacklabel'); var yearselect = document.queryselector('#year'); var monthselect = document.queryselector('#month'); var dayselect = document.queryselector('#day'); //
hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'date'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { //
hide the native picker and show the fallback nativepicker...
<input type="datetime-local"> - HTML: Hypertext Markup Language
if <input type="datetime-local"> is not supported, we
hide the native picker and show the fallback picker ui (<select>) instead.
...ker'); var fallbackpicker = document.queryselector('.fallbackdatetimepicker'); var fallbacklabel = document.queryselector('.fallbacklabel'); var yearselect = document.queryselector('#year'); var monthselect = document.queryselector('#month'); var dayselect = document.queryselector('#day'); var hourselect = document.queryselector('#hour'); var minuteselect = document.queryselector('#minute'); //
hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new datetime-local input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'datetime-local'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { //
hide the n...
<input type="month"> - HTML: Hypertext Markup Language
if <input type="month"> is not supported, we
hide the native picker and show the fallback picker ui instead.
... // define variables var nativepicker = document.queryselector('.nativedatepicker'); var fallbackpicker = document.queryselector('.fallbackdatepicker'); var fallbacklabel = document.queryselector('.fallbacklabel'); var yearselect = document.queryselector('#year'); var monthselect = document.queryselector('#month'); //
hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'month'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { //
hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style...
<input type="time"> - HTML: Hypertext Markup Language
if <input type="time"> is not supported, we
hide the native picker and show the fallback picker ui (<select>s) instead.
... // define variables var nativepicker = document.queryselector('.nativetimepicker'); var fallbackpicker = document.queryselector('.fallbacktimepicker'); var fallbacklabel = document.queryselector('.fallbacklabel'); var hourselect = document.queryselector('#hour'); var minuteselect = document.queryselector('#minute'); //
hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'time'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { //
hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.styl...
<input type="week"> - HTML: Hypertext Markup Language
if <input type="week"> is not supported, we
hide the native picker and show the fallback picker ui (<select>s) instead.
... // define variables var nativepicker = document.queryselector('.nativeweekpicker'); var fallbackpicker = document.queryselector('.fallbackweekpicker'); var fallbacklabel = document.queryselector('.fallbacklabel'); var yearselect = document.queryselector('#year'); var weekselect = document.queryselector('#fallbackweek'); //
hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'week'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { //
hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.
hidden - HTML: Hypertext Markup Language
for example, it can be used to
hide elements of the page that can't be used until the login process has been completed.
... the hidden attribute must not be used to
hide content just from one presentation.
Proxy servers and tunneling - HTTP
forward proxies can also be anonymous proxies and allow users to
hide their ip address while browsing the web or using other internet services.
...forward proxies can
hide the identities of clients whereas reverse proxies can
hide the identities of servers.
ui/button/toggle - Archive of obsolete content
uctor: var { togglebutton } = require('sdk/ui/button/toggle'); var panels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onchange: handlechange }); var panel = panels.panel({ contenturl: self.data.url("panel.html"), on
hide: handle
hide }); function handlechange(state) { if (state.checked) { panel.show({ position: button }); } } function handle
hide() { button.state('window', {checked: false}); } disabling buttons you can disable a button by setting its disabled property to true.
Storing annotations - Archive of obsolete content
rn key in the editor, we create and store the new annotation: var annotationeditor = panels.panel({ width: 220, height: 220, contenturl: data.url('editor/annotation-editor.html'), contentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) handlenewannotation(annotationtext, this.annotationanchor); annotationeditor.
hide(); }, onshow: function() { this.postmessage('focus'); } }); listing stored annotations to prove that this works, let's implement the part of the add-on that displays all the previously entered annotations.
Display a Popup - Archive of obsolete content
text_entry.port.on("text-entered", function (text) { console.log(text); text_entry.
hide(); }); the content script "get-text.js" looks like this: // when the user hits return, send the "text-entered" // message to main.js.
Style System Overview - Archive of obsolete content
this style struct is always const, and should always be declared as such (evil old-style casts often used with the non-typesafe forms sometimes
hide this error), since the struct may be shared with other elements.
JavaScript Client API - Archive of obsolete content
asonably detailed privacy policy detailing how data collected or transmitted by your third party client is managed and protected; (b) that your third party client will only store data in encrypted form on the firefox sync servers operated by mozilla; (c) that you and your third party client will use the firefox sync apis solely for their intended purpose; (d) that your third party client will not
hide or mask its identity as it uses the services and/or firefox sync apis, including by failing to follow required identification conventions; and (e) that you and your third party client will not use the firefox sync apis for any application or service that replicates or attempts to replicate the services or firefox sync experience unless such use is non-confusing (by non-confusing, we mean that peo...
jspage - Archive of obsolete content
ions")){this.set("tween",a);}this.store("tween",new fx.tween(this,this.retrieve("tween:options"))); }return this.retrieve("tween");}};element.implement({tween:function(a,c,b){this.get("tween").start(arguments);return this;},fade:function(c){var e=this.get("tween"),d="opacity",a; c=$pick(c,"toggle");switch(c){case"in":e.start(d,1);break;case"out":e.start(d,0);break;case"show":e.set(d,1);break;case"
hide":e.set(d,0);break;case"toggle":var b=this.retrieve("fade:flag",this.get("opacity")==1); e.start(d,(b)?0:1);this.store("fade:flag",!b);a=true;break;default:e.start(d,arguments);}if(!a){this.eliminate("fade:flag");}return this;},highlight:function(c,a){if(!a){a=this.retrieve("highlight:original",this.getstyle("background-color")); a=(a=="transparent")?"#fff":a;}var b=this.get("tween");b.start("back...
Modularization techniques - Archive of obsolete content
a factory allows an implementor to
hide both the class declaration and creation details of an object, an extremely important step for allowing maximum flexibility in the implementation of a class and reducing compile time dependencies.
menuitem - Archive of obsolete content
do menuitem.setattribute("checked", "false") instead of menuitem.removeattribute("checked")) when the user unchecks the menuitem, as a value of false will both correctly
hide the checkmark and persist its hidden state.
resizer - Archive of obsolete content
attributes dir, element, type examples resizing a window <window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"
hidechrome="true" windowtype="main" orient="vertical" sizemode="normal" width="400" height="300" persist="screenx screeny width height"> <hbox flex="1"> <vbox width="2" style="background-color: grey;"> <resizer dir="topleft" height="2" style="cursor: nw-resize;"/> <resizer dir="left" flex="1" style="cursor: w-resize;"/> <resizer dir="bottomleft" height="2" style="cursor: sw-resize;"/>...
Theme changes in Firefox 3 - Archive of obsolete content
the rule that's needed to show and
hide the go button and other location bar icons is: #urlbar[pageproxystate="invalid"] > #urlbar-icons > :not(#go-button) , #urlbar[pageproxystate="valid"] > #urlbar-icons > #go-button { visibility: collapse; } images to add add the following images: chrome://global/skin/icons/information-16.png used when presenting information notices.
Developing cross-browser and cross-platform pages - Archive of obsolete content
function
hideelement(id_attribute_value) { if (document.getelementbyid && document.getelementbyid(id_attribute_value) && document.getelementbyid(id_attribute_value).style ) { document.getelementbyid(id_attribute_value).style.visibility = "hidden"; }; } // example: // <button type="button" onclick="
hideelement('d1');">
hide div</button> // <div id="d1">some text</div> these repeated calls...
Audio for Web games - Game development
one and then allow playback by hiding the "loading" text and displaying the play button: trackels.foreach((el, i) => { // get children const anchor = el.queryselector('a'); const loadtext = el.queryselector('p'); const playbutton = el.queryselector('button'); // load file loadfile(anchor.href).then((track) => { // set loading to false el.dataset.loading = 'false'; //
hide loading text loadtext.style.display = 'none'; // show button playbutton.style.display = 'inline-block'; // allow play on click playbutton.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } playtrack(track); playbutton.dataset.play...
Desktop mouse and keyboard controls - Game development
to skip the how to play screen, we can listen for any key being pressed and move on: this.input.keyboard.ondowncallback = function() { if(this.statestatus == 'intro') { this.
hideintro(); } }; this
hides the intro and starts the actual game, without us having to set up another new key control just for this.
jQuery - MDN Web Docs Glossary: Definitions of Web-related terms
$(document).ready(function(){ alert("hello world!"); $("#blackbox").
hide(); }); the above code carries out the same function as the following code: window.onload = function() { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }; or: window.addeventlistener("load", () => { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }); learn more general knowledge jquery on wikipedia jquery offi...
Accessible multimedia - Learn web development
if you are creating your own user interface to present your audio and associated transcript, you can do it however you like, but it might make sense to include it in a showable/
hideable panel; see our audio-transcript-ui example (also see the source code).
Advanced form styling - Learn web development
so you could
hide the actual from input using something like this: input[type="file"] { height: 0; padding: 0; opacity: 0; } and then style the label to act like a button, which when pressed will open the file picker as expected: label[for="file"] { box-shadow: 1px 1px 3px #ccc; background: linear-gradient(to bottom, #eee, #ccc); border: 1px solid rgb(169, 169, 169); border-radius: 5px; text-ali...
Your first form - Learn web development
forms allow users to enter data, which is generally sent to a web server for processing and storage (see sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or
hide a ui feature).
Adding vector graphics to the Web - Learn web development
nction updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = ''; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(...
From object to iframe — other embedding technologies - Learn web development
nction updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = '
hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/qh2-tgulwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1...
Introduction to events - Learn web development
let's look at an example to make this easier — open up the show-video-box.html example in a new tab (and the source code in another tab.) it is also available live below: this is a pretty simple example that shows and
hides a <div> with a <video> element inside it: <button>display video</button> <div class="hidden"> <video> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
TypeScript support in Svelte - Learn web development
(ts) (message, ms) => { you can fix these by specifying the corresponding types, like so: export let ms = 3000 let visible: boolean let timeout: number const onmessagechange = (message: string, ms: number) => { cleartimeout(timeout) if (!message) { //
hide alert if message is empty note: there's no need to specify the ms type with export let ms:number = 3000 because typescript is already inferring it from its default value.
Working with Svelte stores - Learn web development
update the <script> section of your alert.svelte component like so: <script> import { ondestroy } from 'svelte' import { alert } from '../stores.js' export let ms = 3000 let visible let timeout const onmessagechange = (message, ms) => { cleartimeout(timeout) if (!message) { //
hide alert if message is empty visible = false } else { visible = true // show alert if (ms > 0) timeout = settimeout(() => visible = false, ms) // and
hide it after ms milliseconds } } $: onmessagechange($alert, ms) // whenever the alert store or the ms props changes run onmessagechange ondestroy(()=> cleartimeout(time...
Mozilla’s UAAG evaluation report
(p3) p can turn on and off toolbars under show/
hide can customize personal bookmarks toolbar bug 15144 is for the ability to add/remove toolbar icons bug 47418 is for the ability to rearrange toolbars guideline 12.
Debugging Frame Reflow
for instance adding text 0 to the rules in reflow_rules.txt would
hide the text entries from the reflow.
Configuring Build Options
ac_add_options --enable-application=comm/mail to build firefox, run the following commands: export mozconfig=/path/to/mozilla/mozconfig-firefox ./mach build to build thunderbird, run the following commands: export mozconfig=/path/to/mozilla/mozconfig-thunderbird ./mach build using mozconfigwrapper mozconfigwrapper is similar to using multiple mozconfig files except that it abstracts and
hides them so you don't have to worry about where they live or which ones you've created.
The Firefox codebase: CSS Guidelines
omit units on 0 values do this: margin: 0; not this: margin: 0px; use expanded syntax it is often harder to understand what the shorthand is doing and the shorthand can also
hide some unwanted default values.
Embedding Tips
methods to
hide or show the tool tips will automatically be called upon it when the user hovers over an item with title text.
AddonManager
addontype flags constant description type_ui_
hide_empty the type should be hidden from the ui if no add-ons of that type are currently installed.
API-provided widgets
onviewhiding(aevt) only useful for views; a function that will be invoked when a user
hides your view.
OSFile.jsm
consequently, one of the key design choices of os.file is to provide operations that are low-level enough that they do not
hide any i/o from the developer (which could cause the developer to perform more i/o than they think) and, since not all platforms have the same features, offer system-specific information that the developer can use to optimize his algorithms for a platform.
Mozilla Quirks Mode Behavior
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).
Gecko Profiler FAQ
overview of the changes in the last (year?) to cleopatra/etc faster, hopefully more reliable has a timeline tab lets you
hide threads with a context menu supports symbolication for local builds on windows if you run “mach buildsymbols” first profiling non-nsthreads?
Leak-hunting strategies and tips
because (1) large graphs of leaked objects tend to include some objects pointed to by global variables that confuse gc-based leak detectors, which can make leaks look smaller (as in bug 99180) or
hide them completely and (2) large graphs of leaked objects tend to
hide smaller ones, it's much better to go after the large graphs of leaks first.
SpiderMonkey Internals
for now, a debugger will use it and its dependents such as jsopcode.h directly, but over time we intend to extend jsdbgapi.h to
hide uninteresting details and provide conveniences.
Running Automated JavaScript Tests
for a smoke test or if you are not changing language-level functionality, you may wish to use jstests.py path_to_js_shell --exclude=test262 other options allow you to show the test command lines being run, command output and return codes, run tests named in a given file, exclude tests named in a given file,
hide the progress bar, change the timeout, run skipped tests, print output in tinderbox format, run a test in the debugger, or run tests in valgrind.
TPS Pref Lists
for example: var prefs1 = [ { name: "browser.startup.homepage", value: "http://www.getfirefox.com" }, { name: "browser.urlbar.maxrichresults", value: 20 }, { name: "browser.tabs.auto
hide", value: true } ]; pref lists and phase actions the only actions supported for preference asset lists are modify and verify: prefs.modify prefs.verify sync only syncs certain preferences.
Thread Sanitizer
this list is a good tool to temporarily
hide some traces, especially for debugging purposes.
WebReplayRoadmap
hide unsupported developer tool features (not yet implemented) support for the normal features of the developer tools is pretty limited in recording/replaying tabs.
Gecko events
is supported: yes event_asynch_show a hidden object is shown -- this is a layout occurance and is thus asynchronous is supported: yes event_asynch_
hide an object is hidden -- this is a layout occurance and is thus asynchronous is supported: yes event_asynch_significant_change an object had a significant layout change which could affect the type of accessible object -- this is a layout occurance and is thus asynchronous is supported: yes event_active_decendent_changed the active descendant of a component has changed.
Gecko Roles
role_popup_menu a temporary window that is usually used to offer the user a list of choices, and then
hides when the user selects one of those choices.
Index
we could just
hide it on send, and then show it on the next compose.
Add to iPhoto
{ document.getelementbyid("contentareacontextmenu").addeventlistener("popupshowing", iphoto.onpopup, false); } responding when the context menu is clicked when the user right-clicks an image, our handler gets called: onpopup: function() { var node = iphoto.getcurrentnode(); var item = document.getelementbyid("add-to-iphoto_menuitem"); if (item) { item.hidden = (node == null); //
hide it if we're not on an image } } this code finds the image node the user right-clicked in by calling our getcurrentnode() method, then sets the hidden state of the "add image to iphoto" menu item based on whether or not an image node was found.
3D view - Firefox Developer Tools
rotate up/down w / s mouse up/down pan left/right ← / → mouse left/right pan up/down ↑ / ↓ mouse up/down reset zoom level 0 resets the zoom level to the default focus on selected node f makes sure the currently selected node is visible reset view r resets zoom, rotation, and panning to the default
hide current node x makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured use cases for the 3d view there are a variety of ways the 3d view is useful: if you have broken html causing layout problems, looking at the 3d view can help find where you've gone wrong.
Set a breakpoint - Firefox Developer Tools
note: there is also a new option in the context menu for the actual code in the source pane —
hide inline preview/show inline preview — which allows you to turn the inline variables on/off.
Debugger.Memory - Firefox Developer Tools
much_malloc” “alloc_trigger” “debug_gc” “compartment_revived” “reset” “out_of_nursery” “evict_nursery” “full_store_buffer” “shared_memory_limit” “periodic_full_gc” “incremental_too_slow” “dom_window_utils” “component_utils” “mem_pressure” “cc_waiting” “cc_forced” “load_end” “page_
hide” “nsjscontext_destroy” “set_new_document” “set_doc_shell” “dom_utils” “dom_ipc” “dom_worker” “inter_slice_gc” “refresh_frame” “full_gc_timer” “shutdown_cc” “user_inactive” nonincrementalreason if spidermonkey’s collector determined it could not incrementally collect garbage, and had to do a full gc all a...
Responsive Design Mode - Firefox Developer Tools
for example: developer toolbox with rdm you can show or
hide the developer tools toolbox independently of toggling responsive design mode itself: while responsive design mode is enabled, you can continue browsing as you normally would in the resized content area.
Cookies - Firefox Developer Tools
note: some of the columns are not shown by default — to change the column display, right-click on the existing table headings and use the resulting context menu to show/
hide the columns.
Storage Inspector - Firefox Developer Tools
you can
hide and show columns by context-clicking on the table header and selecting the columns you want to see: search there's a search box at the top of the table widget: this filters the table to show only items which match the search term.
Tips - Firefox Developer Tools
(there are more than the default tools!) page inspector in the markup view: press h with a node selected to
hide/show it.
Firefox Developer Tools
opens the menu that includes docking options, the ability to show or
hide the split console, and developer tools settings.
Animation.onfinish - Web APIs
hide(endingui); // when the credits are later faded in, // we re-add the pointer events when they're done bringui.onfinish = function() { endingui.style.pointerevents = 'auto'; }; specifications specification status comment web animationsthe definition of 'animation.onfinish' in that specification.
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
if the column is 1
hide the cell if (col === 0) { mycurrent_cell.style.background = "rgb(255,0,0)"; } else { mycurrent_cell.style.display = "none"; } } mytablebody.appendchild(mycurrent_row); } mytable.appendchild(mytablebody); mybody.appendchild(mytable); } </script> </html> original docume...
Event.target - Web APIs
// make a list const ul = document.createelement('ul'); document.body.appendchild(ul); const li1 = document.createelement('li'); const li2 = document.createelement('li'); ul.appendchild(li1); ul.appendchild(li2); function
hide(evt) { // e.target refers to the clicked <li> element // this is different than e.currenttarget, which would refer to the parent <ul> in this context evt.target.style.visibility = 'hidden'; } // attach the listener to the list // it will fire when each <li> is clicked ul.addeventlistener('click',
hide, false); specifications specification status comment domth...
Using files from web applications - Web APIs
" + amultiples[nmultiple] + " (" + nbytes + " bytes)"; } // end of optional code document.getelementbyid("filenum").innerhtml = nfiles; document.getelementbyid("filesize").innerhtml = soutput; } document.getelementbyid("uploadinput").addeventlistener("change", updatesize, false); </script> </body> </html> using hidden file input elements using the click() method you can
hide the admittedly ugly file <input> element and present your own interface for opening the file picker and displaying which file or files the user has selected.
GlobalEventHandlers.onanimationend - Web APIs
pped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").addeventlistener("click", function(event) { document.getelementbyid("box").classname = "slideanimation"; event.target.style.display = "none"; }, false); this sets the class of the box we want to animate to the class that contains the animation description, then
hides the play button because this example will only run the animation once.
GlobalEventHandlers.onanimationstart - Web APIs
pped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").addeventlistener("click", function(event) { document.getelementbyid("box").classname = "slideanimation"; event.target.style.display = "none"; }, false); this sets the class of the box we want to animate to the class that contains the animation description, then
hides the play button because this example will only run the animation once.
GlobalEventHandlers.onmousedown - Web APIs
ound: white; border-radius: 50%; } img { mix-blend-mode: darken; } javascript function showview(event) { view.removeattribute('hidden'); view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; event.preventdefault(); } function moveview(event) { view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; } function
hideview(event) { view.setattribute('hidden', ''); } const container = document.queryselector('.container'); const view = document.queryselector('.view'); container.onmousedown = showview; container.onmousemove = moveview; document.onmouseup =
hideview; result specification specification status comment html living standardthe definition of 'onmousedown' in that specifi...
GlobalEventHandlers.onmousemove - Web APIs
ument.createelement('div'); node.classname = 'tooltip'; node.setattribute('hidden', ''); document.body.appendchild(node); this.follow = function(event) { node.style.left = event.clientx + 20 + 'px'; node.style.top = event.clienty + 10 + 'px'; }; this.show = function(event) { node.textcontent = event.target.dataset.tooltip; node.removeattribute('hidden'); }; this.
hide = function() { node.setattribute('hidden', ''); }; })(); const links = document.queryselectorall('a'); links.foreach(link => { link.onmouseover = tooltip.show; link.onmousemove = tooltip.follow; link.onmouseout = tooltip.
hide; }); result draggable elements we also have an example available showing the use of the onmousemove event handler with draggable objects — view the exam...
HTMLBodyElement - Web APIs
windoweventhandlers.onpage
hide is an eventhandler representing the code to be called when the page
hide event is raised.
HTMLFrameSetElement - Web APIs
windoweventhandlers.onpage
hide is an eventhandler representing the code to be called when the page
hide event is raised.
HTMLOrForeignElement.nonce - Web APIs
examples retrieving a nonce value in the past, not all browsers supported the nonce idl attribute, so a workaround is to try to use getattribute as a fallback: let nonce = script['nonce'] || script.getattribute('nonce'); however, recent browsers version
hide nonce values that are accessed this way (an empty string will be returned).
Using the MediaStream Recording API - Web APIs
first of all, we style the <label> how we want it, making sure that it has enough z-index to always sit above the other elements and therefore be focusable/clickable: label { font-family: 'notocoloremoji'; font-size: 3rem; position: absolute; top: 2px; right: 3px; z-index: 5; cursor: pointer; } then we
hide the actual checkbox, because we don't want it cluttering up our ui: input[type=checkbox] { position: absolute; top: -100px; } next, we style the information screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition ...
MediaTrackConstraints - Web APIs
cursor a constraindomstring which specifies whether or not to include the mouse cursor in the generated track, and if so, whether or not to
hide it while not moving.
Using the Notifications API - Web APIs
inside here we explicitly set the notification.permission value (some old versions of chrome failed to do this automatically), and show or
hide the button depending on what the user chose in the permission dialog.
PageTransitionEvent - Web APIs
the pagetransitionevent event object is available inside handler functions for the pageshow and page
hide events, fired when a document is being loaded or unloaded.
RTCIceCandidate.type - Web APIs
if (candidate.type == "host") { showhostcontrols(); } else {
hidehostcontrols(); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.type' in that specification.
VisualViewport - Web APIs
examples hiding an overlaid box on zoom this example, taken from the visual viewport readme, shows how to write a simple bit of code that will
hide an overlaid box (which might contain an advert, say) when the user zooms in.
Window: unload event - Web APIs
bubbles no cancelable no interface event event handler property onunload it is fired after: beforeunload (cancelable event) page
hide the document is in the following state: all the resources still exist (img, iframe etc.) nothing is visible anymore to the end user ui interactions are ineffective (window.open, alert, confirm, etc.) an error won't stop the unloading workflow please note that the unload event also follows the document tree: parent frame unload will happen before child frame unload (see example below).
WindowEventHandlers - Web APIs
windoweventhandlers.onpage
hide is an eventhandler representing the code to be called when the page
hide event is raised.
Synchronous and asynchronous requests - Web APIs
adapting sync xhr use cases to the beacon api there are some cases in which the synchronous usage of xmlhttprequest is not replaceable, like during the unload, beforeunload, and page
hide events.
mssitemodejumplistitemremoved - Web APIs
syntax event property object.oncandidatewindow
hide = handler; addeventlistener method object.addeventlistener("mssitemodejumplistitemremoved", handler, usecapture) general info synchronous no bubbles no cancelable no note this event is raised once for every item that has been removed since the last time mssitemodeshowjumplist was called.
Web APIs
eportbody k keyboard keyboardevent keyboardlayoutmap keyframeeffect keyframeeffectoptions l largestcontentfulpaint layoutshift layoutshiftattribution linearaccelerationsensor linkstyle localfilesystem localfilesystemsync localmediastream location lock lockmanager lockedfile m midiaccess midiconnectionevent midiinput midiinputmap midimessageevent midioutputmap mscandidatewindow
hide mscandidatewindowshow mscandidatewindowupdate msgestureevent msgraphicstrust msmanipulationevent msrangecollection mssitemodeevent magnetometer mathmlelement mediacapabilities mediacapabilitiesinfo mediaconfiguration mediadecodingconfiguration mediadeviceinfo mediadevices mediaelementaudiosourcenode mediaencodingconfiguration mediaerror mediaimage mediakeymessageevent mediakeysessio...
ARIA: tab role - Accessibility
focus].focus(); } }); }); function changetabs(e) { const target = e.target; const parent = target.parentnode; const grandparent = parent.parentnode; // remove all current selected tabs parent .queryselectorall('[aria-selected="true"]') .foreach(t => t.setattribute("aria-selected", false)); // set this tab as selected target.setattribute("aria-selected", true); //
hide all tab panels grandparent .queryselectorall('[role="tabpanel"]') .foreach(p => p.setattribute("hidden", true)); // show the selected panel grandparent.parentnode .queryselector(`#${target.getattribute("aria-controls")}`) .removeattribute("hidden"); } best practices it is recommended to use a button element with the role tab for their built-in functional and accessible ...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
end event_system_minimizestart event_system_minimizeend event_object_create [don't implement, watching system generated versions of this event causes assistive technology crashes] event_object_destroy [don't implement, watching system generated versions of this event causes assistive technology crashes] event_object_show [can be important, depending on project] event_object_
hide [can be important, depending on project] event_object_reorder [important for mutating docs] event_object_focus [important] event_object_selection [important] event_object_selectionadd [important for multiple selection] event_object_selectionremove [important for multiple selection] event_object_selectionwithin [important for multiple selection] event_object_statechange...
::backdrop - CSS: Cascading Style Sheets
the ::backdrop pseudo-element makes it possible to obscure, style, or completely
hide everything located below the element when it's the topmost one in the top layer.
:checked - CSS: Cascading Style Sheets
ll 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</label> css /*
hide the toggle checkbox */ #expand-toggle { display: none; } /*
hide expandable content by default */ .expandable { visibility: collapse; background: #ddd; } /* style the button */ #expand-btn { display: inline-block; margin-top: 12px; padding: 5px 11px; background-color: #ff7; border: 1px solid; border-radius: 3px; } /* show hidden content when the checkbox is checked */ #expand...
:defined - CSS: Cascading Style Sheets
xt="custom element example text"></simple-custom> <p>standard paragraph example text</p> in the css we first include the following rules: // give the two elements distinctive backgrounds p { background: yellow; } simple-custom { background: cyan; } // both the custom and the built-in element are given italic text :defined { font-style: italic; } then provide the following two rules to
hide any instances of our custom element that are not defined, and display instances that are defined as block level elements: simple-custom:not(:defined) { display: none; } simple-custom:defined { display: block; } this is useful if you have a complex custom element that takes a while to load into the page — you might want to
hide instances of the element until definition is complete, so tha...
Color picker tool - CSS: Cascading Style Sheets
ntlistener('mousedown', dragstart, false); }; return { makeresizable : makeresizable, makedraggable : makedraggable }; })(); /*========== color class ==========*/ var color = uicolorpicker.color; var hslcolor = uicolorpicker.hslcolor; /** * colorpalette */ var colorpalette = (function colorpalette() { var samples = []; var color_palette; var complementary; var
hidenode = function(node) { node.setattribute('data-hidden', 'true'); }; var colorsample = function colorsample(id) { var node = document.createelement('div'); node.classname = 'sample'; this.uid = samples.length; this.node = node; this.color = new color(); node.setattribute('sample-id', this.uid); node.setattribute('draggable', 'true'); node.addeventlistener('dragsta...
display - CSS: Cascading Style Sheets
if you want to visually
hide the element, a more accessible alternative is to use a combination of properties to remove it visually from the screen but keep it parseable by assistive technology such as screen readers.
overflow-block - CSS: Cascading Style Sheets
inition initial valueautoapplies toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-block:hidden</code> —
hides the text outside the box <div id="div1"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
overflow-inline - CSS: Cascading Style Sheets
oblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples setting inline overflow behavior html <ul> <li><code>overflow-inline:hidden</code> —
hides the text outside the box <div id="div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:scroll</code> — always adds a scrollbar <div id="div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:visible</code> — displays the text outside the box if needed <div id="div3"...
overflow-x - CSS: Cascading Style Sheets
finition initial valuevisibleapplies toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-x:hidden</code> —
hides the text outside the box <div id="div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:scroll</code> — always adds a scrollbar <div id="div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:visible</code> — displays the text outside the box if needed <div id="div3"> ab...
overflow-y - CSS: Cascading Style Sheets
leapplies toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples setting overflow-y behavior html <ul> <li><code>overflow-y:hidden</code> —
hides the text outside the box <div id="div1"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Creating a cross-browser video player - Developer guides
a number of variables pointing to html elements are required: var videocontainer = document.getelementbyid('videocontainer'); var video = document.getelementbyid('video'); var videocontrols = document.getelementbyid('video-controls'); as mentioned earlier, the browser's default controls now need to be disabled, and the custom controls need to be displayed: //
hide the default controls video.controls = false; // display the user defined video controls videocontrols.style.display = 'block'; with that done, a variable pointing to each of the buttons is now required: var playpause = document.getelementbyid('playpause'); var stop = document.getelementbyid('stop'); var mute = document.getelementbyid('mute'); var volinc = document.getelementbyid('volinc'); va...
<button>: The Button element - HTML: Hypertext Markup Language
example <button name="favorite"> <svg aria-hidden="true" viewbox="0 0 10 10"><path d="m7 9l5 8 3 9v6l1 4h3l1-3 1 3h3l7 6z"/></svg> add to favorites </button> if you want to visually
hide the button's text, an accessible way to do so is to use a combination of css properties to remove it visually from the screen, but keep it parseable by assistive technology.
An overview of HTTP - HTTP
proxy and tunneling servers or clients are often located on intranets and
hide their true ip address from other computers.