Advanced Search

Results 1 to 2 of 2

Thread: Infinite Loop onload

  1. #1
    Join Date
    Sep 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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; */

  2. #2
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    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...

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •