Flexigrid
jQuery LavaLamp menu plugin
About 2 years ago I was looking for an animated menu plugin for jQuery using the sliding-doors CSS effect, figuring I would write my own if I couldn't find one. During my search I found Ganesh Marwaha's original jQuery 1.1 series LavaLamp plugin based on the work of Guillermo Rauch and his MooTools PowerMenu plugin . It was simple and straightforward - just what I was looking for. Since the release of this 'new-and-improved' LavaLamp plugin in March of 2008 I've had hundreds of emails from around the world requesting features and providing bug fixes and patches which I've done my best to apply in the 1.3 releases. By large the most requests were related to CSS and why certain CSS and HTML markup wasn't working for them with LavaLamp. The latest version 1.3.5 of LavaLamp has been tested successfully with jQuery versions 1.4.4, 1.3.2 and 1.2.6 The following options can also be found at the head of the latest jquery.lavalamp.js file: target - default: 'li' Example: container - default: ''
jQuery Easing Plugin
Description A jQuery plugin from GSGD to give advanced easing options. Please note, the easing function names changed in version 1.2. Please also note, you shouldn't really be hotlinking the script from this site, if you're after a CDN version you could do worse than try cdnjs.com Download Download the following: Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). Select easing types for the demo first one for down, second one for up. The Clicker Updates 12/11/07 1.3 jQuery easing now supports a default easing mode. 04/10/07 1.2 Updated to include all methods from Robert Penners easing equations. 28/06/07 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3. 22/06/07 Rewritten the above to include callback syntax, nothing else has changed. Advertisements Need reliable hosting for your blog? Credits Donate Usage Default Custom
erik's weblog » Blog Archive » Computed vs Cascaded Style
Most JS frameworks and libraries I’ve seen have a function similar to this: function getStyle(el, prop) { if (document.defaultView && document.defaultView.getComputedStyle) { return document.defaultView.getComputedStyle(el, null)[prop]; } else if (el.currentStyle) { return el.currentStyle[prop]; } else { return el.style[prop]; } } So what is wrong with this you might ask? Lets add some background and then we can get back to that question. Computed Style Computed style represents the actual computed value of a style in absolute units. Cascaded Style Cascaded style is the real style value that is applied to an element when the style value is set to ‘inherit’. Inline Style Inline style is the style value you have added to the style attribute on you element or the style properties you have set in script using element.style.propertyName. Example Browser Support All browsers except IE has a way to get the computed style. Conclusion Back to our earlier question. So how do we solve this? Comments
37 Phenomenal jQuery Plugins and Demos for Developers : Speckyboy Design Magazine
In this post we have collected 37 jQuery plugins for use in your next web project. Slide-In Contact Form Description : When the user clicks on the Contact link at the top of the page, the contact form will slide down. When the user submits the form they will get a message that their message has been sent successfully and within two seconds, the entire form will slide up to its original position. Virtual jQuery Keyboard Description : This tutorial will explain how to implement a simple virtual keyboard with some with jQuery. Digg style sign up form Description : Simulate a Digg style signup form, with its unique features such as their dynamic tooltips that give you a hint on each field that is to be filled. Load Content While Scrolling With jQuery Description : If you have lots of content to present but can not load all of it at once as it may take too long, this plugin is the answer. Pirobox jQuery Lightbox FancyBox Facebox 1.2 JQuery Cycle Plugin InnerFade Tablesorter 2.0 jGoogle jTruncate idTabs
Javascript in Modern Web Design
In today’s web design, Javascript is a must-have component. Aside from its functionality, Javascript can enhance user experience by creating transitional effects such as fading and sliding animation. Thanks to the open source Javascript frameworks, we don’t need to write custom Javascript from scratch anymore. Here are 47 Javascript plugins that you can use to enhance the user experience and functionality of your website. Don’t forget to check out the sample sites, which show how the plugins can be used. The Two Popular Javascript Frameworks Right now, the two commonly used Javascript frameworks are: jQuery and MooTools. [poll=3] Image Zoom and Popup Lightbox You’re probably very familiar with Lightbox — a light Javascript used to display overlay images on the current page. jQuery lightBox Plugin This is exactly the same as Lightbox JS, but written on top of jQuery library. Thickbox Thickbox is a jQuery plugin that is very similar to Lightbox, but comes with more features. Highslide JS FancyBox
jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready
Posted by Maggie on 04/02/2009 Topics: css jQuery jQuery UI ThemeRoller ui design Update: We contributed this menu plugin to the jQuery UI library. We got lots of fantastic feedback on our earlier iPod-style menu, and decided to upgrade it for jQuery 1.3. As noted in our original post, the iPod-style menu provides easy navigation of complex nested structures with any number of levels. Much of the functionality that controls the iPod style menu, like positioning and option selection, is shared by dropdown and flyout menus which are better suited for smaller data sets, so we extended the script to include support for these additional menu types. We also built in the ability to customize a menu's appearance, including active and hover states, by passing in classes as options. By default, the menu script will transform an unordered list of links into a simple dropdown menu: Demo Page When the menu content contains nested lists, by default it creates an iPod-style menu: Demo Page Demo Page How it works
Building an Animated Cartoon Robot with jQuery
Why? Aside from being a fun exercise, what purpose does something like this have? None that's plainly obvious. Its about as useful as a miniature ship in a bottle. Yet it does have an underlying purpose. View Demo Overview This project was created by layering several empty divs over each other with transparent PNGs as background images. The backgrounds were animated at different speeds using a jQuery plug-in by Alexander Farkas. The robot is comprised similarly to the background animation scene by layering several DIVs together to create the different robot pieces. The Markup <div id="wrapper"><div id="cloud-01"><div id="cloud-02"><div id="mountains-03"><div id="ground"><div id="full-robot"><div id="branding"><h1>Robot Head. The structure of the divs closely resembles our diagram. The Style The CSS for this project is just as simple as the markup. Absolute positioning is used to pull any header or paragraph text 9999px to the left of the screen. The jQuery JavaScript Note from Chris Share On
