-
Infinite Loop onload
Running into an issue with a problem with a style element returning a null value which is causing an infinite loop and therefore crashes the browser. Basically I built this javascript to enable the following sequence.
1. window onload intiates the start function.
2. timer starts and after 2 seconds toggles the div.style forpopUpDiv to change from "none" to "block". (makes the popup appear.
3. For..While statement executes after that states as long as div.style = block then count 10 seconds and execute toggle function to change style from block to none.
At anytime a user can close the popup so I just wanted a while statement there so that if the user does not close the popup manually the popup will close after ten seconds.
Anyone able to tell me what I am doing wrong?
Here is the html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>css popup test</title>
<!-- css for popup -->
<link href="style.css" type="text/css" rel="stylesheet">
<!-- end css for popup -->
<!-- begin toggle javascript for css popup -->
<script language="javascript" src="popup2.js"></script>
<!-- End toggle javascript -->
</head>
<body>
<!--Declare popup through div element tags-->
<div id="popUpDiv" style="display:none;">
<div id="main">
<div id="top"><img src="images/top-pop-up.jpg" id="top-pop-up" alt="" /></div>
<div id="close"><a OnClick="return toggle('popUpDiv');" href="#">
<img src="images/close-pop-up.jpg" id="close-pop-up" alt="" /></a>
</div>
<br class="clearfloat" />
<div class="p" id="content">
<p class="copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at nisl mi. Sed ullamcorper ligula id eros eleifend bibendum. Ut vitae fringilla mauris. Phasellus felis dui, viverra non pulvinar et, ultricies nec lorem. Proin sollicitudin suscipit pretium. In hac habitasse platea dictumst. Praesent tincidunt risus vitae mi pellentesque consequat. Aliquam ut nisl erat, sed pharetra nisl. Aenean nibh arcu, lobortis id placerat in, mollis mattis odio. Aliquam sit amet mollis elit. Aliquam rutrum, enim eget fermentum fermentum, sapien velit pretium neque, in iaculis erat.
</p>
</div>
<div id="bottom"><img src="images/bottom-pop-up.jpg" id="bottom-pop-up" alt="" /></div>
<br class="clearfloat" />
</div>
</div>
<!--end popup declaration tags-->
</body>
</html>
Here is the Style Sheet:
Code:
body {
background-color: #ffffff;
margin:0px;
padding:0px;
}
.copy {
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
color: #666;
padding-right: 10px;
padding-left: 10px;
}
.p {
margin:0px;
padding:0px;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
text-align: inherit;
color: inherit;
line-height: inherit;
vertical-align: top;
}
p {
padding-top:0px;
margin-top:0px;
}
img {
border:0px;
}
div {
margin:0px;
padding:0px;
font-family:verdana; font-size:12px;
}
.AbsWrap {
width: 100%;
position: relative;
}
.rowWrap {
width: 100%;
}
.clearfloat {
clear:both;
height:0px;
}
a:link, a:visited{
COLOR:inherit;
text-decoration:inherit;
}
#main {
width:257px;
margin: 0px auto 0px 0px;
border: 0px solid #f0f0f0;
}
#top-pop-up {
margin-left:0px;
margin-top:0px;
width:230px;
height:18px;
margin-bottom:0px;
float:left;
display:inline;
}
#close-pop-up {
margin-left:0px;
margin-top:0px;
width:27px;
height:18px;
margin-bottom:0px;
float:left;
display:inline;
}
#BG-pop-up {
margin-left:0px;
margin-top:0px;
width:257px;
height:159px;
margin-bottom:0px;
float:left;
display:inline;
}
#bottom-pop-up {
margin-left:0px;
margin-top:0px;
width:257px;
height:22px;
margin-bottom:0px;
float:left;
display:inline;
}
#content {
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
color: #666;
background-image: url(images/BG-pop-up.jpg);
background-repeat: no-repeat;
padding: 0px;
position: relative;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
height: 159px;
width: 257px;
}
#bodycopy {
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
color: #666;
}
#popUpDiv {
position:absolute;
top:400px;
right: 100px;
width:300px;
height:300px;
z-index: 9002;
}
Here is the JavaScript:
Code:
// Author: Troy Del Valle
//toggle function to open and close popup runs off an if else statement detecting style.display property
function toggle(popUpDiv) {
var el = document.getElementById(popUpDiv);
//if function to determine if style.display equals none and if so then block to make visible
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
//while function to declare that as long as style.display equals block then set timer to make
//invisible after 10 seconds of becoming visible
do {
setTimeout ("toggle('popUpDiv')", 10000 );}
while (el.style.display == 'block'); //end while loop
return false; //end if statement
}
//onload function runs a time delay function before triggering toggle
function popUp() {
setTimeout ( "toggle('popUpDiv')", 2000 );
}
//detects browser type
function browserType() {
agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla') != -1) && ((agent.indexOf('spoofer') == -1) && (agent.indexOf('compatible') == -1)));
this.ns4 = (this.ns && (this.major == 4));
this.ns6 = (this.ns && (this.major >= 5));
this.ie = (agent.indexOf("msie") != -1);
this.ie3 = (this.ie && (this.major < 4));
this.ie4 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") == -1));
this.ie5 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") != -1));
this.ie55 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.5") != -1));
this.ie6 = (this.ie && (agent.indexOf("msie 6.0")!=-1) );
}
//takes the result of browser type function and passes as a global variable
var is = new browserType();
//sets page display properties
function displayProperties() {
if(is.ns6) {
page_width=innerWidth;
page_height=innerHeight; } else if(is.ie5 || is.ie55 ||is.ie6) {
page_width=document.body.clientWidth;
page_height=document.body.clientHeight;
}
}
//sets position if browser type is ie5-ie6 and ns6
function elementObject(id,position,left,top,visibility) {
if (is.ie5|| is.ie55||is.ie6|| is.ns6){
this.obj = document.getElementById(id).style;
this.obj.position = position;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;
}
}
//sets position of popup
function elementSetup(el, position, left, top, visibility) {
positionElement = new elementObject(el, position, left, top, visibility);
}
//function loads with window so more than one function can be triggered at a time.
function start() {
popUp();
elementSetup();
}
/*window onload call to action
window.onLoad=start; */
-
Quote:
Code:
do {
setTimeout ("toggle('popUpDiv')", 10000 );
}
while (el.style.display == 'block');
This loop is going to execute thousands of times, each time creating a new timeout that calls the same function that loops thousands of times...
