Jquery.ascensor.js Copyright (c) 2013 léo galley Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
On-Scroll Sliding 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. 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. The CSS The row will serve as a wrapper for the left and right elements: Demos
DataTables (table plug-in for jQuery) Vertical Sliding Panel More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons. Horizontal sliding panels are great for many situations, but like everything else, they’re not always ideal. The Plan So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? Here’s what I had in mind (click to enlarge or check below the image for working demos): First we’ll create the markup, then the CSS and then we’ll use jQuery to open and close our vertical sliding panel. Here are the files we will need for this tutorial: index.htmlstyle.cssjQuery libraryimages 1- Markup Let’s start with the head of our document. And then we can end our document with the closing body and html tags. To this:
jQuery Timeline 0.9.5 - Dando vida al tiempo Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Donec semper quam scelerisque tortor dictum gravida.
jVectorMap Quicksand, organisez vos données avec jQuery - Megaptery Quicksand est un plugin jQuery qui permet d’organiser dynamiquement des listes de données. Celles-ci sont filtrées et triées avec des effets transition très réussis. Un plugin très pratique pour redonner vie à vos listes de données ! Redonnez vie à vos listes HTML S’inspirant des applications Mac, Quicksand vise à créer une apparence similaire sur des données HTML. Voici un exemple d’utilisation de Quicksand : la présentation d’une équipe de webagency. Mise en place du plugin Commencez par déclarer une première liste d’éléments identifiée « source ». On ajoute un élément HTML à cliquer pour effectuer la transition entre les deux listes. Il faut ensuite faire appel à la fonction de Quicksand qui passe en paramètre la liste de destination. Et voilà, c’est terminé. Requis : jQueryDémonstration : : MIT/GPL version 2
Alsacréations Supersized - Full Screen Background Slideshow jQuery Plugin Here it is, all the Supersized documentation you're so eagerly waiting to read. Enjoy. Glossary Getting Started Options Variables Theme API Theme Variables First, you'll want to download the latest version of Supersized. autoplay fit_always fit_landscape fit_portrait horizontal_center image_protect keyboard_nav min_height min_width new_window pause_hover performance random slides slideshow slide_interval slide_links start_slide stop_loop thumb_links thumbnail_navigation transition transition_speed vertical_center Determines whether slideshow begins playing when page is loaded. type : boolean default : 1 Prevents the image from ever being cropped. type : boolean default : 0 Prevents the image from being cropped by locking it at 100% width. Prevents the image from being cropped by locking it at 100% height. Centers image horizontally. Disables right clicking and image dragging using Javascript. Allows control via keyboard. - Pause or play or - Next slide or - Previous slide Minimum height the image is allowed to be. theme.
Contact Form with jQuery Here’s an implementation of a contact form with PHP and jQuery. Usually, one would only want the message posted by the user to be sent to an email address. This script does that and also saves all these messages in the database for the admin to keep track of them. The table […] View demoDownload source Here’s an implementation of a contact form with PHP and jQuery. The table to store this data is the following: CREATE TABLE CONTACT( pk_contact INT UNSIGNED NOT NULL auto_increment, name VARCHAR(120) NOT NULL, email VARCHAR(120) NOT NULL, website VARCHAR(120) NOT NULL DEFAULT "", message VARCHAR(300) NOT NULL, added_date TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, primary key(pk_contact) )type=innodb DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; We will keep track of the name, email, website (optional), the message, and the date when the message was sent. We use jQuery for the front end, and AJAX for submitting the form.
Slider Kit, sliding contents with jQuery As many jQuery plugins, Slider Kit is a subtle combination of HTML, CSS and jQuery. The jQuery itself won't do any design or CSS. So you'll need to work on a CSS skin to get the design you want. But first, let's see some HTML. HTML elements Slider container CSS class name: [cssprefix]. This is the main container. Content panel CSS class name: [cssprefix]-panel. This is the sliding part. Previous button CSS class name: [cssprefix]-go-btn [cssprefix]-go-prev. This button will slide to the previous item. Next button CSS class name: [cssprefix]-go-btn [cssprefix]-go-next. This button will slide to the next item. Caption/Text-box CSS class name: [cssprefix]-panel-textbox. It is mostly used over photos. Nav/Carousel CSS class name: [cssprefix]-nav. This block contains navigation thumbnails. Nav previous button CSS class name: [cssprefix]-nav-btn [cssprefix]-nav-prev. This button will scroll the nav bar to the right. Nav next button CSS class name: [cssprefix]-nav-btn [cssprefix]-nav-next. HTML code sliderkit">
TUTO . com 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. 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 Changelog v1.3 - December 3, 2011 v1.2 - October 23, 2011