background preloader

Chained AJAX Selects

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

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. The project I was tasked with required the ability to resize only certain sections of a page, while asynchronously shrinking another section so that the entire page would always stay the same size, with only the two sections inside changing size. Let's look at an example with two divs, side by side on a web page: One div will contain a navigation menu to jump to different pages of the website (#sidebar), and the second div will contain all the content for that page (#content). Lay out your two divs:

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. 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) controller.removeTween('#fade'); Example:

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

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? 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: Enable submit button if text entered $("#myform").submit();

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. View demo Download source After getting the request, we are going to show you how to create a “slide-in on scroll” effect. 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 HTML structure is going to consist of a main container and some rows that we’ll use to place the left and the right elements. For the circles we’ll have three different sizes and we’ll indicate that but giving the respective row the class of “ss-small”, “ss-medium” or “ss-large”. The CSS The row will serve as a wrapper for the left and right elements: The JavaScript Demos

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. 2. 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. Pour la balise picture, le fonctionnement est similaire, au lieu d'utiliser les attributs data-mediaXXX vous listez chaque image à utiliser via des balises <source>, qui contiennent l'attribut media qui va définir la largeur du conteneur pour laquelle elles seront affichées. Activation du plugin: Site Officiel Sur Github

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

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. 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. <a id="simple-menu" href="#sidr">Toggle menu</a><div id="sidr"><! Open/Close Programatically Themes

Related: