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.

How many times did you need a light modal box? To display an error mesage, a picture or even another web page inside of the current page? And every single time, you ended with using a large-full-of-useless-options script. Yeah, i know the feeling. Seriously, i know it VERY well. That’s why i wrote this piece of code to display modal boxes Anyhow, this works BEST with AJAX content

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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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('<div id="ntz_overlay"></div>');
	$('#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('<div id="ntz_modal"></div>');
	$('#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