How image description works?

This is the basic structure for lightbox-enabled links. The lightbox plugin use that title to add a small description when the big image is showed. What if – let’s say – you need to emphasize the word ‘extra’? How would you proceed? You could use some html tags ( <em> ) but with some validation error and maybe some unpredictible result on various browsers (or parsers, if you use xhtml). The solution? Use BBcode!

BBcode for the rescue!

The above code is transformed to:

And some js magic:

String.prototype.replaceAll = function(strTarget, strSubString){
	var strText = this;
	var intIndexOfMatch = strText.indexOf( strTarget );
		while (intIndexOfMatch != -1){
 		strText = strText.replace( strTarget, strSubString )
		intIndexOfMatch = strText.indexOf( strTarget );
 	};
	return( strText );
};

The reason that we use this custom function is that the javascript internal replace function will work only for first item found. Now, if you use jQuery, you have to do this:

$('a[rel=lightbox]').each(function(){
	var t=$(this);
	t.attr( 'title', t.attr('title').replaceAll('[i]', '').replaceAll('[/i]', '').replaceAll('[b]', '').replaceAll('[/b]', '') )
}).lightBox();

What’s just happened? The BB code was replaced with html tags. Of course, if you need more tags, you can add it below

Be careful!

I didn’t test it on large sets of images (i had only 6 to 12 images per page) so I have no idea if will affect the performance in any way!

The html code is very basic and consist in a standard DL/DT/DD structure:

Title
Content
Another title
Another content

Because is very possible to want to use this kind of accordion in many places, i did a small function:

function ntzAccordion(e) {
	$(e).find('dd').hide();
	$(e).find('dt').bind('mouseover click', function(){
		if($(e).find('dd').is(':animated') || $(this).next('dd').is(':visible')) {return false;}
			$(e).find('dt.opened').removeClass('opened');
			$(e).find('dd:visible').slideUp('slow');
			$(this).next('dd').slideDown('slow').end().addClass('opened');
	});
	$(e).find('.active').trigger('click');
};//ntzAccordion

Of course, we don’t forget to call this function on page load:

$().ready(function(){
	ntzAccordion($('.ntzAccordion')); // we call function with DL selector as parameter
});

Let’s see how is made

1. We find all DD’s inside of the e variable (which is $('.ntzAccordion')) and we hide them;

2. We bind mouse over and click events on DT. You can have both or none of them (you can use almost all events available on javascipt); Also, we will reffer to current DT as $(this);

3. If there is a DD which is hiding or showing in that moment, we return false. This way you can avoid odd behaviour and jumps;

3.1. Also, we check to see if the ‘victim’ (DD) is visible. Again, if this is visible, we return false to avoid repetitive close/open of DD;

4. We remove .opened class from all DT elements. We use this class to be able to add/change different style for different states of DT;

5. If there is an opened DD, we close it.

6. Because we use a structure like DT/DD, the next element right after DT is… a DD (doh!). We slide down that DD and we return back to DT (using .end()) and add the ‘opened’ class. It’s the exactly the one that we remove few steps above;

7. If you want to have a default element that is opened on page load, this line will do the trick: we trigger an event that is binded few lines above.

8. You sit back and enjoy 8)

Attention!

For some reasons that I think is a jQuery bug, you need to add one for those extra CSS for DD’s:

• float:left;clear:left
• position:relative
• height:ZZpx;
• width:ZZpx

If you don’t do this way and the DD have padding/margin, you will have a weird (and annoying too!) jump when the accordion expands or contract.

Also, don’t forget to view source on demo page

• Sizzle: A sizzlin’ hot CSS selector engine.
• Live Events: Event delegation with a jQuery twist.
• jQuery Event Overhaul: Completely rewired to simplify event handling.
• HTML Injection Rewrite: Lightning-fast HTML appending.
• Offset Rewrite: Super-quick position calculation.
• No More Browser Sniffing: Using feature detection to help jQuery last for many more years to come
• .hide() and .show() have been rewritten to become much faster. The frequently-used methods are now almost 2.5x faster.
• Default animations have been smoothed. Traditionally show/hide and slideUp/slideDown have only animated width, height, and/or opacity. We’ve added in margin and padding as well to provide a smoother animation. More information: show, hide, toggle, slideDown, slideUp, slideToggle
• and many, more. You can read full release post here

Long story short: we have a better library with a better than ever selector engine. We can now wait and wait for jQuery UI 1.6 final (now is on rc4) and we are all set
Also, you can find a new api documentation for jQuery 1.3.

