Shoutbox Examples. Blog / 10 useful jQuery authoring tips. Here's 10 tips that will makes you code more efficiently with jQuery. 1. Be lazy // Don't if ( $ ( '#item' ). get ( 0 )) { $ ( '#item' ). someFunction (); } // Or if ( $ ( '#item' ). length ) { $ ( '#item' ). someFunction (); } // Just do $ ( '#item' ). someFunction (); jQuery will call the function if there is a match, no need to double check. 2. // You can but.. $ ( document ). ready ( function (){ // ... }); // There is a shorter equivalent $ ( function (){ // ... }); It should be well known, but obviously it is not. 3. // Don't $ ( '#frame' ). fadeIn (); $ ( '#frame .title' ). show (); $ ( '#frame a:visited' ). hide ; // Do $ ( '#frame' ). fadeIn () . find ( '.title' ). show (). end () . find ( 'a:visited' ). hide (); Unnecessary DOM traversal is a expensive operation, avoid it when possible. 4. 5. 6.
Using jQuery's each and map is more reliable because they won't break if another library is extending the Array object. 7. Events can be namespaced The method also accept namespaces Instead of. Jcrop Image Cropping Demos. Flot - Project Hosting on Google Code. jFlip Gallery Demo. A flipping page gallery Author: Renato Formato. Common HTML code for the examples jQuery code Flip gallery with: green background (for images smaller than canvas) flipping corners on the bottom no image resize flip.jflip event binded to show infos Image 1 of 6 green background (for images smaller than canvas) flipping corners on the top images bigger than canvas are resized to be completely visible. jQuery :path | DevKick Lab. jQuery liScroll - a jQuery News Ticker. 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. LavaLamp for jQuery lovers! | Ganesh. Hover above and feel for yourself, the nifty effect of Lava Lamp. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight.
Just so you know, it weighs just 700 bytes(minified)! Often I have noticed, that the credits are usually granted towards the end. As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. I hope you agree that a typical HTML widget consists of 3 distinct components. A semantically correct HTML markupA CSS to skin the markupAn unobstrusive javascript that gives it a purpose Now lets follow the above steps and implement the LavaLamp menu for your site. Step 1: The HTML Since most UI developers believe that an unordered list(ul) represents the correct semantic structure for a Menu/Navbar, we will start by writing just that.
Bonus. Jquery parallax. Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about.
The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax Therefore, the simplest way to use jParallax is to make the layers different sizes using CSS. Options Layer Options Events Tips. Making a 3D Engine in jQuery. In the previous post “3D tag cloud” I received quite a few requests for different shapes besides the ring.
The problem is how the tag cloud was created it doesn’t lend itself to different shapes very well. So this post will show how to create a 3D engine in jQuery / JavaScript for those more exciting shapes. What We’re Building We’re going to create a 3D engine that will allow us to create shapes simply by creating an array of points. Display Object The Display Object is more or less a way to give each object a set of properties and methods. Here is the JavaScript Class: If this seems a little foreign to you, you might want to check out the post Object Oriented Programming with JavaScript.
Make 3d/2d Points These functions basically create objects, one meant for 3d (x,y,z) and one meant for 2d(x,y,depth). Initialization The init function assigns a variable to the container passed in. Camera I’m guessing from the name you can probably figure out what this class does. Here is the Camera Class: 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. It could inspire someone to look beyond the perceived constraints of web designers and developers. 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. The jQuery JavaScript Note from Chris Share On. 5 Top jQuery Chart Libraries for Interactive Charts | Graphic an. Columnizer jQuery Plugin | Wulf. The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns. And, of course, it’s easy to use! Get the source Available on Github at Stable Version: 1.6.0 Download It Here Quick Start To use columnizer, just call the columnize() function on your jQuery selection, and that’s it! Release Candidate New Features! Now you can manually specify line breaks for some or all of your columns!
Stable Version New Features Stable Release Bug Fixes Columnizer is now backwards compatible with older versions of jQueryFixed `lastNeverTallest` sometimes leaving a tall last columnAdded a class to nodes that are split between columns. Demos Sample 1: Simple text only columns. Documentation Documentation is available on the Github repository’s wiki. Helpful Hints License Columnizer by Adam Wulf is licensed under a Creative Commons Attribution 3.0 United States License. Plugins. Demo > maxImage Scaling Plugin. Caution: This example is meant for expert users.
Remember, with FillElement you can often accomplish an offset scheme very easily... just set your containing element where you want the images to be displayed. Because the first rule of Maximage 2.0 is to try to remain hands off and out of your way, the built in support for offsets have been dropped with version 2.0. This doesn't mean they aren't possible. With a little elbow grease they can still be accomplished (and are better).
What I am doing with the below code is creating curtains / offsets that live in front of the slideshow. I call these curtains. Once we have our curtains up, the slideshow is still resizing to the full window and we want to have it maximize within the viewable area... our window size minus our offsets. View Example. jQuery Spritely | Spritely. jMagnify (Ola effect on text) plugin: documentation and demo pag. Scrollable Fixed Header Table – A JQuery Plugin « Jerome Bulanad. This plugin allows html tables to be scrollable horizontally and vertically while headers are still visible and in tack with the columns. This plugin can be used in two modes: 1. Import dependencies 2. HTML Table. As of this version the following rules must be followed to make the plugin work.
Here’s the sample table. 3. $(document).ready(function(){ $('#table1').scrollableFixedHeaderTable(300,100,'true','scr_table_1_'); }); Usage With column select . $(tableID).scrollableFixedHeaderTable(widthpx, heightpx, showSelect, cookie); With column select. $(tableID).scrollableFixedHeaderTable(widthpx, heightpx, showSelect); Without column select $(tableID).scrollableFixedHeaderTable(widthpx, heightpx); Multirow headers $(tableID).scrollableFixedHeaderTable(widthpx, heightpx, null, null, rowCount); Arguments Multi-row Headers Reference from #comment-83. $(tableID).scrollableFixedHeaderTable(widthpx, heightpx, null, null, rowCount); Get the latest trunk source jquery.scrollableFixedHeaderTable.js example: 1. 2. BubbleUp jQuery Plugin to Spice Up Your Menu | AEXT.NET. Hey friend, in the previous jQuery Learning tutorial, I wrote an article that helps you to create your own jQuery plugin with the fun zooming effect.
This plugin has received a lot of attention for a while and there are some suggestion from you guys to help this plugin to be better. I collected some interesting recommendations and bug fixes from my readers to write it again and release it. This plugin now is more flexible, easy to customize and working with all major web browsers with any size of images. Sounds cool? What’s this plugin? BubbleUp is a jQuery plugin released from a jQuery tutorial Learning jQuery: Your First jQuery Plugin, “BubbleUP†which helps you to create your first jQuery plugin. Features: Your menu will be scaled in any size via the option.You decide to enable the tooltip or not.The tooltip would be customizable by font, size and color.The speed of the transition (in/out) can be controlled.
Demonstration This is how this plugin is in action. Requirements Options.