The other week I had a friend ask me for a simple script to rotate a few images on his web page. Sounded simple and I even assumed I would not have to re-invent the wheel, but after an hour of searching for a lightweight script I was surprised to find that unless you were willing to install rather large plug-ins along with jquery there were not allot of options for the simple rotation of images except out-dated scripts. So I decided to come up with my own image rotator that uses jquery's already built in effects.

Jquery Image Rotator Functionality Checklist.

What we need our Jquery image rotator to do:

1. Rotate Images with Links.
2. Valid XHTML.
3. Lightweight Script.

The Rotator as I have come to call it will simply auto rotate through a list of images with a smooth fade effect without the need to include an extra plug-in on top of Jquery.

Let's look at the XHTML, CSS, and Jquery Javascript that makes it work.

Jquery Image Rotator, View Demo, Download Source.

The HTML for our jquery image rotator gets placed in the body of your page.

<div id="rotator">
  <ul>
    <li class="show">
    <a href="javascript:void(0)">
    <img src="images/image-1.jpg" width="500" height="313"  alt="pic1" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-2.jpg" width="500" height="313"  alt="pic2" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-3.jpg" width="500" height="313"  alt="pic3" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-4.jpg" width="500" height="313"  alt="pic4" />
    </a>
    </li>
  </ul>
</div>

The CSS

/* rotator in-page placement */
    div#rotator {
	position:relative;
	height:345px;
	margin-left: 15px;
}
/* rotator css */
	div#rotator ul li {
	float:left;
	position:absolute;
	list-style: none;
}
/* rotator image style */	
	div#rotator ul li img {
	border:1px solid #ccc;
	padding: 4px;
	background: #FFF;
}
    div#rotator ul li.show {
	z-index:500;
}

The JavaScript

Include jquery and the below script in your page or in an attached file.

<script type="text/javascript">

function theRotator() {
	//Set the opacity of all images to 0
	$('div#rotator ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div#rotator ul li:first').css({opacity: 1.0});
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotate()',6000);
	
}

function rotate() {	
	//Get the first image
	var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));	
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};

$(document).ready(function() {		
	//Load the slideshow
	theRotator();
});

</script>

To activate jquery image rotator place the above code in your page head or an attached file. You can adjust the time before the next image appears by altering the setInterval value as well as the fade time itself by changing the animate duration

[alohatechsupport.net]

Over the past year, we’ve seen website toolbar’s become an increasingly popular way for site-owners to offer users a consistent set of powerful social features, regardless of what page they’re on – Share, Subscribe, Tweet, Talk – you name it and chances are there’s a toolbar out there that offers some variation of these features. Facebook were one of the first companies to introduce this toolbar concept and have been the source of inspiration for many others.

Taking a leaf from their book, companies like Wibiya and Meebo have been at the forefront of a toolbar-for-the masses revolution, offering easily customizable widgets for almost anyone to install on their pages. Larger companies have also been hopping onto the toolbar-band too, with sites like CNET.com embracing this concept as a way to offer their visitors more ways to interact with their site.

In today’s post, I’m going to show you how to create your very own jQuery-powered website toolbar and then we’re going to pack it full of lots of useful widget features such as those found in the Wibiya-toolbar – I call it jQuery Fubar.

What Site-bars Are Out There At The Moment?

As I mentioned, we’ve all seen the widget-packed Wibiya Toolbar in action and they’ve recently moved from their invite-only model to being fully open to the public. Meebo (the popular web destination for online IM services) also started offering their own version of this toolbar and both of them offer something a little different (Meebo for example includes a pretty funky drag-and-share feature). Today, we’ve going to create our very own awesome website toolbar, but from a design perspective here’s how the Meebo and Wibiya bars look close-up.

Wibiya

Meebo

Now that we know what we’re aiming for, let’s see how easy it can be to put together something like this ourselves.

The First Step – Fixed Positioning with CSS

The first step in creating a website-toolbar is creating an empty div which can be correctly fixed-positioned at the bottom of any webpage. The HTML for this is:

<div id="content">&nbsp;</div>
 
<div id="floatingbar"><ul> <li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /><li><a href="#">Item name</a></li> <br /></ul></div>

and the CSS for this can be found below.

  div#floatingbar
    {
    overflow: hidden;
    width: 100%;
    height: 0px;
    position: absolute;
    bottom: 0;
    left: 0;	
    }
 
@media screen
  {
  body>div#floatingbar
    {
    position: fixed;
    }
  }

Whilst fixed-positioning isn’t very difficult to achieve using browsers like FireFox and Chrome, it’s been notoriously buggy to code for Internet Explorer 6. Thankfully TagSoup came up with this wonderful set of CSS/JS hackswhich claim to support fixed-positioning all the way back to IE5. If you’re creating a toolbar from scratch, I would definitely recommend reading their post as it’ll save you a lot of time later on. The IE Fix for this is:

JavaScript/HTML:

<link rel="stylesheet" type="text/css" href="css/fixed4ie.css" />
<script type="text/javascript">onload = function() { 
content.focus() }
</script>

CSS:

body
  {
  height: 100%;
  overflow: hidden;
  font-size: 100%;
  }
div#content
  {
  width: 100%;
  height: 100%;
  overflow: auto;
  }

Once you’ve got your basic-toolbar in place…

The next thing you’re going to want to do is begin adding in some basic styling around it. Most website-toolbars are around the same dimension in height (although there is no official “standard”) so I’m going to set the height of my component as well as some very basic skinning and CSS to style my list items. The background design is made possible with a blue gradient PNG that has some light shadows added to it – similar to the kind of design Wibiya have gone for. Although CSS3 could be just as equally used to create this effect, remember that some people still use IE!

div#floatingbar
    {
    overflow: hidden;
    width: 100%;
    height: 38px;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #000;
    font-family:Arial;
    font-weight:bold;
    background-image:url('../images/tui.png');	
    }
 
#floatingbar ul { 
list-style-type:none;
}
#floatingbar ul li 
{ 
float:left; padding:14px; 
color:#666; margin-top:-3px;  
}
#floatingbar ul li a 
{ 
text-decoration:none; 
color:#fff; padding: 10px;  
font-size:12px;  font-weight:normal; 
font-family:Arial;
}
#floatingbar ul li a:hover { color:#000033;}

Now that this is done, I also want to add some basic animation to my toolbar so that when users first load up their page, the bar will slide up from the bottom. This is made possible using jQuery’s great animate() feature by keeping the initial height of the component at 0 and then tweening it up to it’s maximum height over a period of time. The code for this can be found below

CSS:

div#floatingbar
    {  
    height: 0px;	
    }

JavaScript:

<script type='text/javascript'> 
  $(function() { 
  $('#floatingbar').css({height: 0}).animate({ height: '38' }, 'slow');
  });
</script>

This will end up creating something a little like this

Next, populate the toolbar with some links and some more jQuery Magic

In the next step of development, we’re going to add some nice visual effects to the toolbar, with the assistance of two of my favorite jQuery plugins – the first will provide us with some lightweight tooltips for our toolbar items whilst the second is going to be used for displaying our content.

1. jQuery Tipsy Tooltips for Toolbar Elements – This is a plugin used for adding Facebook-Like Tooltip effects to your site or links (http://onehackoranother.com/projects/jquery/tipsy/)

Sample Usage:

<script type='text/javascript'> 
  $(function() {
 
  $('.toolbarLink').tipsy({gravity: 's'});
 
  });
</script>

2. jQuery PrettyPhoto - This is a lightbox alternative that allows you to display any type of content, in particular, iFrame content from local or external websites (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/)

Sample Usage:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
	$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
		});
</script>

Let’s start adding some social features to the toolbar

When I first looked at the Wibiya toolbar, the big features that appealed to me were how easy it made it for any user to interact with all of the social networks associated with a website. I could easily take a look at the site’s Twitter account or become a fan of their Facebook Fan page, I could even easily browse through all their pictures without having to leave the page I was on. That "ease" of access impressed me, so I developed my website toolbar with widgets in mind.

When there are so many different ways currently available to pull in your recent tweets or display your Flickr albums in an easily scrollable box, why not find an implementation you like and just customize it?. So, that’s what we’re going to do.

1. Google Buzz Plugin – Mike More’s excellent Google Buzz Widget grabs the feed of your latest Google Buzz posts and refreshes this list depending on a set of parameters you’ve configured (http://www.moretechtips.net/2010/02/google-buzz-widget-jquery-plugin.html)

2. Sea of Clouds jQuery Twitter Plugin – This wonderfully compact plugin makes pulling your Twitter feeds a piece of cake and also allows you to customize the output quite extensively (http://tweet.seaofclouds.com/)

3. Facebook Fan Page Widget - The Facebook Fan Page Widget is a widget provided free by Facebook to site owners wishing to share their fan streams or followers in a box on their website. To allow you to show to Fan Box widgets side by side as in the original Wibiya bar, one can either choose to proxy one of the content boxes or load each of the widgets in separate iFrames which are then loaded into the same window.

4. Coolris Express Viewer - CoolIris offer the public a free version of their commercial 3D-Wall Component for use on your own personal sites. They’ve got a fantastic widget generator online that lets you pull in feeds from all sorts of sources including Flickr, YouTube or your own RSS Feed. It then takes this information and renders it as a scrollable wall of thumbnails that’s easy to view.

5. AddToAny Subscription and Share Widgets – These excellent widgets allow you to configure everything down to the event handlers that execute them so you can choose whether they appear on click or on mouse over. All the usual share sites and social networks are included and these guys even offer an API to anyone wishing to do more with their code.

6. ConveyThis.com Translation Features – Google Translate has been a favorite service among many of my fellow coders for a while now, but I came across this great service that allows you to give your visitors the choice to pick what translation service they want to use to translate your page once they’ve selected a language. Because some services have stronger features in one area of language than others, your visitors will have all the options they could want available to them. ConveyThis? also has a great widget you can add easily to your site, so definitely check it out.

Widget Delivery

Widgets (or plugins such as a Twitter-Reader or Translation service) can be delivered to our visitors through the site-bar in two main methods. The first is on page-load and the second is dynamically on-demand. The second of these options is the most beneficial as it means that we only have to load up the plugin when a user requests it. This can be either done through Ajax-Calls or iFrames.

In my implementation I have opted for iFrames through the PrettyPhoto Light-Box plugin – I thought this was a good idea because it provides a nice sandboxed area where the widget can execute as required without the chance of it interfering with the other widgets on the page. Whilst this isn’t a problem for most modern browsers, sandboxing widgets into iFrames can help lower the bug rate for older browsers like IE6.

To host a widget inside a lightbox iFrame, all you need to do is write or paste the code for it, once configured, into a new html file, save it into a local file in your toolbar directory and call it via PrettyPhoto as follows:

<a rel="prettyPhoto[iframe]" href="widget.html" title="Here's the tooltip text " class="toolbarLink"> My Page</a>

You can then freely call any widget file, with it’s very own themes if desired the same way you would any other link used from a lightbox. prettyPhoto also includes some pagination by default so if you want to easily flick through all of the widgets available on your toolbar you can do so through the controls at the bottom of the lightbox.

Further Customization & Demos

It’s possible to further customize your toolbar by adding in icons next to each of your widget links and floating them accordingly. For the example in today’s post, I’ve used some fantastic 24×24 icons from iconfinder.net, and you can see the final version of this page here (or click below to expand the screenshot).

You can also take your imagination one step further and replace all of the text in your toolbar with some nice images – I personally spent a few minutes putting together some gradient text in PhotoShop and here’s what the final product looked like.

With a little more work you could easily add some nice toggle buttons to the side of the toolbar to allow visitors to open or close it and there are a lot more widgets out there that you could experiment adding to your version.

and that’s it!. If you found today’s tutorial helpful, let me know in the comments section below.

Download All Of Todays Examples

You can download all of today’s examples including both the CSS/Icons version of Fubar as well as the Graphics version from the link below. All widgets can be obtained or generated from the site’s referenced in the list earlier in the article, but I’m also including my own ones in the example pack so you can see how easy it is to get setup.

Bonus: Fixed-Position Website Toolbar Plugins

As a bonus to today’s post, I’m also sharing some of the best out-of-the-box alternative solutions and tutorials available for creating your own customized fixed-position Site Bar. We all know that Wibiya is great for a one-click solution, but if you need something a little different one of these will definitely be able to help if the tutorial above doesn’t give you what you’re after.

CSS3 Fixed-Position Toolbar for your site with Social Networking Icons

Learn how to create a fantastic fixed footer toolbar for your site – this version includes some usefully placed social networking and subscription icons, great eye-candy tooltip effects and a complete tutorial on how to create it from start to finish. CSS3 Effects compliment it further with some nice visual design touches. Recommended for those who aren’t looking for extensive changes in customization to the above design and currently have more of a functionality requirement.

Facebook Style Footer-Toolbar from Soh Tanaka

Soh Tanaka presents this excellent tutorial on how to create a Facebook Style Fixed Site Footer toolbar. This implementation is very close to how the real Facebook site-bar looks and feels and even includes a follow-up tutorial on how to create a pop-out Friends List Chat bar. Recommended for those looking for a fully-featured example of how to create a floating site toolbar for further customization.

Floating Footer Toolbar

This entry from Ben Nadel, the most barebones of my recommended tutorials for today, will show you how to build a very very simple implementation of a floating site toolbar. This doesn’t include any of the sample icons or buttons that Soh Tanaka’s version above does so if you want an example that you can literally just start adding your own content to, this would be the one to get.  Ben’s version has been tested with many browsers including IE6, so cross browser compatibility won’t be an issue!.

JixedBar – A Fixed-Position Toolbar plugin for jQuery

Here’s a recently updated plugin that takes a lot out of the effort out of creating a fixed-position toolbar for your site. All you need to do is create a <ul> /<li> structure for each split section and then have the plugin transform it into the toolbar for you. It’s a hassle-free way of adding this feature to your projects and at under 7KB, it’s definitely a recommended download.

[addyosmani.com]

HTML Forms are essential for inviting visitors on a site to provide input, giving information about themselves, sharing opinions and so on. The information will on most cases be very valuable for the owner of the web site why making the forms more accessible and better drawing visitors attention is a key objective.  This post provides a list of jQuery plugins that makes it simple and allows you to cake full control of the look and feel of your HTML forms.

Uniform

Introducing Uniform, a plugin for jQuery that lets you style select, radio, and checkboxes however you desire.

prettyCheckboxes

This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.

How to create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.

Justify Elements Using jQuery and CSS – Tutorial

When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing the width of labels. But what if you don’t want to use tables and you want to align input elements according to the width of the longest label? This small jQuery tutorial shows you how.

Highlight

Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify.

Custom Checkbox with jQuery

This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

jqTransform

This plugin is a jQuery styling plugin wich allows you to skin form elements.

jquery.Combobox

An unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.

Make image buttons a part of input fields

If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.

Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.

Radio Button and Check Box Replacement

How to replace radio buttons and check boxes with jQuery.

mcDropdown

mcDropdown allow users to select from a complex hierarchical tree of options.

Geogoer VChecks

Avery user friendly way to show checkboxes.

[tripwiremagazine.com]

Was just trying to build a fully functional table or grid by using jQuery. I see there are many tutorials with Zebra Stripe Tables by using  jQuery. Here I am trying to make Simple jQuery Zebra Stripe Table with Row Hover Class and Row Highlight Class or Row Selected Class.

The CSS used for this example is as below:

body{
font-family:Arial, Helvetica, sans-serif;
}
table.tablecolors{
border-collapse:collapse;
width: 728px;
border: 2px solid #940103;
}
table.tablecolors td{
padding: 8px 6px;
font-size: 12px;
border: 1px solid #FFF;
}
table.tablecolors .even{
background-color: #efefef;
}
table.tablecolors .odd{
background-color: #FFF;
}
table.tablecolors .hovcolor{
background-color: #4f8c00;
color:#FFF;
cursor:pointer;
}
table.tablecolors .highlightcolor{
background-color: #8c2800;
color:#FFF;
}

 

The simple jQuery script or code snippet:

$(document).ready(function() {
$("table.tablecolors tr:even").addClass("even");
$("table.tablecolors tr:odd").addClass("odd"); //This is not required - you can avoid this if you have a table background
$("table.tablecolors tr").hover(function(){
$(this).addClass("hovcolor");
}, function(){
$(this).removeClass("hovcolor");
});
$("table.tablecolors tr").click(function(){
//$("table.tablecolors tr").removeClass("highlightcolor"); // Remove this line if you dont want to de-highlight the previously highlighted row
$(this).toggleClass("highlightcolor");
});
});

 

If you see the above script, you can avoid either “even” or “odd” class and its jQuery declaration if you place a table background color – but it is required when you want to have different font or different image background or borders etc.

In the same way if you don’t want to highlight the previous selected row once the another row is clicked, means like if you want to have only one row selected at a time, then you can un-comment the following line – if not leave it as is.

 

$("table.tablecolors tr").removeClass("highlightcolor");

 

And I don’t think there is any other simple method to achieve this via jQuery? – if so please share the code.

Check the final example and let me know if you are looking out for any further enhancements to be done to the table and its functionality. I can give  you one suggestion which I have in mind – like having a header and footer for the tables by using jQuery?

If you have any suggestions to improve please drop me a message – I will look into it.

Recently I’ve been making a concerted effort to learn jQuery the JavaScript framework as opposed to just using all the wonderful plugins off the shelf.

Recently I needed a bit of code to show and hide a navigation menu, but with persistence using cookies so as you move from page to page it can remember which sections to show. I was pretty confident, using bog standard JavaScript I knew I could knock it out really quickly, but The whole point of learning something new is to learn something new so I decided to do it using jQuery. I was pretty confident, last week I wrote some quite complex form validation code in a fraction of the time I could’ve done it in without using jQuery (it’s that pretty but it works well and it was my first attempt to do anything at all complex).

Getting the menu to work has been quite a struggle and I had to spend a surprising amount of time getting it to work, and judging by the posts on various blogs and groups a lot of other people have been stumped by this one too.

Anyway here is my solution, if anybody can help me simplify it further, their help would be greatly appreciated. Obviously you need to download jQuery, you will need to include the code and you will need an unordered list to act as the menu, in this example id=”#demo-menu”.

A couple of posts have been really invaluable figuring out how to do this, so credit where it’s due, thanks:

• http://kelvinluck.com/article/switch-stylesheets-with-jquery
• http://pixelcarnage.com/articles/development/jquery-collapsible-menu/

script:

$(document).ready(function() {
 
		$("#demo-menu > li > a").not(":first").find("+ ul").slideUp(1);
 
		$("#demo-menu > li > a > span").text('+'); // add an indicator to the menu items to show there is a child menu
 
		$("#demo-menu > li> a").each(function() {
			toggleMenu(this);
			checkCookie(this);
		});
 
 
 
		function checkCookie(id)
			{
				/*
 
						check if there is a cookie set for a sub menu 
						if there is then show the menu
 
				*/
 
				var cookieName = id.id;
 
				var c = readCookie(cookieName);
 
				if(c === 'show') {
 
					$(id).each(function() {
 
						$(this).children("span").text('-');
						$(this).find("+ ul").slideDown('fast');
 
					});
 
				}
			}
 
		function toggleMenu(id)
			{
				$(id).click(function() {
					/*
							toggle the +/- indicators
					*/
					togglePlusMinus(this);	
 
					/*
						toggle the menu open or closed
					*/
					$(this).find("+ ul").slideToggle("fast");
 
				});
			}
 
		function togglePlusMinus(id)
			{
 
				$(id).each(function() {
 
					if($(this).find("+ ul").is(':visible'))
						{
							$(this).children("span").text('+');
							eraseCookie(this.id);
						}
					else
						{
							$(this).children("span").text('-');
							createCookie(this.id, 'show', 365);
						}
 
				});
			}
 
});
 
// cookie functions http://www.quirksmode.org/js/cookies.html
 
function createCookie(name,value,days)
	{
		if (days)
		{
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
	}
function readCookie(name)
	{
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++)
		{
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	}
function eraseCookie(name)
	{
		createCookie(name,"",-1);
	}

 

HTML:

<ul id="demo-menu">
	<li><a href="#">item one</a></li>
	<li><a href="#">item two</a></li>
	<li><a href="#" id="three" >item three<span></span></a> 
		<ul>
			<li><a href="#">item 3.1</a></li>
			<li><a href="#">item 3.2</a></li>
			<li><a href="#">item 3.3</a>
 
			</li>
		</ul>
	</li>
	<li><a href="#">item four</a></li>
	<li><a href="#" id="five">item five <span></span></a> 
		<ul>
				<li><a href="#">item 5.1</a></li>
				<li><a href="#">item 5.2</a></li>
				<li><a href="#">item 5.3</a></li>
		</ul>
	</li>
	<li><a href="#">item six</a></li>
 
</ul>