• A brand new selector engine
• DOM manipulation engine has been almost rewritten
• Event Namespace rewritten.
• And more

Go claim your copy and start testing!

Also, the best IM client from the ice age until now – pidgin – has a new improved version 2.5.3.

One function to rule them all:

$('.sortable').each(function(){
	var _t = $(this);
	_t.sortable({
		handle:'.move',
		items:'dd',
		update:function(){
			$.ajax({
				type: "POST",
				url: $(this).find('a.move:eq(0)').attr('href'),
				data: _t.sortable('serialize'),
				cache: false
			});
		}
	});
});

The HTML markup (for two sortables) is this:

move
move
move


move
move
move

This means that you don’t need to use an ID for each sortable. Instead, you add the id to the update URL, on MOVE handler (which MUST be a link). I think this is pretty simple and useful trick.

UPDATES: known issues

If you need to display more content than fit into a screen height, you won’t see the content after the fold. To fix this, just remove the scroll bind on document:

(document).bind('scroll', function(){
		$('#ntz_modal').css({
			top:$(document).scrollTop()
		});
	});

How to use?

Just call with modalBox('content', 200) where content is what do you want to display (which can be an ajax result) and 200 is the width of the modal box. If you don’t specify any width, the default value (350) is used.

How to close the modal box?

Well… Just call the function modalBox(). When no parameter is passed, then the modal goes off. Nice, isn’t it?

Browser compatibility

The script was tested in FF 2, FF 3, IE 6, IE 7, Safari (on Win), Opera 9.5. If you don’t know what these letter means, there is a very high probability to don’t need this snippet

Selectboxes on IE6 – how they are managed?

Very simple: i hide ALL selects when modal is shown and i show them back when modal is destroyed. Ofcourse, you can use bgiframe plugin. Which is

Requirements

The script is tested with last version of jQuery (1.2.6) but should work fine with previous (and ofcourse next) versions. If you use an ancient version, you may need some extra plugins (like dimensions)

What’s the cost?

Prepare you credit card, prepare you paypal account or whatever you want. Because this is totally FREE. You may use, modify and distribute whatever you like. A small link back would be nice (but NOT mandatory).

You bastard! You use your name in modal elements! Yeah, so? No, seriously, i used this way because there is no way to know what div did you use. And the chance to have a div called ntz_modal in your code is kinda.. hmm… Right! ZERO! Of course, you can change these ID’s whatever you like it

How do I get the code?

Keep reading!

var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
function modalBox(content, width, callback) {
	if(!content){
		$('#ntz_modal').remove();
		$('#ntz_overlay').fadeOut(function(){$(this).remove();});
		try{if(IE6){$('body').find('select.unhideThis').removeClass('unhideThis').visibility('visible');}}catch(err){};
		$('embed.unhideThis, object.unhideThis').removeClass('unhideThis').css('visibility', 'visible');
		return false;
	}
	try{if(IE6){$('body').find('select:visible').addClass('unhideThis').visibility('hidden');}}catch(err){};
	$('embed:visible, object:visible').addClass('unhideThis').css('visibility', 'hidden');
	$('body').append('


');
	$('#ntz_overlay').css({
		width		:	'100%',
		height		:	$(document).height(),
		position	:	'absolute',
		left		:	0,
		top		:	0,
		backgroundColor	:	'#FFFFFF',
		zIndex		:	9990,
		opacity		:	0
	}).fadeTo(200, 0.5);
	$('body').append('


');
	$('#ntz_modal').css({
		border		:	'1px solid #2d7abb',
		width		:	width ? width : 350,
		backgroundColor	:	'#FFFFFF',
		position	:	'absolute',
		left		:	'50%',
		top		:	$(document).scrollTop(),
		zIndex		:	9995,
		marginLeft	:	-(Math.ceil((width ? width : 800)/2))
	}).append(content);
	$('#ntz_modal a:eq(0), #ntz_modal input, #ntz_modal textarea').focus();
	try{
		callback.call();
	}catch(err){};
	$(document).bind('scroll', function(){
		$('#ntz_modal').css({
			top:$(document).scrollTop()
		});
	});
};

Note: the example is VERY intrusive

Ok, so we will use previous slider and we add this at the end of the script:

var slideThis = window.setInterval("$('.carousel').find('a.next').trigger('click')", 1000);
$('.carousel').bind('mouseenter', function(){
	window.clearInterval(slideThis);
}).bind('mouseleave', function(){
	slideThis = window.setInterval("$('.carousel').find('a.next').trigger('click')", 1000);
});

Ok, what happened? Well… let see:

1) We set an interval of how often carousel should ride. The time is in milliseconds, so 1000 is one second. If you want five seconds you put 5000 and so on. I defined a variable for slide because we want to be able to manipulate somehow. Every time you set a timer (either is setInterval or setTimeout) you will get an ID of that timer. If you don’t want to interact with slider, just remove the variable
2) On mouseenter event, we clear the previous timer, based on previous ID;
3) On mouseleave event we set the interval back. And… This is it

