?
Solved

Need (document).ready Help

Posted on 2011-05-12
8
Medium Priority
?
201 Views
Last Modified: 2012-05-11
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

0
Comment
Question by:dcayce
  • 4
  • 4
8 Comments
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35748214
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
 

Author Comment

by:dcayce
ID: 35748317
You did that just by changing
      $('#rename').jqm({trigger: 'a.rename'});
to
        $('#rename').jqm().jqmShow();
?
0
 

Author Comment

by:dcayce
ID: 35748414
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35748638
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
 
LVL 19

Accepted Solution

by:
Greg Alexander earned 2000 total points
ID: 35748651
$(document).ready(function() {

is the same as

$().ready(function() {

BTW

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

0
 

Author Comment

by:dcayce
ID: 35748853
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
 

Author Closing Comment

by:dcayce
ID: 35748862
Great!
0
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35748864
Yup!  Thanks for the points
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question