jQuery Waypoints

liteAccordion - a horizontal accordion plugin for jQuery Slide One1 Slide Two2 Slide Three3 Slide Four4 Slide Five5 Please enable JavaScript to get the full experience. Responsive and WordPress versions available! New! Accordion Pro JS is a responsive version of liteAccordion, with lots of upgrades and new features (vertical accordions!). Download More details and download link for liteAccordion here. Q. A. Q. A. Q. A. Q. A. Q. A. Q. A. liteAccordion is free to use for commercial and personal projects. If you find any bugs, please file a ticket on Github and I'll fix it as soon as possible. Version 2.2 (21/01/13) Responsive layout and auto scale images options removed After some consideration, I've decided to remove the responsive options. Development status: on indefinite hiatus After this update, I do not plan to continue developing this plugin. New in 2.0! Methods: liteAccordion now has play, stop, trigger next slide, trigger previous slide, destroy and debug methods. Mouseover activation Custom easing Linkable slides 1. 2.

betamos/Better-Autocomplete - GitHub 9 jQuery Scripts to Enhance Your Website Time for a roundup for all the jQuery plugins that have been on the wild for a few weeks. There are getting more and more jQuery plugins coming out just to meet your special needs. In this post, I particularly like Sausage contextual pagination, I think it's a brilliant ideas! Here you go, pretty sure some of them will be really useful. TN3 Gallery TN3 Gallery is a full fledged HTML based customizable jQuery slideshow with slideshow, transitions and multiple album options. Compatible with all modern desktop and mobile browsers. Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page.

Set Font Size Based On Word Count In my little Quotes on Design project, some of the quotes are longer than others. I thought it might be kind of nifty to beef up the font-size on the shorter quotes and trim down the size for the longer quotes so they all match a bit better in terms of the size they take up on the screen. Rather than do this with a hard-coded number in each of the quotes, I did it with JavaScript. The Plan Set an object of the paragraph you are targettingSplit the paragraph into an array of words, breaking at every spaceCount the length of the arraySet the font-size based on that count. Doing it with MooTools Doing it with jQuery Examples Quotes on Design is using the jQuery version. Share On jStat : a JavaScript statistical library

jQuery | Tutorialzine | Page 6 Creating a PHP and CSS3 PoweredAbout Page By Martin Angelov | Here we will be creating a simple about page that is powered by PHP, HTML5 and CSS3. It will present your contact information to your visitors, with an option for downloading it as a vCard (useful for importing it in third party applications). Read more Making a Beautiful HTML5Portfolio In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. Easy Slider 1.5 Click here for the new version of this plugin Version 1.5 of my Easy Slider plugin for jQuery is here. This is one of the my rare scripts that make it to their second version. All of the features here are result of your comments, so if you have more ideas, keep ‘em coming! Note: in case you haven’t already, you might want to check out article about first version of this plugin. Download easySlider1.5.zip Features This version features: auto slidecontinuous sliding"go to first" and "go to last" buttonhiding controlsoptional wrapping markup for control buttons vertical slidingmultiple sliders on one page Here are the things you can customize (with their default values) I will explain new options: controlsShow By default set to true, but if set to false it will not add any controls. controlsBefore and controlsAfter In case you want to add some additional markup to gain more control over buttons you can do so by using these parameters. controlsFade By default set to true. firstShow and lastShow auto

The Dynamics of Scrolling By Drew McCormack There has been quite a bit of discussion the last few days about the momentum-based scrolling that Apple uses on the iPhone. The discussion has largely been fanned by John Gruber’s Daring Fireball blog. This got me wondering how difficult it would be to reproduce Apple’s momentum scrolling on your own in JavaScript. Physics When I started working on the problem, I was all set to tackle it like the Physicist I was trained to be. I identified several different phases of scrolling, each of which required different equations of motion: Scrolling with the finger on the screen.Scrolling with the finger on the screen beyond the end of the viewable content (ie rubberbanding).Momentum scrolling with no finger on the screen.Decelerating from momentum scrolling after passing the end of the content (ie first half of bounce).Scrolling back to the start of the content after overshooting (ie second half of bounce). Source Code You can test the scrolling here (Photo by TimboDon). Algorithm

jQuery: The Write Less, Do More, JavaScript Library Animated InnerFade Présentation Ce plugin pour jQuery est une extension du travail de Torsten Baldes : InnerFade with JQuery. Nous avons ajouté : un effet de mouvement sur les images à la manière des animations en flash. Cet effet est désactivable. la possibilité de piloter l’affichage : boutons ’précédent’, ’pause’, et suivant’ la possibilité d’afficher une image de fond au besoin pour habiller l’ensemble et se caler sur le design l’affichage des titres des images (dans une zone modifiable via les css) Exemple 1 : un portfolio Dans la section HEAD : Dans la section BODY : Comme avec le plugin Innerfade original, vous devez constituer dans votre page, la liste des images de votre diaporama : vérifiez dans vos feuilles de style que margin et padding sont à 0, insérez éventuellement les lignes : Exemple 2 : vues panoramiques Dans le CSS : Dans cet exemple, nous avons paramétré l’affichage de la zone de titre dans notre CSS, de la façon suivante : ainsi que : Utilisation Téléchargement jquery.animated.innerfade.zip

zefhemel/persistencejs - GitHub Colortip – a jQuery Tooltip Plugin Martin Angelov In this tutorial we are going to write a simple jQuery tooltip plugin. It is going to convert the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design. Step 1 – XHTML The plugin we are about to write today, works by converting the title of an element on the page to a structure of three spans, which form a tooltip, displayed on hover. <a href=" class="blue" title="Go to Tutorialzine">Tutorialzine</a> jQuery will convert it to the markup you can see below. <a class="blue colorTipContainer" href=" Go to Tutorialzine </a> Notice that the first block of code above specifies a “blue” class name. Step 2 – CSS colortip-1.0-jquery.css – Part 1 Making a triangular shape with a div