Search completed in 1.76 seconds.
Color picker tool - CSS: Cascading Style Sheets
color
picker tool html <div id="container"> <div id="palette" class="block"> <div id="color-palette"></div> <div id="color-info"> <div class="title"> css color </div> </div> </div> <div id="
picker" class="block"> <div class="ui-color-
picker" data-topic="
picker" data-mode="hsl"></div> <div id="
picker-samples" sample-id="master"></div> <div id="controls"> <div id="delete"> <div id="trash-can"></div> </div> <div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-...
...info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color
picker tool */ .ui-color-
picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-
picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-
picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-
picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/
picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, rgba(0,...
...%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-
picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), ...
...And 50 more matches
nsIFilePicker
widget/nsifile
picker.idlscriptable the file
picker component is used to display standard user interface for selecting files and directories, as well as for selecting destinations for, and naming, new files.
... inherits from: nsisupports last changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) implemented by: @mozilla.org/file
picker;1.
... to create an instance, use: var file
picker = components.classes["@mozilla.org/file
picker;1"] .createinstance(components.interfaces.nsifile
picker); method overview void appendfilter(in astring title, in astring filter); void appendfilters(in long filtermask); void init(in nsidomwindow parent, in astring title, in short mode); void open(in nsifile
pickershowncallback afile
pickershowncallback); short show(); obsolete since gecko 57.0 attributes attribute type description addtorecentdocs boolean if true, the file is added to the operating system's "recent documents" list (if the operating system has one; nothing happens if there is no such concept on the user's platform).
...And 16 more matches
datepicker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a date
picker allows the user to enter a date.
... normal - a date
picker with three fields for entering the year, month and date.
... grid - a date
picker with a calendar grid for selecting a date.
...And 14 more matches
colorpicker - Archive of obsolete content
attributes disabled, color, onchange, preference, tabindex, type properties accessibletype, color, disabled, open, tabindex, value examples <color
picker/> attributes disabled type: boolean indicates whether the element is disabled or not.
... type type: string if this attribute is not present, the color
picker is displayed inside the window.
... if this is set to the text button, the color
picker is displayed as a button.
...And 2 more matches
timepicker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the time
picker is used to allow the user to enter a time.
...to avoid this, you can use the workaround described here, i.e., use window.settimeout(actual-event-handler-function, 0); to queue up your event handler to run after the rest of the
picker's change event handlers.
... 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 <time
picker value="12:05"/> attributes disabled type: boolean indicates whether the element is disabled or not.
...And 2 more matches
datepicker.type - Archive of obsolete content
« xul reference home type type: one of the values below you can set the type attribute to one of the values below to specify the type of date
picker to use normal a date
picker with three fields for entering the year, month and date.
... grid a date
picker that displays a calendar grid where one month is shown at a time.
... popup a date
picker with three entry fields but an additional dropdown button, which, when pressed, will display a popup calendar grid.
colorpicker.type - Archive of obsolete content
« xul reference home type type: string if this attribute is not present, the color
picker is displayed inside the window.
... if this is set to the text button, the color
picker is displayed as a button.
hidecolumnpicker - Archive of obsolete content
« xul reference home hidecolumn
picker 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.
... when set to true, the column
picker will be hidden.
nsIUserCertPicker
security/manager/ssl/public/nsiusercert
picker.idlscriptable please add a summary to this article.
Linear-gradient Generator - CSS: Cascading Style Sheets
ctive point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-
picker" data-topic="
picker"></div> </div> <div class="section"> <div class="title"> active axis </div> <div class="property"> <div class="name"> axis unit </div> <div class="ui-dropdown" data-topic="axis-unit" data-selected="1"> <div data-value='px'> pixels (px) </div> ...
... <div id="gradient-axes"></div> <div id="gradient-order"></div> </div> </div> </div> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color
picker tool */ .ui-color-
picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-
picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-
picker ...
....picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-
picker .picking-area { background: url("images/
picker_mask.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-satu...
...And 33 more matches
Index - Archive of obsolete content
811 color
picker.type xul attributes, xul reference no summary!
... 832 date
picker.type xul attributes, xul reference no summary!
... 833 date
picker.value xul attributes, xul reference no summary!
...And 15 more matches
Index - Archive of obsolete content
64 color
picker.type xul attributes, xul reference no summary!
... 85 date
picker.type xul attributes, xul reference no summary!
... 86 date
picker.value xul attributes, xul reference no summary!
...And 14 more matches
Box-shadow generator - CSS: Cascading Style Sheets
</div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="wrap-left"> <div class="color
picker category"> <div class="title"> </div> <div id="color
picker" class="group"> <div id="gradient" class="gradient"> <div id="gradient_
picker"> </div> </div> <div id="hue" data-topic="hue" class="hue"> <div id="hue_selector"> </div> </div> ...
...left { width: 30%; } .wrap-right { width: 70%; } } #controls { color: #444; margin: 10px 0 0 0; } #controls .category { width: 500px; margin: 0 auto 20px; padding: 0; } #controls .category .title { width: 100%; height: 1.5em; line-height: 1.5em; color: #aaa; text-align: right; } #controls .category > .group { border: 1px solid #ccc; border-radius: 3px; } /** * color
picker */ @media (min-width: 960px) { #controls .color
picker { width: 420px; } } @media (max-width: 959px) { #controls .color
picker { width: 210px; } } #color
picker { width: 100%; margin: 0 auto; } #color
picker .gradient { width: 200px; height: 200px; margin: 5px; background: url("https://mdn.mozillademos.org/files/5707/
picker_mask_200.png"); background: -moz-linear-gradient(bottom, ...
...#000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; float: left; } #color
picker .hue { width: 200px; height: 30px; margin: 5px; background: url("https://mdn.mozillademos.org/files/5701/hue.png"); background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); float: left; } #color
picker .alpha { width: 200px; height: 30px; margin: 5px; border: 1px solid #ccc; float: left...
...And 14 more matches
Open and Save Dialogs - Archive of obsolete content
file
pickers a file
picker is a dialog that allows the user to select a file.
...the xpcom interface nsifile
picker is used to implement a file
picker.
... note that the file
picker only works from chrome urls.
...And 11 more matches
Places utilities for JavaScript
wrapnodes(string blob, string atype); nsitransaction maketransaction(string data, string type, nsinavhistoryresultnode container, int index, boolean copy); nsinavhistoryresult getfoldercontents(int afolderid, boolean aexcludeitems, boolean aexpandqueries); boolean showaddbookmarkui(nsiuri auri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashow
picker, boolean aloadinsidebar, string akeyword, string apostdata); boolean showminimaladdbookmarkui(nsiuri auri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashow
picker, boolean aloadinsidebar, string akeyword, string apostdata); boolean showaddlivemarkui(nsiuri afeeduri, nsiuri asiteuri, string atitle, string adescription, int adefaultinsertionpoint, boole...
...an ashow
picker); boolean showminimaladdlivemarkui(nsiuri afeeduri, nsiuri asiteuri, string atitle, string adescription, int adefaultinsertionpoint, boolean ashow
picker); boolean showminimaladdmultibookmarkui(array nsiuri aurilist); boolean showbookmarkproperties(int aid); boolean showfolderproperties(int aid); boolean showaddfolderui(string atitle, int adefaultinsertionpoint, boolean ashow
picker); array object getannotationsforuri(nsiuri auri); array object getannotationsforitem(int aitemid); void setannotationsforuri(nsiuri auri, object aannos); void setannotationsforuri(int aitemid, object aannos); getviewfornode(nsidomnode anode); void markpageastyped(string aurl); void markpageasfollow...
... showaddbookmarkui(auri, atitle, adescription, adefaultinsertionpoint, ashow
picker, aloadinsidebar, akeyword, apostdata) parameters [optional] auri an nsiuri object for which the "add bookmark" dialog is to be shown.
...And 11 more matches
<input type="color"> - HTML: Hypertext Markup Language
<input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color
picker interface or by entering the color into a text field in #rrggbb hexadecimal format.
... the element's presentation may vary substantially from one browser and/or platform to another—it might be a simple textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color
picker, or some kind of custom color
picker window.
... providing a default color you can update the simple example above to set a default value, so that the color well is pre-filled with the default color and the color
picker (if any) will also default to that color: <input type="color" value="#ff0000"> if you don't specify a value, the default is #000000, which is black.
...And 10 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
although historically it's been necessary to implement your own color
picker, html now provides support for browsers to provide one for your use through the <input> element, by using "color" as the value of its type attribute.
...after finishing up and picking the final color, the color
picker's value is displayed.
... on macos, you indicate that you've finalized selection of the color by closing the color
picker window.
...And 8 more matches
<input type="date"> - HTML: Hypertext Markup Language
<input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date
picker interface.
...set a minimum date of 2017-04-01 and a maximum date of 2017-04-30: <form> <label for="party">choose your preferred party date: <input type="date" name="party" min="2017-04-01" max="2017-04-30"> </label> </form> the result is that only days in april 2017 can be selected — the month and year parts of the textbox will be uneditable, and dates outside april 2017 can't be selected in tte
picker widget.
...however, you'll need to double-check the submitted results to ensure the value is within these dates, if the date
picker isn't fully supported on the user's device.
...And 8 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
clicking the down arrow on the right hand side brings up a date
picker to allow you to choose a date; you have to enter the time manually.
... the edge datetime-local control looks like the below; clicking the date and the time parts of the value bring up two separate
pickers for you, so you can easily set both the date and the time.
...0t16:30: <form> <label for="party">enter a date and time for your party booking:</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01t08:30" max="2017-06-30t16:30"> </form> the result here is that: only days in june 2017 can be selected — only the "days" part of the date value will be editable, and dates outside june can't be scrolled to in the date
picker widget.
...And 8 more matches
XUL controls - Archive of obsolete content
checkbox reference <color
picker> a control that may be used to select a color.
... <color
picker color="#ff0000"/> color
picker reference <color
picker type="button"> a specialized type of color
picker which shows only a button.
... pressing the button displays a color
picker popup window.
...And 6 more matches
Creating Reusable Modules - Archive of obsolete content
file
picker to let the user select a file we'll use nsifile
picker.
... the documentation for that interface includes an example which we can adapt like this: var {cc, ci} = require("chrome"); function promptforfile() { const nsifile
picker = ci.nsifile
picker; var fp = cc["@mozilla.org/file
picker;1"] .createinstance(nsifile
picker); var window = require("sdk/window/utils").getmostrecentbrowserwindow(); fp.init(window, "select a file", nsifile
picker.modeopen); fp.appendfilters(nsifile
picker.filterall | nsifile
picker.filtertext); var rv = fp.show(); if (rv == nsifile
picker.returnok || rv == nsifile
picker.returnreplace) { var file = fp.file; // get the path as string.
... var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } function promptforfile() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); const nsifile
picker = ci.nsifile
picker; var fp = cc["@mozilla.org/file
picker;1"] .createinstance(nsifile
picker); fp.init(window, "select a file", nsifile
picker.modeopen); fp.appendfilters(nsifile
picker.filterall | nsifile
picker.filtertext); var rv = fp.show(); if (rv == nsifile
picker.returnok || rv == nsifile
picker.returnreplace) { var file = fp.file; // get the path as string.
...And 5 more matches
Example and tutorial: Simple synth keyboard - Web APIs
the waveform
picker on the right side of the settings bar, we place a label and a <select> element named "waveform" whose options correspond to the available waveforms.
... let keyboard = document.queryselector(".keyboard"); let wave
picker = document.queryselector("select[name='waveform']"); let volumecontrol = document.queryselector("input[name='volume']"); references to elements we'll need access to are obtained: keyboard is the container element into which the keys will be placed.
... wave
picker is the <select> element used to choose the waveform to use for the notes.
...And 5 more matches
<input type="file"> - HTML: Hypertext Markup Language
for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="doc
picker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> capture the capture attribute value is a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.
... attribute description webkitdirectory a boolean indicating whether or not to only allow the user to choose a directory (or directories, if multiple is also present) webkitdirectory the boolean webkitdirectory attribute, if present, indicates that only directories should be available to be selected by the user in the file
picker interface.
...for example, a file
picker that needs content that can be presented as an image, including both standard image formats and pdf files, might look like this: <input type="file" accept="image/*,.pdf"> using file inputs a basic example <form method="post" enctype="multipart/form-data"> <div> <label for="file">choose file to upload</label> <input type="file" id="file" name="file" multiple> </div> <div> <button>s...
...And 5 more matches
<input type="month"> - HTML: Hypertext Markup Language
clicking the down arrow on the right hand side brings up a date
picker that lets you select the month and year.
... depending on what browser you are using, you might find that months outside the specified range might not be selectable in the month
picker (e.g.
...as an example, the month
picker on chrome for android looks like this: non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.
...And 5 more matches
<input type="time"> - HTML: Hypertext Markup Language
12-hour 24-hour edge the edge time control is somewhat more elaborate, opening up an hour and minute
picker with sliding reels.
... depending on what browser you're using, you might find that times outside the specified range might not even be selectable in the time
picker (e.g.
...for example, the time
picker on chrome for android looks like this: browsers that don't support time inputs gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.
...And 5 more matches
Basic native form controls - Learn web development
it is used for creating most types of form widgets including single line text fields, time and date controls, controls without text input like checkboxes, radio buttons, and color
pickers, and buttons.
...the value text for this attribute is also the fallback value if the value you specify for the type attribute is unknown by the browser (for example if you specify type="color" and the browser doesn't support native color
pickers).
... file
picker there is one last <input> type that came to us in early html: the file input type.
...And 4 more matches
<input type="week"> - HTML: Hypertext Markup Language
the edge week control is somewhat more elaborate, opening up week and year
pickers with sliding reels.
...for example, the week
picker on chrome for android looks like this: non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.
... the best way to deal with week/years in forms in a cross-browser way at the moment is to get the user to enter the week number and year in separate controls (<select> elements being popular; see below for an example), or use javascript libraries such as jquery date
picker.
...And 4 more matches
Forms related code snippets - Archive of obsolete content
date
picker (before implementing it in a working environment, please read the note about the const statement compatibility) <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>date
picker example - mdn</title> <script type="text/javascript"> /*\ |*| |*| date
picker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is released under the gnu public license, version 3 or later.
... |*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ (function () { function date
picker (otarget) { const otable = document.createelement("table"), ohrow = document.createelement("tr"), othead = document.createelement("thead"), ocapt = document.createelement("caption"), odecryear = document.createelement("span"), oincryear = document.createelement("span"), odecrmonth = document.createelement("span"), oincrmonth = document.createelement("span"); var nid = ainstances.length, oth; this.target = otarget; this.display = document.createelement("span"); this.current = new date(); this.container = otable; this.display.classname = sprefs + "-current-month"; this.id = nid; otable.classname = sprefs + "-calendar"; o...
...e.parentnode) { otable.parentnode.removechild(otable); return; } otable.style.zindex = nzindex++; otable.style.position = "absolute"; otable.style.left = otarget.offsetleft + "px"; otable.style.top = (otarget.offsettop + otarget.offsetheight) + "px"; otarget.parentnode.insertbefore(otable, otarget); }; ainstances.push(this); } date
picker.prototype.writedays = function () { const nendblanks = (this.current.getday() + bzeroismonday * 6) % 7, nend = amonthlengths[this.current.getmonth()] + nendblanks, ntotal = nend + ((7 - nend % 7) % 7); var otd, otr; if (this.otbody) { this.container.removechild(this.otbody); } this.otbody = document.createelement("tbody"); for (var nday, oday, ni...
...And 3 more matches
tree - Archive of obsolete content
relevant accessbility guidelines provide alternative access (for example, via menus) to column
picker and for header behaviors like sorting (these have no default keyboard access).
... attributes disablekeynavigation, disabled, editable, enablecolumndrag, flags, hidecolumn
picker, onselect, rows, seltype, statedatasource, tabindex, treelines properties accessibletype, builderview, columns, contentview, currentindex, disablekeynavigation, disabled, editingcolumn, editingrow, enablecolumndrag, firstordinalcolumn, inputfield, seltype, selstyle, tabindex, treeboxobject, view examples a tree with several columns <tree flex="1" rows="2"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> ...
... <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" hidecolumn
picker="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> <treechildren> <treeitem> <treerow> <treecell label="1"/> <treecell label="a"/> </treerow> </treeitem> <!-- make sure to set conta...
...And 2 more matches
Advanced form styling - Learn web development
also bear in mind that we've added some javascript to the page that lists the files selected by the file
picker, below the control itself.
... the only problem with file
pickers is that the button provided that you press to open the file
picker is completely unstyleable — it can't be sized or colored, and it won't even accept a different font.
...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-align: center; line-height: 1.5; } label[for="file"]:hover { background: linear-gradient(to bottom, #fff, #ddd); } label[for="file"]:active { box-shadow: inset 1px 1px 3px #ccc; } you can see the result of the above css styli...
...And 2 more matches
nsIFileView
toolkit/components/file
picker/public/nsifileview.idlscriptable this interface displays a list of files in a treebox.
...the nsifileview provides a configuration interface to @mozilla.org/file
picker/fileview;1 , which also implements nsitreeview so that it can be passed as a tree view.
... implemented by: @mozilla.org/file
picker/fileview;1.
...And 2 more matches
Using files from web applications - Web APIs
ment.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.
...tyle="display:none"> <button id="fileselect">select some files</button> the code that handles the click event can look like this: const fileselect = document.getelementbyid("fileselect"), fileelem = document.getelementbyid("fileelem"); fileselect.addeventlistener("click", function (e) { if (fileelem) { fileelem.click(); } }, false); you can style the new button for opening the file
picker as you wish.
... using a label element to trigger a hidden file input element to allow opening the file
picker without using javascript (the click() method), a <label> element can be used.
...And 2 more matches
HTML attribute: accept - HTML: Hypertext Markup Language
for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="doc
picker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> whereas if you're accepting a media file, you may want to be include any format of that media type: <input type="file" id="soundfile" accept="audio/*"> <input type="file" id="videofile" accept="video/*"> <input type="file" id="imagefile" accept="image/*"> the accept attribute does...
... examples when set on a file input type, the native file
picker that opens up should only enable selecting files of the correct file type.
...for example, a file
picker that needs content that can be presented as an image, including both standard image formats and pdf files, might look like this: <input type="file" accept="image/*,.pdf"> using file inputs a basic example <form method="post" enctype="multipart/form-data"> <div> <label for="file">choose file to upload</label> <input type="file" id="file" name="file" multiple> </div> <div> <button>s...
...And 2 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input type="checkbox" name="checkbox"/> color a control for specifying a color; opening a color
picker when active in supporting browsers.
...opens a date
picker or numeric wheels for year, month, day when active in supporting browsers.
...opens a date
picker or numeric wheels for date- and time-components when active in supporting browsers.
...And 2 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
lockpref("mail.accountmanager.accounts", "account1,account2"); lockpref("mail.accountmanager.defaultaccount", "account2"); lockpref("mail.accountmanager.localfoldersserver", "server1"); lockpref("mail.identity.id1.directoryserver", "ldap_2.servers.ldapint"); lockpref("mail.identity.id1.draft_folder", "imap://" + env_user + "@imap-int.int-evry.fr/drafts"); lockpref("mail.identity.id1.drafts_folder_
picker_mode", "0"); lockpref("mail.identity.id1.fcc_folder", "imap://" + env_user + "@imap-int.int-evry.fr/sent"); lockpref("mail.identity.id1.fcc_folder_
picker_mode", "0"); lockpref("mail.identity.id1.organization", "int evry france"); lockpref("mail.identity.id1.overrideglobal_pref", true); lockpref("mail.identity.id1.reply_to", ""); //imap lockpref("mail.server.server2.hostname", "imap-int.int-evry.
...cached_connections", 5); //lockpref("mail.server.server2.name", "jehan.procaccia@int-evry.fr"); lockpref("mail.server.server2.type", "imap"); lockpref("mail.server.server2.username", env_user); //smtp lockpref("mail.identity.id1.smtpserver", "smtp1"); lockpref("mail.identity.id1.stationery_folder", "imap://" + env_user + "@imap-int.int-evry.fr/templates"); lockpref("mail.identity.id1.tmpl_folder_
picker_mode", "0"); lockpref("mail.identity.id1.valid", true); //smtp general lockpref("mail.smtp.defaultserver", "smtp1"); lockpref("mail.smtpserver.smtp1.auth_method", 0); lockpref("mail.smtpserver.smtp1.hostname", "smtp-int.int-evry.fr"); lockpref("mail.smtpserver.smtp1.port", 25); lockpref("mail.smtpserver.smtp1.try_ssl", 0); lockpref("mail.smtpserver.smtp1.username", ""); lockpref("mail.smtpserver...
...1,account2,account3"); lockpref("mail.accountmanager.defaultaccount", "account1"); //imap lockpref("mail.server.server1.hostname", "imap-int.int-evry.fr"); lockpref("mail.server.server1.type", "imap"); lockpref("mail.server.server1.login_at_startup", true); lockpref("mail.identity.id1.draft_folder", "imap://" + env_user + "@imap-int.int-evry.fr/drafts"); lockpref("mail.identity.id1.drafts_folder_
picker_mode", "0"); lockpref("mail.identity.id1.fcc_folder", "imap://" + env_user + "@imap-int.int-evry.fr/sent"); lockpref("mail.identity.id1.fcc_folder_
picker_mode", "0"); lockpref("mail.identity.id1.stationery_folder", "imap://" + env_user + "@imap-int.int-evry.fr/templates"); lockpref("mail.identity.id1.tmpl_folder_
picker_mode", "0"); lockpref("mail.identity.id1.valid", true); lockpref("mail.identit...
...1,account2,account3"); lockpref("mail.accountmanager.defaultaccount", "account1"); //imap lockpref("mail.server.server1.hostname", "imap-int.int-evry.fr"); lockpref("mail.server.server1.type", "imap"); lockpref("mail.server.server1.login_at_startup", true); lockpref("mail.identity.id1.draft_folder", "imap://" + env_user + "@imap-int.int-evry.fr/drafts"); lockpref("mail.identity.id1.drafts_folder_
picker_mode", "0"); lockpref("mail.identity.id1.fcc_folder", "imap://" + env_user + "@imap-int.int-evry.fr/sent"); lockpref("mail.identity.id1.fcc_folder_
picker_mode", "0"); lockpref("mail.identity.id1.stationery_folder", "imap://" + env_user + "@imap-int.int-evry.fr/templates"); lockpref("mail.identity.id1.tmpl_folder_
picker_mode", "0"); lockpref("mail.identity.id1.valid", true); lockpref("mail.identit...
Binding Implementations - Archive of obsolete content
for example, given a binding with an implementation color
pickergrid that derives from an implementation color
picker where the two implementations both specify the setcolor method, a caller could invoke color
picker's method with the following syntax: ...
... // myelement is a color
pickergrid myelement.color
picker.setcolor(); // calls the color
picker method.
... myelement.setcolor(); // calls the color
pickergrid method.
... myelement.basebinding.setcolor(); // calls the color
picker method.
Numeric Controls - Archive of obsolete content
date and time entry fields the date
picker and time
picker elements may be used to allow the user to enter dates and times.
...<date
picker value="2004-03-24"/> <time
picker value="15:30:00"/> the value attribute is used to set the default value; if this attribute is omitted, the field will be initially set to the current date or time.
...while the time
picker only comes is one style, the date
picker has three different variations.
...<date
picker type="popup"/> « previousnext » ...
XUL accessibility guidelines - Archive of obsolete content
the column
picker and column headers in xul trees are not keyboard accessible, consistent with the standard tree behavior on most contemporary operating systems.
...because column headers and the column
picker, in the upper right hand corner of the tree, can not receive focus, they are not operable with a keyboard.
... trees keyboard functionality is provided for inaccessible features such as the column
picker or added features such as column sorting.
... keyboard functionality is not provided for column
picker and other features.
treecol - Archive of obsolete content
attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumn
picker, 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.
... ignoreincolumn
picker type: boolean if true, the column does not appear in the column
picker.
... the attribute also controls whether the column
picker allows the user to deselect this column.
...you should still specify a label for use in the column
picker if ignoreincolumn
picker is not true and hidecolumn
picker is not true on the tree.
Dialogs in XULRunner - Archive of obsolete content
xul supports native implementations of file
pickers (mozilla terminology for file open and save dialogs).
... newer releases will allow using preferences to switch to a xul emulation file
picker, if you want to.
... the xul file
pickers are xpcom components and must be instantiated before using, like this: function dofileopen() { /* see: http://developer.mozilla.org/en/docs/xul_tutorial:open_and_save_dialogs */ var nsifile
picker = components.interfaces.nsifile
picker; var fp = components.classes["@mozilla.org/file
picker;1"].createinstance(nsifile
picker); fp.init(window, "open file", nsifile
picker.modeopen); fp.appendfilters(nsifile
picker.filtertext | nsifile
picker.filterall); var res = fp.show(); if (res == nsifile
picker.returnok) { var thefile = fp.file; alert(thefile.leafname); // --- do something with the file here --- } } xul does not currently support any other common dialogs.
... see also dialog xul tutorial:creating dialogs nsifile
picker xul tutorial:open and save dialogs « previous original document information author: mark finkle last updated date: october 2, 2006 ...
The HTML5 input types - Learn web development
date and time
pickers gathering date and time values has traditionally been a nightmare for web developers.
... the reference pages linked to above provide suggestions on how to program fallbacks for non-supporting browsers; another option is to consider using a javascript library to provide a date
picker.
... most modern frameworks have good components available to provide this functionality, and there are standalone libraries available too (see top date
picker javascript plugins and libraries for some suggestions).
... color
picker control colors are always a bit difficult to handle.
Accessibility Inspector - Firefox Developer Tools
accessibility
picker like the element
picker button on the page inspector, the accessibility tab's element
picker button allows you to hover and select ui items on the current page highlight objects in the accessibility tree.
... the accessibility tab element
picker looks slightly different from the page inspector html pane
picker, as shown below: when you "perform a pick", you see the accessibility object highlighted in the accessibility tree, and the
picker is then deactivated.
... note, however, that if you hold the shift key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the
picker does not get cancelled) until you release the shift key.
... when the
picker is activated, you can also deactivate it by pressing the
picker button a second time, or pressing the esc key.
HTML documentation index - HTML: Hypertext Markup Language
121 <input type="color"> color
picker, element, form input, forms, html, html forms, html input, input, reference, color <input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color
picker interface or by entering the color into a text field in #rrggbb hexadecimal format.
... 122 <input type="date"> date, date
picker, element, form inputs, html, html forms, input, input element, input type, reference <input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date
picker interface.
... 126 <input type="file"> directory
picker, file, file
picker, files, form input, html, html forms, input type, reference, type <input> elements with type="file" let the user choose one or more files from their device storage.
... 129 <input type="month"> date
picker, element, form input, forms, html, html forms, html input, input, input element, input type, number, reference, month <input> elements of type month create input fields that let the user enter a month and year allowing a month and year to be easily entered.
simple-prefs - Archive of obsolete content
{ "type": "string", "name": "monstername", "value": "kraken", "title": "monster name" } color displayed as a color
picker and stores a string in the #123456 format.
... { "type": "color", "name": "highlightcolor", "value": "#6a5acd", "title": "highlight color" } file displayed as a "browse" button that opens a file
picker and stores the full path and name of the file selected.
... { "type": "file", "name": "myfile", "title": "select a file" } directory displayed as a "browse" button that opens a directory
picker and stores the full path and name of the directory selected.
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll color
picker column columns commandset command conditions content date
picker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script...
... scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) time
picker titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple vbox where window wizard wizardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- ...
...ar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox color
picker date
picker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) time
picker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stac...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
caption see groupbox checkbox <checkbox label='<!--label text-->' /> color
picker <color
picker type="button" palettename="standard" /> color
picker appears to read color values out if the color
picker can get focus in the first place.
... tabpanel see tabbox tabpanels see tabbox tabs see tabbox textbox <label control="inputid"> <!--first name:--> </label> <textbox id='inputid'> tree <tree hidecolumn
picker="true" > <treecols> <treecol label="cats" primary="true"/> </treecols> <treechildren> <treeitem container="true" open="true"> <treerow> <treecell label="<!--male-->" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="<!--aramis-->" /> </treerow> </treeitem> <treeitem> <treerow...
...> <treecell label="<!--fergus-->" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> there is no keyboard access to the column
picker (the widget visually to the right of the column headers) or the column headers themselves (for sorting by column).
CSS property compatibility table for form controls - Learn web development
o no text-align no no text-decoration no no text-indent no no text-overflow no no text-shadow no no text-transform no no border and background background no no border-radius no no box-shadow no no file
picker see the file input type.
... date
pickers see the date and time input types.
... no text-align no no text-decoration no no text-indent no no text-overflow no no text-shadow no no text-transform no no border and background background no no border-radius no no box-shadow no no color
pickers see the color input type: property n t note css box model width yes yes height no[1] yes opera handles this like a select widget with the same restriction.
Handling common accessibility problems - Learn web development
complex functionality one of the main areas problematic for accessibility is complex apps that involve complicated form controls (such as date
pickers) and dynamic content that is updated often and incrementally.
... vo + left cursor, vo + right cursor (when inside some horizontal options, such as a date or time
picker) move between options.
... vo + up cursor, vo + down cursor (when inside some horizontal options, such as a date or time
picker) change the current option.
browser.download.lastDir.savePerSite
browser.download.lastdir.savepersite controls whether the directory preselected in the file
picker for saving a file download is being remembered on a per-website (host) base.
... type:boolean default value:true exists by default: no application support:firefox 11.0 status: active; last updated 2012-02-15 introduction: pushed to nightly on 2011-12-11 bugs: bug 702748 values true (default) the last used directory for the website (host) serving the file for download will be preselected in the file
picker.
... false the last used directory for any download (stored in browser.download.lastdir) will be the preselected directory in the file
picker.
Index
655 nsifile
picker file i/o, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference implemented by: @mozilla.org/file
picker;1.
... 661 nsifileview interfaces, interfaces:scriptable, xpcom, xpcom interface reference the nsifileview provides a configuration interface to @mozilla.org/file
picker/fileview;1 , which also implements nsitreeview so that it can be passed as a tree view.
... 1053 nsiusercert
picker cryptography, interfaces, interfaces:scriptable, needscontent, xpcom interface reference no summary!
<input type="button"> - HTML: Hypertext Markup Language
] { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom: 5px; } var canvas = document.queryselector('.mycanvas'); var width = canvas.width = window.innerwidth; var height = canvas.height = window.innerheight-85; var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); var color
picker = document.queryselector('input[type="color"]'); var size
picker = document.queryselector('input[type="range"]'); var output = document.queryselector('.output'); var clearbtn = document.queryselector('input[type="button"]'); // covert degrees to radians function degtorad(degrees) { return degrees * math.pi / 180; }; // update size
picker output value size
picker.oninput = function() { output.
...textcontent = size
picker.value; } // store mouse pointer coordinates, and whether the button is pressed var curx; var cury; var pressed = false; // update mouse pointer coordinates document.onmousemove = function(e) { curx = (window.event) ?
...document.documentelement.scrolltop : document.body.scrolltop); } canvas.onmousedown = function() { pressed = true; }; canvas.onmouseup = function() { pressed = false; } clearbtn.onclick = function() { ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); } function draw() { if(pressed) { ctx.fillstyle = color
picker.value; ctx.beginpath(); ctx.arc(curx, cury-85, size
picker.value, degtorad(0), degtorad(360), false); ctx.fill(); } requestanimationframe(draw); } draw(); specifications specification status comments html living standardthe definition of '<input type="button">' in that specification.
Dialogs and Prompts - Archive of obsolete content
displaying the standard "open file"/"save file"/"select folder" dialogs nsifile
picker prompts and the prompt service now that you understand dialogs, let's examine prompts.
... for file/folder
picker dialogs, see nsifile
picker.
Hidden prefs - Archive of obsolete content
mail composition "other header" pref ("mail.compose.other.header") the format for this a comma delimited list of mail headers, like "approved,x-no-archive" an example for your prefs.js would be: user_pref("mail.compose.other.header", "approved"); this will cause "approved" to show up in the compose window address
picker, under to:, cc:, bcc:, newsgroup:, etc.
...| mail & newsgroups | addressing" "other compose header" pref from mailnews.js: // you can specify a comma delimited list of optional headers // this will show up in the address
picker in the compose window // examples: "x-face" or "approved" pref("mail.compose.other.header", "approved,x-no-archive"); ...
Venkman Introduction - Archive of obsolete content
the column
picker for this view (the box on the top right) can be used to display a length column.
...type icons the column
picker for this view (the box on the top right) can be used to display type and flags columns.
Attribute (XUL) - Archive of obsolete content
sablehistory 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 hidecolumn
picker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumn
picker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheigh...
...tab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase
pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortact...
Theme changes in Firefox 2 - Archive of obsolete content
changes in browser bookmarks/addbookmark.css the addbookmarks.css file should have the following lines added to the top: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); some microsummary-related css also needs to be added, to provide formatting for the microsummary
picker.
... these are used to make the
picker look like a regular text box instead of like an editable menu list when there are no microsummaries available.
XForms Input Element - Archive of obsolete content
(xhtml/xul) date
picker - used to represent data of type xsd:date (xhtml/xul) calendar - used to represent data of type xsd:date when appearance attribute also has the value 'full' (xhtml/xul) month list - used to represent data of type xsd:gmonth (xhtml only) days list - used to represent data of type xsd:gday (xhtml only) number field - used to represent data of numeric type (fx 3.0 only, xul only) more detail about ...
... date
picker this widget is similar to a combobox.
XForms Upload Element - Archive of obsolete content
visually, the upload control is shown as a file
picker dialog that hides disallowed (filtered) file types.
... representations the xforms upload element is represented by visually combining three widgets: a text field that shows the uri of the selected file, a button to open the file
picker dialog which allows the user to select a file, and a button to clear the text field and the reference to the file from the bound node (xhtml only).
Mozilla XForms User Interface - Archive of obsolete content
for example, a xforms input control may appear as a text field or as a date
picker depending on whether it is bound to a xsd:string type or a xsd:date type.
... checkbox - used for boolean instance data date
picker - default representation for date data types.
Drawing graphics - Learn web development
se; } when the "clear canvas" button is pressed, we run a simple function that clears the whole canvas back to black, the same way we've seen before: clearbtn.onclick = function() { ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); } the drawing loop is pretty simple this time around — if pressed is true, we draw a circle with a fill style equal to the value in the color
picker, and a radius equal to the value set in the range input.
... function draw() { if(pressed) { ctx.fillstyle = color
picker.value; ctx.beginpath(); ctx.arc(curx, cury-85, size
picker.value, degtorad(0), degtorad(360), false); ctx.fill(); } requestanimationframe(draw); } draw(); note: the <input> range and color types are supported fairly well across browsers, with the exception of internet explorer versions less than 10; also safari doesn't yet support color.
Localizing with Mozilla Translator
|-- browser-region | `-- region.properties `-- ab-cd |-- alerts | `-- notificationnames.properties |-- autoconfig | `-- autoconfig.properties |-- cookie | |-- cookieacceptdialog.dtd | `-- cookieacceptdialog.properties |-- global | |-- about.dtd | |-- app
picker.dtd .
...- locales | |-- en-us | | |-- chrome | | | |-- alerts | | | | `-- notificationnames.properties | | | |-- autoconfig | | | | `-- autoconfig.properties | | | |-- cookie | | | | |-- cookieacceptdialog.dtd | | | | `-- cookieacceptdialog.properties | | | |-- global | | | | |-- about.dtd | | | | |-- app
picker.dtd .
nsIMessenger
aasfile if true a file
picker is spawned with the option save the message as html, text, or eml.
... saveallattachments() launches a file
picker and saves all attachments listed in an array.
nsIZipWriter
what it does is shows a file
picker dialog and asks you to pick a folder.
... utils} = components; var zw = cc['@mozilla.org/zipwriter;1'].createinstance(ci.nsizipwriter); var pr = {pr_rdonly: 0x01, pr_wronly: 0x02, pr_rdwr: 0x04, pr_create_file: 0x08, pr_append: 0x10, pr_truncate: 0x20, pr_sync: 0x40, pr_excl: 0x80}; //https://developer.mozilla.org/docs/pr_open#parameters var fu = cu.import('resource://gre/modules/fileutils.jsm').fileutils; var fp = cc['@mozilla.org/file
picker;1'].createinstance(ci.nsifile
picker); fp.init(window, 'select directory to compile', ci.nsifile
picker.modegetfolder); fp.appendfilters(ci.nsifile
picker.filterall | ci.nsifile
picker.filtertext); var rv = fp.show(); if (rv == ci.nsifile
picker.returnok) { var dir = fp.file; //dir must exist, as the user selected it.
XPCOM Interface Reference
extensionmanagernsiexternalhelperappservicensiexternalprotocolservicensiexternalurlhandlerservicensiftpchannelnsiftpeventsinknsifactorynsifavicondatacallbacknsifaviconservicensifeednsifeedcontainernsifeedelementbasensifeedentrynsifeedgeneratornsifeedpersonnsifeedprocessornsifeedprogresslistenernsifeedresultnsifeedresultlistenernsifeedtextconstructnsifilensifileinputstreamnsifileoutputstreamnsifile
pickernsifileprotocolhandlernsifilespecnsifilestreamsnsifileurlnsifileutilitiesnsifileviewnsifocusmanagernsiformhistory2nsiframeloadernsiframeloaderownernsiframemessagelistenernsiframemessagemanagernsiframescriptloadernsigsettingscollectionnsigsettingsservicensigeolocationprovidernsigeolocationupdatensiglobalhistorynsiglobalhistory2nsiglobalhistory3nsihtmleditornsihttpheaderlistenernsihapticfeedbacknsih...
...objectnsitreecolumnnsitreecolumnsnsitreecontentviewnsitreeselectionnsitreeviewnsiurinsiurifixupnsiurifixupinfonsiurlnsiurlformatternsiurlparsernsiutf8converterservicensiutf8stringenumeratornsiuuidgeneratornsiupdatensiupdatechecklistenernsiupdatecheckernsiupdateitemnsiupdatemanagernsiupdatepatchnsiupdatepromptnsiupdatetimermanagernsiuploadchannelnsiuploadchannel2nsiurllistmanagercallbacknsiusercert
pickernsiuserinfonsivariantnsiversioncomparatornsiweakreferencensiwebbrowsernsiwebbrowserchromensiwebbrowserchrome2nsiwebbrowserchrome3nsiwebbrowserchromefocusnsiwebbrowserfindnsiwebbrowserfindinframesnsiwebbrowserpersistnsiwebcontenthandlerregistrarnsiwebnavigationnsiwebnavigationinfonsiwebpagedescriptornsiwebprogressnsiwebprogresslistenernsiwebprogresslistener2nsiwebsocketchannelnsiwebsocketlistenerns...
All keyboard shortcuts - Firefox Developer Tools
ab shift + tab shift + tab move line(s) up alt + up alt + up alt + up move line(s) down alt + down alt + down alt + down comment/uncomment line(s) ctrl + / cmd + / ctrl + / page inspector command windows macos linux inspect element ctrl + shift + c cmd + shift + c ctrl + shift + c node
picker these shortcuts work while the node
picker is active.
... command windows macos linux select the element under the mouse and cancel
picker mode click click click select the element under the mouse and stay in
picker mode shift+click shift+click shift+click html pane these shortcuts work while you're in the inspector's html pane.
Inspect and select colors - Firefox Developer Tools
if you click on the color sample, you'll see a color
picker popup, enabling you to change the color: if the color is a foreground color, the color
picker tells you whether its contrast with the background color meets accessibility guidelines.
... the color
picker includes an eyedropper icon: clicking this icon enables you to use the eyedropper to select a new color for the element from the page: clicking the color sample while holding down the shift key changes the color format: ...
Select an element - Firefox Developer Tools
with the node
picker to select an element in the page itself, activate the "node
picker" by clicking its icon: (also called the select element icon).
...click the element to select it: starting in firefox 52, if you shift + click the element, then it is selected but the
picker stays active.
Page inspector keyboard shortcuts - Firefox Developer Tools
command windows macos linux inspect element ctrl + shift + c cmd + shift + c ctrl + shift + c node
picker these shortcuts work while the node
picker is active.
... command windows macos linux select the element under the mouse and cancel
picker mode click click click select the element under the mouse and stay in
picker mode shift+click shift+click shift+click html pane these shortcuts work while you're in the inspector's html pane.
File.webkitRelativePath - Web APIs
example in this example, a directory
picker is presented which lets the user choose one or more directories.
... html content <input type="file" id="file
picker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("file
picker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitrelativepath' in that specification.
HTMLInputElement.webkitdirectory - Web APIs
example in this example, a directory
picker is presented which lets the user choose one or more directories.
... html content <input type="file" id="file
picker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("file
picker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitdirectory' in that specification.
File I/O - Archive of obsolete content
creating temporary files to create a temporary file, use nsifile.createunique(): components.utils.import("resource://gre/modules/fileutils.jsm"); var file = fileutils.getfile("tmpd", ["suggestedname.tmp"]); file.createunique(components.interfaces.nsifile.normal_file_type, fileutils.perms_file); // do whatever you need to the created file alert(file.path); user input via nsifile
picker the file
picker component, nsifile
picker, can be used to open standard open / save dialogs.
Inline options - Archive of obsolete content
setting types there are several types of <setting>s, each with a different type attribute: type attribute displayed as preference stored as bool checkbox boolean boolint checkbox integer (use the attributes on and off to specify what values to store) integer textbox integer string textbox string color color
picker string (in the #123456 format) file browse button and label string directory browse button and label string menulist menulist dependent on the menu item values radio radio buttons dependent on the radio values control button no pref stored the pref attribute should have the full name of the preference to be store...
Source code directories overview - Archive of obsolete content
components contains the alerts, autocomplete, command line interface, console, cookies, download manager, file
picker, history, password manager, typeaheadfind, view source, etc.
type - Archive of obsolete content
see button.type browser.type color
picker.type date
picker.type editor.type listcell.type listitem.type menuitem.type notification.type prefwindow.type query.type script.type textbox.type toolbarbutton.type treecol.type ...
Deprecated and defunct markup - Archive of obsolete content
e text and images before <button>) <toolbarpaletteitem> required to embed non-buttons in customisable toolbars --neil 03 march 2011 <treebody> (old/experimental and unsupported xul tags) lives on as the internal name for the ancestor <treechildren> element --neil 03 march 2011 <treecaption> (old/experimental and unsupported xul tags) <treecolgroup> (former name for <treecols> <treecol
picker> (internal use only; part of xbl for <tree>) <treefoot> (old/experimental and unsupported xul tags) <treeindentation> (old/experimental and unsupported xul tags) was a part of the old <tree> that predated <outliner> that was not converted to <listbox>--neil 03 march 2011 <treeicon> (old/experimental and unsupported xul tags) <treerows> (internal use only; part of xbl for <tree>) a...
accessibleType - Archive of obsolete content
possible values are: constant value xulalert 1001 xulbutton 1002 xulcheckbox 1003 xulcolor
picker 1004 xulcolor
pickertile 1005 xulcombobox 1006 xuldropmarker 1007 xulgroupbox 1008 xulimage 1009 xullink 100a xullistbox 100b xullistcell 1026 xu...
XUL accessibility tool - Archive of obsolete content
or and pixel sizings (aaronlev) error: duplicate accesskey in a dialog (already have this for menus) (aaronlev) error: form control without accesskey (aaronlev) warning: accesskey as lowercase letter with descender (underlined g,j,y,q,p are hard to read, not recommended) (aaronandy) list of things to check manually, such as a list oftrees in the document (make sure they have accessible column
picker equivs) or a list of toolbarbuttons (make sure they have accessible alternatives).
elements - Archive of obsolete content
a action arrowscrollbox b bbox binding bindings box broadcaster broadcasterset button browser c checkbox caption color
picker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner ...
treecols - Archive of obsolete content
attributes
pickertooltiptext properties accessibletype examples (example needed) attributes
pickertooltiptext type: string the text for the tooltip on the column
picker.
What XULRunner Provides - Archive of obsolete content
extension manager file
picker (uses native os file
picker as appropriate) find toolbar helper app dialog/ui security ui (maintenance of ssl keychains, etc) embedding apis the following embedding apis are provided by xulrunner: cross-platform embedding (xre_initembedding) javaxpcom embedding gtkmozembed (linux only) activex control (windows only) (not yet complete) obsolete since gecko 7.0 nsview-based-widget ...
CSS - Archive of obsolete content
however, those elements' ancestors have this pseudo-class applied to them.:-moz-system-metric()this page was auto-generated because a user created a sub-page to this page.::-ms-browsethe ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file
picker of <input type="file">.::-ms-checkthe ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">.::-ms-clearthe ::-ms-clear css pseudo-element creates a clear button at the edge of an <input type="text"> text control that clears the current value.
HTML forms in legacy browsers - Learn web development
for example, the input of color type looks different in safari, chrome and firefox browser, but the color
picker widget is the same in all browsers on a device as it opens up the operating system's native color
picker.
How to structure a web form - Learn web development
the last one is an <input> element of type date, for entering the expiration date of the card; this one will come up with a date
picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers.
Styling web forms - Learn web development
the real problem with all these controls is that they have a very complex structure, and beyond some basic styling (such as changing the width or margin of the control) you generally don't have the ability to style the controls' internal components (such as the date
picker calendar, or the button on the <select> that causes the options list to display) making up those widgets.
Handling common HTML and CSS problems - Learn web development
for cross browser forms, it is probably better to rely on simple form elements, or selectively use advanced form elements only in supporting browsers, or using a library that provides decent cross browser form widgets, such as jquery ui or bootstrap date
picker.
Gecko info for Windows accessibility vendors
role_buttondropdown not supported, state_haspopup used with role_button instead role_buttonmenu not supported, state_haspopup used with role_button instead role_buttondropdowngrid supported for xul <color
picker> role_pagetablist xul: <tab> dhtml: role="wairole:tabs" "abbr", "acronym", "blockquote", "dd", "dl", "dt", "form", "frame", "h1", "h2", "h3", "h4", "h5", "h6", "iframe", "q", "tbody", "tfoot", "thead" html tag mirrors the role string "bullet" indirectly created for bullets when <ol>...
Limitations of frame scripts
for example: nsipromptservice nsifile
picker nsixul* <need more examples> services some services will not work in frame scripts.
Limitations of frame scripts
for example: nsipromptservice nsifile
picker nsixul* <need more examples> services some services will not work in frame scripts.
Preference reference
changes require an application restart.browser.download.lastdir.savepersitebrowser.download.lastdir.savepersite controls whether the directory preselected in the file
picker for saving a file download is being remembered on a per-website (host) base.
nsIAccessibleProvider
xul controls constants constant value description xulalert 0x00001001 xulbutton 0x00001002 xulcheckbox 0x00001003 xulcolor
picker 0x00001004 xulcolor
pickertile 0x00001005 xulcombobox 0x00001006 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e xulmenupopup 0x0000100f xul...
nsIMsgFolder
attribute type description supportsoffline boolean readonly offlinestoreoutputstream nsioutputstream readonly offlinestoreinputstream nsiinputstream readonly retentionsettings nsimsgretentionsettings downloadsettings nsimsgdownloadsettings sortorder long used for order in the folder pane, folder
pickers, etc.
nsIMsgIdentity
signaturedate long escapedvcard astring dofcc boolean fccfolder astring fccfolder
pickermode astring fccreplyfollowsparent boolean draftsfolder
pickermode astring tmplfolder
pickermode astring bccself boolean note: don't call bccself, bccothers, and bcclist directly, they are only used for migration and backward compatability.
nsMsgPriorityValue
[scriptable, uuid(94c0d8d8-2045-11d3-8a8f-0060b0fc04d2)] interface nsmsgpriority { const nsmsgpriorityvalue notset = 0; const nsmsgpriorityvalue none = 1; const nsmsgpriorityvalue lowest = 2; const nsmsgpriorityvalue low = 3; const nsmsgpriorityvalue normal = 4; const nsmsgpriorityvalue high = 5; const nsmsgpriorityvalue highest = 6; // the default for a priority
picker const nsmsgpriorityvalue default = 4; }; ...
XPCOM Interface Reference by grouping
nsistreamlistener url nsiioservice nsistandardurl user nsiprompt nsipromptservice zipfile nsizipentry nsizipreader nsizipreadercache nsizipwriter file nsifile
picker nsifileprotocolhandler nsifilespec nsifilestreams nsifileutilities nsifileview memory nsimemory network channel nsichannel nsichanneleventsink nsirequest nsirequestobserver nsiresum...
Browser Toolbox - Firefox Developer Tools
you can use the inspector's node
picker to select that panel, and examine and modify its content: you can use the same technique to debug popups created by add-ons.
Eyedropper - Firefox Developer Tools
changing a color value in the rules view color values appearing in the inspector's rules view have color samples next to them: clicking the sample shows a color
picker popup.
FileSystem - Web APIs
it's not available for use in file or folder
picker panels (such as when you use an <input> element with the htmlinputelement.webkitdirectory attribute.firefox full support 50ie no support noopera full support 15prefixed full support 15prefixed prefixed implemented with...
File and Directory Entries API - Web APIs
if htmlinputelement.webkitdirectory is true, the <input> element is instead a directory
picker, and you get filesystemdirectoryentry objects for each selected directory.
HTMLElement: change event - Web APIs
kind of element being changed and the way the user interacts with the element, the change event fires at a different moment: when the element is :checked (by clicking or using the keyboard) for <input type="radio"> and <input type="checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date
picker for <input type="date">, by selecting a file in the file
picker for <input type="file">, etc.); when the element loses focus after its value was changed, but not commited (e.g., after editing the value of <textarea> or <input type="text">).
HTMLInputElement - Web APIs
webkitdirectory boolean: returns the webkitdirectory attribute; if true, the file system
picker interface only accepts directories instead of files.
MediaStream Recording API - Web APIs
in this code snippet, enumeratedevices() is used to examine the available input devices, locate those which are audio input devices, and create <option> elements that are then added to a <select> element representing an input source
picker.
ARIA Test Cases - Accessibility
- - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - date
picker testcases: date
picker example expected at behavior: markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass ...
overview - Accessibility
states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 and aria tab panel example here on codetalks lightbox wcag 2.0 and aria-conformant lightbox application http://majx-js.digissime.net/js/popin/ form validation wcag 2.0 and aria-conformant live form validation tables german tutorial on creating an accessible form simple grid example at codetalks date
picker grid at codetalks wcag 2.0 and aria-conformant sortable tables ...
-webkit-text-stroke-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples varying the stroke color html <p>text with stroke</p> <input type="color" value="#ff0000"> css p { margin: 0; font-size: 4em; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #ff0000; /* can be changed in the live sample */ } javascript var color
picker = document.queryselector("input"); color
picker.addeventlistener("change", function(evt) { document.queryselector("p").style.webkittextstrokecolor = evt.target.value; }); results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-color' in that specification.