Need (document).ready Help

I have a pop-up with an alpha background that's activated by a css action and would like to convert the event to a jQuery (document).ready function so that it activates when the page loads. I've got the script in place, but don't know how to modify the html code. I've attached the code but it can also be seen at:

http://www.caycecookbook.com/alert_onload/jqModal_alpha/code.html

Many thanks for all help.

Cayce
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>jqModal Pop-Up</title>


<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<script type="text/javascript" src="http://www.caycecookbook.com/alert_onload/jqModal_alpha/scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="http://www.caycecookbook.com/alert_onload/jqModal_alpha/scripts/jqModal.js"></script>

<style type="text/css">
/* Optional: image cacheing. Any images contained in this div will be
	loaded offscreen, and thus cached. Caching CSS created with the help of;
	Klaus Hartl <klaus.hartl@stilbuero.de> */
@media projection, screen {
     div.imgCache { position: absolute; left: -8000px; top: -8000px; }
     div.imgCache img { display:block; }
}
@media print { div.imgCache { display: none; } }
</style>
<style type="text/css">
/* jqModal base Styling courtesy of;
  Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (in jqModal.js). You
  can change this value by either;
    a) supplying one via CSS
    b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */ 
.jqmWindow {
    display: none;
    position: fixed;
    top: 5%;
    left: 50%;
    margin-left: -265px;
    width: 530px; 
		/*width: auto;*/
    background-color:#777777;
    color: #333;
    border: 1px solid white;
    padding: 0px;
}
.jqmOverlay { background-color: #000; }
/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->

<link href="http://www.caycecookbook.com/alert_onload/jqModal_alpha/css/text.css" rel="stylesheet" type="text/css">


<!-- \\\\\\ OnLoad Script ///// -->
<script type="text/javascript"> 
$(document).ready(function(){
		//insert code here
	});
</script> 

</head>

<body bgcolor="#eaeaea">

<DIV align="center">


<TABLE ID="Container_Table" width="500" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<TR>
<TD ID="pop-up_td" align="center" valign="middle"><a href="#" class="rename"><img src="images/click_me.jpg" width="504" height="360" border="0"></a>
<!-- NOTE: Script & DIV must be contained in HREF TD -->
<script type="text/javascript"> 
$().ready(function() {
	$('#rename').jqm({trigger: 'a.rename'});
});
</script> 
<!-- POP-UP DIV -->
<DIV name="pop-up" class="jqmWindow" id="rename" style="padding:18px 0px 12px 0px;">
<TABLE align="center" width="500" border="0" cellspacing="0" cellpadding="0" bgcolor="#7777777">
<TR><TD align="center">
<P style="margin: 12px 12px 12px 12px;"><img src="images/hey_there.jpg" width="504" height="360" border="0"></p>
</td></tr>
<TR><TD align="center" valign="middle">
<P style="margin:6px 0px 0px 0px;">
<a href="#" class="jqmClose" style="text-decoration:none; color:#ffffff;; font-family: arial, helvetica, verdana, sans-serif; font-size:12px; font-weight:bold;">Close</a>
</p>
</td></tr>
</table>
</div name="pop-up">
</td id="pop-up_td">
</tr>
</table id="Container_Table">


</div>

</body>
</html>

Open in new window

dcayceAsked:
Who is Participating?
 
Greg AlexanderConnect With a Mentor Lead DeveloperCommented:
$(document).ready(function() {

is the same as

$().ready(function() {

BTW

but you should use
$(document).ready(function() {

0
 
Greg AlexanderLead DeveloperCommented:
Actually you can force it to open onload like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>jqModal Pop-Up</title>


<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<!-- >>>>>>>>>> jqMODAL DEPENDENCIES >>>>>>>>>> -->
<script type="text/javascript" src="http://www.caycecookbook.com/alert_onload/jqModal_alpha/scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="http://www.caycecookbook.com/alert_onload/jqModal_alpha/scripts/jqModal.js"></script>

<style type="text/css">
/* Optional: image cacheing. Any images contained in this div will be
        loaded offscreen, and thus cached. Caching CSS created with the help of;
        Klaus Hartl <klaus.hartl@stilbuero.de> */
@media projection, screen {
     div.imgCache { position: absolute; left: -8000px; top: -8000px; }
     div.imgCache img { display:block; }
}
@media print { div.imgCache { display: none; } }
</style>
<style type="text/css">
/* jqModal base Styling courtesy of;
  Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (in jqModal.js). You
  can change this value by either;
    a) supplying one via CSS
    b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */ 
.jqmWindow {
    display: none;
    position: fixed;
    top: 5%;
    left: 50%;
    margin-left: -265px;
    width: 530px; 
                /*width: auto;*/
    background-color:#777777;
    color: #333;
    border: 1px solid white;
    padding: 0px;
}
.jqmOverlay { background-color: #000; }
/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->
<!-- <<<<<<<<<< jqMODAL DEPENDENCIES <<<<<<<<<< -->

<link href="http://www.caycecookbook.com/alert_onload/jqModal_alpha/css/text.css" rel="stylesheet" type="text/css">


<!-- \\\\\\ OnLoad Script ///// -->
<script type="text/javascript"> 
$(document).ready(function(){
                //insert code here
        });
</script> 

</head>

<body bgcolor="#eaeaea">

<DIV align="center">


<TABLE ID="Container_Table" width="500" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<TR>
<TD ID="pop-up_td" align="center" valign="middle"><a href="#" class="rename"><img src="images/click_me.jpg" width="504" height="360" border="0"></a>
<!-- NOTE: Script & DIV must be contained in HREF TD -->
<script type="text/javascript"> 
$().ready(function() {
        $('#rename').jqm().jqmShow();
});
</script> 
<!-- POP-UP DIV -->
<DIV name="pop-up" class="jqmWindow" id="rename" style="padding:18px 0px 12px 0px;">
<TABLE align="center" width="500" border="0" cellspacing="0" cellpadding="0" bgcolor="#7777777">
<TR><TD align="center">
<P style="margin: 12px 12px 12px 12px;"><img src="images/hey_there.jpg" width="504" height="360" border="0"></p>
</td></tr>
<TR><TD align="center" valign="middle">
<P style="margin:6px 0px 0px 0px;">
<a href="#" class="jqmClose" style="text-decoration:none; color:#ffffff;; font-family: arial, helvetica, verdana, sans-serif; font-size:12px; font-weight:bold;">Close</a>
</p>
</td></tr>
</table>
</div name="pop-up">
</td id="pop-up_td">
</tr>
</table id="Container_Table">


</div>

</body>
</html>

Open in new window

0
 
dcayceAuthor Commented:
You did that just by changing
      $('#rename').jqm({trigger: 'a.rename'});
to
        $('#rename').jqm().jqmShow();
?
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
dcayceAuthor Commented:
I'm concerned about one thing: The advantage of the (document).ready script is that it doesn't wait until the whole page loads. Does this method behave the same way?
0
 
Greg AlexanderLead DeveloperCommented:
Yeah, you could use it in your document.ready too, just remove the other call

<script type="text/javascript"> 
$(document).ready(function() {
        $('#rename').jqm().jqmShow();
});
</script> 

Open in new window

0
 
dcayceAuthor Commented:
Ah... that explains a lot. So I was actually starting out with the (document).ready script but didn't know.

Perfect answer. Thank you!
0
 
dcayceAuthor Commented:
Great!
0
 
Greg AlexanderLead DeveloperCommented:
Yup!  Thanks for the points
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.