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
34 Comments »
Leave a comment
About
I am the Obi-Wan, the master of jedi. I am also a Software Engineer in Oklahoma City. 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 about six years 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:
“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
Happy coding and May the Force be with you.
HobiOne (Hobi HaQue)
Oklahoma, USA
-
Recent Comments
-
Archives
- November 2009 (1)
- July 2009 (1)
- June 2009 (5)
- May 2009 (2)
- April 2009 (4)
- March 2009 (2)
- January 2009 (3)
- December 2008 (1)
- November 2008 (2)
- October 2008 (1)
- September 2008 (3)
- August 2008 (2)
-
Categories
-
RSS
Entries RSS
Comments RSS
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.