One of the biggest drawback of the lightbox-style plugins are that you are not allowed to use html code in your image description. If you need to bold or emphasize some part of the description title you are kinda screwed. Of course, you don’t want to use a long and boring description, but if you want to make a list (for example) you are some how limited. Not by lightbox plugin but the html language itself.

How image description works?

<a href="image.jpg" title="some extra-long description" rel="lightbox"><img src [...] /></a>

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:

<a href="image.jpg" title="some [i]extra[/i]-long [b]description[/b]" rel="lightbox"><img src [...] /></a>

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]', '<em>').replaceAll('[/i]', '</em>').replaceAll('[b]', '<strong>').replaceAll('[/b]', '</strong>') )
}).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!

Today I will show you how you can do a small and very simple – yet powerful – accordion script.

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

1
2
3
4
5
6
7

<dl class="ntzAccordion">
	<dt>Title</dt>
	<dd>Content</dd>
 
	<dt>Another title</dt>
	<dd>Another content</dd>
</dl>

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

1
2
3
4
5
6
7
8
9
10

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:

1
2
3

$().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

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

After exactly three years from the very first version, we jave jQuery 1.3. What’s new here?

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

Well… jQuery 1.3 is out. It’s beta, but still!

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

On a recent project i had to use sortable a LOT. I mean over 3-4 different sortable on page. So, how i manage to avoid heavy code?

One function to rule them all:

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

$('.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:

1
2
3
4
5
6
7
8
9
10

<dl class="sortable">
	<dd id="sotableEl1-1"><a href="updateUrl.php?id=sortableID-1" class="move">move</a></dd>
	<dd id="sotableEl1-2"><a href="updateUrl.php?id=sortableID-1" class="move">move</a></dd>
	<dd id="sotableEl1-3"><a href="updateUrl.php?id=sortableID-1" class="move">move</a></dd>
</dl>
<dl class="sortable">
	<dd id="sotableEl2-1"><a href="updateUrl.php?id=sortableID-2" class="move">move</a></dd>
	<dd id="sotableEl2-2"><a href="updateUrl.php?id=sortableID-2" class="move">move</a></dd>
	<dd id="sotableEl2-3"><a href="updateUrl.php?id=sortableID-2" class="move">move</a></dd>
</dl>

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.