Ajax AutoComplete jQuery Plugin for Textfields Ajax Autocomplete for jQuery allows you to easily create autocomplete / autosuggest boxes for text input fields. It is built with focus on performance. Results for every query are cached and pulled from local cache for the same repeating query. It has been tested on IE 7+, FF 2+, Safari 3+, Opera 9+. Requirements: jQuery Framework Demo: License: MIT License
Sliding Letters with jQuery Today we have a neat little effect for you. We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. Today we have a neat little effect for you. We will be using the Lettering.js jQuery Plugin which you can find on Github. Example In the following we will go through an example and we’ll start by the html for a little menu: We will use data-hover to indicate the word that should appear on hover. So, “sl-w1″ is the class for the first word letters and “sl-w2″ is the class for the second word letters. Finally, we call the plugin: The following settings can be used: We hope you liked this little experiment and find it useful! View demoDownload source
Case Study: jQuery Fixer Upper Recently in the CSS-Tricks Forums, user named Waffle posted the following bit of jQuery JavaScript: $(function(){ $('.ContactArea').hide(); $('.Portfolio').hide(); $('.WebDesign').hide(); $('.AboutCoadin').hide(); $('li.Contact').click(function(){ $(".ContactArea").slideToggle(); }); $('li.PortfolioBtn').click(function(){ $(".Portfolio").slideToggle(); }); $('li.WebDesignBtn').click(function(){ $(".WebDesign").slideToggle(); }); $('li.AboutBtn').click(function(){ $(".AboutCoadin").slideToggle(); }); }); This user's actual question was how they can extend their code to add functionality to scroll the page down to the areas as they expand. It works, but... To start with, Waffle's code isn't broken, it works fine and because of it's simple nature the improvements that we'll end up making probably won't even make noticeable speed improvements. Do we need a DOM ready statement? The first line of code is this: $(function(){ Multiple Selectors, One jQuery Object The next lines of code are: ID's <!
untitled jquery.qrcode.js is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download. It doesnt rely on external services which go on and off, or add latency while loading. Show, dont tell, here is a example How to Use It Let me walk you thru it. Then create a DOM element which gonna contains the generated qrcode image. Then you add the qrcode in this container by jquery('#qrcode').qrcode("this plugin is great"); This is it. see it live. Conclusion jquery.qrcode.js is available on github here under MIT license.
Apprise - The attractive alert alternative for jQuery The initial release of Apprise has been a major success and is often what this site is most commonly associated with. As far as I've been able to track, Apprise has been downloaded over 23,000 times and has been mentioned in over 46,000 blogs. Which is fantastic, especially for something that I've never been very proud of. I've wanted to update, and change the UI, of this for over a year now. Time has finally permitted and it's, finally, ready. Demos Let's get right down to business. Pretty slick, right? Let's take a peak at the default settings before we change the options around a bit. You'll notice that the buttons are completely customizable and can easily be altered using your own CSS rules. Let's try another demo, but changing the settings around a bit. We're going to use a custom CSS class on our confirm button. You'll see the custom blue button with it's custom text, as well as a goofy little callback function that populates the field below: Response: Using
Apprise - Une alternative élégante aux alert Javascript en jQuery Apprise est un plugin jQuery permettant de proposer une solution élégante aux fameuses alert() Javascript. Il faut l'avouer, les alert() javascript dans un site en prod, c'est franchement laid ! Apprise propose de reproduire l'effet de ces alert JS mais avec style et de façon moins bloquante. Les possibilités d'Apprise sont nombreuses: Simple alert box ou affichage de texte (alert)Alert box avec demande de confirmation (confirm)Demande de saisie avec texte et confirmation (prompt)Etc Le plugin créé une fenêtre modale (qui ne se redimensionne pas automatiquement si on redimensionne le navigateur, dommage), moins bloquante qu'une alert javascript. D'un point de vue utilisation: 01. 03. if(r) { 06. else { Et la série d'options qui va avec pour personnaliser les textes, l'animation etc. 02.' 03.' 04.' 05.' 06.' 07.' 08.' 09.' Le style est personnalisable en CSS pour coller avec le design de votre site. Site Officiel
Rotating Image Slider with jQuery In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will […] View demo Download source In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. We’ll use the jQuery 2D Transformation Plugin for rotating the images and the jQuery Mousewheel Plugin by Brandon Aaron for the mousewheel control. The beautiful photos are by Andrew and Lili and you can see their Behance profile here: The images are licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License. Allrighty! The Markup First, we will wrap all our slider elements in a wrapper with the class “rm_wrapper”: The CSS The JavaScript
8 ressources Jquery pour sites fullscreen Les sites avec un webdesign plein écran, envahissent le web. Pour la simple et bonne raison que leur mise en page est souvent simple, efficace et permet de mettre avant des visuels qui en jettent. Pour vous aider a faire de même, je vous propose 8 ressources Jquery. Bien avant l’explosion et l’utilisation massive de Jquery, le Flash était la principale technique utilisée pour réaliser des sites « fullscreen« . Menu animé Jquery en plein écran Galerie fullscreen avec miniatures animées Galerie fullscreen Galerie Jquery avec miniatures Le célébre plug-in « Supersized » Jquery Jquery Fullscreener plug-in Un tutoriel CSS + Jquery Galerie / slider en fullscreen Partagez vous aussi vos ressources, je n’hésiterai pas à les rajouter à l’article ! Cette entrée a été publiée dans Ressources, avec comme mot(s)-clef(s) fullscreen, jquery, ressources, tutoriels, Webdesign.
10 jQuery Custom Scrollbar Plugins 10 jQuery Scrollbar Plugins to help you display present whatever content you have in a more interactive & more responsive way. The solution is jQuery, we’d like to present custom scrolling content using the power of CSS and the beauty of jQuery. Update 29/09/13: Added 11. jQuery NiceScroll Plugin Premium – VenScrollBar – A jQuery Scrollbar Plugin VenScrollBar is a jQuery plugin that allows web designers to replace the ugly, default OS scrollbar with custom ones that they create. 2. This tool brings HTML5 range input to all browsers in such a way that you can make it look and behave like you want. Source 3. Scrollbar Paper does not replace browser’s default scrollbar. Source 4. jQuery Scrollbar Replacements These scrollbars are fully themable allowing their behavior to be determined as well as their look. Source 5. jQuery Custom Content Scroller A custom content scroller created with jquery and css that supports mousewheel, scroll easing and has a fully customizable scrollbar. Source 6. Source 8.
Circular Discography Template with jQuery Today we want to share a simple website template with you. The template will show some discography or music albums in a rounded fashion, rotating the albums when clicking on next or previous. When clicking on an album, we will open the album details view which contains a music player (jPlayer) and […] View demoDownload source Today we want to share a simple website template with you. We will be using the following jQuery plugins and scripts that will help us with the effects and the functionality: We’ve added some nice music samples from the following artists: Audiotechnica – Testing by audiotechnica Coffeeeurope -Arena Blanca by Hektor Thillet Ramblinglibrarian – Our Resolve by Ivan Chew Syenta – Emerging Cry by Syenta Thanks to the artists for releasing their music under the Creative Commons Attribution Noncommercial (3.0) Licence! The initial screen of the template will show some loading element, and we will preload all the images. We hope you like this little template and find it useful!
jRumble | A jQuery Plugin That Rumbles Elements About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. Please read this before using jRumble. Flashing and flickering objects on the web can be dangerous. The Author My name is Jack Rugile. Like the Plugin? This plugin is free to use, however, if you enjoy jRumble and want to show some support, feel free share it or make a donation. Usage Include jQuery and jRumble Include jQuery and jRumble just before your closing body tag. Initialize jRumble on a Selector and Trigger Start or Stop You can do this in a script tag within your HTML or in an external JavaScript file. // Initialize jRumble on Selector $('#rumble-element').jrumble(); // Start rumble on element $('#rumble-element').trigger('startRumble'); // Stop rumble on element $('#rumble-element').trigger('stopRumble'); Demos Ranges View Source Speeds Opacity Trigger Examples Documentation Options/Defaults Known Issues
Overlay Effect Menu with jQuery In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect using jQuery. So, let’s start! The […] View demoDownload source In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. So, let’s start! The Markup The HTML structure will consist of a main wrapper div for the menu which will contain the overlay and the unordered list for the menu. <div class="oe_wrapper"><div id="oe_overlay" class="oe_overlay"></div><ul id="oe_menu" class="oe_menu"><li><a href="">Collections</a><div><ul><li class="oe_heading"> Summer 2011 </li><li><a href="#">Milano</a></li> ... The submenu divs will each have an inline style for the left position. Let’s look at the style. The CSS The style for the links inside of the submenu lists: