20+ Great Slider Techniques collection | ResourcesMix.info

Animated sliding effects can if not used wrong or to much add excellent dynamics and uniqueness to websites. They are often seen as components that give access to multiple featured articles in an elegant and very space optimized way. Generally sliding effects are created using CSS and Javascript and typically javascript frameworks like jQuery and mootools are used to make the code more robust and compatible.

In this article ResourcesMix.info present more than 25 techniques for sliding and scrolling content, a must have collection for Web Developers!

ImageSwitch

The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images. Minimize the arguments you need to input and still give some decent effects.

Scrollable

The purpose of this library is to make it extremely easy to add scrolling functionality to a website. Whenever you wish to scroll HTML elements in a visually-appealing manner, this is the only library you need.

Find out more on: http://resourcesmix.info

A monster collection of jQuery resources you’ll ever need to create that amazing site for one of your clients or for one of your personal projects.

jQuery Plugins.

idTabs is a plug-in for jQuery. It makes adding tabs into a website as simple as it is. But it can also open the door to endless possibilities.

This is an extremely basic, yet powerful dropdown technique for adding a dropdown menu inside your website or application by Nathan Wong.

Alen Grakalic wrote a very nice and easy jQuery slider plug-in. It let’s slide images or any content horizontally or vertically on a single click or even fully automatically

s3Slider jQuery Plug-in is a nice jQuery Featured Content Gallery plug-in, you can easley ad this slider to your own website to show of your work or something similar by Boban.

James Padolsey made a cool jQuery Image Preview plug-in that will allows your users to preview an image before clicking on it.

The best and easiest jQuery Lightbox Plug-in there is by Leandro Vieira Pinho

A very clean and easy slideshow by Timothy van Sas

A very nice and fast stylesheet switcher made by Kelvin Luck

A nice jQuery Fade In.Fade Out effect what can be used in different ways, made hvdesigns

A cool and handy script made by Ronnie Garcia

Carousel riding with Jan Sorgalla.

Another Carousel by 5 Bosses, it’s really nice for showing your work in a portfolio.

The well known Mootools effect is now available for jQuery, made by Jeremy Martin

A nice and very good looking breadcrumb plugin for jQuery made by Jason Roy for CompareNetworks Inc.

Klaus from stillbuero.de has made a usefull jQuery Tabs.

A very lightweight jQuery Drop-Down menu made by SpiceBrains

hSlides is an horizontal accordion navigation made by Jesus Carrera

Another Tab plugin for jQuery by Jordan Boesch

A nice and easy nway to scroll your html elements, made by flowplayer.org

A CSS Sprite effect with the help of jQuery, made by Dave Shea

Alen Grakalic just made a cool tooltip plugin for jQuery

A nice collection of tutorials about jQuery form WebdesignersWall

Load in and Animate content tutorial by James Padolsky

Over at Shopdev they made a very cool menu effect with jQuery

Ever wanted to know how they make thos large backgrounds, Sam Dunn will tel you.

A very smooth and elegant menu slider effect form Zach Dunn

A nice technique to sort out your portfolio items by Trevor Davis

Use the jQuery UI to Control the Size of Your Text from Connor Zwick

A cool animated navigation effect witth css and jQuery by Joash Xu, very interesting tutorial.

This is a nice tabbed content area effect with the help of css and jQuery, made by Collis Ta’eed

FancyBox-Jquery :: A Fresh and fancy lightbox plugin using Jquery

Why? Because I was bored by so many pages using lightbox and it`s clones,
I wanted something fresh and Mac-like. I couldn`t find any cool alternative that would be build on top of jQuery, so the FancyBox was born. Features:

• Automatically scales large images to fit in window
• Adds a nice drop shadow under the zoomed item
• Groups related items and adds navigation through them (uses preloading)
• Can display images, inline and iframed content
• Customizable through settings and CSS

Examples:
http://fancy.klade.lv/


Download:
http://fancy.klade.lv/fancybox/fancybox_1.0.0.zip
Technorati Tags: A Fresh and fancy lightbox plugin using Jquery

Sliding Top Menu With jQuery

Sliding menus are very effective in areas where we have limited space .

This is a sliding top menu built with jQuery which can be fired through the open & close buttons or with any tag with the related class name.

You can also use it as an info box, login area & more.

Click here to see the final working demo of this jQuery sliding menu.

It presents the menu when closed like this:

And when opened:

Click here to see the final working demo of this jQuery sliding menu.

Step 1 - HTML:

<div id="sliderWrap">

<div id="openCloseIdentifier"></div>

<div id="slider">

<div id="sliderContent">

Isn’t this nice?

</div>

<div id="openCloseWrap">

<a href="#" class="topMenuAction" id="topMenuImage">

<img src="open.png" alt="open" />

</a>

</div>

</div>

</div>

Step 2 - CSS:

<style type="text/css">

body {

margin: 0;

font-size:16px;

color: #000000;

font-family:Arial, Helvetica, sans-serif;

}

#sliderWrap {

margin: 0 auto;

width: 300px;

}

#slider {

position: absolute;

background-image:url(slider.png);

background-repeat:no-repeat;

background-position: bottom;

width: 300px;

height: 159px;

margin-top: -141px;

}

#slider img {

border: 0;

}

#sliderContent {

margin: 50px 0 0 50px;

position: absolute;

text-align:center;

background-color:#FFFFCC;

color:#333333;

font-weight:bold;

padding: 10px;

}

#header {

margin: 0 auto;

width: 600px;

background-color: #F0F0F0;

height: 200px;

padding: 10px;

}

#openCloseWrap {

position:absolute;

margin: 143px 0 0 120px;

font-size:12px;

font-weight:bold;

}

</style>

With the CSS file there are few major points:

• #slider has to be positioned absolutely, so it can overlay the other content.
• #slider has a negative top-margin which hides it.
• #sliderContent is positioned absolutely to not to crack the open/close buttons
• #openCloseWrap holding the buttons are positioned absolutely too.

Step 3 - jQuery / JavaScript:

<script type="text/javascript">

$(document).ready(function() {

$(".topMenuAction").click( function() {

if ($("#openCloseIdentifier").is(":hidden")) {

$("#slider").animate({

marginTop: "-141px"

}, 500 );

$("#topMenuImage").html(’<img src="open.png"/>’);

$("#openCloseIdentifier").show();

} else {

$("#slider").animate({

marginTop: "0px"

}, 500 );

$("#topMenuImage").html(’<img src="close.png"/>’);

$("#openCloseIdentifier").hide();

}

});

});

</script>

The main trick is changing the top margin of #slider and update the open / close images.

We have an empty element named openCloseIdentifier which shows us whether the menu is open or closed. We simply hide it when the menu is open and show when it is closed.

Then all we do is:

if openCloseIdentifier = hidden then close the menu or if openCloseIdentifier = visible then open the menu.

Sliding effect can be fastened by changing the 500 value in JavaScript to a smaller number or else.

P.S. Down & up arrow icons are from the Crystal Clear icon set.

Creating a Dynamic Poll with jQuery and PHP

When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. NETTUTS has published a tutorial (Creating a Dynamic Poll with jQuery and PHP) for creating a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

Requirements:-
Demo: http://nettuts.com/demos/test_poll/
License: License Free

Technorati Tags: Dynamic Poll with jQuery