Hobione's Weblog

Living & Breathing in Web 2.0 Era

jQuery-ThickBox (Launch thickbox onload instead of onclick)

I wanted to add a light box/light window/thick box in one of my servlet application, started looking on the web and found few ajax libraries and they are as follows.

Kevin Miller: Light Window = http://stickmanlabs.com/lightwindow/#demos
I made this one work but had problem with positioning.

Lokesh Dhakar: Light Box = http://www.lokeshdhakar.com/projects/lightbox2/
His entire demos were for images, I need to open up an html file in the light box.
Lightbox is for images only. Try an alternative solution such as: Litbox, Litwindow, or Thickbox.
- Lokesh

Cody Lindley: Thick Box 3.1= http://jquery.com/demo/thickbox/
Thick box is written on JQuery library. It worked like a champ at the first time and I was able to pass an html file, width and height perfectly. It worked when I clicked a link like this.

<a href=”body/blank.html?height=120&width=400″ class=”thickbox” title=”CD ROM Order Support”>Thick Box</a>

Problem: I could not figure it out how to make a thick box open with page on load,
Launch thickbox onload instead of onclick

Tried these, did not work.
<body onload=”thickBoxPopup();”>

<script>

function thickBoxPopup(){
tb_show(“Test”,”body/blank.html”,”images/cart.gif”);
}

</script>

OR,

function thickBoxPopup(){
window.open(“body/blank.html?height=120&width=400 class=thickbox title=CD ROM Order Support”);
}

Solution:
At the top of the page I have added this, and it worked great. $ (dollar) sign is necessary; this ain’t PHP or Perl. $() -> Dollar sign and brackets construct a new jQuery object.

<script>
$(document).ready(function(){
tb_show(“CD ROM Order”,”body/blank.html?height=120&width=400″,”images/cart.jpg”);
});
</script>

Details: http://codylindley.com/Javascript/257/thickbox-one-box-to-rule-them-all

Q: $(“div > p”).css(“border”, “1px solid gray”); What does it mean?
A: Finds all p elements that are children of a div element.
E: <head>
<script src=”http://code.jquery.com/jquery-latest.js” />

<script>

$(document).ready(function(){
$(“div > p”).css(“border”, “1px solid gray”);
});

</script>

</head>
<body>
<p>one</p> <div><p>two</p></div> <p>three</p>
</body>

Quote: “Knowledge is its own reward” … Cody Lindley

December 28, 2007 Posted by HobiOne | Ajax Libraries, jQuery | | 34 Comments