Ok, you may wonder why i used mouseenter/mouseleave events instead of hover. I don’t know if the problem is with jQuery or with Javascript (i admit, i DON’T know Javascript!), but when you use hover, on first element inside of your hovered element you will simply loose… hover. Is weird, sounds complicated, but if you try this, you will see what i mean

But wait, what will I do if I have more than one slider?
As I said before, i suck at javascript. I know some basic timer tricks and… that’s it. Maybe is possible to use same function for many sliders, i don’t know. I never need more than one auto-slider on a page Anyhow, i saw there is a problem with timers when you have too many (high CPU usage) so.. use carefully.

How it works?

A page have five items. So we need to scroll five items with one click. We take the full width of carousel items wrapper (UL) and divide to carousel width (div.carousel). To be sure we will have an integer number, we will round up the number (using Math.ceil()). After that, we will insert a link for each page between previous and next link. So, here how I did it: (to avoid confusion, i will use italics for previous/next links – which actually is the carousel control)

Just before of closing carousel function (actually each loop), we add this lines:

$(_this).find('a.prev').after('');
for(i=0;i'+(i+1)+'');
}

What is happening here? We insert a span tag just after the first existing link (previous). Then, for each available page, we add a link. For now, you will have NO action on that links.

$(_this).find('.ctrls span a').unbind().click(function(){
	var incrementWith = $(_this).find('.ctrls span a').index(this);
	$(_this).find('ul').animate({left:-(incrementWith*$(_this).width())},function(){
		carouselCtrls();
	});
	return false;
});

In other words you will detect which link was clicked and multiply his index with carousel width. Because index is starting with zero, page 1 will be the first.

Ok, that is all for today. In few days i will show you how to make this carousel to be autoscrolled on certain period of time. To give you a hint, i tell you it’s all about setInterval (javascript) and trigger (jquery) Meanwhile, you can see a demo for this pagination HERE.

So, what can I do, perhaps you ask yourself?

• Don’t use padding and borders anymore. Uh… Not too reliable, isn’t?
• Use extra markup. Well… Is not too elegant, but is the best (and also the simplest) way to get rid of headaches! So the only thing you must do is to wrap all accordion item content into a div :

Accordion title
Accordion content

Becomes

Accordion title

Accordion content

All you have to do is to move all DD styles to .innerAccordion and your nightmares is GONE

By the way, in next few days (max a week) i will post the part II of the slider/carousel tutorial. All i have to do is to finish my curent projects (yeah, i have two ). Anyway, stay close!

I won’t explain HTML and CSS code (is very simple and intutive):

		Previous
		Next
	

CSS file:

* {margin:0;padding:0;}

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}
.carousel {
	position: relative;
	overflow:hidden;
	height:500px;
	width:540px;
	margin:50px auto
}
	.carousel .ctrls {
		margin:10px
	}
	.carousel ul {
		position: absolute;
		width:8000px;
	}
		.carousel li {
			float:left;
			width:98px;
			height:98px;
			border: 1px solid #fff;
			list-style:none;
			margin-right:10px;
			text-align: center;
		}

The good part of this carousel is that you can have as many as you want in your page. You can have both fixed and fluid width and will work with no problem. Or at least no problem: on fluid layout, some images can be cutted. So, the best use is fixed width. Also, you can have autoscroll (with timers, i will say more later), but is not recommended because you may encounter some performance troubles.

After we include last version of jQuery, we have to do these things:

1) Iterate trough all .carousel containers (if you want to pick another name, this is the place and this is also the time!) and set the width.

$('.carousel').each(function(){
	var _this=this;
	var elWidth = $(_this).find('li:eq(0)').width()+12;
	$(_this).find('ul').width(elWidth*$(_this).find('li').length).css('left', 0);
});

