background preloader


Facebook Twitter

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.

jQuery Proven Performance Tips And Tricks (Slides)

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! 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.

Sliding Labels Official Plugin Release [ver. 3.2] · CSSKarma

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. Animation speed: I added an option to easily control the animation speed. Subtractions to version 3 Using the plugin. 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.

Apple-like Retina Effect With jQuery

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 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 Step 1 – XHMTL The markup for the effect is quite straightforward. Demo.html The #iphone div displays the iphone frame. Lastly we have the retina div, which is rounded with CSS3 and displays the big version of the webpage screeshot as its background as it is moved around with the mouse.

Putting it together. Fancy Sliding Form with jQuery. $(function() { var fieldsetCount = $('#formElem').children().length; var current = 1; var stepsWidth = 0; var widths = new Array(); $('#steps .step').each(function(i){ var $step = $(this); widths[i] = stepsWidth; stepsWidth += $step.width(); $('#steps').width(stepsWidth); $('#formElem').children(':first').find(':input:first').focus(); $('#navigation').show(); $('#navigation a').bind('click',function(e){

Fancy Sliding Form with jQuery

Hacking at 0300 : Understanding jQuery UI widgets: A tutorial. Last modified May 31, 2012.

Hacking at 0300 : Understanding jQuery UI widgets: A tutorial

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. "Widget" to me means a user-interface element, like a button or something more complicated like a popup date picker, but in jQuery UI terms it means a class, members of which are associated with HTML elements; things like Draggable and Sortable. In fact, not everything that I would have called a widget uses $.widget; the UI datepicker does not. Dan Wellman has another tutorial that you may find helpful. Modifying Elements: Plugins That being as it may, let's use $.widget. Let's take a paragraph of class target: <p class="target">This is a paragraph</p> This is a paragraph Now, make it more general-purpose: a plugin: Keeping State in Plugins But this pollutes the $.fn namespace terribly, with off, darker and lighter. The Problems with Associating an Object with a Plugin.