foobar - a notification bar that doesn't suck! How To Setup Demos All Options FAQ Changelog How to setup Firstly, extract all the files and then upload to your server. Next, include the foobar javascript file together with jquery in your head tag. Now initialize the bar when the page has loaded, by placing some code in the head tag of your page. <script type='text/javascript' > $(function(){ $.foobar('Hello World!') Or override the default foobar options by using something like this code instead: Demos There are some major ways to change how the foobar looks and works. Inline VS Fixed Positioning A Fixed foobar will always be placed at the top of the page and it will not move, even if the window is scrolled. Fixed Demo View source An Inline foobar will also be at the top of your page, but it will form part of the normal flow of the page. Inline Demo View source Different Display types The foobar can be displayed in 4 different ways. Expanded Display Demo View source Collapsed Display Demo View source Delayed Display Demo View source Changelog
New Creation: jQuery Runloop Plugin TL;DR links for the eager: Earlier this week I was working on a project that involved one larger animation during which several separate animations would trigger, but not all at the same time, and not all on the same elements. As jQuery provided insufficient functionality to suit my needs, I went on a hunt across the Web in search for a runloop plugin, with these requirements: Alas, my traipsing across the Web yielded no results. However, after deciding to write my own plugin, I came across this concept by Ben Nadel which inspired me, and gave me a clear idea for what to do. I then adopted Ben’s idea of using the .animate() function’s step: method and turned it into a full-fledged runloop system, and am now making it available as a plugin for jQuery. Want a demo before reading on? Basic usage Runloop is not a common jQuery plugin in that it is not chainable. The reason for this is that it runs one .animate() call on a div in nodespace, triggering at every step. <! Lastly, I want to thank:
quickleft.github.com/ql_zoom/ I've created a new jQuery plugin to handle image zooming, like you find on many e-commerce sites. Unlike many of the zoom plugins I've found, this one uses the mystical power of the forbidden Canvas Element to accomplish much of it's dirty work. It also takes advantage of Ben Alman's $.throttle() plugin to keep events bound to mouse-move in check. It relies on a larger source image by default, which is loaded asyncronously and then translated onto the canvas element, which guides the zoomed selection. Here's how to invoke it: $('.image-container').ql_zoom(options); ...where `options` is an object containing parameters.
20 Really Awesome Javascript Driven Single Page Websites If you're looking for what javascript can do for your upcoming website, look no further, check out this post :) I have carefully filtered through all single page websites and I found these 20 awesomely made website with javascript. Simply awesome! Once again, I'm blown away by the capability of javascript. What you can find in this list? It's not just sliding up and down, but integration of different javascript effects plus cool animations that you never knew it can be done with javascript. Feel free to drop a comment if you think your website is cool enough and deserve to be listed as well, otherwise, help me to spread this post :) Thanks. Cool modal window with image gallery, fading menu