We assume that all LI have same width, 10px margin and a border. So we adjust the width with 12 px (2px from border). If you have a wider margin (or none) change it, otherwise you will have some serious problems

The previous/next buttons we will control with a separate function, because we don’t have double scroll on double click, right? We put the function INSIDE of the each loop:

function carouselCtrls () {
	$(_this).find('a.prev').unbind().click(function(){
		$(this).unbind();
		if(parseInt($(_this).find('ul').css('left'))<0) {
			$(_this).find('ul').animate({
				left: '+='+elWidth
			}, function(){
				carouselCtrls();
			});
		}
		return false;
	});
	$(_this).find('a.next').unbind().click(function(){
		$(this).unbind();
		var maxWidth = (parseInt($(_this).find('ul').width())-$(_this).width()-10)-(-parseInt($(_this).find('ul').css('left')));
		if(maxWidth>0){

		$(_this).find('ul').animate({
			left: '-='+elWidth
		}, function(){
				carouselCtrls();
			});
		}else {
			$(_this).find('ul').animate({left:0},function(){
				carouselCtrls();
			});
		}
		return false;
	});
	};

Let see how it works (i will explain only one link because the other one works same – but reverted):

1. Unbind any action from current link. This is because some users use double click on web (yes, there is some users like that!). So, once clicked, you can’t click again on the same link. Will won’t work. Seriously!
2. We verify if the carousel is scrolled, and if it is, to be scrolled enough to not be outside the area
3. Animate the carousel and call the control function after the animation is complete. After the animation is complete, you can click on the next/prev button

So, the final code looks like this:

$('.carousel').each(function(){
	var _this=this;
	var elWidth = $(_this).find('li:eq(0)').width()+12;
	$(_this).find('ul').width(elWidth*$(_this).find('li').length).css('left', 0);
	carouselCtrls();

	function carouselCtrls () {
	$(_this).find('a.prev').unbind().click(function(){
		$(this).unbind();
		if(parseInt($(_this).find('ul').css('left'))<0) {
			$(_this).find('ul').animate({
				left: '+='+elWidth
			}, function(){
				carouselCtrls();
			});
		}
		return false;
	});
	$(_this).find('a.next').unbind().click(function(){
		$(this).unbind();
		var maxWidth = (parseInt($(_this).find('ul').width())-$(_this).width()-10)-(-parseInt($(_this).find('ul').css('left')));
		if(maxWidth>0){

		$(_this).find('ul').animate({
			left: '-='+elWidth
		}, function(){
				carouselCtrls();
			});
		}else {
			$(_this).find('ul').animate({left:0},function(){
				carouselCtrls();
			});
		}
		return false;
	});
	};
});

And that’s all!
You can see a demo HERE. In few days i will show you how to make a pagination on this carousel and how to make an autoscroll carousel Stay tuned!

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

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

The simple but efficient answer is this:

$(document).ready(function(){
$('
Loading...

')
        .ajaxStart(function() {$(this).show();})
        .ajaxStop(function() {$(this).hide();})
        .appendTo('body');
});

And that’s all. You need to do this only once.

Ofcourse, you can apply some CSS styles to #busy div, using an image generated with ajaxload or something similar.

I didn’t use any other libraries (actually i used prototype with scriptaculous sometime like AGES ago), but i think all cool libraries (like jQuery) have similar methods.

Another great news: with MORE than 50 fixes (but no new features tough) jQuery UI 1.5.1 is out.

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

 Tab 1
 Tab 2
 Tab 3

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:

Tab 1 content
Tab 2 content
Tab 3 content

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;
}

The magic of this script (and also of all carousel scripts) consists in playing with position relative and position absolute:

#slider .slider {
	width:660px;
	overflow:hidden;
	margin:0 auto;
	position: relative;
	height:160px;
}
#slider .slideWrapper {
	width:2640px;
	position: absolute;
	height:160px;
}

The slideWrapper container must have a big width: a tab width * number of tabs. If you have five tabs with 500px wide each, the slideWrapper must have around 2500px wide (even more, nobody will be upset).

The next thing we have to stylize is each tab-box (.box). For this, we need to float each box:

#slider .box {
	width:660px;
	float:left;
	padding:20px 0;
}

The result will be a wide container which has all boxes on one row. Well.. The html/css part is ends here. The next is… Javascript (or jQuery) part.

The most basic use is this:

