25 jQuery Plugins to help with Responsive Layouts. The most popular topic of discussion at the moment is undoubtedly responsive layouts in web design.
Without going into it too much, a responsive layout allows you to offer a specific and optimised screen size based on whatever device (mobile, tablet…) the visitor uses. You would typically use Media Queries to resize the overall layout, but what about all of those individual elements and features that make your page unique? Navigation, forms, images, sliders, carousels… they all need to be optimised as well. That is were this post comes in, by highlighting 25 jQuery plugins that will help you optimise and resize those trickier web elements.
Response.js Response JS is a lightweight plugin that gives you the tools for producing performance-optimized, mobile-first responsive websites. Response.js Responsly The Responsly plugin is a set of simple responsive widgets written using CSS3 transformations. Responsly. jQuery 1.4 Released: The 15 New Features you Must Know. jQuery 1.4 was recently released.
This wasn't simply a maintenance release as some had speculated; there are many new features, enhancements and performance improvements included in 1.4! This post covers the new features and enhancements that you may find beneficial. You can download jQuery 1.4 right now, here: 1. Passing Attributes to jQuery(…) Pre 1.4, jQuery supported adding attributes to an element collection via the useful "attr" method, which can be passed both an attribute name and value, or an object specifying several attributes. jQuery 1.4 adds support for passing an attributes object as the second argument to the jQuery function itself, upon element creation. Let's say you need to create an anchor element with several attributes. You may have noticed the "text" attribute— you'll probably be wondering what that's doing there, after all there's no "text" attribute for anchors! A better example of this in action: Read more about jQuery(…) 2. 3.
This also works with ".one()". jQuery Easing Plugin. Description A jQuery plugin from GSGD to give advanced easing options.
Please note, the easing function names changed in version 1.2. Please also note, you shouldn't really be hotlinking the script from this site, if you're after a CDN version you could do worse than try cdnjs.com Download Download the following: Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). Select easing types for the demo first one for down, second one for up. The Clicker Updates. Smooth Animated Menu with jQuery. Ever seen some excellent jQuery navigation that left you wanting to make one of your own?
Today we’ll aim to do just that by building a menu and animate it with some smooth effects. The Goal – One Smooth Menu Here’s a demo of what we’ll end up with by the end. Introduction – An explanation of easing The menu has such a smooth animation because of a thing called “easing”. “The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Thanks to the magic of the jQuery Easing plugin, we can now use easing outside of Flash and Actionscript environments. Step 1 – Set up the Structure Before starting with any jQuery, we’ve got to build a quick menu structure with XHTML and load in the required project files.
Nothing out of the ordinary here. Then copy in this menu structure into the body: Menu items have a class assigned to it that will designate the color of the block. Step 3 – Style with CSS. 8 Sites with Excellent jQuery Navigation. This is a gallery of sites that use jQuery to make the navigation clean, sharp, and elegant.
These sites use the framework to do more than just add gratuitous effects. Even though I’m a huge fan of Actionscript, Flex, and Flash in general, I love when navigations can keep usability while achieving fluid animation. A couple of these are so fluid you may forget it’s not Flash.