absolute div and relative div

[dzhax]

So I am working on a project and basically finish it. I show it to the client and say Its not working why did you say it was done.I am using hidden divs as custom message boxes instead of using js alerts. They work fine in Firefox and chrome. But when you load the page in ie8 they dont show up.this is the code for one of my divs:

<div id="loginContainer" style="font-family:Century Gothic; visibility:hidden; position:absolute; top:0px; left:0px; background: url('http://www.standthemup.org/tvdemo/img/adminPanelShadowBG.png') transparent repeat scroll center center; width:101%; height:101%; overflow:hidden; vertical-align: middle;" >	<div style="margin:auto; width:300px !important; padding:0px; background:#313131; border: 1px gray solid; text-align: center; position:relative; margin: 200px auto;">		<div style="background:#262626; color:gray; font-size: 11px; padding:1px;">			<table>				<tr>					<td id="loginTitle" style="width: 290px; text-align:left;">Test Title...</td>					<td style="width:10px; cursor:pointer;" onclick="removeLoginPage()">x</td>				</tr>			</table>		</div>		<div id="loginBody" style="text-align:center; font-size: 13px; padding-top:10px; padding-bottom:10px; color:white;">			Test Body...		</div>	</div></div>

And the js functions i was using:

function showAlert(titleAlert,messageAlert){	document.getElementById('alertTitle').innerHTML = titleAlert;	document.getElementById('alertBody').innerHTML = messageAlert;	scroll(0,0);	obj5 = document.body;	obj5.style.overflow = "hidden"; //hidden	obj6 = document.getElementById("alertContainer");	obj6.style.visibility = "visible";}function closeAlert(){	scroll(0,0);	obj7 = document.body;	obj7.style.overflow = "auto";	obj8 = document.getElementById("alertContainer");	obj8.style.visibility = "hidden";}

And then i call it:

showAlert("Login:","Not Logged In! Please sign in before chatting (It's Free)");

So you can what I am talking about. http://www.standthemup.org/tv/index2.phpThe error message is generated when you click on send for the chat and your not logged in. Also a similar message is generated when you click on sign in at the top right of the page

[dzhax]

anyone have any ideas?

[ShadowMage]

It works in IE8 when I try it. Are you getting any errors?

[dzhax]

This is what IE tells me.... i cant find the issues mentioned

Webpage error detailsUser Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.2; .NET4.0E)Timestamp: Wed, 16 Mar 2011 17:35:41 UTCMessage: 'document.getElementById(...)' is null or not an objectLine: 7Char: 3Code: 0URI: http://www.standthemup.org/tv/lib/js/general.jsMessage: 'null' is null or not an objectLine: 61Char: 2Code: 0URI: http://www.standthemup.org/tv/lib/js/general.js

If you go to the site and click on send it should show a message in the middle of the screen please login...What happens is the background darkens (except around the video) and no message shows anywhere...I think its a z-index problem but its weird that everthing is fine in Firefox and chrome.

[ShadowMage]

It works just fine for me. I get a message on the screen that says "Not logged in. Please log in to chat." and no errors.Can you post the code that the errors are pointing to?

[dzhax]

thats the thing. there are no errors that show it just simply dosent show. Are you using IE??? it works in firefox and chrome. Let me see if i can screenshot what it does for me...On IE before clicking the send button:On IE after clicking the send button:On Firefox after clicking the send button:

[dzhax]

And yes i have tried this on multiple computers.Are you using ie9??? because i only have ie7 and ie8.

[ShadowMage]

thats the thing. there are no errors that show it just simply dosent show.

Then what were the error messages you posted before? Also, I can see that both screenshots from IE have the little yellow triangle in the bottom left corner. Perhaps there's an error in some other bit of code? If you double click the yellow triangle you should get a popup stating the error messages. What do the error messages say before you click on 'Send'?

And yes i have tried this on multiple computers.Are you using ie9??? because i only have ie7 and ie8.

