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&#8221; />

<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

Advertisements

December 28, 2007 - Posted by | Ajax Libraries, jQuery

48 Comments »

  1. Thank you so much I needed this! I love you!

    please write me your email so i may add you in case I need help, thank you very much smarty ;)

    Comment by ipollesion | January 14, 2008 | Reply

  2. Glad to know.
    Thanks
    Hobi

    Comment by hobione | January 14, 2008 | Reply

  3. Exactly what i needed….cheers

    Comment by Matthew Lanham | May 8, 2008 | Reply

  4. Thanks!

    Comment by The Frosty | June 27, 2008 | Reply

  5. Hi,

    I can get the function to initiate but it doesn’t load my page. I used the code provide above.

    ————

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

    ————

    And I placed the following on the
    ————
    onload=”tb_show();”
    ————

    However it doesn’t load the page, just the loading graphic appears and it seems as though it’s loading nothing…

    Not sure what I’m doing wrong, any help would be great.

    Comment by Gav | August 28, 2008 | Reply

  6. I had tried many codes from Net. but i feel ur code most helpful to me. thanx a lot.

    Comment by James Royson | September 2, 2008 | Reply

  7. Thanks!!! finally i made it works thanks to you :D

    Comment by David | September 19, 2008 | Reply

  8. This is what I have been looking for. Is there an example page I can take a look.
    Is this

    $(document).ready(function(){
    tb_show(”CD ROM Order”,”body/blank.html?height=120&width=400″,”images/cart.jpg”);
    });
    the function? If so, how do I call it onload?
    If someone can assist me, I will be very thankful.

    Comment by Gokalp | November 7, 2008 | Reply

  9. …. Do this..

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

    -******

    And in the onload…

    onload=”someName()”

    Rod.

    Comment by Rodolfo Navarro | November 7, 2008 | Reply

  10. …. Do this..

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

    -******

    And in the onload…

    onload=”someName()”

    Rod.

    Comment by Rodolfo Navarro | November 7, 2008 | Reply

  11. Thanks Rod for the suggestion. Here is my code and seem to have some issue. I think I am missing some syntax.

    Thickbox demo

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

    Scrolling content
    No-scroll content
    login (modal)
    Update ThickBox content

    The firebug displays two errors:
    missing ) after argument list
    tb_show(“CD ROM Order”,”business.html?he…t=120&width=400″,”images/cart.jpg”);});\n
    thickbox (line 15)
    and
    ShowWindow is not defined
    onload(load )

    Do you see what I am doing wrong?
    Thank you

    Comment by Gokalp | November 9, 2008 | Reply

  12. Excellent blog! Interesting article and very informative! I will necessarily subscribe for this blog. http://movie-cool.com/map.html

    Comment by BiilYBonnYU | November 12, 2008 | Reply

  13. If we were to add a Google adsense javascript code in a thickbox, should we select the iframe version versus the ajax content?

    Comment by Gokalp | November 25, 2008 | Reply

  14. Gokalp:

    If you copy and pasted from above, you may need to replace the ” marks. They looked a little strange in my editor so I just replaced them and that solved my problem!

    $(document).ready(function(){
    tb_show(“CD ROM Order”,”test.php?height=220&width=400″,”loadingAnimation.gif”);
    });

    <body “>

    Comment by BC | November 25, 2008 | Reply

  15. Very helpful info, thanks. It got me partway there.

    I am trying to launch a thickbox group from an onclick function, without needing to have the links in the document. I can get it to work with the group links in a hidden div, but when the onclick calls up the image, it does not show the ‘1 of 2’ info, just the prev link. Once I click the prev link, the ‘2 of 2’ displays.

    Does anyone know of a way to feed an array of links to the the tb_show function to create the group?

    Comment by Bruce | November 27, 2008 | Reply

  16. More about the dollar-sign ($) jQuery object construction at About JavaScript Dollar Sign ($)

    Comment by gregsometimes | December 16, 2008 | Reply

  17. Hi, thanks for the code at the beginning but i have one question. Do you know how to make Thickbox starting only one time after entering the website??(i’ve found the cookie plugin for jQuery but i don’t know exactly how to use it)

    Thanks for all and Happy New Year :)

    Comment by btx | December 27, 2008 | Reply

  18. P.S
    Nice snow there you have :D … did you wrote it by yourselfe??

    Comment by btx | December 27, 2008 | Reply

  19. It is a part of WordPress Appearance menu.
    Log in to WordPress, then under Appearance you will see Extras. You should see an option under Extras about snow falling.
    Thanks
    Hobi

    Comment by HobiOne | December 28, 2008 | Reply

  20. You need to use the following to handle onload thickbox popups:

    $(document).ready(function(){
    tb_show(“Your caption”,”path-to-your-image?height=theHeight&width=theWidth&modal=true”,null);
    });

    NOTE: nothing needs to be placed into the body tag. I tested this on every browser, and it’s GOLD!

    Comment by Omari | January 29, 2009 | Reply

  21. Hi ,

    As i tried with the link the thickbox is loading perfectly…

    but i am unable to run the code which u provided…

    can u please give it as a bundle..

    thanks for your patience

    Comment by Jazz | February 16, 2009 | Reply

  22. This doesn’t work well in IE and Safari. Was wondering if anyone had any workarounds?

    The margins are off and creating scrollers in IE and it doesn’t show in Safari…

    Comment by BG | February 18, 2009 | Reply

  23. Downloaded the latest jquery and Thickbox, changed doctype on page and all is well in FF & IE. Still no Safari.

    Comment by BG | February 18, 2009 | Reply

  24. hola sabes necesito que mi pagina comience con el ThickBox, de forma automatica, sin utilizar ningun voton, soy nuevo en esto y agradeceria mucho tu ayuda
    de antemano gracias y felicidades

    Comment by lestat | April 2, 2009 | Reply

  25. Loading in IE, IE 6 even, and Firefox, but I’m having issues with Google Chrome – I get the background screen to load but no graphic, anyone have a work around?

    I tested the thick box simple in line click and it works fine with chrome– its the loading the external page that it gets stuck.

    Comment by cyan | April 7, 2009 | Reply

  26. I needed a fix– so I decided to check for the browser and display the thickbox only when they had IE or Firefox browser–that removed the usability issues in Chrome and Safari.

    $(document).ready(function(){
    if ($.browser.msie) {
    tb_show(“WELL Spa Spring Rates”,”spring/pop.html?height=300&width=600″,”springflyer.jpg”);
    }

    if ($.browser.mozilla) {
    tb_show(“WELL Spa Spring Rates”,”spring/pop.html?height=300&width=600″,”springflyer.jpg”);
    }

    });

    I’m sure there is a better “or” statement — but this is working for me.

    hope this helps!

    Comment by cyan | April 8, 2009 | Reply

  27. Change the smart quotation marks on the code to real quotation marks and the code works perfectly. I have been looking for this code for about an hour and trying to play around with the javascript to get it to work. This solution was awesome. In about a minute, I had it doing exactly what I wanted it to do.

    Thanks a million!

    Comment by Jack | April 20, 2009 | Reply

  28. I’m trying to get this to load on my page only once. Anyone know how to handle the cookie control?

    Comment by Joe Kennedy | May 5, 2009 | Reply

  29. Works all very well on FF but IE7 just shows WHITE page

    Comment by Sirko | May 22, 2009 | Reply

  30. Please place the following code at the bottom of the page. Hopefully this will work.

    $(document).ready(function(){ tb_show(”, ‘dc-winner.html?height=500&width=700&inlineId=displayWarning’, null); });

    Comment by Mohammad Sharjeel | May 25, 2009 | Reply

  31. This is exactly what I am trying to do. You rock!!!

    Comment by Sudheer | July 22, 2009 | Reply

  32. Found a solution to load once using jquery.cookie.js

    solution can be found here

    http://cegeekbook.blogspot.com/2009/08/thickbox-cookie-control-how-to-make-it.html

    Thank you to every one here this post helped me more than you will know and every ones comments were invaluable..

    Thanks all

    Comment by csegeek | August 28, 2009 | Reply

  33. […] you’re accessing from Blogspot, a box displays to tell the good news; the JS code comes from Hobione. Let me know if the box appears when it […]

    Pingback by No Fat Clips!!! : Blogspot legacy | September 19, 2009 | Reply

  34. I’ve been trying everything I found here for 2 days with no luck. Can anyone PLEASE HELP ME!
    http://bleedingenvelopes.contacservices.com/ onload, it doesn’t do anything but if I click the link on top right corner, the popup works (image or swf).
    My code doesn’t have the weird quotes so that’s not it. I’m really loosing it here.

    Comment by e11world | September 22, 2009 | Reply

  35. thanks, great help….. :D

    Comment by Rhiane Caña | January 28, 2010 | Reply

  36. Helpful Thank you very much for information.

    Comment by Satılık Villa Kemer | February 26, 2010 | Reply

  37. where am i supposed to place this code.
    in the thickbox-header.php?

    I am trying different places with no success

    Comment by rik | May 12, 2010 | Reply

  38. thanks for this one.

    Comment by Julius Hermosura | June 23, 2010 | Reply

  39. cool! tnx a lot!!!

    Comment by claudio | September 3, 2010 | Reply

  40. Hi there, I’ve use the code and it works fine, but IE6, IE7 and IE8 (a classic!) is having a problem: when I close de lightbox it makes disappear all the animations (SWF) on the page, even the containing divs re-sizes themselves, like if the animations were actually removed, even though in the source code they’re still there. When it displays itself there’s no problem so I really do not know where’s the problem.

    I’ve used the cod below to show an image:
    $(document).ready(function(){
    tb_show(“”,”images/fotos_banner/lightbox_index_distincion_maxima.jpg?height=490&width=773&modal=true”,null);
    });

    Please any help =(
    Thanks a lot!

    Comment by Carolina | December 24, 2010 | Reply

  41. […] The busiest day of the year was May 6th with 411 views. The most popular post that day was jQuery-ThickBox (Launch thickbox onload instead of onclick). […]

    Pingback by 2010 in blog review « Hobione's Weblog | January 7, 2011 | Reply

  42. Great code it works a treat. Just one small thing.

    In Safari the element styles within the html for the window don’t seem to apply. The CSS for the parent page applies. It only works correctly if the style sheet is linked to the parent page.

    Comment by crispin | March 2, 2011 | Reply

  43. i want thick box only login page after login the open on window. how tell me

    Comment by Neeraj kumar | May 29, 2011 | Reply

  44. i want a thikbox which autoload with the contents, i want to use it for the facebook fanbox display. Its should display with the page and should have the option of window close. any help?

    Comment by santosh aryal | September 11, 2011 | Reply

  45. white background in ie how i fix the problem

    Comment by Okan | January 6, 2012 | Reply

  46. Thanks, for help and this information…

    Comment by Mehul Mehta | February 2, 2012 | Reply

  47. i need a code in any language in which popup open on loading the page if any body have this code or see this code on website so he contact me on my email adress arslandoger@hotmail.com i need it very much if you did not want to give me this code so i can purchase it so pleas give me this script

    Comment by Asima | February 23, 2012 | Reply

  48. It’s working hrryyyy…….

    Comment by New User | March 6, 2012 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: