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 ?

Some weeks ago i needed a jQuery (yes, i’m a jQuery addicted!) plugin for basic star-rating system with ajax call. Because i wanted a minimum html markup, i start to wrote my own plugin, with a handy way to implement. Just drop this where you want to display stars:

<span class="rateThis" title="current=2.5;href=vote.php;id=1"></span>

Then call ntzRateThis on document load:

1
2
3

$(document).ready(function(){
 $('.rateThis').ntzRateThis();
});

Easy, isn’t? You need to specify (in title):

current - current rate (accept float);
href - link for backend rating script (this script will return final rate after vote and also verify that is only one vote per day);
id - id of the element (for example, id of article that you want to rate).

That’s all. You still need to include css and javascript files (is in the ZIP file)

You can see a demo of this plugin here (you have a demo for rating only, backend script sends only random numbers, so the rate won’t be real!) and you can download from here.