Sidr - A jQuery plugin for creating side menus. You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too). It uses CSS3 transitions (and fallbacks to $.animate with older browsers) and it supports multiple source types. Get started Like any other plugin, you must include it after the jQuery script. For a better performance load them at the bottom of your page or in an asynchronous way. You have to include a Sidr Theme stylesheet too, choose between the dark or the light one, or if you prefer create one by your own. Using bower or NPM Instead of downloading the plugin, you can install it with bower or with npm: bower install sidr --save From a CDN If you want to load the scripts from a CDN to save bandwith or improve the performance you can use jsDelivr.
Demos & Usage Here are described differents ways of usage for this plugin, you can read and adapt them to your website’s requeriments. The Simplest Usage Create a div called sidr and place your menu there. Cookbook. Simple Animated Typewriter. Lateral On-Scroll Sliding with jQuery. After getting the request, we are going to show you how to create a "slide-in on scroll" effect. You've probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from "outside" of the page to the center when they are in the viewport. We will also add the opti View demo Download source After getting the request, we are going to show you how to create a “slide-in on scroll” effect.
You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The theme of today’s tutorial is going to be a timeline where we will have some circular elements on one side and the descriptions on the other. So, let’s start! The Markup The CSS The row will serve as a wrapper for the left and right elements: .empty() vs .remove() vs .detach() - jQuery.
Do you know that jQuery provides various methods to remove elements from DOM? These methods are .empty(), .remove() and .detach(). And in this post, I will show you how these methods (.empty vs .remove vs .detach) are different from each other. .empty(): This method removes all the child element of the matched element where remove() method removes set of matched elements from DOM. .remove(): This method takes elements out of the DOM. I had already posted about .empty() vs .remove(). Okay, so got the difference between .empty() and .remove(). .detach(): This method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements.
Let see the differences with an example. Now, remove the div element using jQuery and add it again in the page. See result below. First, take mouse of div and see that hover event is working. Okay, now let's do the same thing but this time using .detach() method. Again, take mouse of div and see that hover event is working. Windows-8-like Animations with CSS3 and jQuery. jQuery Plugin. Awesome jQuery snippets to work with forms. Disable “enter” key in your forms If you want to prevent visitors to accidentally submit your form by hitting the “enter” key, you can use this snippet to disable the use of the “enter” key in your forms.
$("#form").keypress(function(e) { if (e.which == 13) { return false; } }); Source: Clear form data Need to clear all form data? Here’s a handy function to do it. Source: Find is a checkbox is checked Find out if a single checkbox is checked or not. $('#checkBox').attr('checked'); Source: Enable/Disable form elements Want to make your forms more user-friendly? $("#submit-button").attr("disabled", true); And to re-enable a previously disabled input: $("#submit-button").removeAttr("disabled"); Source: $("#myform").submit(); SUPERSCROLLORAMA. SuperScrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome. First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama. Next, start up SuperScrollorama.
When initializing SuperScrollorama there are several options you might want to change. $.superscrollorama({options}) vars: optional properties for the pin method (object): isVertical Are we scrolling vertically (true) or horizontally (false)? Example Use the addTween method to build your scroll animations. .addTween(target, tween, duration, offset, reverse) target: scroll position (number) or element (string or object) tween: a Greensock animation tween object duration: scroll duration of tween in pixels (0 means autoplay) offset: adjust the animation start point reverse: disable reverse animation on up scrolling (optional) Example:
Calendar/Timeline. No iFrames! Dynamically Resize Divs with jQuery. It's no secret that iframes are one of the most hated methods of web page layouts in the web development world — they are horrible for SEO, user experience and (usually) design. I was recently charged with creating a page that needed functionality similar to what iframes would normally provide, and I thought I'd share the non-iframe way I went about completing that project. Before I get into the nitty-gritty of the project, I should probably unpack a few of the reasons why iframes are shunned. When a search engine indexes a page with iframes, each iframe is accurately recorded as a separate page — iframes embed the content of one we page inside of another, so it makes sense.
Because each of those "pages" is represented in a single layout, if a user wanted to bookmark your site, they'd probably have a frustrating experience when they try to return to your site, only to find that they are sent directly to the content in one of the frames instead of seeing the entire layout. 3. jQuery. jQuery Picture - Des images responsives avec du JS. JQuery Picture est un plugin pratique pour permettre aux images de votre site d'être responsives. Le plugin est vraiment simple d'utilisation, mais il ne s'applique sur les nouvelles balises html5 <figure> ou encore <picture> !
Balise figure: 1. <figure class="responsive" data-media="images/small.png" data-media440="images/medium.png" data-media600="images/large.png" title="LaFermeDuWeb"> 2. <noscript> 3. 4. 5. Le plugin vous autorise à utiliser plusieurs images pour différentes largeurs de son conteneur (l'élément qui l'a contient), qui varie à chaque resize du navigateur, via les attributs data-mediaXXX. Par exemple, l'image "medium.png" sera affichée pour un conteneur de 440px à 660px. Vous pouvez constater que si aucun JS n'est detecté, l'image par défaut dans la balise noscript sera affichée. Balise picture: 1. 2. 3. 4. 5. 6. 7. 8. Activation du plugin: Enfin il ne vous reste plus qu'à activer le plugin pour resize en douceur toutes nos images !
1.$('.responsive').picture(); Site Officiel. Freetile.js - Un plugin jQuery type masonry pour layout responsive. Freetile.js est un plugin jQuery permettant d'agencer dynamiquement un layout avec redimension fluide. Vous connaissez peut être Masonry ou Isotope dans le même genre de plugin, voici le dernier venu Freetile.js. Ce plugin permet d'agencer un layout composé de blocks, images etc. et d'optimiser l'espacement et alignement des blocs pour perdre le moins d'espace.
Dès que le navigateur est redimensionné, les blocs de repositionnent avec un effet de transition. Quelques points le différencie des autres plugins du même type: Pas besoin de créer des colonnes pour gérer les blocs, ni leur spécifier de tailleL'algorithme de positionnement des blocs est facilement personnalisable, il sera ainsi possible de le modifier pour aligner plutôt sur la droite par exemple. Son utilisation est très simple: Il suffit de mettre en sélecteur le conteneur de votre layout, et le tour est joué! Pratique dans cette ère du responsive webdesign que l'on connait aujourd'hui.
Site Officiel. Chained AJAX Selects. Martin Angelov In today’s tutorial, we will build a set of chained select elements. Selecting an option in one of them will trigger an update on the page, showing you more choices to refine your selection. We will describe the options server side with PHP, so it is easy for you to hook today’s example to a database. The idea for this tutorial was suggested by Casper Hansen from Denmark. The HTML As you can see from the screenshot below, the select box is accompanied by a title that explains what the selection is about. Chained AJAX Selects with jQuery and PHP When adding more questions, additional LIs are created by jQuery. Index.html – generated code <ul id="questions"><li><p>What would you like to purchase?
You might notice in the demo page that we aren’t using the default browser select controls. The jQuery code In the code, this is achieved using two JavaScript functions: You can see them below. assets/js/script.js Great! Here is a sample response from our PHP script: The PHP ajax.php / 1 Done. Mini Help System with jQuery. Martin Angelov In this tutorial, we are going to create a mini help system with jQuery. This will be a small widget which will display help text or a guide to users of your web application. The widget content is going to be searchable in real time, and all matching terms will be highlighted. The Idea For this example to work, here is what we have to do: We have to listen for the input event on the text box.
Let’s start with the markup. The HTML The first step is to lay down the HTML of the page that we will be working on: index.html <! There’s nothing out of the ordinary here – we are including a stylesheet in the head (you might want to take a look at it yourself, I won’t present it in this tutorial), jQuery and the scrollTo plugin at the bottom, along with two more js files that we will be discussing next. Mini Help System With jQuery The jQuery Code assets/js/highlight.jquery.js And voila, our text is full with pretty highlights! Here is how to use the plugin: assets/js/script.js Conclusion jQuery.
Menu. Slide Panel.