CODEWITHSUNDEEP
jquerythickbox
user71723
user71723

Reputation: 343

Launch Thickbox onload Instead Of click

I want to launch a jquery thickbox onload instead of click. for this I use the code below.

<script language="javascript">
    tb_show("HAI","#TB_inline?height=240&amp;width=405&amp;inlineId=hiddenModalContent&amp;modal=true",null);
</script>

Actual link is 

<a href="#TB_inline?height=240&amp;width=405&amp;inlineId=hiddenModalContent&
amp;modal=true" class="thickbox">Change Name</a>

When I click the above link..thick box appears..

but on body onload thick box is not appearing..

Please help regarding this..

Thanks in advance...

regards Yen

Upvotes: 2

Views: 18665

Answers (4)

user1052478
user1052478

Reputation: 149

Uffff!!! Finally I have sorted it out, I think your div content is something like
<div id="hiddenModalContent" style="display:none">My Content</div>
Try this instead of the above one
<div id="hiddenModalContent" style="display:none"><div>My Content</div></div>
This should fix the problem. Please note that you have to encapsulate the content in "hiddenModalContent" by an HTMl element e.g. <div>...</div><p>...</p> etc.

Because in thickbox.js file they have used .children() not .html(). This is the reason why we have to encapsulate the content.

Upvotes: 3

Jo&#227;o Guilherme
Jo&#227;o Guilherme

Reputation: 1379

This is the same solution that Matt Frear suggested that you can copy and paste to test. I changed the thickbox parameters but you can change it as you want.

<html>
<head>
   <link rel="stylesheet" type="text/css" media="screen" href="http://jquery.com/demo/thickbox/thickbox-code/thickbox.css" />
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery.com/demo/thickbox/thickbox-code/thickbox-compressed.js" type="text/javascript"></script>

<script type='text/javascript'>
$(document).ready(function() {
   tb_show('HAI','http://microsoft.com?KeepThis=true&TB_iframe=true&height=350&width=520');
});
</script>

</body>
</html>

Upvotes: 0

Matt Frear
Matt Frear

Reputation: 54841

Your code should work. Maybe try putting it in a call to jQuery's document.ready e.g. 

<script language="javascript">
    $(document).ready(function() {
        tb_show("HAI","#TB_inline?height=240&amp;width=405&amp;inlineId=hiddenModalContent&amp;modal=true",null);
    });
</script>

Upvotes: 6

Willson Haw
Willson Haw

Reputation: 408

If you have your anchor link somewhere on the page, you can do something like:

<script>
$.ready( function() {
    $("#thickBoxLink").trigger("click");
}
</script>

<html>
<body>
<a href="#TB_inline?height=240&amp;width=405&amp;inlineId=hiddenModalContent&amp;modal=true" id="thickBoxLink" class="thickbox">Change Name</a>
</body>
</html>

That should simulate clicking on the link and open up the thickbox for you when the page is loaded.

Upvotes: 1

Related Questions