Quick tip when using the Overlay feature of jQuery Tools

by Mike Badgley on July 13, 2009

When using the overlay tool that is offered by jQuery Tools – an excellent JavaScript library that I highly recommend you add to your toolkit – you need to be aware that content that gets displayed within the overlay needs to be positioned within a DOM where it will not be affected by the styling applied to the elements around it.

For example, in a recent two column template I was working on, I was showing a series of YouTube videos using the overlay tool, but when I went to test it, the display was all messed up because the styles (specifically the positioning – i.e. position: relative) of the elements in proximity were conflicting with the overlay itself.

My workaround was to remove these overlay content elements and append them to the <body> tag – thereby avoiding any styling conflicts.

$(function(){
	$("div.overlay").appendTo('body');
});

5 comments

Thanks so much – been banging my head on and off for a week!

by Jenny on November 12, 2009 at 5:03 pm. #

Thanks! I can stop working early today because of you.

by Joost on November 11, 2009 at 12:01 am. #

Priceless piece of information. Thanks for that.

by Rui Leitao on November 4, 2009 at 11:26 pm. #

This tip saved me AGES! Thank you!

by Anand on October 28, 2009 at 6:52 am. #

Thanks, you saved me some pain

by Jim Knight on October 11, 2009 at 6:52 pm. #