No I am using IE8.

[dzhax]

those errors are the ones posted above...I think it has something to do with the z-index of the livestream, but i tried z-indexing the iframe and its not doing anything.

[ShadowMage]

those errors are the ones posted above...

Ok, if those are the errors you are receiving, then post the code related to those errors.

[dzhax]

The errors IE is showing:

Webpage error detailsUser Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.2; .NET4.0E)Timestamp: Fri, 18 Mar 2011 17:19:12 UTCMessage: 'null' is null or not an objectLine: 83Char: 2Code: 0URI: http://www.standthemup.org/tv/lib/js/general.js

general.js

function changeNavButton(selectedNavId){	window.GET();	if (selectedNavId == 'tvNav'){		if (_GET.admin){			processAjaxVariable('contentBody','lib/addon/tv.php?admin=1');		}else{			processAjaxVariable('contentBody','lib/addon/tv.php');		}		document.getElementById('tvNav').className='selectedTab';		document.getElementById('tvBlog').className='unselectedTab';		document.getElementById('tvForum').className='unselectedTab';		document.getElementById('tvStore').className='unselectedTab';		document.getElementById('tvFacebook').className='unselectedTab';		document.getElementById('tvTwitter').className='unselectedTab';		}	if (selectedNavId == 'tvBlog'){		processAjaxVariable('contentBody','lib/addon/external.php?src=http://www.standthemup.org/dr');		document.getElementById('tvNav').className='unselectedTab';		document.getElementById('tvBlog').className='selectedTab';		document.getElementById('tvForum').className='unselectedTab';		document.getElementById('tvStore').className='unselectedTab';		document.getElementById('tvFacebook').className='unselectedTab';		document.getElementById('tvTwitter').className='unselectedTab';	}	if (selectedNavId == 'tvForum'){		processAjaxVariable('contentBody','lib/addon/external.php?src=https://www.standthemup.org/dr/forum/5');		document.getElementById('tvNav').className='unselectedTab';		document.getElementById('tvBlog').className='unselectedTab';		document.getElementById('tvForum').className='selectedTab';		document.getElementById('tvStore').className='unselectedTab';		document.getElementById('tvFacebook').className='unselectedTab';		document.getElementById('tvTwitter').className='unselectedTab';	}	if (selectedNavId == 'tvStore'){		processAjaxVariable('contentBody','lib/addon/external.php?src=https://www.standthemup.org/dr/catalog/10');		document.getElementById('tvNav').className='unselectedTab';		document.getElementById('tvBlog').className='unselectedTab';		document.getElementById('tvForum').className='unselectedTab';		document.getElementById('tvStore').className='selectedTab';		document.getElementById('tvFacebook').className='unselectedTab';		document.getElementById('tvTwitter').className='unselectedTab';	}	if (selectedNavId == 'tvFacebook'){		processAjaxVariable('contentBody','lib/addon/external.php?src=http://www.facebook.com/standthemup');		document.getElementById('tvNav').className='unselectedTab';		document.getElementById('tvBlog').className='unselectedTab';		document.getElementById('tvForum').className='unselectedTab';		document.getElementById('tvStore').className='unselectedTab';		document.getElementById('tvFacebook').className='selectedTab';		document.getElementById('tvTwitter').className='unselectedTab';	}	if (selectedNavId == 'tvTwitter'){		processAjaxVariable('contentBody','lib/addon/external.php?src=http://twitter.com/standemup');		document.getElementById('tvNav').className='unselectedTab';		document.getElementById('tvBlog').className='unselectedTab';		document.getElementById('tvForum').className='unselectedTab';		document.getElementById('tvStore').className='unselectedTab';		document.getElementById('tvFacebook').className='unselectedTab';		document.getElementById('tvTwitter').className='selectedTab';	}}window.GET = function(){	var url = window.location.href;	var array = url.indexOf('#') == -1 ?				url.substring(url.indexOf('?') + 1).split(/&;/):				url.substring(url.indexOf('?') + 1, url.indexOf('#')).split(/&;/);							//URLs can be like either "sample.html?test1=hi&test2=bye" or								//"sample.html?test1=hi;test2=bye"	window._GET = {};	for(var i = 0; i < array.length; i++){		var assign = array[i].indexOf('=');		if(assign == -1){			_GET[array[i]] = true;//if no value, treat as boolean		}else{			_GET[array[i].substring(0, assign)] = array[i].substring(assign + 1);		}	}}function scroll2Bottom() {	var objDiv = document.getElementById("chatLog");	objDiv.scrollTop = objDiv.scrollHeight;	return false;}function sendChat(newChat){	processAjax('lib/sql/sendChat.php?message='+newChat+'&user='+getCookie('username')+'&important=0');	scroll2Bottom();	document.chatSubmit.reset();}function processAjax(url) {	req = window.XMLHttpRequest ? new XMLHttpRequest() : window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : null;	req.onreadystatechange = function () {   		if (req.readyState == 4) { // Complete		  if (req.status == 200) { // OK response			  refreshChat();		  } else {			alert("Problem: " + req.statusText);		  }		}	}	req.open("GET", url, true);	req.send();}function showLoginPage(){	titleLogin = "Login:";	messageLogin = "<form method='post' id='chatroomLogin' name='drupalLogin'>Username: <input type='text' name='username' style='background:gray; color:black; border:0px transparent solid;' onkeydown='return disableEnterKey(event)' /><br/><br/><input name='loginSubmit' type='button' style='background:gray; color:black; border: 0px transparent solid;' value='Login' onclick='setUsername(document.drupalLogin.username.value)' /></form>";		document.getElementById('loginTitle').innerHTML = titleLogin;	document.getElementById('loginBody').innerHTML = messageLogin;	document.drupalLogin.username.value="";	scroll(0,0);	obj = document.body;	obj.style.overflow = "hidden"; //hidden	obj2 = document.getElementById("loginContainer");	obj2.style.visibility = "visible";}function removeLoginPage(){	scroll(0,0);	obj3 = document.body;	obj3.style.overflow = "auto";	obj4 = document.getElementById("loginContainer");	obj4.style.visibility = "hidden";}function showAlert(titleAlert,messageAlert){	document.getElementById('alertTitle').innerHTML = titleAlert;	document.getElementById('alertBody').innerHTML = messageAlert;	scroll(0,0);	obj5 = document.body;	obj5.style.overflow = "hidden"; //hidden	obj6 = document.getElementById("alertContainer");	obj6.style.visibility = "visible";}function closeAlert(){	scroll(0,0);	obj7 = document.body;	obj7.style.overflow = "auto";	obj8 = document.getElementById("alertContainer");	obj8.style.visibility = "hidden";}function refreshChat(){	processAjaxVariable('chattingWindow','lib/sql/getChat.php');	setTimeout('refreshChat()',3000);}function processAjaxVariable(divId,url) {	req = window.XMLHttpRequest ? new XMLHttpRequest() : window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : null;	req.onreadystatechange = function () {   		if (req.readyState == 4) { // Complete		  if (req.status == 200) { // OK response			  document.getElementById(divId).innerHTML = req.responseText;			  scroll2Bottom();		  } else {			alert("Problem: " + req.statusText);		  }		}	}	req.open("GET", url, true);	req.send();}function checkCookie(){	if (getCookie("username")!=null && getCookie("username")!=""){		document.getElementById('loginStatus').innerHTML = 'Welcome, '+getCookie('username')+' ( <span onclick="signUserOut()" style="cursor:pointer; text-decoration: underline; font-size:11px;">Sign Out</span> )';			} else {		document.getElementById('loginStatus').innerHTML = '<span onclick="showLoginPage()" style="cursor:pointer;">Sign In</span>';	}	refreshChat();	changeNavButton('tvNav');}function alertCookie(message){	var username=getCookie("username");	if (username!=null && username!=""){		sendChat(message);		document.chatSubmit.addText.value = "";		document.chatSubmit.addText.focus();	} else {		document.getElementById('loginStatus').innerHTML = '<span onclick="showLoginPage()" style="cursor:pointer;">Sign In</span>';		showAlert("Login:","Not Logged In! Please sign in before chatting (It's Free)","Ok");	}}function destroyCookie(name) {	var expdate = new Date();	expdate.setTime(expdate.getTime() - 1);	document.cookie = name += "=; expires=" + expdate.toGMTString();}function signUserOut() {	destroyCookie('username');	checkCookie();}function setCookie(c_name,value,exdays){	var exdate=new Date();	exdate.setDate(exdate.getDate() + exdays);	var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());	document.cookie=c_name + "=" + c_value;}function getCookie(c_name){	var i,x,y,ARRcookies=document.cookie.split(";");	for (i=0;i<ARRcookies.length;i++){		x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));		y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);		x=x.replace(/^\s+|\s+$/g,"");		if (x==c_name){			return unescape(y);		}	}}function setUsername(username,pass){	processAjax('lib/sql/chatLogin.php?user='+username+'&pass='+pass);	setCookie("username",username,2);	checkCookie();	removeLoginPage();}function disableEnterKey(e){	 var key;	 if(window.event)		  key = window.event.keyCode;	 //IE	 else		  key = e.which;	 //firefox	 if(key == 13)		  return false;	 else		  return true;}function clearChat(){	closeAlert();	processAjaxVariable('chattingWindow','lib/sql/clearChat.php');	processAjax('lib/sql/sendChat.php?message=Chat cleared...&user=Mod Function&important=1');	scroll2Bottom();}function deleteChat(rowId){	closeAlert();	processAjaxVariable('chattingWindow','lib/sql/deleteChat.php?id='+rowId);	processAjax('lib/sql/sendChat.php?message=Chat cleared...&user=Mod Function&important=1');	scroll2Bottom();}

I know some of the functions are not the most efficient, but im worried about getting it to work then I will rewrite some of them.

[thescientist]

no chance of telling us which one is line 83? or should we start counting... :)anyway, it's probably this line

