Creating a Mouseover Fade Effect with jQuery My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image. To achieve this effect I am going to introduce the animate function. There are tons of possibilities in regards to jQuery’s animate function, but for this tutorial, I’m going to keep it simple by just using it to do one thing. First things first, download jQuery. Add the jQuery script between your head tags. Here is the function. Here is the CSS. And here is the body code. All together you got something that looks like this. Test it out below: NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.
Create a Simple Infinite Carousel with jQuery Introduction Finally, I have times for this carousel script. I always think that it's hard to figure it out, but thanks to a tutorial - Making a jQuery Infinite Carousel with nice features from tutsvalley. I learnt something new from there. Alright, We have a main wrapper called carousel and inside it, we have two sections - buttons and slides. <div id="carousel"><div id="buttons"><a href="#" id="prev">prev</a><a href="#" id="next">next</a><div class="clear"></div></div><div class="clear"></div><div id="slides"><ul><li><img src="slide1.gif" width="240" height="240" alt="Slide 1"/></li><li><img src="slide2.gif" width="240" height="240" alt="Slide 2"/></li><li><img src="slide3.gif" width="240" height="240" alt="Slide 3"/></li></ul><div class="clear"></div></div></div> CSS is a little bit complicated. 3. There are two new methods we are about to learn. After - Insert content after each of the matched elements.Before - Insert content before each of the matched elements. Conclusion
Download the latest version of the jQuery.carouFredSel-plugin --- CarouFredSel 2.5.2 Easy Carousels in jQuery & WordPress Carousels in WordPress just got a thousand times better. carouFredSel takes the awesome power of the carouFredSel jQuery plugin and integrates it into WordPress so you can create unlimited carousels in your WordPress site without touching any code. Simply upload your images, drag and drop re-order them, add some captions and you’re good to go. Simple or Advanced Configuration carouFredSel comes with three configurations modes, “Basic” mode where you can choose some of our built in layout styles and keep things uber simple, “Advanced” mode or “Super User” mode where you can literally edit the configuration like you would when using the jQuery plugin for ultimate control and flexibility. 500px, Flickr & Instagram Integration Usual Awesomeness Built In Not only do you get the amazing features above, but you get all the other awesome features that we bake in to our WordPress plugins to make the experience as ninja as possible. Free to Use & Abuse
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
Tutoriel jQuery : Faire un carrousel - Babylon-Design - Tutoriaux WebDesign : Adobe Photoshop, XHTML/CSS, Accessibilité Fonctionnement d’un carrousel Tout d’abord, il faut comprendre le mécanisme une telle galerie d’image. Pour cela, seule la définition d’un carrousel réel pourrait suffire : Boîtier de forme circulaire servant à projeter des diapositives (cf. Mediadico). Dans ce tutoriel nous nous contenterons de créer un mécanisme qui se bloque vers la droite lorsque nous sommes positionnés au dernier item et se bloque vers la gauche lorsque nous sommes positionnés au premier. Dans cette vue de profil, seule la diapositive C est visible au travers du bloc. Enfin, dans cette vue de face plus habituelle, seule la diapositive C est visible au travers du bloc. Montage XHTML/CSS de base Il faut poser une structure XHTML sur laquelle on travaillera en jQuery. <ul class="carrousel"><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li></ul> En CSS, nous allons donner un style de bande de diapositives à cette liste. Et voilà le rendu : Mise en place du carrousel avec jQuery Création de la fenêtre de visualisation
Image Loading Basic Version In our basic version, we will have a single div containing a loading spinner and once our large image is loaded (in the background) we will remove the spinner and insert our image. There’s a few ways to approach the loading screen, two of which are: Use a background image on the holder div, this way we can easily centre align horizontally and vertically using CSS, rather than adding extra markup.Adding a styled div in our holder div, then remove the entire block of markup when the image loads. I’ve provided a screencast explaining how to achieve this (though it is based on the CSS version, also shows how to do this with a separate loading div). Watch the jQuery basic image load screencast (alternative flash version) View the demo and source code used in the screencast Note that in the demonstration as I am simulating loading a slow to load image by including a script tag at the bottom of the markup. HTML Markup The markup (segment) that we’re using is extremely simple. jQuery
QueryLoader ? preload your website in style There is always a minor problem when it comes to preloading image on a website. Nobody really has a full solution for it. There are a lot of preloaders available, but most of the time they only display the words: “Loading page” or have an animated image that spins. Why can’t there be a nice loading bar of some kind? I’ve gotten a few request on how to make a preloader, or people asking me how to get all the images of a web page and preload them (even the images in CSS). This preloader has it all. (a special shout out goes to Sieb of Siebdesign for coming up with the animation and the idea of building a preloader) Download the source code here: View the example here: Example with percentage visible: or download: (thanks to Olivier Dumetz) Features: Implementation: 1. 2. 3. 4.
Ajax : Vérification instantanée des champs d'un formulaire avec jQuery Lors d'une inscription sur un site via un formulaire classique, avec demande de pseudo, mail, nom, prénom... Il peut être intéressant pour l'utilisateur de faire une vérification des champs, avant l'envoi du formulaire (au clic sur un bouton "submit"), afin d'indiquer à la personne si un pseudo identique existe déjà par exemple. Voici ce que nous allons obtenir , le pseudo "numa" existe déjà. Nous allons voir ici, comment mettre en place ce type de contrôle en Ajax. Pour ce faciliter les choses, et puisque depuis que j'ai commencé avec jQuery je n'en démords plus, nous utiliserons cette librairie. On inclus donc le framework, par la ligne habituelle dans le "head" de la page : Premièrement mettons en place notre formulaire, en html classique avec : label, champ à remplir suivi d'un span "info" qui informera l'utilisateur sur la validité de ses champs. <script> $(document).ready(function(){ </script> }); $("input").focus(function(){ var info_form=$(this).next(".info"); info_form.empty(); });
Utilisation de l'objet XMLHttpRequest I - Introduction 1.1 - Quelques mots De plus en plus de sites web dynamiques (faisant appel à une base de données par exemple) requièrent une mise à jour de ses différentes pages, ou une partie de ses pages, de manière transparente, sans que l’utilisateur n’ait à rafraîchir lui-même la page. C’est ce que l’on appel communément la méthode Ajax. Nous allons donc voir au travers de cette astuce, ce qu’est l’objet XHR, et comment l’implémenter dans nos codes de manière simple. 1.2 - Techniques pré-requises Afin de comprendre parfaitement les explications de cette astuce, il est préférable de maitriser les sujets qui suivent : formulaire HTMLQuelques notions dans le langage JavascriptQuelques notions dans le langage PHP II - Présentation 2.1 - Principe L’utilisation de XHR est relativement simple en soit. 2.2 - Utilisation asynchrone Dès lors, XHR peut s'utiliser pour plusieurs choses : 2.3 - Avantages 2.4 - Inconvénients Ne fonctionnera pas sans javascript. III - Architecture IV - Mise en pratique <?
Webdesign & Webdevelopement Studio We were founded in 2010 . We work out of 2 offices. We just love building Website & Web application. Who are we ? Justalab is a small Web design & development studio based in Paris & San Diego. The team ? Our process ? Our philosophy ? Jacques Dutronc | Site officiel