Fixing the Closed Event for Bootstrap’s Alert Boxes

image

I’ve been working with Bootstrap 2.0 for the last few days and I came across an odd bug in the 2.0 and now the 2.0.1 release with the events triggered when you close an alert box. The problem I had related to some JavaScript I was using to set a fixed element on scroll which required a calculation of the element’s offset from the top of the window on load. This worked great unless there was an alert placed on the page before the element; once the alert was closed I had to find a way to recalculate the element’s offset. The closed event seemed like the perfect solution, but there in lies the problem - it doesn’t work. Take a look at the code that is responsible for removing the alert box (source: bootstrap.js; line: 108):

function removeElement() {
	$parent
		.trigger('closed')
		.remove()
}

As you can see the closed event is triggered before the element is removed. This means if I bind to the closed event and try to recalculate the element’s offset the alert box will still be present in the DOM making the recalculation erroneous. The solution I came up with was to add a new event triggered after the alert box was removed from the DOM, but use the $(window) instead of $parent:

function removeElement() {
	$parent
		.trigger('closed')
		.remove()
	$(window).trigger('alertclosed')
}

I then used jQuery’s bind() function to listen for the new alertclosed event:

$(window).bind('alertclosed', function () {
	// recalculate offset here
});

fin

UPDATE (2012-02-19 17:24:00) - I forgot to mention that the same issue affects the scrollspy plugin and you can use the new event to reset scrollspy (thanks to Fraxinus at Stack Overflow for the scrollspy reset):

$(window).bind('alertclosed', function () {
	// recalculate offset here
	// reset scrollspy; thanks for Fraxinus:
	$('[data-spy="scroll"]').each(function () {
		$(this).scrollspy('refresh');
	});
});

Web Design Ledger:

Slideshows or sliders are obviously a popular trend right now in the web design world – and for good reason. It’s an effective way to highlight something important and create some visual interest. And from a technology standpoint, the popularity of jQuery has made it almost too easy to implement a slideshow.

ed. - I actually refer to these as carousels.

Jeffrey Way at nettuts+ has a nice collection of jQuery tricks:

If there is one bad thing about jQuery, it’s that the entry level is so amazingly low, that it tends to attract those who haven’t an ounce of JavaScript knowledge. Now, on one hand, this is fantastic. However, on the flip side, it also results in a smattering of, quite frankly, disgustingly bad code (some of which I wrote myself!).

But that’s okay; frighteningly poor code that would even make your grandmother gasp is a rite of passage. The key is to climb over the hill, and that’s what we’ll discuss in today’s tutorial.

Pretty Checkboxes & Radio Buttons with jQuery

A while back I read Aaron Weyenberg’s writeup on creating pretty checkboxes with jQuery and decided to take his original concept and build upon it. So, shortly thereafter, I worked up an article of my own which endeavored to redesign Aaron’s checkboxes using standards with a proper fallback for those not using JavaScript and then went the extra mile (okay maybe 100 feet) and apply the technique to create pretty radio buttons as well (who knew radio buttons could actually be pretty?).

Here is an example of the code at work:

Pretty Checkboxes

For the complete write-up check out my article on my production server by clicking here.