var currentslide = 1
function showSlide(nrSld) {
	currentslide = parseInt(nrSld)
	$('#slider .slideWrapper').animate({left:-660*(parseInt(nrSld)-1)})
	redrawBullets(nrSld);
};

What we do? Long story short: we move the slideWrapper container in its parent from left to right and from right to left, according to our needs. Simple, eh?

The redrawBullets function is for highlighting the current selection:

function redrawBullets(slide) {
	var currentBullet = 's'+slide;
	$('#slideCtrl a').each(function(){
	$(this).removeClass('s');
	if($(this).hasClass(currentBullet)){
		$(this).addClass('s')
		}
	});
};

What do we need next? Well.. We only need to test. Here it is a demo (is already used in a site). If you want, you can use EaseIn plugin to add some nice effects on slide.

We have a nice tabbed based navigation with a very cool effect which is ready to use on your site.

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:

Menu item 1
Menu item 2
Menu item 3
Menu item 4

#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)

The next menu i show, is a little bit more complicated, but also is more useful when you have category and sub-category. For example, imagine this blog with main category Javascript and sub-category jQuery. If i had many sub-categories, i would probably used a dropdown menu for using less space. This kind of menu is named Suckerfish (A list apart).

For this, we will use nested list and we will show only parents:

Menu item 1

Sub menu 1
Sub menu 1
Sub menu 1
Sub menu 1


Menu item 2

Sub menu 1
Sub menu 1
Sub menu 1
Sub menu 1


Menu item 3

Sub menu 1
Sub menu 1
Sub menu 1
Sub menu 1


Menu item 4

Ofcourse, we still need to float first level in the same way as we did in first example:

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

I said before we will hide all nested list elements, so here we go:

#list2 li ul{
	display:none
}

Right now, we have a basic horizontal list. Next step is to show second level of list on hover. Because IE6 don’t know what is hover on all elements (only on A tag), for this browser we will use some javascript (but later).

#list2 li:hover ul{
	display:block
}

Because we need to have a nice display for submenus, we have to relatively positioning main LI tags, so on the #list2 li rules add

	position:relative

Also, the inner UL tags we need to change to:

#list2 li ul{
	display:none;
	position: absolute;
	left:0;
	top:1em;
	width:150px;
}

In this point we have a very basic suckerfish menu that works on all browser except, ofcourse, IE6 As i said before, we will make a little javascript snippet for adding or remove over class for LI elements. If you are using jQuery (like i do), the whole thing is easier than you think:

	var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
	if(IE6){$(#list2 li).hover(function(){$(this).addClass('over')}, function(){$(this).removeClass('over')})}

If you don’t want to use a javascript library (either you have a small page or you like to develop your own code), you can use next code (and add just before body tag closes):

var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
if(IE6){
	startList = function() {
		navRoot = document.getElementById('list2');
		for (i=0; i

Well… Yes, that’s all. We only need to add an extra rule on CSS and #list2 li:hover ul become:

	#list2 li:hover ul,
	#list2 li.over ul

At this point we have a fully functional suckerfish menu (but still with an ugly look), working on all modern browsers (even IE6). You can see the demo here.

Breadcrumb

This one is one of my favorite toys With this type of menu we get a “vista explorer look” breadcrumb, ready to use on your site. We will use same markup as suckerfish and also a library (i like jQuery, so i will use it)

$(document).ready(function(){
	$('ul#list2 ul').toggle().hide();
	$('ul#list2 ul').parent('li').append('-');
	$('a.dropDown').click(function(){
		var t=this;
		$('ul#list2 ul').not($(t).parent('li').find('ul')).hide();
		$(t).parent('li').find('ul').toggle();
		$(document).unbind('click').click(function(e){
			if($(e.target).parents('ul#list2').length>1){
				$('ul#list2 ul').hide();
			}
		})

		return false;
	})
});

You can seehere the demo.

Ofcourse, you may want to change the content for drop down links (you may want to put an arrow, your choice) for even a nicer and authentic effect.

Conclusion

List is so simple yet so powerful tools available for creating nice menus (the final results is up to your imagination). The final result is cross browser (yes, even IE6!), the code make sense (is semanticaly, right?) and if you don’t have javascript enabled, you can still use drop down menus (for this time not in IE6 ). With a little imagination, you are able to create even nicer menus. For example, i made some time ago a scrollable menu, like iPhone menus (yes, with nested lists!). I didn’t spend too much time with it (so it won’t work too well) and i conssidered useless to post here.

What kind of menus do you use?