After jQuery 1.2.6 and jQuery UI 1.5, I expected that some other frameworks release a new version (script.aculo.us, moo, and so on). For now, only Moo launched the final release (1.2) of their cool library. I don’t know what to say about the library (I didn’t try it yet), but this version of site is much, much nicer.

Even if I’m a jQuery addicted, I saw that MooTools have smoother animation, but their documentaion is weird (or maybe is just me, I don’t know). Anyway, in the last half year, I told myself to try Moo, but every time I give up. Maybe I will try it sometime.

As you can read on the official blog, a new version of UI is available for download. Let’s see how good it is

Ok, as i said before, i will make an article about what option you have when you want to use a carousel. As a jQuery user as I am, the first option i have is Sorgalla’s Carousel. It’s pretty easy to use but has some disadvantages:

• big size - around 50k, maybe more, without another 20k for jQuery
• some IE6 problems - yes, IE6 still has a huge market share. We still need to pull out our hair to make this piece of crap display good all pages
• you cannot highlight current tab - if you want to use it as a tab pagination, you simply cannot highlight selected tab. Or current page.

So, on an older project of mine, i wanted to use a very light script for doing this. Because i was in a really rush, i didn’t focus on unobtrusive scripts so i put some inline javascript (yes, shame on me).

1
2
3
4

<div id="slideCtrl">
 <a class="s1 s" onclick="showSlide(1);return false;" href="#">Tab 1</a>
 <a class="s2" onclick="showSlide(2);return false;" href="#">Tab 2</a>
 <a class="s3" onclick="showSlide(3);return false;" href="#">Tab 3</a></div>

Ok, this is for control. The most important thing is that you can put this ANYWHERE in your page. For example, you can put controls on header and slider on footer of your page. Only your imagination is the limit.

The next thing you have to do is to put some markup:

1
2
3
4
5
6
7
8
9
10

<div id="slider">
<div class="slider">
<div class="slideWrapper">
<div class="box">Tab 1 content</div>
<div class="box">Tab 2 content</div>
<div class="box">Tab 3 content</div>
</div>
<!--/.slideWrapper--></div>
<!--/.slider--></div>
<!--/slider-->

This script also has some limitation:

• You can have only one on page;
• Is pretty obtrusive;
• Doesn’t do auto slide. Of course, you can set a timer for this, but i wanted an easy example.

The next thing we have to do is to set some CSS.

Width and height for carousel:

#slider {
	width:674px;
	height:185px;
}

(more…)

In this article we will be playing with list elements to create amazing menus.

Most html menus are created using list because LI tag is the most appropiate tag for this, giving the developer posibility to play in many ways, achivieng nice effects. I won’t touch the vertical lists because it’s their default display. Instead, i will cover some of horizontal lists.

Basic list

The basic setup for a horizontal list is to set float to list elements:

<ul id="list1">
	<li><a href="#">Menu item 1</a></li>
	<li><a href="#">Menu item 2</a></li>
	<li><a href="#">Menu item 3</a></li>
	<li><a href="#">Menu item 4</a></li>
</ul>

#list1 li {
	float:left;
	list-style:none;
	margin-right:10px;
}

At this point we have a one level horizontal menu, created with list and you can see this on many (and i mean MANY) sites. Ofcourse, you can add some extra styles such as border, background (color or image) for links inside LI elements for getting even a nicer look. Demo here.

One level drop down menu (suckerfish)

(more…)

I wrote here how to make two elements to swap each other. But one little problem remain unsolved: you swap elements, but how do you inform server about your changes? Well… With a serialize function, ofcourse!

1
2
3
4
5
6
7

function serialize (drag, elements) {
	var serialResult='';
	$('.'+drag).find(elements).each(function(){
		serialResult += drag + '[]=' + this.id +'&';
	});
	return serialResult;
};

You call this function on event onDrop and function will return a hash for all elements:

alert(serialize('droppableBox', '.swappable'));

With this result you can inform server of any element position changes. Nice, isn’t ?