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.

Recently, on a project, i need to swap two draggable elements from a colum to another. Initially i wanted to use sortables, but i saw that is kinda useless because i don’t have too much control (and same thing happened with other libraries). So i try to make somehow that elements swaps.

Basic HTML markup is this (be careful, i won’t provide any demo for this):

1
2
3
4
5
6
7
8

<div id="browserCol-01" class="newBrowserCol droppableBox">
 <div id="s-5" class="browserDragItem swappable">5</div>
</div>
<!--/browserCol-01-->
<div id="browserCol-02" class="newBrowserCol middle droppableBox">
 <div id="s-6" class="browserDragItem swappable">6</div>
</div>
<!--/browserCol-02-->

Ok, so we need to swap browserDragItem between each other. Items have two classes because first is to define which elements is draggable and second is to define which element is swapable. I made this way because some elements can be empty (so will not be draggable) but other elements can be dragged over this empty boxes.

Now, if we have basic HTML markup (and i assume that you have css too), we need a function for swapping elements (founded here)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
jQuery.fn.swap = function(b) {
	b = jQuery(b)[0];
	var a = this[0],
	    a2 = a.cloneNode(true),
	    b2 = b.cloneNode(true),
	    stack = this;
 
	a.parentNode.replaceChild(b2, a);
	b.parentNode.replaceChild(a2, b);
 
	stack[0] = a2;
	return this.pushStack( stack );
};

Then we put all draggable and droppable on a custom function (for later recall):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function browserDragElements() {
	$('.browserDragItem').Draggable({
		ghosting: true,
		opacity: 0.5,
		revert: true
	});
	var newBrowserDrag = {
		accept : 'browserDragItem',
		hoverclass : 'browserDragItemHover',
	  onDrop : function(dragged) {
	    var oldDrag = $(this).find('div.swappable');
	    var newDrag = $(dragged)
	    try{
	    	$(oldDrag).swap(newDrag)
	    	}catch(err){};
	    $('div.droppableBox').DroppableDestroy();
	    $('div.browserDragItem').DraggableDestroy();
	    browserDragElements();
	  }
 
	};
	$('div.droppableBox').Droppable(newBrowserDrag);
};//browserDragElements

We have try/catch statement because if you drop an element on his initial place, you get some error. All you need to do now is to call browserDragElements() on document load:

1
2
3

$(document).ready(function(){
 browserDragElements();
});

I’m not sure that is the best method for doing a “swappable”, but afterall is working well, so we reach our goal, right?

Some time ago i searched for a way to limit elements on a sortable box (i used jQuery Interface). For example, i had two boxes and one of them needs no more than three items. After i searched and switch net upside down, i ask directly to the creator or Interface and he gave me a simple (but still efficient) solution:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$('.sort').Sortable({
accept : 'sortItem',
activeclass : 'sortableactive',
	hoverclass : 'sortablehover',
	helperclass : 'sorthelper',
	opacity: 	0.5,
	fit :	false,
	floats:	true,
	onStart: function(){
	console.log($('#big .sortItem').size())
	if ($('#big .sortItem').size() == 3) { //max of items
		console.log($('#big').get(0).dropCfg.a)
		$('#big').get(0).dropCfg.a = 'dummyRandom';
	} else {
		$('#big').get(0).dropCfg.a = 'sortItem';
	}
}
});

Demo here (click!).