Fixed Floating Elements Watch Watch jQuery Fixed Floating Elements screencast (Alternative flash version) QuickTime version is approximately 45Mb, flash version is streaming. View the demo used in the screencast Understanding the effect When I scrolled down the Apple store when I had something in my basket I found that the summary and what I had selected would follow me down the page. Apple’s version was very smooth and didn’t jump when I kept scrolling. Upon firing up Firebug I can see that once the scrollbar gets to the point where the basket is at the top of the page, the basket has a class applied to it which gives it a position: fixed – which explains why it holds still while I continue to scroll down. Other ways to do it Like I said, I’ve seen this effect before, for example on Simon Willison’s web site (see the comments form) (one of the speakers for my Full Frontal conference). So I’ve taken the style of Simon’s site for the example and added the jQuery we need to make this a nice smooth effect. Caveat: IE6
Main Page David DeSandro CSS3 animations and their jQuery equivalents Below, you'll find two columns. The left column shows five kind of CSS3 animations, the right column shows the same kind of animations, but done with jQuery. Hover the elements (or click in the accordion) to activate the animation. Please note that the CSS3 animation examples only work on webkit based browsers. Fade Bounce Pulsate and Colorize Link nudge Accordion First accordion Lorem ipsum dolor sit amet, consectetur adipiscing elit. Second accordion Third accordion jQuery webdev.stephband.info 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. 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 The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events
Isotope Connaître la position d'un élément Etendre les possibilités de jQuery afin de connaître les coordonnées X et Y d’une balise HTML. Par défaut jquery ne permet pas de connaître la position d’un élément. Ce qui est parfois gênant, lorsque, par exemple, on veut positionner un élément vis à vis d’un autre tel que des tooltips [1] Utiliser les fonctions natives de javascript En cherchant sur le net, nous trouvons assez rapidement ceci : Comme vous pouvez le constater pas une once de jQuery, et pourtant ce code est issu d’un script [2] utilisant pleinement jQuery. Si dans ce code on n’en trouve pas, c’est dû au fait que les méthodes offsetLeft, offsetTop, … sont des méthodes DOM propres à javascript. Etendre jQuery Pour remédier à cela, il existe 2 fonction jQuery intéressantes : $().get(val) jQuery.fn.extend() get() retourne un tableau d’objets DOM associés à l’objet jquery spécifié. Get La fonction Get() retourne les éléments DOM à partir de jQuery. Extend() La fonction extend() Un exemple d’utilisation : Remarques
Blog · Metafizzy Blog Managing documentation can easily grow to be an overwhelming and tedious undertaking for any developer who open sources her code. Consider how many places docs, demos, and instructions can appear for one project: README within the project source itself GitHub wiki developer’s personal site external site just for project project listing page - like plugins.jquery.com With Masonry v1, my docs had sprawled out to several different locations. To properly update a page, I had to update it in three places: the documentation site, the file in the downloadable project and on another home page. One of my bigger over-arching goals releasing Isotope was to streamline the documentation. Documentation site My approach now is build the documentation and demos into the project itself, keeping everything in the same place. # master branch checked out git commit git checkout gh-pages git merge master git push Here’s what the commit tree looks like for Masonry. Jekyll Downloadable zip Workflow