Learn

jQuery Sphere 3D » Examples » Tag Cloud. jQuery Proven Performance Tips And Tricks (Slides) Thanks to everyone that attended the jQuery London and London Web Standards meetups this month.

As requested, here are the slides from my talks including links to all of the jsPerf tests embedded for each section. Summary In case you missed the talk, the main takeaway from it was the importance of performance-testing your JavaScript and jQuery code (and appreciating performance gotchas you can keep in mind when writing code that uses jQuery). I feel that this is an area developers can significantly benefit from investigating further. If you haven't been using it, jsPerf.comis the bizness, so check it out. From the feedback so far it looks like the majority of the audience found the content useful, so please feel free to share the slides if you think they can assist other developers.

Thanks I'd like to extend my thanks to Adam Sontag, JD Dalton, Mathias Bynens, Andree Hansson and others for helping tech review the slides and tests. Until next time, g'luck with your projects! Addy. Sliding Labels Official Plugin Release [ver. 3.2] · CSSKarma. Version: 3.2 – Added a “className” option so you don’t have to use “.slider” as the wrapper Version 3.1: Changed “children” to “find” so it will work with a UL.

Thanks to Oro for the feedback Version 3 of Sliding Labels brought some big changes, the largest being that I finally converted it into a working jQuery plugin. Maybe it was the 200 e-mails requesting an official plugin, maybe it was my curiosity. Whatever it was, I heard everyone and I wanted to let you know that I’m listening to all the feature requests and bug reports; and I really do appreciate them. Additions to version 3 Plugin status: Obviously creating an official plugin was the biggest change Position: relative: It seemed like a lot of the questions I was getting had to do with adding position:relative to the .slider element in the CSS, so I just moved that into the script.

Apple-like Retina Effect With jQuery. Martin Angelov Apple has long applied a winning strategy in marketing – create well designed products, have a dedicated fan base, and let the hype build up before every product release.

This is also the case with the latest version of their iPhone. But what I found interesting is the term they coined – “Retina display” and the promo image accompanying it. The image on apple.com that inspired it all What made me wonder is if it was possible to turn this static image into a fully functional “Retina effect” with only jQuery and CSS. UPDATE: Seems Apple folks have also liked the idea, and they’ve implemented it at apple.com.

Step 1 – XHMTL. Fancy Sliding Form with jQuery. Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step.

This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images. […] View demoDownload source Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images. So let’s start! The Markup The HTML will consist of a wrapper container where we will place a form with fieldsets. The navigation with all the links to the steps will be an unordered list that is initially hidden. The CSS The main wrapper and the steps container will have the following style: The class step will be given to each fieldset.

The single link elements will have a neat CSS3 gradient as background: The JavaScript And that’s it! Hacking at 0300 : Understanding jQuery UI widgets: A tutorial. Last modified May 31, 2012.

Updated for jQuery 1.8 This was written largely to help me make sense of using UI to create my own widgets, but I hope it may help others.