One of the most useful thing on forms is an “autoselect” function. How is this work? Let’s assume that you have a standard search box:

When textbox is focused you can do three things:

1. Do nothing. Let the user to delete all text. Not good for lazy people, right?
2. Autoclear box. But if user want only to change a letter (typo) or add another word, then he should re-type all things. Not good for usability.
3. Autoselect box content. Is just like the user double clicks on the text. How can you do this? Read further to see

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

var initValue;
$(document).ready(function(){
$(':text').each(function(){
	$(this).focus(function(){
		initValue = $(this).attr('value');
		$(this).select();
	});
	$(this).blur(function(){
		if($(this).val() == ''){
			$(this).val(initValue);
		}
	});
});
});

What is the best thing with this? Well… If an user just leave the text box blank, that form is auto filled with previous value.

Pretty nice, huh? Well… I think is pretty useful too

In last three days, i had at least five request for making a tutorial about CSS layouts. I also have request about slicing, but this can be wait for a while (i’m thinking seriously to make a video tutorial about this; what do you think?). For now i will show you two way to get the „perfect” layout. First one is basic, easy to use and to implement and second is SEO friendly, where main content is the first thing you see when you view the source.

I will make examples for very basic layouts (and also most used): Header, Sidebar, Content area and Footer.

Here is all steps. Step 1: markup

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

<div id="wrap">
	<div id="header">
		Header 
	</div><!--/header-->
	<div class="clearfix">
		<div id="left">
			left side
		</div><!--/left-->
		<div id="right">
			right side
		</div><!--/right-->
	</div> 
	<div id="footer">
		footer
	</div><!--/footer-->
</div><!--/wrap-->

Step 2: Floatings. We float left and right sidebar and content:

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

#wrap {
	width:970px;
	margin:0 auto;
	border: 1px solid #eee;
}
	#header {
		height:150px;
		border-bottom:1px solid #eee;
	}
	#left, 
	#right {
		height:500px;
	}
	#left {
		width:200px;
		float:left;
		background:#f2f2f2;
	}
	#right {
		width:760px;
		float:right;
		background:#f4f4f4;
	}

Step 3: Done Here is the demo. Yeah, i know, too easy, right? Sorry for that (i like to work easy )

The next example is just a little bit more complicated, because, as i said, the content will be the first thing in source, so the search crawler can find content more easy.

Step 1: Markup (with content first!)

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

<div id="wrap">
	<div class="clearfix" id="content">
		<div id="right">
			right side
		</div><!--/right-->
		<div id="left">
			left side
		</div><!--/left-->
	</div> 
	<div id="header">
		Header 
	</div><!--/header-->
	<div id="footer">
		footer
	</div><!--/footer-->
</div><!--/wrap-->

Next step, the only need to float is the right side:

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

#wrap {
	width:970px;
	margin:0 auto;
	border: 1px solid #eee;
}
	#header {
		height:150px;
		border-bottom:1px solid #eee;
	}
	#left, 
	#right {
		height:500px;
	}
	#left {
		width:200px;
 
		background:#f2f2f2;
	}
	#right {
		width:760px;
		float:right;
		background:#f4f4f4;
	}

Ok, but how do we put the header back on top? Very simple: Header needs to be absolutely positioned and the content needs to be moved a little bid lower (exactly the header height):

1
2
3
4
5
6
7
8
9

#header {
	height:150px;
	border-bottom:1px solid #eee;
	position: absolute;
	top:0;
}
#content {
	margin-top:150px;
}

Next step is… You guess it right! DEMO. Again, sorry if you wanted more code to read and understand, fancy yada yada yada code and so on. I like to have a clean and easy to understand code

Any question?

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!).