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

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').visibility('visible');}}catch(err){};
		return false;
	}
	try{if(IE6){$('body').find('select').visibility('hidden');}}catch(err){};
	$('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);
	$('*').blur();
	$('#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 it’s been a while, huh? I promised you i will learn how to autoslide previous carousel. Now you can find how (is ridiculous!)

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

1
2
3
4
5
6

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.

As i said before, i will show you some more nice tricks on that carousel. Today i will show you how can you put a fully automated pagination.

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)
(more…)

If you ever used jQuery UI Accordion before, you probably notice that sometimes you have an annoyng bug when you change between accordion items: the bottom of the accordion jumps few pixels. Why is that? That’s why because Dimension plugins (which is included on last version of jquery, by the way) doesn’t know to compute very well the dimensions if you have padding/border attributes.

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 :

(more…)

Ok, as ai said you before, i want to make a tutorial about a more advanced carousel than previous was.

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

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

<div class="carousel">
	<div class="ctrls">
		<a href="#" class="prev">Previous</a>
		<a href="#" class="next">Next</a>
	</div>
<ul class="clearfix">
	<li><img src="http://farm4.static.flickr.com/3164/2719962411_77cf9e1699_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3159/2720786298_d33f97bfcd_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3280/2719962373_f49bb3e2a2_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3001/2720787742_d2f263372c_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3046/2720787680_8f358f938e_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3108/2719963843_f2e963af8f_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3141/2719965289_83902cf96c_t.jpg" alt="" /></li>
 
	<li><img src="http://farm4.static.flickr.com/3164/2719962411_77cf9e1699_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3159/2720786298_d33f97bfcd_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3280/2719962373_f49bb3e2a2_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3001/2720787742_d2f263372c_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3046/2720787680_8f358f938e_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3108/2719963843_f2e963af8f_t.jpg" alt="" /></li>
	<li><img src="http://farm4.static.flickr.com/3141/2719965289_83902cf96c_t.jpg" alt="" /></li>
</ul>
 
 
</div>

CSS file:

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

* {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.

1
2
3
4
5

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

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

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