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
48 Comments »
Leave a reply to Gav Cancel reply
About
I am the Obi-Wan, the master of jedi. I am also a Software Engineer and a public servant in Oklahoma City area. My expertise is in Java EE, object-oriented application development, and use of open source frameworks. I primarily work on the design and development phases of Java EE applications. I have been with my current job for awhile and I have a degree in computer science.
In this blog I will be posting issues about JSF, Facelets, Ajax, Spring, JPA, Portal, Web Services, GlassFish App Server and anything Java EE related technologies those I use to deliver contents over the browser. I will be concentrating my difficult moments during development phases and how I tackle those issues to perform my daily job. Click here to read NASE Glassfish application server success story.
Please feel free to make comments and suggestions and here are some of my favorite quotes:
“Watch your thoughts; they become words.
Watch your words; they become actions.
Watch your actions; they become habits.
Watch your habits; they become character.
Watch your character; it becomes your destiny.” —- Unknown
“You are a product of your environment. So choose the environment that will best develop you toward your objective. Analyze your life in terms of its environment. Are the things around you helping you toward success – or are they holding you back?” — W. Clement Stone
” I want to think like God” — Albert Einstein
“It’s not that I’m so smart , it’s just that I stay with problems longer .”
~ Albert Einstein
“I Hear and I Forget, I See and I Remember, I Do and I Understand” — Unknown
“It’s not the length of life, but depth of life” — Ralph Waldo Emrson
“We cannot change the cards we are dealt, just how we play the hand.” —Randy Pausch
“Pride comes before the fall.” — Hebrew proverb
It’s the little things in life that brings the greatest happiness — Unknown
“Part of being a good friend is being honest.” — President Obama
“I now tend to think of everything as objects so now when my wife throws an exception I simply catch it and deal with it and move on.” — Robert, stackoverflow blog
“The computer industry is the only industry that is more fashion-driven than women’s fashion.” …. Larry Ellison, Oracle
“All of man’s miseries derive from not being able to sit quietly in a room alone.” — Blaise Pascal
Happy coding and May the Force be with You.
HobiOne (Hobi HaQue)
Oklahoma, USA
Recent Comments
-
Archives
- January 2018 (1)
- August 2014 (2)
- January 2011 (3)
- September 2010 (1)
- August 2010 (1)
- May 2010 (1)
- April 2010 (1)
- November 2009 (1)
- July 2009 (1)
- June 2009 (5)
- May 2009 (2)
- April 2009 (4)
-
Categories
-
RSS
Entries RSS
Comments RSS
Hobione's Weblog 
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 ;)
Glad to know.
Thanks
Hobi
Exactly what i needed….cheers
Thanks!
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.
I had tried many codes from Net. but i feel ur code most helpful to me. thanx a lot.
Thanks!!! finally i made it works thanks to you :D
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.
…. 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.
…. 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.
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
Excellent blog! Interesting article and very informative! I will necessarily subscribe for this blog. http://movie-cool.com/map.html
If we were to add a Google adsense javascript code in a thickbox, should we select the iframe version versus the ajax content?
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 “>
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?
More about the dollar-sign ($) jQuery object construction at About JavaScript Dollar Sign ($)
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 :)
P.S
Nice snow there you have :D … did you wrote it by yourselfe??
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
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!
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
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…
Downloaded the latest jquery and Thickbox, changed doctype on page and all is well in FF & IE. Still no Safari.
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
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.
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!
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!
I’m trying to get this to load on my page only once. Anyone know how to handle the cookie control?
Works all very well on FF but IE7 just shows WHITE page
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); });
This is exactly what I am trying to do. You rock!!!
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
[…] 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 |
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.
thanks, great help….. :D
Helpful Thank you very much for information.
where am i supposed to place this code.
in the thickbox-header.php?
I am trying different places with no success
thanks for this one.
cool! tnx a lot!!!
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!
[…] 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 |
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.
i want thick box only login page after login the open on window. how tell me
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?
white background in ie how i fix the problem
Thanks, for help and this information…
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
It’s working hrryyyy…….