background preloader

Awkward Showcase – A jQuery Plugin

Awkward Showcase – A jQuery Plugin

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. But in looking at code like this with a slightly more experienced eye, there are things that stick out as things that we can likely improve upon. Since I bet there are some of you folks that are at Waffle's level and writing code like this, I thought we could use this as a case study to learn from. It works, but... Do we need a DOM ready statement? ID's <!

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

Parallax Content Slider with CSS3 and jQuery Warm welcome When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Read more Easy management Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Revolution A small river named Duden flows by their place and supplies it with the necessary regelialia. Quality Control Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. 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. We can either have the same word or a different […] 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

Vegas Background jQuery Plugin slick - the last carousel you'll ever need Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file. Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) When complete, your HTML should look something like:

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. If there are no results for particular query it stops sending requests to the server for other queries with the same root. It has been tested on IE 7+, FF 2+, Safari 3+, Opera 9+. Requirements: jQuery Framework Demo: License: MIT License

PikaChoose - An easy jQuery Slideshow Plugin slidr.js - add some slide effects. Add as many Slidr's as you want - even place them within each other.Dynamic resizing - adapts to the size of its content, unless you don't want it to.Keyboard navigation - move your cursor on top of the demo below, and hit the arrow keys!Touch navigation (mobile) - change the slides below by swiping left, right, up or down! Include either slidr.js or slidr.min.js somewhere at the bottom of your html page, after the body content. slidr.js works on any inline, inline-block or block elements with an id defined. Valid slides include any first-level children elements with the data-slidr attribute set to some unique value within the parent scope. For example: are all valid html markup for creating three different Slidr's within the same page. A global slidr object is available for calling. slidr.create('slidr-id').start(); create() accepts an optional settings parameter as its second argument. Settings Full details on available settings listed below: Global API Slidr API which produces this: good day.

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. 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

Peity • progressive <canvas> pie charts Peity (sounds like deity) is a jQuery plugin that converts an element's content into a <svg> mini pie 2/5 donut 5,2,3 line 5,3,9,6,5,9,7,3,5,2 or bar chart 5,3,9,6,5,9,7,3,5,2 and is compatible with any browser that supports <svg>: Chrome, Firefox, IE9+, Opera, Safari. Download version 3.2.1 Uncompressed 8.7Kb jquery.peity.js Minified 3.6Kb (+gzipped 1.7Kb) jquery.peity.min.js Source github.com/benpickles/peity Pie Charts Call peity("pie") on a jQuery selection. You can also pass delimiter, fill, height, radius and width options. <span class="pie">1/5</span><span class="pie">226/360</span><span class="pie">0.52/1.561</span><span class="pie">1,4</span><span class="pie">226,134</span><span class="pie">0.52,1.041</span><span class="pie">1,2,3,2,2</span> JavaScript $("span.pie").peity("pie") Donut Charts Donut charts are the same as pie charts and take the same options with an added innerRadius option which defaults to half the radius. $('.donut').peity('donut') Line Charts $(".line").peity("line") Events

3D Gallery Room « Previous Demo: 3D Book Showcase Images by Thomas ClaveiroleBack to the Codrops Article 3D Gallery Room Demo 1 Demo 2 x 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

Windy – A Plugin for Swift Content Navigation Coco LokoTotal bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat. Vermouth LandVelit chambray fugiat, enim aesthetic esse ullamco typewriter. ElectrodynamicsBefore they sold out PBR magna jean shorts non seitan ea.

Related: