Crafting a polished and unique experience for your users is becoming ever more critical as the Web gets more overloaded. Standing out is hard. To the rescue come frameworks such as jQuery, which offer a modular, highly customizable experience for your visitors.

Today, we are thrilled to introduce two new jQuery plug-ins that were developed exclusively for Smashing Magazine readers to liven up your developer tool belts: Orbit, a new slider; and Reveal, a modal plug-in.
Why Create Our Own?

Quickly, before diving into the details, some background would be helpful. There are hundreds of jQuery image and content sliders and probably thousands of modal plug-ins. So, why create our own? We wrote these for a number of reasons, the most important ones being:

Flexibility
We use these plug-ins for clients, internal projects, our apps and a number of other places. We can easily tweak and re-use the code for specific and special implementations.
Experience
There is no better way to learn how to create better plug-ins and code than to do it yourself and release it publicly. Orbit has undergone a number of iterations and rewrites, which we learned from. Reveal has undergone only a few. We got Raptorize right the first time and haven’t had to update it.
Better interactions and development
Perhaps the biggest driver was that, across our team, we used a number of plug-ins that have different quirks and features, but none of them nailed the features and interactions that we wanted. Developing plug-ins allowed us to work from a uniform codebase, iterate and optimize our work.

Have a look at a couple of our previous articles:

Spicing Up Your Website with jQuery Goodness
Demonstrates several creative techniques for increasing usability with jQuery.
Stronger, Better, Faster Design with CSS3
Introduces some powerful uses of the upcoming CSS3 standard.

Orbit: jQuery Image Slider

First up is our new jQuery slider, Orbit. At a mere 4 KB, Orbit can handle images, linked images and straight-up content blocks. Setting it up takes just a few minutes, and it has some styles out of the box. We started working on Orbit because of all the many jQuery image sliders, none seemed straightforward to implement or had nice default styles. After several iterations and releases, the addition and removal of a number of features and some serious learning, we had a plug-in that perfectly fit our needs.

Let’s dive into the code, shall we?

Orbit-screen in Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows
The Code

To get started, you’ll need jQuery and the Orbit plug-in (make sure jQuery is attached first).

Now we can quickly hook up the CSS that we need:

Finally, let’s dig into the mark-up.

Just a couple of notes before moving on:

Orbit will dynamically determine the height and width of your set of images and scale accordingly, but make sure that all of your images are the same size or else the larger ones will peek out at the sides.
You’ll notice that the id of the parent div is featured, but it doesn’t have to be. When you call the Orbit plug-in, you can set your own selector, and then the magical orbit class will be applied.

All we need to do now is activate the Orbit plug-in.

There you have it: Orbit, implemented and ready to be used with all of the default settings. To see more options, clean up the slider and do more advanced customization, please continue reading.
Neato Options

Of course, you’ll want some other features like HTML captions, bullet navigation (with thumbnails), and using content instead of images. Here’s the low-down on how to get these going.

Here are all of the plug-in parameters and their default states. The options are commented out to the right. Go nuts!

$(‘#featured’).orbit({
animation: ‘fade’, // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed: 800, // how fast animations are
timer: true, // true or false to have the timer
advanceSpeed: 4000, // if timer is enabled, time between transitions
pauseOnHover: false, // if you hover pauses the slider
startClockOnMouseOut: false, // if clock should start on MouseOut
startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
directionalNav: true, // manual advancing directional navs
captions: true, // do you want captions?
captionAnimation: ‘fade’, // fade, slideOpen, none
captionAnimationSpeed: 800, // if so how quickly should they animate in
bullets: false, // true or false to activate the bullet navigation
bulletThumbs: false, // thumbnails for the bullets
bulletThumbLocation: ”, // location from this file where thumbs will be
afterSlideChange: function(){} // empty function
});

Full HTML Captions

Orbit has full HTML captions, so you can add styles, links, lists or whatever else your coding heart desires.

Add a span with the class orbit-caption and an ID of your choosing after the slider div. Put whatever HTML you’d like to appear in the caption inside. They’re block level, so anything goes.
Add the span ID you chose to the data-caption attribute of the corresponding image tag.

Check it out:

I’m a badass caption

Want to animate those captions? Just change the captionAnimation parameter (fade, slideOpen, none).
Bullet Navigation

Getting a new bullet navigation is as easy as passing a parameter when you call the Orbit function. The bullet navigation is natively an unordered list, but in the example and in the kit we’ve replaced them with nice little round bullets. (Changing this is a just a matter of changing the CSS to whatever you’d like.)

Orbit can now pull thumbnails for your bullet navigation! First, create your thumbnail and save it somewhere in your file directory. Below is the HTML, CSS and JavaScript to make it work:

// The JS

/* The CSS: Just provide a width and height for the thumb.
All bullet navigation thumbs will have a class added “has-thumb”
*/

.orbit-bullets li.has-thumb {
width: 100px;
height: 75px; }

Using Text

Orbit is text-compatible, too. It can be mixed with images, but just make sure your text is in a div tag and has a background of some type (otherwise the images behind it will be visible). To make the text look nice, give it a background (so that other images in Orbit don’t bleed behind it). Just drop it right into the mark-up, this way:

Using only text? Orbit relies on image sizes to get its dimensions. However, you can just go into the Orbit CSS and find the .orbit div declaration and set it to the exact pixel width and height you want.
Making Orbit Shine

Orbit looks fairly reasonable out of the box (so to speak), but getting a real polish requires a couple more bits of work: in particular, getting a load before images pop in, and adding fixes for some less fortunate browsers (i.e. IE).
Glorious, Seamless Loading State

For those in pursuit of the ultimate polish, we’ve made it easy to create a simple loading state for your slider. Add the following declaration anywhere in the CSS (just replace featured with your slider’s ID, and use your own images’ widths and heights):

#featured {
width: 940px;
height: 450px;
background: #000 url(‘orbit/loading.gif’) no-repeat center center; overflow: hidden; }
#featured img,
#featured div { display: none; }

Apply the CSS to your unique slider ID, because the plug-in won’t know the ID until after it loads. Adding this CSS will prevent any unstyled content from flashing before the plug-in finishes loading. These styles are in the demo CSS in the kit.
Non-Relative Positioning

The way Orbit works is that your container gets wrapped by another container. This means that if you are positioning your slider absolute or want to center it with margin: 0 auto, applying these to your slider’s ID (#featured in this example) won’t work. The best way to solve this is to put all positioning pieces on your ID and div.orbit-wrapper.

#featured, div.orbit-wrapper {
position: absolute;
top: 50px;
left: 50px;
}

Note: You could also just position the parent container of the Orbit slider if there is one.

As we all know, IE is not a designer or developer’s best friend, but we’ll try to make it easy on you. As of version 1.1, Orbit works in IE7+, but because CSS3 transforms and RGBa aren’t available, we have to perform some magic to fix the timer and caption default background. The easiest way to fix these issues is to hide the timer and to use Microsoft’s proprietary alpha solution. You can use the following conditional declaration in the header of your document.

Orbit-small-thumb in Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows
Orbit: jQuery Image Slider

Orbit helps you make your images slide around. Check out our demo to see the plug-in in action. It works best in Chrome, Safari, Firefox 3.5+ (but is tested for IE 7+, Firefox 3.5+, Chrome and Safari).

Live demo » | Download the kit »

Reveal: jQuery Modals Made Easy

You can create beautiful modal windows on your page with our jQuery Reveal plug-in. Modal windows allow developers to make critical information stand out. Setting up Reveal modals takes only three easy steps. Attach the needed files, drop in the modal mark-up, then add an attribute to your button.

We created Reveal because we couldn’t find a simple solid solution. We often used and reused our own scripts to create modals because existing plug-ins were too heavy (they allowed for Flash integration and a hundred other things), and they didn’t use basic CSS to create flexible, reusable code. We think we’ve solved both of these issues with Reveal.

Reveal-screen in Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows

Reveal is useful because it’s easy to implement, compatible with modern browsers (with some graceful degradation, of course) and lightweight (coming in at only 1.75 KB). What this means for you is that it’s fast, sexy and just works.

Let’s see how you can get Reveal working!
Step 1: Attach the Required Files

/* Attach the Reveal CSS */

/* jQuery needs to be attached */

/* Then just attach the Reveal plug-in */

Clearly, you need the Reveal kit (.zip) to do this, so please download it first.
Step 2: The Modal Mark-Up

Just give your modal div the class reveal-modal and a unique ID (we’ll use the ID to launch this modal). The anchor with the class close-reveal-modal provides a button to close the modal (although by default, clicking the faded black background will also close the modal). Placing the mark-up just before the closing body tag is usually best.
Step 3: Attach Your Handler

Click Me For A Modal

By putting the data-reveal-id attribute on the anchor, the plug-in, when clicked, matches the value of the data-reveal-id attribute (in this case, myModal) with an HTML element with that ID. Basically, put the data-reveal-id attribute on an object, and make its value the ID of your modal.

While the data-reveal-id is a great way to make firing a modal easy, it will often need to be fired programatically. That’s easy enough, too:

/* Programmatic Launching Of Reveal */

Options

Good plug-ins have options, and this one has just a few, but important ones:

$(‘#myModal’).reveal({
animation: ‘fadeAndPop’, // fade, fadeAndPop, none
animationspeed: 300, // how fast animations are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: ‘close-reveal-modal’ // the class of a button or element that will close an open modal
});

If you are wondering how to use the options when you’re using the data-reveal-id implementation, it’s easy: just take the option and add the data- before it, and pass a valid value. Here it is with the default values:

data-animation="fadeAndPop" data-animationspeed="300"
data-closeonbackgroundclick="true" data-dismissmodalclass="close-reveal-modal"
>Click for a modal

Reveal-medium in Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows
Reveal: jQuery Modal Plug-In

Surprise your visitors with some elegant modal windows. Download our lightweight modal plug-in and start popping up informative and varied dialogs on your pages. Check out the demo to see this plug-in in action.

Live demo » | Live demo »

Bonus: Raptorize jQuery Plug-In

We’ve all been there: sitting at your desk, coding a large website, knee-deep in Extreme Cheddar Doritos, sipping on a liter of Code Red Mountain Dew, when you realize that this page would be…

So-much-more in Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows

You immediately race home to grab your Jurassic Park DVDs, so that you can screencap a velociraptor attack. Then you realize how hard it would be to make a raptor run across the website you’re coding. Plus, how will you get that distinctive velociraptor screech? We’ll let you in on a little secret…

We’ve already done it.

Raptorize was created because there was a meme going around the design community about putting velociraptors in visual designs, and we thought there was serious potential for that to live in code. We also wanted to play with some animations, HTML5 audio tags and the Konami Code!

Raptorize-screen in Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows

First things first: you need to download the Raptorize kit. It has:

An awesome raptor graphic, courtesy of Raptorize;
MP3 and OGG audio files for the HTML5 audio on Webkit and Firefox;
Our jQuery plug-in, which makes the magic happen;
The jQuery library, to make all of the pieces work together;
An sample HTML file that has all of the set-up pieces.

First, attach the scripts and activate the plug-in in the head of your document:

')

The only thing to know here is that you need an anchor or element with the class myButton.

And there you have it. You’re done!
The Options

What’s that? You want to be able to control the entrance handler? You can! Raptorize can be activated on a click event (which is the default), on a timer that fires only after the page has loaded, or on the legendary Konami Code. Our personal favorite is the Konami Code (but it only works once per page load).

//The options for this plug-in

Go ahead, try the Konami Code: ↑ ↑ ↓ ↓ ← → ← → B A.

If you don’t want to store the Raptor image and sound files in the same directory as your JavaScript, just open the plug-in and edit the location of the assets in the first two variables of the code (raptorImageMarkup and raptorAudioMarkup).

While the awesomeness that is the Raptorize plug-in is 100% original code, the idea of including a glorious raptor in a design is not. We owe credit to Phil Coffman and Noah Stokes for the raptor assets and the brilliance of adding a raptor to a design.

Raptorize-thumb in Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows
Raptorize: jQuery Plug-In

Want to relive the glorious ’90s cinematic action-adventure dinosaur flicks on the pages of your website? We have the solution for you.

Live demo » |
Download the kit »

Hopefully these tasty new treats will liven up your pages and make for a more enjoyable experience for you and your visitors.

jQuery Plug-Ins For Image Sliders and Modal Windows

Frameworks are helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point.

This time we will talk a little about frameworks and other tools, like generators and templates.

So, let’s rock.

HTML5 Boilerplate – Templating that fits all needs

This is the most useful for me. I usually have jobs that need easy setup, but a lot of optimizations tools (minifiers and more) and, at the same time, I’m quite familiar with CSS, so too much preset CSS is a waste of time to me (since I spend a few hours coding CSS, but much more to understand and re-utilize framework’s code).

Cool features:

• Constantly improving – Last update says that they reduced the overall size of the published boilerplate by 50%
• Build script – .js and .css minify, image optimization, html optimization, server configurations for caching…
• Custom install setup – So you can choose what you want in “your” boilerplate
• Cross-Browser compatible
• HTML5 Ready
• Print stylesheet ready to use

52framework – Supports almost anything

I am amazed by all the things you can do with this framework. It has a lot of resources that I thought would never work on IE. This is a good option when you want a somewhat styled template and  are planning to use almost all power of HTML5.

What do I like:

• Almost anything you want with HTML – Local Storage, video player, canvas, forms…
• A lot of CSS3 proprieties – As you can see in CSS demo, it has a good CSS3 support
• Video Tutorials – Yeah, it makes even easier to understand 52′s workflow

G5 Framework – Good tools collection

Actually Greg Babula says that it meant to be just a personal project. But it is much powerful than he thinks.

As it was made from personal experience, it has a lot of tools that we already know how to use (Modernizr, CSS Reset, jQuery, Orbit Image Slider…), thus we don’t waste too much time learning.

Perkins – Lighweight and LESS

I must admit that I should use LESS much more than I do. If you think this way, Perkins may be a good option for you. It comes with a set of LESS stylesheets and mixins for common tasks such as creating navigation, rounded corners, gradients and much more.

Sprites.js – Animation framework (HTML5 support, of course)

Yeah, sometimes our customer wants some animations on their site. Why should you use flash when (almost every time) you can use HTML5?

Sprite.js provides a simple integration for canvas and HTML animations so you can do easily some animations, with maximum performance.

Lime.js – Gaming framework

Just take a look at the demo games, and tell me if it isn’t amazing.

Some features (HTML5) that you can use on it:

• Optional install – For mobile users it is really good, just bookmark your game and you’re done
• KeyFrame animations
• Full support of sprite sheets
• Stroke support – So you can draw a stroke around shapes
• Good documentation – Just take a look at all classes you can use with it, pretty cool

HTML5 multimedia framework for WordPress

If you are a WordPress person, you will find it useful. With this plugin, you just have to add a shortcode and you have a HTML5 media player in your site.

The framework currently supports:

• mp4 (h.264,aac)
• ogg (theora,vorbis)
• mp3 (audio only)
• webm (vp8,vorbis).
• wmv (via MediaElement.js)
• flv (via MediaElement.js)
• wma (via MediaElement.js)

Modernizr – HTML5 & CSS3 with fallbacks

Modernizr helps us to implement HTML5 and CSS3 for browsers that don’t natively support it. Actually many of the tools mentioned above use it.

Want to know more about its amazing features? Just read The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks.

It is really simple to use, when modernizr detects your browser’s features, it adds classes to you HTML, so you can easily switch to a valid fallback. Try to run the demo and see its results for a better comprehension.

Select[ivizr] – CSS3 Selectors for IE

IE (6-8 mainly) is surely the greatest barrier to CSS3 spread. CSS3 selectors are almost forgotten for some developers, that just know they exist because can use them with jQuery.

You just need one of the 7 supported JavaScript libraries and you are ready to install it (via conditional comments, so just IE will see it). And then you’re done, just write you pretty CSS3 selectors as you aways wanted.

CSS3 button framework

With this framework you have easily a lot of good buttons options. It is specially useful for back-end developers, that aways need some pretty buttons, but don’t have time (or budget) to do so.

They are all CSS3 ready, and can be easily customized.

Templates – General HTML5 and CSS3 samples

Coming Soon Template

Design Company

Real State

Free HTML5 & CSS3 theme

Create An Elegant Website With HTML 5 And CSS3

Starter Pack

Much more inspiration at HTML5 Gallery

Some useful tools

CSS3 Button Maker

CSS Transforms code generator

CSS3 Gradient generator

CSS3 Drop Shadow Generator

CSS Generator for radius, shadows, rgba, @font-face, columns and more

The best @font-face generator I’ve ever seen

HTML5 Visual Cheat Sheet

Making a CSS3 Animated Menu

Photobooth with PHP, jQuery and CSS3

How To Create a Stylish Button Entirely with CSS3

Create Digital Poster Design with CSS3 Only

Create Attractive Web Typography with CSS3 and Lettering.js

Create a Stylish Contact Form with HTML5 & CSS3

Creating CSS3 buttons in easy way

Clean and Stylish CSS3 Form

Create a Stylish Tab-Based Interface with CSS3

HTML5 & CSS3 envelope contact form

Create a CSS3 Image Gallery with a 3D Lightbox Animation

How to create slick effects with CSS3 box-shadow

CSS3 dropdown menu

How to create a cool and usable CSS3 search box

Create a Slick CSS3 Button with box-shadow and rgba

Multi-column text using CSS3

Spin those Icons with CSS3

CSS3 Animation With jQuery Fallbacks

Sexy Image Hover Effects using CSS3

Advanced (yet awesome) pure CSS3 boxes without using images

Create an adaptable website layout with CSS3 media queries

Create a Grid Based Web Design in HTML5 & CSS3

Animated CSS3 helix using 3d transforms

Rotating billboard using only CSS3

How to Create A Multi-Step Signup Form With CSS3 and jQuery

You can see how it`s work her:

demo

Hear is all jquery code:

 (function($) { $.fn.animatedBG = function(options){ var height = $(this).height(); var width = $(this).width(); var parts = options.parts; var parts_width = width/parts; var bg_image = $(this).css("background-image"); var animationWidth = options.animationWidth; if (animationWidth == 'auto' || animationWidth == undefined) { animationWidth = parts_width; } for (i=1;i<=options.parts;i++) { $(this).append(" "); $(this).find(".bg_part_"+i).css("float", "left"); $(this).find(".bg_part_"+i).css("background-image", bg_image); $(this).find(".bg_part_"+i).css("background-position", "-"+parts_width*(i-1) + "px 0"); $(this).find(".bg_part_"+i).css("width", parts_width); $(this).find(".bg_part_"+i).css("height", height); $(this).find(".bg_part_"+i).hover(function() { $(this).animate({backgroundPosition: "-"+parts_width*($(this).attr("rel")-1)-animationWidth + "px 0"}); } , function() { $(this).animate({backgroundPosition: "-"+parts_width*($(this).attr("rel")-1) + "px 0"}); }); } }; })(jQuery); 

And now I will explain you how it`s works. First you need to copy all code to new file, for example animatedBG.js and add to your page header . Now you can call this script like this:

 jQuery(document).ready(function() { var options = { parts: 10, animationWidth: 146 } $('#bg').animatedBG(options); }); 

Option “parts” means in how many parts your background will be split and option “animationWidth” means how far background will go to left during the animation. In “animationWidth” you can also set to “auto” then “animationWidth” will be the same as background split white. You need to use this script on page element who have some background.

The tradition method of dynamic history/”back button” management has always been hash-based JavaScript technology.  Newer technology, including HTML5′s window.onpopstate and history.pushState methods, allow for more reliable methods for managing history.  MooTools’ History plugin supports modern and legacy methods for history management.  Let me show you how to quickly implement the MooTools History plugin.

HTML Structure

The History plugin doesn’t require any HTML structure adjustments but at least one designated content should be identified; you can, of course, have as many content areas as you like, but you’ll most likely need multiple AJAX requests to retrieve their content, unless you use a Request.JSON request to retrieve content for multiple areas of the page. For this simple demo, we’ll define a header, footer, and menu, and content area:

<div id=”body”>

<!– header –>
<header>
<a href=”/” data-noxhr>David Walsh Blog</a>
<div>MooTools History Plugin Demo</div>
<div>This is a simple example of the MooTools History plugin created by Christoph Pojer</div>

</header>

<!– menu –>
<ul id=”demoMenu”>
<li><a href=”mootools-history.php”>Home</a></li>
<li><a href=”mootools-history-david.php”>About David Walsh</a></li>
<li><a href=”mootools-history-mootools.php”>About MooTools</a></li>
<li><a href=”mootools-history-christoph”>About Christoph Pojer</a></li>
</ul>

<!– content area –>
<article id=”contentHolder”>

<!– initial page content goes here –>

</article>

<!– footer –>
<footer>

</footer>
</div>

The content area is the only area which will have its content change. The page should load as usual

The MooTools JavaScript

Assuming that the MooTools History plugin has been included in the page, there are a few functions that should be created upon domready.  The first is a method which will perform the request for content when a link is clicked:

// Content holder (all content placed within this element)
var contentHolder = document.id(“contentHolder”);

// Create a Request object which will be reused when links are clicked
var request = new Request.HTML({
onSuccess: function(nodeTree,elements,html) {
// Set the content into the content holder
contentHolder.set(“html”,html);
// Execute directions that should be executed whenever a page changes
onPageUpdate();
}
});

// Create a function that loads the page content
var loadPage = function(url) {
// Make a HTML request to get the content for this page
request.send({ url: url });
};

The next step is creating a method (which is theoretically option, but you'll usually want to do something once content has loaded) which will execute every time content is received:

// Function that will execute whenever a page gets changed
var onPageUpdate = function() {

	// Do whatever you'd like here!  

	// Possibly manually record a Google Analytics page view?

};

History doesn't request that you do anything when content is received, but you'll likely want to do something. Why manually record a page view within Google Analytics?

This next piece is important in turning links to static pages into AJAX-ified History triggers. Just one big Element.Delegation event delegation call will do the work for not just the initial page load, but every History AJAX load after that:

// The listener that manages all clicks
var listener = function(evt){
	evt.preventDefault(); // Prevent following the URL
	History.push(this.get('href')); // Push the new URL into History
};

// Add event delegation to add clicks.  Both of these work:
//document.body.addEvent("click:relay(a:not([href=#]):not([href^=http://]):not([data-noxhr]))",listener);
document.body.addEvent("click:relay(a:not([href=#],[href^=http://],[data-noxhr]))",listener);

When any same-site, non-hashed link is clicked, the listener method stops the event and pushes the new URL into History, changing the address bar and managing back/forward button click.

A back function is also created so that we can provide a "back" link and a "forward" link to travel back and forward in page history, if we choose to use it:

// Listener for the "Back" link
var back = function(evt){
	evt.preventDefault();
	History.back(); // Go back
};

// Listener for the "Forward" link
var forward = function(evt){
	evt.preventDefault();
	History.forward(); // Go back
};

// Add to links
document.id("backLink").addEvent("click",back);
document.id("forwardLink").addEvent("click",forward);

The next step is adding a change event to History itself to run our loadPage function when the page URL changes:

// When the history changes, update the content
History.addEvent('change',loadPage);

If the client doesn't support the history.pushState method, the History plugin evaluates the hash and loads the page as necessary:

// Handle the initial load of the page if the browser does not support pushState, check if the hash is set
if(!History.hasPushState()) {
	// Check if there is a hash
	var hash = document.location.hash.substr(1);
	if (!hash) return;

	// If the hash equals the current page, don't do anything
	var path = document.location.pathname.split('/');
	path = path[path.length - 1];
	if (hash == path) return;

	// Load the page specified in the hash
	loadPage(hash);
}

Lastly, running the onPageUpdate upon domready load doesn't hurt since events are only added once within onPageUpdate:

// Update the page

onPageUpdate();

Now the page is ready to support History-based, AJAX-driven content swapping.  Thanks to the onPageUpdate function, links are added to events as they come in so that even AJAX-retrieved content can be managed with History.
Tips and Strategies for Hash/History-Managed Websites
Plugins like Christoph's History masterpiece are very helpful in enriching the user experience but do require a bit of developer logic:

Use Event Delegation - Remember that with a History-style system, assigning events to elements directly may not be the best solution because those elements may be gone with the next link click. Using event delegation instead of traditional event assignments may save you a lot of trouble. Read my MooTools Element.Delegation post if you aren't familiar with event delegation.
Don't Assume JavaScript Support - Keep in mind that the client may not support JavaScript.  Search engines have added JavaScript support but it's important to use URLs that will work with both on a History-managed site and a JavaScript-less website.
Use AJAX Detection - MooTools provides an AJAX-specific header within the Request class called HTTP_X_REQUESTED_WITH.  Click here to learn how to use it to detect AJAX requests.  You will want to be able to detect AJAX so that those requests simply return the content and not the header and footer (etc.) with it. You could write a client-side script/regex to parse out the content but that's largely inefficient. My demo uses PHP to store the page content in variables as follows:
// Load pages based on querystring

$qstring = $_SERVER['QUERY_STRING'];

if($qstring == 'home' || $qstring == '') {

	$content.= '<h1>Welcome Home!</h1>';

	$content.= '<p>History Management via popstate or hashchange. Replaces the URL of the page without a reload and falls back to Hashchange on older browsers.</p><p>This demo page aims to teach you how you can use Christoph Pojer's outstanding History widget to load only the content you need, dynamically and reliably.</p>';

}

elseif($qstring == 'about-david') {

	$content.= '<h1>About David Walsh</h1>';

	$content.= '<p>My name is David Walsh. I'm a 27 year old Web Developer from Madison, Wisconsin. In the web world, I am:</p>

	<ul>

	<li>Founder and Lead Developer for Wynq Web Labs.</li>

	<li>Software Engineer for SitePen.</li>

	<li>Core Developer for the MooTools JavaScript framework.</li>

	<li>Co-Founder of Script & Style, a website aimed at making web developers and designers better.</li>

	</ul>

	<p>I don't design the websites - I make them work.</p>

	<p>I am also an admirer of the great <a href="?about-christoph">Christoph Pojer!</a>.</p>';

}

// and more....

// Page not found

else {

	$content.= '<h1>Page Not Found</h1>';

	$content.= '<p>The page you were attempting to find could not be found.</p>';

}
// If request was via AJAX, push it out.

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {

	echo $content;

	exit();

}
Obviously your content management system would be pulling content from a database or other static files, but you get the point -- load content before any page output, sniff for AJAX, and push content out accordingly. If it's not an AJAX request, push that content into the content area's HTML via traditional methods.

These tips should set you up well to use a History-based system.  Remember that JavaScript is meant to enhance -- keep in mind that your user (or search engine bot) may not support JavaScript, so be sure to test your website thoroughly!
Give the example hell.  Click from page to page, use the back button, refresh the page, etc.  History is rock solid!
View Demo 


Thanks to Christoph Pojer for his outstanding MooTools History plugin.  Many History-style plugins have existed but the browsers haven't been as feature-rich as they are now.  If you have any suggestions, tips, or experiences to share about creating hash-based websites, please share them.
]]>
			http://qeqnes.com/mootools-history-plugin/feed/
		3
		
		
		
		http://qeqnes.com/font-sizing-with-rem/
		http://qeqnes.com/font-sizing-with-rem/#comments
		Fri, 06 May 2011 21:15:23 +0000
		qeqnes
				
		

		http://qeqnes.wordpress.com/?p=723
		
			
Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It’s just a matter of which less-desirable is most desirable.
There are two main techniques that are extolled:

Size with px
Size with em

Let’s review these two approaches before I reveal the magical third.
Sizing with px
In the early days of the web, we used pixels to size our text. It’s reliable and consistent. Unfortunately, users of Internet Explorer—even in IE9—do not have the ability to change the size of the text using the browser function of increasing or decreasing font size. For those concerned about the usability of their site, this may be a big deal. Recent versions of IE include zooming, which increases the size of everything on the page—a feature that is also available in most other mainstream browsers, too. This has helped mitigate the issue to a degree.
I, personally, have been of the camp that px-based layouts provide the consistency I prefer and users have enough tools available to adjust their view that accessibility is less of a concern. But I digress. What else can we do?
Sizing with em
That whole inability to resize text in IE has been a continuing frustration. To get around that, we can use em units. Richard Rutter’s article, How to size text using ems, was probably the first I read of this approach, way back in 2004. (Wow, it has been almost seven years.)
The technique modifies the base font-size on the body using a percentage. This adjusts things so that 1em equals 10px, instead of the default 16px. To set the font-size to the equivalent of 14px, set it to 1.4em.
body { font-size:62.5%; } h1 { font-size: 2.4em; } /* =24px */ p { font-size: 1.4em; } /* =14px */ li { font-size: 1.4em; } /* =14px? */ 
The problem with em-based font sizing is that the font size compounds. A list within a list isn’t 14px, it’s 20px. Go another level deeper and it’s 27px! These issues can be worked around by declaring any child elements to use 1em, avoiding the compounding effect.
body { font-size:62.5%; } h1 { font-size: 2.4em; } /* =24px */ p { font-size: 1.4em; } /* =14px */ li { font-size: 1.4em; } /* =14px? */ li li, li p /* etc */ { font-size: 1em; } 
The compounding nature of em-based font-sizing can be frustrating so what else can we do?
Sizing with rem
CSS3 introduces a few new units, including the rem unit, which stands for “root em”. If this hasn’t put you to sleep yet, then let’s look at how rem works.
The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.
html { font-size: 62.5%; } body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */ 
I’m defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.
But what pitiful browser support do we have to worry about?
You might be surprised to find that browser support is surprisingly decent: Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9 have support for this. The nice part is that IE9 supports resizing text when defined using rems. (Alas, poor Opera (up to 11.10, at least) hasn’t implemented rem units yet.)
What do we do for browsers that don’t support rem units? We can specify the fall-back using px, if you don’t mind users of older versions of Internet Explorer still being unable to resize the text (well, there’s still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units.
html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */ 
And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers.

]]>
			http://qeqnes.com/font-sizing-with-rem/feed/
		11
		
		
		
		http://qeqnes.com/powerful-new-css-techniques-and-tools/
		http://qeqnes.com/powerful-new-css-techniques-and-tools/#comments
		Wed, 27 Apr 2011 19:33:58 +0000
		qeqnes
				
		

		http://qeqnes.wordpress.com/?p=717
		
			The hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. We have collected, analyzed, curated and feature latest useful resources for your convenience, so you can use them right away or save them for future reference.

Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use HTML5, JavaScript, or JavaScript-libraries as well. Thanks to all featured designers and developers for inspiring, hard work.
CSS Techniques
Rotational Sliders

Eric Meyer shares six of his animated transforms that are capable of sliding around to a particular extent with non-centered transform origins.

Generating Organic Randomness with Prime Numbers and CSS

At first, you may be wondering why the heck is Alex Walker talking about cicada’s and Web design. Once taking a closer look, a sort of connection between the two evolves and a ‘cicada principle’ is born.

CSS3 3D Hologram

Being inspired by holographic effects that can be achieved with HTML/CSS, Hakim El Hattab has developed his own 3D box which alters perspective depending on device orientation. Note that this requires a webkit browser and has only been tested on iPhone. Also make sure to visit more of Hakim’s CSS/HTML5 experiments.

Checkerboard, striped & other background patterns with CSS3 gradients

You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more. Also, check out Lea’s CSS3 Patterns Gallery

CSS3 Keyboard

Click in the box and start typing on your computer’s keyboard. Cleverly developed by Dustin Cartwright and Dustin Hoffman. You’ve got to respect the amount of time and effort which went into producing this demo.

CSS3 Progress Bars

A couple of nice progress bars created by Chris Coyier that use no images — just CSS3 fancies. In browsers that do not support CSS3, these progress bars will look more simplified.

Hover on “Everything But”

A tutorial by Chris Coyier which shows us how easy adding a hover state to an element can be. In this case, the hover state is applied to everything but the element actually being hovered over.

Creating a Sphere With 3D CSS

With CSS3’s 3D trans­forms it’s possible to cre­ate a sphere-like object, albeit with many elements. Paul Hayes shares his version of a 3D CSS sphere (works in the latest Safari and iOS) and provides us with the coding needed.

CSS3 Planetarium

This demo highlights leading edge CSS3 and HTML5 features that Mozilla Firefox and the open web community push into modern Web browsers.

Natural Object-Rotation with CSS3 3D

A tutorial by Dirk Weber that teaches us how to build a 3D packshot in HTML and CSS by applying some CSS 3D-transforms. By adding some Javascript, we can make the object freely rotatable in 3D space. And as we will enhance our Javascript with some touch-interactivity, the packshot will also work nicely in Safari for iOS-platforms like iPhone or iPad.

CSS Drop-Shadows Without Images

Nicolas Gallagher shares presents his CSS drop-shadows without any images.

Incrementable Length Values in Text Fields

Lea Verou explains how to implement a feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it.

Beveled Corners & Negative Border-Radius with CSS3 Gradients

Beveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again — Lea Verou is amazed by how many CSS problems can be solved with gradients alone. Works on Firefox 3.6+, latest Webkit Nightly builds, Chrome and Opera 11.10.

Flexible Height Vertical Centering With CSS, Beyond IE7

Roger Johansson shares his thoughts on how to improve centering an element both horizontally and vertically with the display:table alternative.

Coding up a semantic, lean timeline

This article tells you how to create a semantic lean timeline.

CSS Border Tricks with Collapsed Boxes

These border tricks tricks will help you to display content outside of the content box, over borders, without the use of images, CSS3 gradients or extraneous markup.

Quick Tip: Nonintrusive CSS Text Gradients

Jeffrey Way shows some ways for creating pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes.

Bokeh with CSS3 Gradients

Divya Manian uses the CSS gradients and shows the results of his work on a project which uses a bunch of circles as a decorative background.

Different Transitions for Hover On / Hover Off

Chris Coyier tries to acchieve “different transitions on mouseenter and mouseleave”, but he isn’t using JavaScript here; we’re talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates.

Styling children based on their number, with CSS3

Lea Verou shows how to style children of elements based on their total number (that is, their total count).

CSS Modal

Using CSS3 tech­niques a modal box can be cre­ated with­out JavaScript or images. With a bit of ani­ma­tion, tran­si­tion and trans­form, it can be made that lit­tle bit more special. The problem: when you hit the “Back”-button after the modal has popped up and was closed, you’ll see the modal again. But maybe you’ll come with a way to fix it?

Rotating Feature Boxes

The full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 (in real beta as of today). Any other browser will rotate the blocks without transition animation.

When and How to Visually Hide Content

Visually hiding content on a web page, usually textual content, is at times a viable technique in web design and development. It can be done for several reasons, most importantly, to improve the experience of a screen reader user. Other reasons include improving readability when CSS cannot be rendered, and improving search engine optimization (SEO). Other exaples about using the Visually Hide Content are shown in this article.

How to avoid common CSS3 mistakes

The new features of CSS3 bring with them complexity and new things for us to screw up. This article will help keep us in check as we start using these new features.

Introduction to CSS Escape Sequences

Escape sequences are useful because they allow style sheet authors to represent characters that would normally be ignored or interpreted differently by traditional CSS parsing rules. In this article Mert Tol shows how to use these sequences.

Wrapping Long URLs and Text Content with CSS

To wrap long URLs, strings of text, and other content, you can just apply a carefully crafted chunk of CSS code to any block-level element .

CSS Generated Content

Trevor Davis shows on some examples what you can do with the CSS generated content.

Controlling width with CSS3 box-sizing

An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not. It makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths.

Revisit Hardboiled CSS3 Media Queries

Shi Chuan takes a close look at boilerplates and helps us understand the math we need to tweak the width required for a good resolution to any particular device.
iPad Orientation CSS

Keith Chu revises Cloud Four’s work and finds a way to alleviate extra HTTP requests, not iPad-specific as well as lack of reusability. In this post, he shares with us his proposed revision to the iPad orientation CSS.
CSS Value Lengths, Times, Frequencies and Angles

In this article the authors go over all the math type units that can be applied as property values in CSS.
CSS Tools
320 and up

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

CSS3 Generator – By Eric Hoffman and Peter Funk

This generator was proudly designed by Eric Hoffman and coded by Peter Funk.

CSS Pattern Generator

Patternify is a simple pattern generator that enables you to not only build your patterns online, but export them with the base64 code, so you don’t even need an image file anymore. Just include the code in your CSS and you’re ready to go. Created by Sacha Greif.

Griddle.it – Web page alignment made easy

A clean and simple way to help align your layouts. No complex grid frameworks necessary.Just put your dimensions after our URL to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

The 1140px Grid: Fluid down to mobile

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Fighting the @font-face FOUT

Paul Irish’s 2011 update for the @font-face FOUT issue. Good news: Firefox 4 has no FOUT, IE9 does, and FOUT-b-GONE will help you out with that.

CSS3 Github Buttons

CSS3 Buttons is a simple framework for creating good-looking GitHub style button links.

CSS3 Facebook Buttons

CSS3 Facebook Buttons

Minimee

On the Internets, speed is everything – which means that when it comes to CSS & Javascript files, size DOES matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files svelte.

Live.js

one script closer to designing in the browser.

Bootstrap.less

Bootstrap is a pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development.

Animatable: Create CSS3 animations and advertising for Webkit browsers

Animatable is the easy way to create CSS3 animations and advertising for Webkit browsers on any platform or device — including Android, BlackBerry, iOS and WebOS.

Ceaser: CSS Easing Animation Tool

Ceaser is an CSS Easing Animation Tool.

Shower

This is provided without warranty, guarantee, or much in the way of explanation.

CSS Pivot

This tool allows you to add CSS styles to any website, and share (and adjust) the result with a short link.

Roots WordPress Theme

Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs.

Free Online CSS3 Typeset Style Generator

An advanced generator of CSS buttons; the tools allows you to define font and color variations, shadows, borders, corners etc.

CSSPrefixer

You hate writing vendor prefixes for all browsers? The CSSPrefixer does it for you.

Type-a-file

This tool will give your Web typography a head start. Type-a-file is essentially a small collection of CSS stylesheets with heavy focus on rich and beautiful typography. The tool uses Typekit to preview the stylesheets, so if you have a Typekit-account, you could purchase the font license and have exact the same typography on your website.

A Best Practice Baseline for Your Mobile Web App

Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

Code Beautifier

This tool allows you to format, clean up and optimize your stylesheets.

Markup Generator

Markup Generator is a simple tool created for HTML/CSS coders that are tired of writing boring frame code at the very beginning of slicing work.

CSS Sprite Generator

This tool allows you to create and maintain your CSS sprites.

Respond

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
Adapt.js – Adaptive CSS

Adapt.js simply checks the browser width, and serves only the CSS that is needed, when it is needed.
Firmin, a JavaScript animation library using CSS transforms and transitions

Firmin is a JavaScript animation library that uses CSS transforms and transitions to create smooth, hardware-accelerated animations.
Command-line CSS spriting

The author shows, how to create CSS sprites from the command line alone.
Last Click
Code Standards

This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices.

How to Manage CSS Explosion

A very useful thread on StackOverflow on how to keep CSS files organized and clean.

]]>
			http://qeqnes.com/powerful-new-css-techniques-and-tools/feed/
		4
		
		
		
		http://qeqnes.com/9-jquery-scripts-to-enhance-your-website/
		http://qeqnes.com/9-jquery-scripts-to-enhance-your-website/#comments
		Wed, 27 Apr 2011 19:31:49 +0000
		qeqnes
				
		
		
		

		http://qeqnes.wordpress.com/?p=714
		
			Time for a roundup for all the jQuery plugins that have been on the wild for a few weeks. There are getting more and more jQuery plugins coming out just to meet your special needs. In this post, I particularly like Sausage contextual pagination, I think it’s a brilliant ideas!

Here you go, pretty sure some of them will be really useful.

Sticky Sidebar  This jQuery plugin allows you to set a number of sidebar or floating boxes that follow the user down the page as they scroll. The plugin uses absolute positioning calculated from the original css and offset to either the closest positioned parent or to the document. The plugin has been tested in IE6-9 and all the other major browsers.
Waypoint  Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.
Better Checkboxes  In this short tutorial, the author will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.
Thumbnails Navigation Gallery  In this tutorial the author is going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation.
Sausage UI for contextual pagination  Sausage is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document.
Diagonal fade  Diagonal fade is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you’re off and away.
jRumble  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. You can control the X, Y, and rotation range, the speed, and event trigger for the rumble.
Image Len  Use this jQuery plug-in to add lens style zooming effect to an image
Backstretch  Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.


About the Author


Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.


]]>
			http://qeqnes.com/9-jquery-scripts-to-enhance-your-website/feed/
		2
		
		
		
		http://qeqnes.com/create-a-spinning-zooming-effect-with-css3/
		http://qeqnes.com/create-a-spinning-zooming-effect-with-css3/#comments
		Thu, 14 Apr 2011 22:55:12 +0000
		qeqnes
				
		

		http://qeqnes.wordpress.com/?p=707
		
			In case you weren’t aware, CSS animations are awesome.  They’re smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo’s mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application’s JavaScript footprint.  One of my favorite effects is the spinning, zooming CSS animation.  Let me show you how it’s done!

View Demo



The CSS
The first task is creating the base animation with @-webkit-keyframes:
@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}
The -webkit-transform property is the animator in this animation.  Define that at 0% the element is at 0 rotation and scaled to 1 — that is the original state of the element.  At 50% of the animation, the element should be rotated 360 degress (a complete spin), and the element should grow twice in size.  At 100%, the element should return to its original scale and rotate to 720 degrees, thus looking the same as it started.
With our named animation created, it’s time to apply the animation to an element upon its hover state:
a.advert:hover {
	-webkit-animation-name:rotater;
	-webkit-animation-duration:500ms;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function:ease-out;

	-moz-transform:rotate(720eg) scale(2);
	-moz-transition-duration:500ms;
	-moz-transition-timing-function: ease-out;
}
The event is assigned using the -webkit-animation-name property.  Additional properties are assigned:  -webkit-animation-duration makes the animation last 500 milliseconds, -webkit-animation-iteration-count directs the animation to occur only once, and -webkit-animation-timing-function sets the easing transition to ease-out.
View Demo



]]>
			http://qeqnes.com/create-a-spinning-zooming-effect-with-css3/feed/
		3
		
		
		
		http://qeqnes.com/14-useful-jquery-plugins-for-web-designers-and-developers/
		http://qeqnes.com/14-useful-jquery-plugins-for-web-designers-and-developers/#comments
		Thu, 14 Apr 2011 22:52:27 +0000
		qeqnes
				
		
		
		
		

		http://qeqnes.wordpress.com/?p=705
		
			jQuery is a rapid JavaScript library that is CSS3 compliant and supports many cross-browsers features. The jQuery framework is extensible and very nicely handles DOM manipulations, CSS, animations, communications to server requests, document transverse and event handling.

Here’s a collection of 14 useful jQuery plugins and scripts for web designers and web developers. This set contains jQuery sliders, image galleries, slideshow plugins, jQuery navigation menus, interactive calendar, image rotators, plugins for tabs, accordion menus, user interface elements, web contact forms, modal windows, tooltips and many other fresh jQuery solutions collected in one place.

jQuery Plugins Scripts
elRTE
elRTE is an open-source WYSIWYG HTML-editor written in JavaScript using jQuery UI. It features rich text editing, options for changing its appearance, style and many more. You can use it in any commercial or non-commercial projects.

demo / download
Catch404
Catch404 is a jQuery and CSS3 modal plugin for handling broken links elegantly.

demo / download
wdCalendar
[adsense]
wdCalendar is a jquery based google calendar clone. It cover most google calendar features. Day/week/month view provided, create/update/remove events by drag & drop, easy way to integrate with database, and much more.

demo / download
Lightbox Me
Lightbox_me handles overlay resize when the window is resized, overlay size in cases where the document is smaller than the window, position fixed in all browsers and position fixed automatically swaps to position absolute when the window size is smaller than the modal, so the user can scroll to see the contents.

demo / download
SliderNav
SlliderNav is a plugin that lets you add dynamic, sliding content using a vertical navigation bar (index). It is made mainly for alphabetical listings but can be used with anything, however longer words may look slightly awkward. The plugin automatically adds the navigation and sets the height for the object based on how tall the navigation is, in order to make sure users have access to the entire list.

demo / download
Like it? Tweet it!
Like it? Tweet it! is a jQuery-powered JavaScript widget that enables visitors to your website or blog to write a tweet about the site directly in a box displayed in the corner of the website, with a link to the site already embedded in the input field.

demo / download
Nivo Slider
Awesome jQuery image slider includes features: 9 unique transition effects, simple clean & valid markup, loads of settings to tweak, built in directional and control navigation, packed version only weighs 6kb, Supports linking images and free to use and abuse under the GPL license.

demo / download
Uniform
Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

demo / download
Lazy Load
Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in long web pages.

demo / download
jFlickrFeed
jFlickrFeed is a jQuery plugin that makes it easy to pull Flickr feeds and display them on your site.

demo / download
Chromatable jQuery Plugin
A jQuery plugin to create scrolling tables with fixed headers. A jQuery plugin to keep the code contained in one location and allow users to call the chromatable method on any table, or many tables on the same page.

demo / download
Uploadify
This plugin allows you to change any element with an ID on your page into a single or multiple file upload tool. The plugin uses a mix of JQuery, Flash, and a backend upload script of your choice to send files from your local computer to your website server.

demo / download
Easy Slider
Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.

demo / download
SimpleModal
SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.

demo / download
]]>
			http://qeqnes.com/14-useful-jquery-plugins-for-web-designers-and-developers/feed/
		7