Learning jQuery - Tips, Techniques, Tutorials Free web resources – Net-Kit.com Best jQuery Plugins of 2010 For our “Best of 2010″ series we’ve already shown your our picks for best free WordPress themes and free fonts. So for this week the focus in on jQuery. This javascript framework continued to grow in popularity during 2010, which meant an abundance of plugins being released. This made it difficult to choose our favorites. We made a conscious effort to choose from a variety of types, and ones that were useful to web designers and that had some wow factor. Here are our picks for the Best jQuery Plugins of 2010. Nivo Slider A super smooth slider with loads of settings including 9 transition effects. Quicksand Reorder and filter items with a nice shuffling animation. Spritely Spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. Lettering.js Lettering.js is a lightweight, easy to use jQuery plugin for radical Web Typography. Colortip Masonry Masonry is a layout plugin for jQuery. gvChart Animated table sort YoxView
SimpleModal Demos / Eric Martin / ericmmartin.com Basic Modal Dialog A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on external CSS for the look and feel. Demo Download Basic Modal Dialog For this demo, SimpleModal is using this "hidden" data for its content. Examples: $('#basicModalContent').modal(); // jQuery object; this demo$.modal(document.getElementById('basicModalContent')); // DOM$.modal('<p><b>HTML</b> elements</p>'); // HTML More details... OSX Style Dialog A modal dialog configured to behave like an OSX dialog. Inspired by ModalBox, an OSX style dialog built with prototype. Demo Download OSX Style Modal Dialog Hello! SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development. As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. (or press ESC or click the overlay)
Fancybox - Fancy lightbox alternative Nivo Slider - The Most Awesome jQuery Image Slider Beautiful transition effects Nivo Slider offers 16 transition effects ranging from slicing and sliding, to fading and folding, making your galleries interactive and fun. No coding skills needed Create a beautiful experience when playing your gallery of images without any advanced coding. Include the image slider in your posts and pages using a simple shortcode. Automatic image cropping Nivo Slider crops and resizes images to a specified size, so you don’t have to do it manually for each image. Responsive and mobile ready The generated image sliders are completely responsive. Everyone loves Nivo! Time to make the best of your website’s’ image galleries. Pre-built slider themes You can choose the style of your sliders from the awesome pre-built themes. Create sliders from categories or galleries Besides the classic image sliders, Nivo allows you to choose between Category and Gallery sliders. Post types support Create carousels Join 471,039 happy customers and get access to 30+ premium products
Visual jQuery 1.2.6 Quicker Than window.onload by 15 Days Of jQuery 21 May Posted by Jack as Tutorials Window.onload() is a workhorse of traditional javascript code. But sometimes waiting for a page to load just isn’t quick enough. A few large image files will quickly reveal that window.onload() can be painfully slow. Some quick research into possible workarounds for the window.onload() issue brought me to some code by Brother Cake. But if you’re going to be doing some DOM (Document Object Model) javascript coding then why not use jQuery and have your cake and eat it too (horrible pun – sorry). jQuery has a handy little function that launches your javascript as soon as the Document Object Model is ready… which happens before the page has finished loading. $(document).ready(function(){ // Your code here... }); You can use it to launch any kind of javascript you like. Similar to many init() functions you may have seen before… just a lot faster. You’ll see this code used again and again in the examples I give you on 15 Days of jQuery.
Introduction to jQuery Introduction This screencast will give you an introduction to jQuery. We’ll explain what jQuery is, why you’d use it, and then how you’d use it in your code. After finishing this screencast you’ll be able to use the core functionality of jQuery in your projects, and be on your way to writing unobtrusive javascript in powerful web applications. A little web development history... To fully appreciate jQuery, let’s quickly review some web development history: Back in the early days of the web, people used tables and in-line styling such as the font tag to build websites. Styled text Main Content Side Bar This made it difficult for search engines and screen readers to navigate the html markup. More recently CSS evangelists started telling us we should have a separation between markup and layout. Main text More text This had a number of benefits. Popup This started cluttering the HTML, a problem almost identical to the pre-CSS inline styling era. Obtrusive to Unobtrusive JavaScript It looks like this: