www.webdeveloper.com
Results 1 to 5 of 5

Thread: Creating divs and Browser Troubles... Help?

  1. #1
    Join Date
    Apr 2009
    Posts
    6

    Creating divs and Browser Troubles... Help?

    So I'm trying to add a "grey out" feature to a web page when a timeout value has been reached. To do this, I need to create two divs through javascript functions. First, I need a div that darkens the screen. Second, I need a div to show a message.

    I feel as though I have the logic right, but I'm running into problems when working with IE and Firefox.

    Here's the strange thing. I can create the div with the warning and have it display in IE, but not Firefox, and I can create the div to darken the page and have it display in Firefox, but not IE.

    I'm using CSS in a class in order to darken the page. I'm next to positive I had it working in both IE and Firefox last week, but it only works in Firefox now. The function to create the div and the relevant class are below:

    Code:
    function darkenPage()
    {
    	var divH;
    	var divB;
    	
    	divH = parent.frames['Header'].document.createElement('div');
    	divH.setAttribute('id', '"divDarkenH"');
    	divH.setAttribute('class', 'darkenBackground');
    	divH.innerHTML = " ";
    	document.body.appendChild(divH);
    	divB = parent.frames['Body'].document.createElement('div');
    	divB.setAttribute('id', '"divDarkenB"');
    	divB.setAttribute('class', 'darkenBackground');
    	divB.innerHTML = " ";
    	parent.frames['Body'].document.body.appendChild(divB);
    	showTimeoutWarning();
    }
    
    .darkenBackground {
    	opacity: 0.7; /* Safari, Opera */
    	filter: alpha(opacity=70); /* IE */
    	-moz-opacity:0.70; /* FireFox */
    	z-index: 100;
    	background-color: rgb(0, 0, 0);
    	height: 100%;
    	width: 100%;
    	background-repeat:repeat;
    	position:absolute;
    	top: 0px;
    	left: 0px;
    }
    Similarly, I'm creating the message with another function. Like I said, it displays in IE, but doesn't seem to show up in Firefox. That function is below:

    Code:
    function showTimeoutWarning()
    {
    	var currentUrl = window.location;
    	var arrUrlParts = currentUrl.split('/');
    	var redirectUrl;
    	var divWarning;
    	
    	redirectUrl = "" + arrUrlParts[0] + "//" + arrUrlParts[2] + "/" + arrUrlParts[3] + "/LogOff.asp""";
    	
    	var d = new Date();
    
    	var curr_hour = d.getHours();
    	var curr_min;
    	var curr_sec;
    	
    	if (d.getMinutes() < 10)
    		curr_min = "0" + d.getMinutes();
    	else
    		curr_min = d.getMinutes();
    	if (d.getSeconds() < 10)
    		curr_sec = "0" + d.getSeconds();
    	else
    		curr_sec = d.getSeconds();
    	
    	divWarning = parent.frames['Body'].document.createElement('div');
    	divWarning.setAttribute('id','"divWarning"');
    	divWarning.style.setAttribute('height','115 px');
    	divWarning.style.setAttribute('width','250 px');
    	divWarning.style.setAttribute('textAlign','center');
    	divWarning.style.setAttribute('position','absolute');
    	divWarning.style.setAttribute('marginLeft','auto');
    	divWarning.style.setAttribute('marginRight','auto');
    	divWarning.style.setAttribute('marginTop','auto');
    	divWarning.style.setAttribute('marginBottom','auto');
    	divWarning.style.setAttribute('zIndex','150');
    	divWarning.style.setAttribute('padding','10 px');
    	divWarning.style.setAttribute('border','1px solid #000000');
    	divWarning.innerHTML = curr_hour + ":" + curr_min + ":" + curr_sec +  " - Your account has been inactive for an extended period of time.<br />Please click OK to stay logged in or click Logout to log out.<br /><br /><table><tr><td><div class='actionOption'>&nbsp;OK&nbsp;</div><td/><td><div class='actionOption' onclick='window.location=" + redirectUrl + "'>&nbsp;Logout&nbsp;</div></td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table>"
    	parent.frames['Body'].document.body.appendChild(divWarning);
    }
    Yes, we're using frames and, no, that's not my choice. What could I be doing wrong? Any and all help would be greatly appreciated.

  2. #2
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by VenomLS3 View Post
    Code:
    	divH.setAttribute('class', 'darkenBackground');
    The property you want is className. Also avoid using setAttribute unless something won't work without it. Use direct assignment:
    Code:
    divH.className='darkenBackground';

  3. #3
    Join Date
    Apr 2009
    Posts
    6
    Hey, it worked! Thanks so much! I had no idea that I was using an incorrect syntax.

    How about the second half of the problem?

    I've modified my code to move the div so that it's basically in the center of the page (in IE), but the div still won't show up in Firefox. Thoughts? The modified code is below.

    Code:
    function showTimeoutWarning()
    {
    	var divWarning;
    	var d = new Date();
    
    	var curr_hour = d.getHours();
    	var curr_min;
    	var curr_sec;
    	
    	if (d.getMinutes() < 10)
    		curr_min = "0" + d.getMinutes();
    	else
    		curr_min = d.getMinutes();
    	if (d.getSeconds() < 10)
    		curr_sec = "0" + d.getSeconds();
    	else
    		curr_sec = d.getSeconds();
    	
    	divWarning = parent.frames['Body'].document.createElement('div');
    	divWarning.setAttribute('id','"divWarning"');
    	divWarning.style.setAttribute('height','115 px');
    	divWarning.style.setAttribute('width','250 px');
    	divWarning.style.setAttribute('textAlign','center');
    	divWarning.style.setAttribute('position','absolute');
    	divWarning.style.setAttribute('marginLeft','auto');
    	divWarning.style.setAttribute('marginRight','auto');
    	divWarning.style.setAttribute('marginTop','auto');
    	divWarning.style.setAttribute('marginBottom','auto');
    	divWarning.style.setAttribute('zIndex','150');
    	divWarning.style.setAttribute('backgroundColor','#FFFFFF');
    	divWarning.style.setAttribute('padding','10 px');
    	divWarning.style.setAttribute('border','1px solid #000000');
    	divWarning.innerHTML = curr_hour + ":" + curr_min + ":" + curr_sec +  " - Your account has been inactive for an extended period of time.<br />Please click OK within the next 3 minutes to stay logged in or click Logout to log out.<br /><br /><table><tr><td><div class='actionOption'>&nbsp;OK&nbsp;</div><td/><td><a href='LogOff.asp'><div class='actionOption'>&nbsp;Logout&nbsp;</div></a></td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table>"
    	parent.frames['Body'].document.body.appendChild(divWarning);
    	moveDiv(divWarning);
    }
    function moveDiv(objRef) {
    	objRef.style.left = (document.body.clientWidth)/2 - 125;
    	objRef.style.top = (document.body.clientHeight)/2 + 50; 
    }

  4. #4
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by VenomLS3 View Post
    Hey, it worked! Thanks so much! I had no idea that I was using an incorrect syntax.

    How about the second half of the problem?

    I've modified my code to move the div so that it's basically in the center of the page (in IE), but the div still won't show up in Firefox. Thoughts? The modified code is below.

    Code:
    divWarning.style.setAttribute('height','115 px');
    Try removing all the spaces between the number and 'px'.

  5. #5
    Join Date
    Apr 2009
    Posts
    6
    Thanks for the input! I think that actually did it, along with fixing some syntax stuff.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles