PageSlide: a jQuery plugin which slides a webpage over to reveal an additional interaction pane. Advertisement a jQuery plugin which slides a webpage over to reveal an additional interaction pane by Scott Robbin Download PageSlide Now If you've ever used the mobile version of Facebook, or Path,then you've probably seen something akin to PageSlide in action.
Clicking on a button or link slides the page over to reveal a hidden pane,one that usually contains secondary navigation, a form, or additional information. There are several ways to use PageSlide, some of which are shown below.Additionally, there is a responsive demo which shows how PageSlide can be used as a mobile solution. Slide to the right, and load content from a secondary page Slide to the left, and display hidden content from this page in a modal pane Modal This slide uses "modal" option set to "true". Where can I get it? If you are interested in learning more about PageSlide, it's recommended that you view the project on GitHub.
Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built. 33 Fresh jQuery And CSS3 Tutorials. In this post we have compiled some useful jQuery and css3 tutorials. Enjoy!! If you like these tutorials you might also want to check out our previous posts below. 33 Excellent jQuery Tutorials 19 CSS3 and jQuery Tutorials for Perfect UI Design Hover and Click Trigger for Circular Elements with jQuery Elastic Image Slideshow with Thumbnail Preview Fullscreen Image 3D Effect with CSS3 and jQuery Easy CSS3 & jQuery tooltips Wave Display Effect with jQuery Draggable Image Boxes Grid Chained AJAX Select Simple and effective dropdown login box Cycle Through Images on Hover with jQuery Build A jQuery Image Gallery How To Build A Slideout Feedback Form In jQuery Switch Stylesheets With jQuery Flashing text with jQuery Image Zoomer with jQuery Simple Lightbox with jQuery sumon math game with jquery Cool Background Image Sliding effect with jQuery Image map with CSS3 & jQuery tooltips How to Create a Jquery Plugin jQuery Image Gallery Create a Flexible Data Heat Map Face Detection with jQuery Stylish CSS3 progress bars.
Chosen - a javascript select thingy. Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options.
Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. Default Text Support Chosen automatically sets the default field text ("Choose a country... ") by reading the select element's data-placeholder value. Note: on single selects, the first element is assumed to be selected by the browser. No Results Text Support Setting the "No results" search text is as easy as passing an option when you create Chosen: Limit Selected Options in Multiselect You can easily limit how many options the user can select: Right-to-Left Support. Smooth Resizing with Responsive Web Design and CSS3 Transitions. 33 Excellent jQuery Tutorials. Adapt.js - Adaptive CSS.
Codrops - useful drops of code. Scrolling Parallax: A jQuery Plugin. Scrolling Parallax examples Simple scrolling parallax effect Multiple, layered parallaxes for a nice depth effect Parallax in all directions: vertical and horizontal scrolling Parallax called on a piece of inline HTML markup About Scrolling Parallax Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. Basic use of the Scrolling Parallax plugin is extremely easy. The Scrolling Parallax plugin is also very versatile. Download the Scrolling Parallax Plugin for jQuery Scrolling Parallax for background images Using the parallax for a background image is incredibly easy. . $.scrollingParallax('img/background-parallax.jpg'); This will append the image to the page, and stretch its dimensions as described above.
This would stretch the background width to 200% of the screen size, and enable the parallax to work on horizontal as well as vertical scrolling. Scrolling Parallax on jQuery objects $('div.parallax-div').scrollingParallax(); staticSpeed : .2. jQuery and CSS single page portfolio, a vertical parallax navigation experiment « Design and Development tuts – TutorialShock.
Once in a while, something new shows up that has the power to shake the world and stimulate all people to keep moving instead of stay still, this quote applies for practically every instance in life and business. A while ago, Nike released an astonishing website named “Nike Better World” to support all the athletes around the world; the design itself was brilliant and it generated a lot of positive reviews, but the real breakthrough came thanks to the navigation system that these guys made, a fantastic vertical Parallax system. On this tutorial we’re going to undress the structure of this website and then we’re going to create something inspired by Nike’s website using jQuery and CSS. View Demo Download Source This tutorial is a practical exercise, created with the only intention of explore the functionality behind the “Nike Better World” website, all the credits belong entirely to Nike. How does it work?
Understanding the “Nike” effect Step 1: Insert the HTML Step 2: Working with jQuery. JqDnR :: Minimalistic Drag'n'Resize for jQuery. Who? JqDnR Minimalistic Drag'n'Resize for jQuery What? JqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. Features; Drag + Drop Element Posistioning South East ResizingDefinable Drag and Resize "handles"Translucent Dragging, Preservation of Original Opacity Why?
I wrote jqDnR to compliment jqModal elements, allowing drag+resize functionality while remaining true to the plugin's minimalistic architecture. jqDnR provides the all the basic elastic functionality most dialogs will need. If you like jqDnR, please consider a dontation to support its development: When? Current Version: 2007.08.19 +r2 (c) 2007 Brice Burgess under The MIT License Where? Download the Plugin (jqDnR.js - 972 bytes) Download the Dimensions Plugin (dimensions.js) [OPTIONAL] - If detected, the dimensions plugin by Brandon Aaron will be used to alleviate Internet Explorer "jumpiness" with elements that have fixed or percentage based position. How? Examples 1. Javascript 2. 3. Etc. 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. Please use this plugin responsibly. 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. Tutorials.
Opera mobile window chooser, recreated with jQuery. It’s always fun to play with jQuery especially when you are trying to recreate something that you enjoy using. One such thing is window chooser in Opera Mobile browser where opened windows are positioned below each other and only a portion of each window is visible. The one on the top is current window that is fully visible. Clicking on those windows is followed by some nice effect. View demo Our “windows” are nothing more than simple unordered list. On the very beginning we define how much each window will be hidden and how much it will slide to the left and right.
Var itemWidth = $("#container li").width(); // hide 50% of each window var itemPosition = itemWidth * 50 / 100; // slide each window 60% if its width var itemMove = itemWidth * 60 / 100; // move windows below each other and assign ID to each $("#container li").each(function(i) { $(this).attr("id", i).css("z-index", 100 - i).css("left", itemPosition * i); }); Now the main part. Here’s how we slide windows to the right. Supersized 3.0 – Full Screen Background & Slideshow jQuery Plugin. Supersized has been one of the most popular posts on Build Internet since the original came out in February 2009. We thought it was time for an update. This is an outdated version! Supersized has been moved and updated to a more permanent home at the official Supersized project page. Check there for the latest release notes and features!
Introducing Supersized 3.0 Supersized has been one of the most popular posts on Build Internet since the original came out in February 2009. It was later updated during spring 2009 to version 2.0 and has laid untouched ever since. Over one year later, I’m happy to announce Supersized 3.0 – enjoy. Features Resize images to fill the entire browser window while maintaining proportional dimensions.Fullscreen slideshow complete with transitions, navigation, captions, and preloading.Integrate with existing sites or create your own portfolio gallery. New in Supersized 3.0 Questions, Thoughts, and Dreams License Google+ ThemeRoller. Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.
Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Section 2 Sed non urna. Section 3 Nam enim risus, molestie et, porta ac, aliquam ac, risus. List item one List item two List item three Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus mattis tincidunt nibh. Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Lorem ipsum dolor sit amet, Nulla nec tortor. Nam congue semper tellus. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam congue semper tellus. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque dui nec velit. Selectors. Select all elements that are in the progress of an animation at the time the selector is run. Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).
Selects elements that have the specified attribute with a value containing the a given substring. Selects elements that have the specified attribute with a value containing a given word, delimited by spaces. Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive. Selects elements that have the specified attribute with a value exactly equal to a certain value. Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value. Selects elements that have the specified attribute with a value beginning exactly with a given string. Selects all button elements and elements of type button. Selects all elements of type file.