req = window.XMLHttpRequest ? new XMLHttpRequest() : window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : null;

ternary's are equivalent to if else statements (with one line each), so in pseudo code it would sound like this

if(XMLHttpRequest method exists in the window object){  create a new XMLHttpRequest object for all normal browsers}else{  create an XMLHTTP ActiveXObject for IE};

and would be written like this:

req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

edit: the more I look at it I don't think it would ever resolve to null, but really it's going to be one or the other. I don't think there any need to check for XMLHTTP request, and if it doesn't exist, check the existence of ActiveX. It should work, but the line itself is cumbersome, IMO.

[ShadowMage]

Line 83 of the code posted is this one:function scroll2Bottom() { var objDiv = document.getElementById("chatLog"); objDiv.scrollTop = objDiv.scrollHeight; return false;}If this is truely the line causing problems, it means that for some reason objDiv is null. In other words, it can't find the element with id = 'chatLog'However, I suspect that this line is not the culprit, since you say that it works in all but IE. Is there more code or is this everything in general.js? If there is more, can you show us which one is 83?I would try scientists suggestion and see if that fixes it.

[dzhax]

That is all the code in general.jsAnd to my knowledge the line counts are exact. And according to the error it kind of makes sense that it thinks object is null.@scientist I will try that when I get home from work. Coding on a android tablet would be a nightmare!

[dzhax]

i fixed the line 83 error there wasnt a div called chatlog anyore. so nowthere are no errors showing on the page at all. my suspisions were right about what the problem really is. the message is showing up like its supposed to it just below livestream. i haveshortened the width ofthe stream and you can see the box show below it