dcayce
asked on
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
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>
ASKER
You did that just by changing
$('#rename').jqm({trigger: 'a.rename'});
to
$('#rename').jqm().jqmShow ();
?
$('#rename').jqm({trigger:
to
$('#rename').jqm().jqmShow
?
ASKER
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?
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Ah... that explains a lot. So I was actually starting out with the (document).ready script but didn't know.
Perfect answer. Thank you!
Perfect answer. Thank you!
ASKER
Great!
Yup! Thanks for the points
Open in new window