Finding open tabs of reuse with delayedOpenTab (solved-fyi) • mo
I'm using the KB sample code to have my extension find a previously opened window via wm.getEnumerator("navigator:browser"). The sample code relies on (url == currentTab.currentURI.spec) to identify a tab for reuse. I need to perform a more complex matching and would like to achieve this my assigning addition content to the DOM document. Problem is that, when a new window is opened via recentWindow.delayedOpenTab(url) no result window is returned (addTab doesn't seem to execute at all). So- how can tabs be reused with more complex matching mechanisms than just URIs? Update: After some experiments (and especially looking at the QuickNote extension), I've found that I can open new tabs and assign data: Code: Select all var browserEnumerator = wm.getEnumerator('navigator:browser');var browserInstance = browserEnumerator.getNext().getBrowser(); var newTab = browserInstance.addTab(" "true");browserInstance.selectedTab = newTab; Ideas?
Jason's Date Input Calendar
Note: Updated Sept 20th, 05' for various improvements. Description: Jason's Date Input Calendar is designed specifically to make entering date values into forms as easy as can be! It's different from most other similar scripts in the following two ways: The script generates not only the popup calendar to easily select a date, but the corresponding form field as well, made up of select menus and text boxes. In other words, this script takes the hassle out of not only selecting a date inside forms, but creating the appropriate HTML and packaging that value for easy passing as well! Demo: Directions: Step 1: Insert the below into the <HEAD> section of your page: The above references an external .js file. Step 2: Once the above script is added, adding a popup Calendar field to your form is a one step process. <form> <script>DateInput('orderdate', true, 'DD-MON-YYYY')</script> The result is: Additional Information DateInput(DateName, Required*, DateFormat*, DefaultDate*) -Customizable variables
Relying on DOM readiness to invoke a function (instead of window.onload)
Sean Christmann has written another HTML5 Video and canvas demo that makes the video explode wherever it is clicked. Even when it is exploded, the pieces still continue to play the section of video that they were playing when the video was entirely together. After a few seconds, the pieces animate back together, reforming into a complete video once again. A very cool effect! One of the things that Sean had to do to get this implementation to run smoothly, was to have a second canvas act as a buffer to the final product. It is much faster to read from a canvas than it is from a video, so this caches every frame of video so that it doesn’t need to be retrieved as often. All very good information to know when writing your own crazy demos!
Eric Miraglia (@miraglia) is an engineering manager for the YUI project at Yahoo. Eric has been at Yahoo since 2003, working on projects ranging from Yahoo Sports to YUI. For the past several years, Eric and his colleagues on the YUI team have worked to establish YUI as the foundation for Yahoo’s frontend engineering work while open-sourcing the project and sharing it with the world under a liberal BSD license. Eric is an editor and frequent contributor to YUIBlog; his personal blog is at ericmiraglia.com. Prior to working at Yahoo, Eric taught writing at Stanford and elsewhere and led frontend engineering teams at several startups. Global variables are evil. Douglas Crockford has been teaching a useful singleton pattern for achieving this discipline, and I thought his pattern might be of interest to those of you building on top of YUI. 1. YAHOO.namespace("myProject"); This assigns an empty object myProject as a member of YAHOO (but doesn’t overwrite myProject if it already exists). 2.
nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website. It uses minimal HTML markup being .nano > .nano-content. The other scrollbar div elements .pane > .nano-slider are added during run time to prevent clutter in templating. The latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets. Downloads To start using, you need three basic things: 1. The following type of markup structure is needed to make the plugin work: <div id="about" class="nano"><div class="nano-content"> ... content here ... Copy the HTML markup. Link to the nanoscroller.css file inside your page's <head> section (...or copy the contents from it to your page's main stylesheet file). You should specify a width and a height to your container, and apply some custom styling for your scrollbar. 3. Running this script will apply the nanoScroller plugin to all DOM elements with a .nano className. Advanced methods
Expanding Text Areas Made Elegant
Top news - Echo JS
Book of Modern Front-end Tooling
JS: The Right Way - Iceweasel