InnerFade with jquery What is it? InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. The call Examples A newsticker (with animationtype: 'slide') <ul id="news"><li><a href="#n1">1 Lorem ipsum dolor</a></li><li><a href="#n2">2 Sit amet, consectetuer</a></li><li><a href="#n3">3 Sdipiscing elit,</a></li><li><a href="#n4">4 sed diam nonummy nibh euismod tincidunt ut</a></li><li><a href="#n5">5 Nec Lorem. A list with images and links Elements with classes <div class="fade"><p> 1 </p><p> 2 </p><p> 3 </p><p> 4 </p><p> 5 </p><p> 6 </p><p> 7 </p><p> 8 </p><p> 9 </p><p> 10 </p></div><div class="fade"><p> A </p><p> B </p><p> C </p><p> D </p><p> E </p><p> F </p><p> G </p><p> H </p><p> I </p><p> J </p><p> K </p><p> L </p><p> M </p><p> N </p><p> O </p><p> P </p><p> Q </p><p> R </p><p> S </p><p> T </p><p> U </p><p> V </p><p> W </p><p> X </p><p> Y </p><p> Z </p></div> Download
Unwrongest This Jquery plugin lets you easily create tabbed content. All you need is an ul-element with some li-elements and a couple of related content-divs. The major difference between Tabify and it’s competitors is it’s size. It is very easy to use Tabify. All you need to do is to create an ul-list, fill it with a couple of li-elements with containing links (tabs) and create a couple of matching content divs. <ul id="menu"> <li class="active"><a href="#jquery">jQuery</a></li> <li><a href="#prototype">Prototype</a></li> <li><a href="#ext">Ext</a></li> </ul> <div id="jquery"> jQuery is a cross-browser… </div> <div id="prototype"> The Prototype JavaScript… </div> <div id="ext"> Ext (X-t) is a JavaScript… </div>
7 Free Page Flip (flipbooks) Flash & JQuery | Web Design Today Pageflip is a beautiful way to present images on your website. Its also used on many websites to present catalog. By using mouse pages can be flipped like a real book pages with realistic animations. These flipbooks are used not only to showcase images but also, flash (swf), and videos. Below are 7 free flipbook tools build with flash and jQuery. PixelWit’s Free PageFlip A very simple pagflip in flash. Free Pageflip 2.25 This free flash pageflip is not a simple images flip book but it also allows to add swf movies, transparent pages and also allows to peel any page. FlippingBook HTML Edition There is a free demo and paid version for this flipping book. Flash Pageflipping free This free version is missing lots of options from the pro version of this pageflip but still you can zoom, navigate, add swf and enable disable sound. PDF to Flash Page Flip This unique tool allows youto convert your pdf files into flash page flip book movie fro free. imBookFlip
jQuery : Les bonnes pratiques Parce que beaucoup de développeurs se frottant à jQuery ne l’utilise pas forcément comme il faut et se plaignent souvent des performances médiocres obtenues, il était temps de remettre l’église au centre du village. Ce mémo est une traduction de ce très bon article anglais. Bonne lecture ! Toujours faire une recherche à partir d’un ID Le sélecteur le plus rapide de jQuery est le sélecteur d’ID ($(‘#mon-id’)) car elle est directement mappée sur une méthode Javascript native : getElementById(). Sélection d’un élément unique Une sélection comme celle-ci est plus rapide :var traffic_button = $(‘#traffic_button’); Que celle-ci :var traffic_button = $(‘#content .button’); Sélection d’éléments multiples La sélection d’éléments multiples parcours le DOM de manière transversale, cela peut être très long et très couteux en ressources. Utiliser des balises avant les classes Le second sélecteur le plus rapide de jQuery est le sélecteur de balises ($(‘head’)). Cacher les objets jQuery (Dé)chaînez la fureur
CSS Card Flip using Webkit Transitions | Technology Webkit brought a lot of enhancements to the formerly dull browser based user interfaces, with transform and transition properties being among the most useful for user interaction. In this tutorial we will learn how to use both to create a product card that flips to reveal more information with a fallback for browsers that don’t support Webkit transitions and transform. CSS Card Flip Demos There are three examples for this tutorial, each one with its own advantages. Card flip triggered by click Card flip triggered on mouse over Card flip triggered by disjoint button The first two are the most basic: you have to either click on the card or roll your mouse over it to trigger the effect. The main difference between the “click to flip” example and the other two is that you can’t have a link within the faces unless you deal with event propagation and it’s not the focus of this tutorial. What about Firefox, Opera or the one browser whose name is written in the Black Speech of Mordor? A Card Flip?
Fancybox - Fancy lightbox alternative 10 Useful jQuery Plugins and Techniques jQuery is great for enhancing a website. Whether it be by adding effects that give the site a wow factor, or by making navigation easier, jQuery can have a big impact on the way a website is perceived and used. jQuery is extremely popular among web designers and developers for it’s flexibility, ease-of-use, and of course it’s plugins. So for this post, we’ve rounded up 10 more jQuery plugins and techniques that you should find very useful. Supersized 3.0 Plugin This plugin produces a full screen slideshow complete with transitions, preloading, and navigation controls. Apple-like Retina Effect Learn how to create an Apple Retina Display magnifying effect with jQuery and CSS. Flip! Flip is a jQuery plugin that will flip easily your elements in four directions. jSlickmenu jSlickmenu, creates, well, slick menus with jQuery. jQuery Address Overscroll Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser. jQuery Page Curl Contactable Panning Slideshow Sliding Labels
Moleskine Notebook with jQuery Booklet Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. We will create a virtual Moleskine notebook with latest posts from the blog. You can find the beautiful Moleskine Photoshop file by Dennern at deviantart here: My Moleskine (PSD) For the navigation arrows […] View demoDownload source Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. We will create a virtual Moleskine notebook with latest posts from the blog. You can find the beautiful Moleskine Photoshop file by Dennern at deviantart here:My Moleskine (PSD) For the navigation arrows we used the pixel perfect PSD provided by premiumpixels.com underSimple Little Arrows (PSD) Ok, so let’s get started! The Markup The HTML structure will be made up of the booklet plugin markup which includes the div with the id “mybook”. Each page of the booklet will be placed in a div element inside of the element with the class “b-load”.