By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,135 Members | 1,135 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,135 IT Pros & Developers. It's quick & easy.

problem display:none/block divs via JavaScript

P: 59
hello,

Rather than going on a wild explanation on what's the the problem, it'll be much quicker and easier if i let you look at it yourself, so I'll post my page source (actual contents taken out, of course).

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<style>
p
{
margin: 0px;
padding: 0px;
}

body, html
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #e9e9e9;
}

form
{
margin: 0px;
padding: 0px;
}

.favBg
{
display: none;
border: 0px;
padding: 0px;
margin: 0px;
width: 100%;
position: absolute;
background-color: #000000;
opacity: 0.5;
filter: Alpha(opacity:50);
z-index: 999;
}

.favArea
{
display: none;
border-width: 1px;
border-style: solid;
border-color: #125717;
padding: 0px;
position: absolute;
background-color: white;
z-index: 1000;
}

.button1
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: blue;
}

.button2
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: red;
}

.button3
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: green;
}

.button4
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: yellow;
}

.infoMsg
{
padding-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
font-family: Verdana, Arial, Tahoma;
font-weight: bolder;
font-size: 15px;
color: white;
letter-spacing: 0px;
position: relative;
}

.closeMsg
{
padding: 0px;
margin-top: 2px;
margin-bottom: 0px;
margin-left: 5px;
margin-right: 0px;
font-family: Verdana, Arial, Tahoma;
font-weight: none;
font-size: 12px;
color: black;
letter-spacing: 0px;
position: relative;
}

.buttons
{
border-width: 2px;
border-style: solid;
border-color: black;
padding: 0px;
margin-top: 80px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}

</style>

<script>

function OffWindowHeight()
{
var OffWindowHeight=0;

window.scrollTo(0,10000000);

if(typeof self.pageYOffset!='undefined')
OffWindowHeight=self.pageYOffset;
else if(document.compatMode && document.compatMode != 'BackCompat')
OffWindowHeight=document.documentElement.scrollTop ;
else if(document.body && typeof(document.body.scrollTop)!='undefined')
OffWindowHeight=document.body.scrollTop;

window.scrollTo(0,0);

return OffWindowHeight;
}

function WindowHeight()
{
var WindowHeight = 0;
if( typeof( window.innerWidth ) == 'number' )
WindowHeight = window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight)
WindowHeight = document.documentElement.clientHeight;
else if(document.body && document.body.clientHeight)
WindowHeight = document.body.clientHeight;

return WindowHeight;
}

function pHeight()
{
var pHeight = OffWindowHeight() + WindowHeight();
return pHeight;

}

function favBg()
{
var favHeight = document.getElementById('favBg');
favHeight.style.height = pHeight() + 'px';
}

var cdiv = "blank";
function favArea()
{
if (cdiv == "blank")
{ cdiv = window.setInterval("favArea()", 50); }
var msgBox = document.getElementById("favArea");
objh = parseFloat(msgBox.style.height)/2;
objw = parseFloat(msgBox.style.width)/2;
msgBox.style.top = Math.floor(Math.round((document.documentElement.of fsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
msgBox.style.left = Math.floor(Math.round((document.documentElement.of fsetWidth/2)+document.documentElement.scrollLeft)-objw)+'px';
}

function button1()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var button1 = document.getElementById('button1');
button1.style.display = 'block';
}

function button2()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var button2 = document.getElementById('button2');
button2.style.display = 'block';
}

function button3()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var button3 = document.getElementById('button3');
button3.style.display = 'block';
}

function button4()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var button4 = document.getElementById('button4');
button4.style.display = 'block';
}

function closeMsg()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'none';

var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'none';

var button1 = document.getElementById('button1');
button1.style.display = 'none';

var button2 = document.getElementById('button2');
button2.style.display = 'none';

var button3 = document.getElementById('button3');
button3.style.display = 'none';

var button4 = document.getElementById('button4');
button4.style.display = 'none';
}
</script>

<body onload="favBg(); favArea();">

<div id="favArea" class="favArea" style="width: 500px; height: 400px;">
<div id="button1" class="button1"><p class="infoMsg">button1</p></div>
<div id="button2" class="button2"><p class="infoMsg">button2</p></div>
<div id="button3" class="button3"><p class="infoMsg">button3</p></div>
<div id="button4" class="button4"><p class="infoMsg">button4</p></div>

<p class="closeMsg"><a onclick="closeMsg();">Close</a></p>
</div>

<div id="favBg" class="favBg"></div>

<div align="center">
<div style="width: 400px; height:200px; background-color: white;">
<form action="page.php" method="post">
<input onclick="closeMsg(); button1();" class="buttons" style="color: blue;" type="button" value="button1">
<input onclick="button2();" class="buttons" style="color: red;" type="button" value="button2">
<input onclick="button3();" class="buttons" style="color: green;" type="button" value="button3">
<input onclick="button4();" class="buttons" style="color: yellow;" type="button" value="button4">
</form>
</div>
</div>

</body>
</html>[/HTML]

Firstly try the above code in Firefox and opera. It works well. Try clicking then in order and randomly e.g:- 'button1' then 'button4' then 'button2' everything will be good.

Similarly try the code in the above manner in internet explorer, the results are different. It just isn't working the way it's supposed to, as which you can understand from trying it out in ff and opera.

in ie if done like this: 'button1' then 'button4' then 'button2', it the shows div with id 'button4' with no text, instead of the div with id 'button2' and text saying "button2".

Also notice that in clicking 'close' the function closeMsg() is run, wich sets all to 'display: none'.

Just check out the code, you'll understand what's the problem. I'll only complicate thinks if i try to explain it.

Thanks in advance :)
Jun 25 '07 #1
Share this Question
Share on Google+
15 Replies


acoder
Expert Mod 15k+
P: 16,027
Hide the other buttons when you display a button.
Jun 25 '07 #2

P: 59
but i want 4 buttons too be there.

suppose there are four buttons, each brings up a div when clicked, which is closed upon clinking "close" on the div.

There are 4 buttons and 4 divs associated to the content related to each buttons (text, images etc.. in div).

Consider example a button "gallery" brings up a div with image thumbnails.

here the the 4 divs share the global background div and the containing div. only the contents in the containing div are different. so Different divs are placed in the containing div, eg:- gallery, logos, portfolio etc..

i don't know what's wrong, the script works perfect in all browsers except internet explorer. Its probably an IE "block" rendering bug.

So in a nutshell, what I'm trying to do is make it work on IE without completely changing the script if possible (because I'm almost sure it's a IE bug and not a error in script)

hope i explained it correctly, I'm really not good at explaining things
Jun 25 '07 #3

acoder
Expert Mod 15k+
P: 16,027
Sorry, I meant hide the divs (rather than buttons) when one button is clicked, so that only one div is in the 'block' state. One other possibility is to use style.visibility and set that to 'hidden' and 'visible' rather than using the display property.
Jun 26 '07 #4

P: 59
ah good!

but wouldn't using visibility occupy the space even when it's hidden?
Jun 26 '07 #5

P: 59
i tried it with visibility now, it doesn't work out.

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<style>
p
{
margin: 0px;
padding: 0px;
}

body, html
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #e9e9e9;
}

form
{
margin: 0px;
padding: 0px;
}

.favBg
{
visibility: hidden;
border: 0px;
padding: 0px;
margin: 0px;
width: 100%;
position: absolute;
background-color: #000000;
opacity: 0.5;
filter: Alpha(opacity:50);
z-index: 999;
}

.favArea
{
visibility: hidden;
border-width: 1px;
border-style: solid;
border-color: #125717;
padding: 0px;
position: absolute;
background-color: white;
z-index: 1000;
}

.button1
{
visibility: hidden;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: blue;
}

.button2
{
visibility: hidden;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: red;
}

.button3
{
visibility: hidden;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: green;
}

.button4
{
visibility: hidden;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: yellow;
}

.infoMsg
{
padding-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
font-family: Verdana, Arial, Tahoma;
font-weight: bolder;
font-size: 15px;
color: white;
letter-spacing: 0px;
position: relative;
}

.closeMsg
{
padding: 0px;
margin-top: 2px;
margin-bottom: 0px;
margin-left: 5px;
margin-right: 0px;
font-family: Verdana, Arial, Tahoma;
font-weight: none;
font-size: 12px;
color: black;
letter-spacing: 0px;
position: relative;
}

.buttons
{
border-width: 2px;
border-style: solid;
border-color: black;
padding: 0px;
margin-top: 80px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}

</style>

<script>

function OffWindowHeight()
{
var OffWindowHeight=0;

window.scrollTo(0,10000000);

if(typeof self.pageYOffset!='undefined')
OffWindowHeight=self.pageYOffset;
else if(document.compatMode && document.compatMode != 'BackCompat')
OffWindowHeight=document.documentElement.scrollTop ;
else if(document.body && typeof(document.body.scrollTop)!='undefined')
OffWindowHeight=document.body.scrollTop;

window.scrollTo(0,0);

return OffWindowHeight;
}

function WindowHeight()
{
var WindowHeight = 0;
if( typeof( window.innerWidth ) == 'number' )
WindowHeight = window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight)
WindowHeight = document.documentElement.clientHeight;
else if(document.body && document.body.clientHeight)
WindowHeight = document.body.clientHeight;

return WindowHeight;
}

function pHeight()
{
var pHeight = OffWindowHeight() + WindowHeight();
return pHeight;

}

function favBg()
{
var favHeight = document.getElementById('favBg');
favHeight.style.height = pHeight() + 'px';
}

var cdiv = "blank";
function favArea()
{
if (cdiv == "blank")
{ cdiv = window.setInterval("favArea()", 50); }
var msgBox = document.getElementById("favArea");
objh = parseFloat(msgBox.style.height)/2;
objw = parseFloat(msgBox.style.width)/2;
msgBox.style.top = Math.floor(Math.round((document.documentElement.of fsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
msgBox.style.left = Math.floor(Math.round((document.documentElement.of fsetWidth/2)+document.documentElement.scrollLeft)-objw)+'px';
}

function button1()
{
var favBg = document.getElementById('favBg');
favBg.style.visibility = 'visible';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.visibility = 'visible';
var button1 = document.getElementById('button1');
button1.style.visibility = 'visible';
}

function button2()
{
var favBg = document.getElementById('favBg');
favBg.style.visibility = 'visible';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.visibility = 'visible';
var button2 = document.getElementById('button2');
button2.style.visibility = 'visible';
}

function button3()
{
var favBg = document.getElementById('favBg');
favBg.style.visibility = 'visible';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.visibility = 'visible';
var button3 = document.getElementById('button3');
button3.style.visibility = 'visible';
}

function button4()
{
var favBg = document.getElementById('favBg');
favBg.style.visibility = 'visible';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.visibility = 'visible';
var button4 = document.getElementById('button4');
button4.style.visibility = 'visible';
}

function closeMsg()
{
var favBg = document.getElementById('favBg');
favBg.style.visibility = 'hidden';

var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.visibility = 'hidden';

var button1 = document.getElementById('button1');
button1.style.visibility = 'hidden';

var button2 = document.getElementById('button2');
button2.style.visibility = 'hidden';

var button3 = document.getElementById('button3');
button3.style.visibility = 'hidden';

var button4 = document.getElementById('button4');
button4.style.visibility = 'hidden';
}
</script>

<body onload="favBg(); favArea();">

<div id="favArea" class="favArea" style="width: 500px; height: 400px;">
<div id="button1" class="button1"><p class="infoMsg">button1</p></div>
<div id="button2" class="button2"><p class="infoMsg">button2</p></div>
<div id="button3" class="button3"><p class="infoMsg">button3</p></div>
<div id="button4" class="button4"><p class="infoMsg">button4</p></div>

<p class="closeMsg"><a onclick="closeMsg();">Close</a></p>
</div>

<div id="favBg" class="favBg"></div>

<div align="center">
<div style="width: 400px; height:200px; background-color: white;">
<form action="page.php" method="post">
<input onclick="closeMsg(); button1();" class="buttons" style="color: blue;" type="button" value="button1">
<input onclick="button2();" class="buttons" style="color: red;" type="button" value="button2">
<input onclick="button3();" class="buttons" style="color: green;" type="button" value="button3">
<input onclick="button4();" class="buttons" style="color: yellow;" type="button" value="button4">
</form>
</div>
</div>

</body>
</html>[/HTML]
Jun 26 '07 #6

P: 21
i'm not completely sure, but your problem may be due to Internet Exploders noncompliance to web standards. here is a script to use if you want cross browser document.getElementById()...
Expand|Select|Wrap|Line Numbers
  1. function fetchById(id){
  2.   if (document.getElementById){
  3.     var fetch = document.getElementById(id);
  4.   }
  5.   else if (document.layers){
  6.     var fetch = document.layers[id];
  7.   }
  8.   else if (document.all){
  9.     var fetch = document.all[id];
  10.   }
  11.   return fetch;
  12. }
Jun 27 '07 #7

P: 21
ahh! another problem that i've had with IE is that it tries to help scripts by starting number sequences at zero. there's a small chance that by changing anything with the word "button1" to "button0" and button2 to button1 and so on and so forth. i had this problem with this page on the nav bar (it would hightlight the next link down)

http://getoglo.awardspace.com/
Jun 27 '07 #8

P: 59
i'm not completely sure, but your problem may be due to Internet Exploders noncompliance to web standards. here is a script to use if you want cross browser document.getElementById()...
Expand|Select|Wrap|Line Numbers
  1. function fetchById(id){
  2.   if (document.getElementById){
  3.     var fetch = document.getElementById(id);
  4.   }
  5.   else if (document.layers){
  6.     var fetch = document.layers[id];
  7.   }
  8.   else if (document.all){
  9.     var fetch = document.all[id];
  10.   }
  11.   return fetch;
  12. }
umm how would i use that in my code?
Jun 27 '07 #9

P: 21
umm how would i use that in my code?
replace document.getElementById('id') with fetchById('id') and just replace the 'id' part with the id of your element.

if you have a find function (Ctrl + F) in your editor that has a replace with field, just search for 'document.getElementById(' and replace with 'fetchById('

hope it helps, and if that doesn't work, try my other post about the numbering issue : )
Jun 27 '07 #10

P: 59
replace document.getElementById('id') with fetchById('id') and just replace the 'id' part with the id of your element.

if you have a find function (Ctrl + F) in your editor that has a replace with field, just search for 'document.getElementById(' and replace with 'fetchById('

hope it helps, and if that doesn't work, try my other post about the numbering issue : )

i tried both the things you suggested, it isn't working.

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<style>
p
{
margin: 0px;
padding: 0px;
}

body, html
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #e9e9e9;
}

form
{
margin: 0px;
padding: 0px;
}

.favBg
{
display: none;
border: 0px;
padding: 0px;
margin: 0px;
width: 100%;
position: absolute;
background-color: #000000;
opacity: 0.5;
filter: Alpha(opacity:50);
z-index: 999;
}

.favArea
{
display: none;
border-width: 1px;
border-style: solid;
border-color: #125717;
padding: 0px;
position: absolute;
background-color: white;
z-index: 1000;
}

.button0
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: blue;
}

.button1
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: red;
}

.button2
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: green;
}

.button3
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: yellow;
}

.infoMsg
{
padding-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
font-family: Verdana, Arial, Tahoma;
font-weight: bolder;
font-size: 15px;
color: white;
letter-spacing: 0px;
position: relative;
}

.closeMsg
{
padding: 0px;
margin-top: 2px;
margin-bottom: 0px;
margin-left: 5px;
margin-right: 0px;
font-family: Verdana, Arial, Tahoma;
font-weight: none;
font-size: 12px;
color: black;
letter-spacing: 0px;
position: relative;
}

.buttons
{
border-width: 2px;
border-style: solid;
border-color: black;
padding: 0px;
margin-top: 80px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}

</style>

<script>
function fetchById(id){
if (document.getElementById)
{
var fetch = document.getElementById(id);
}
else if (document.layers)
{
var fetch = document.layers[id];
}
else if (document.all)
{
var fetch = document.all[id];
}
return fetch;
}

function OffWindowHeight()
{
var OffWindowHeight=0;

window.scrollTo(0,10000000);

if(typeof self.pageYOffset!='undefined')
OffWindowHeight=self.pageYOffset;
else if(document.compatMode && document.compatMode != 'BackCompat')
OffWindowHeight=document.documentElement.scrollTop ;
else if(document.body && typeof(document.body.scrollTop)!='undefined')
OffWindowHeight=document.body.scrollTop;

window.scrollTo(0,0);

return OffWindowHeight;
}

function WindowHeight()
{
var WindowHeight = 0;
if( typeof( window.innerWidth ) == 'number' )
WindowHeight = window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight)
WindowHeight = document.documentElement.clientHeight;
else if(document.body && document.body.clientHeight)
WindowHeight = document.body.clientHeight;

return WindowHeight;
}

function pHeight()
{
var pHeight = OffWindowHeight() + WindowHeight();
return pHeight;

}

function favBg()
{
var favHeight = fetchById('favBg');
favHeight.style.height = pHeight() + 'px';
}

var cdiv = "blank";
function favArea()
{
if (cdiv == "blank")
{ cdiv = window.setInterval("favArea()", 50); }
var msgBox = fetchById("favArea");
objh = parseFloat(msgBox.style.height)/2;
objw = parseFloat(msgBox.style.width)/2;
msgBox.style.top = Math.floor(Math.round((document.documentElement.of fsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
msgBox.style.left = Math.floor(Math.round((document.documentElement.of fsetWidth/2)+document.documentElement.scrollLeft)-objw)+'px';
}

function button0()
{
var favBg = fetchById('favBg');
favBg.style.display = 'block';
var favAreaMsg = fetchById('favArea');
favAreaMsg.style.display = 'block';
var button0 = fetchById('button0');
button0.style.display = 'block';
}

function button1()
{
var favBg = fetchById('favBg');
favBg.style.display = 'block';
var favAreaMsg = fetchById('favArea');
favAreaMsg.style.display = 'block';
var button1 = fetchById('button1');
button1.style.display = 'block';
}

function button2()
{
var favBg = fetchById('favBg');
favBg.style.display = 'block';
var favAreaMsg = fetchById('favArea');
favAreaMsg.style.display = 'block';
var button2 = fetchById('button2');
button2.style.display = 'block';
}

function button3()
{
var favBg = fetchById('favBg');
favBg.style.display = 'block';
var favAreaMsg = fetchById('favArea');
favAreaMsg.style.display = 'block';
var button3 = fetchById('button3');
button3.style.display = 'block';
}

function closeMsg()
{
var favBg = fetchById('favBg');
favBg.style.display = 'none';

var favAreaMsg = fetchById('favArea');
favAreaMsg.style.display = 'none';

var button0 = fetchById('button0');
button0.style.display = 'none';

var button1 = fetchById('button1');
button1.style.display = 'none';

var button2 = fetchById('button2');
button2.style.display = 'none';

var button3 = fetchById('button3');
button3.style.display = 'none';
}
</script>

<body onload="favBg(); favArea();">

<div id="favArea" class="favArea" style="width: 500px; height: 400px;">
<div id="button0" class="button0"><p class="infoMsg">button0</p></div>
<div id="button1" class="button1"><p class="infoMsg">button1</p></div>
<div id="button2" class="button2"><p class="infoMsg">button2</p></div>
<div id="button3" class="button3"><p class="infoMsg">button3</p></div>

<p class="closeMsg"><a onclick="closeMsg();">Close</a></p>
</div>

<div id="favBg" class="favBg"></div>

<div align="center">
<div style="width: 400px; height:200px; background-color: white;">
<form action="page.php" method="post">
<input onclick="closeMsg(); button0();" class="buttons" style="color: blue;" type="button" value="button0">
<input onclick="button1();" class="buttons" style="color: red;" type="button" value="button1">
<input onclick="button2();" class="buttons" style="color: green;" type="button" value="button2">
<input onclick="button3();" class="buttons" style="color: yellow;" type="button" value="button3">
</form>
</div>
</div>

</body>
</html>[/HTML]
Jun 27 '07 #11

P: 59
i did a through check, this happens in IE regardless of the following.
1. with or without numerics.
2. any order of declaration of javascript functions.
3. any order of declaration of CSS definitions.

At first i tried reversing the order (.button4, .button3.. so on)/(button4(), button().. so on) still no luck. I even tried completely randomizing the order. Still no chance.

it gives priority like so, to simplify I'll mention its colors.
green < red < blue < yellow.

in the bellow code i also changed the order of the input buttons as well, in addition to other changes.

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<style>
p
{
margin: 0px;
padding: 0px;
}

body, html
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #e9e9e9;
}

form
{
margin: 0px;
padding: 0px;
}

.favBg
{
display: none;
border: 0px;
padding: 0px;
margin: 0px;
width: 100%;
position: absolute;
background-color: #000000;
opacity: 0.5;
filter: Alpha(opacity:50);
z-index: 999;
}

.favArea
{
display: none;
border-width: 1px;
border-style: solid;
border-color: #125717;
padding: 0px;
position: absolute;
background-color: white;
z-index: 1000;
}

.portfolio
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: red;
}

.contact
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: yellow;
}

.gallery
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: blue;
}

.support
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: green;
}

.infoMsg
{
padding-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
font-family: Verdana, Arial, Tahoma;
font-weight: bolder;
font-size: 15px;
color: white;
letter-spacing: 0px;
position: relative;
}

.closeMsg
{
padding: 0px;
margin-top: 2px;
margin-bottom: 0px;
margin-left: 5px;
margin-right: 0px;
font-family: Verdana, Arial, Tahoma;
font-weight: none;
font-size: 12px;
color: black;
letter-spacing: 0px;
position: relative;
}

.buttons
{
border-width: 2px;
border-style: solid;
border-color: black;
padding: 0px;
margin-top: 80px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}

</style>

<script>

function OffWindowHeight()
{
var OffWindowHeight=0;

window.scrollTo(0,10000000);

if(typeof self.pageYOffset!='undefined')
OffWindowHeight=self.pageYOffset;
else if(document.compatMode && document.compatMode != 'BackCompat')
OffWindowHeight=document.documentElement.scrollTop ;
else if(document.body && typeof(document.body.scrollTop)!='undefined')
OffWindowHeight=document.body.scrollTop;

window.scrollTo(0,0);

return OffWindowHeight;
}

function WindowHeight()
{
var WindowHeight = 0;
if( typeof( window.innerWidth ) == 'number' )
WindowHeight = window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight)
WindowHeight = document.documentElement.clientHeight;
else if(document.body && document.body.clientHeight)
WindowHeight = document.body.clientHeight;

return WindowHeight;
}

function pHeight()
{
var pHeight = OffWindowHeight() + WindowHeight();
return pHeight;

}

function favBg()
{
var favHeight = document.getElementById('favBg');
favHeight.style.height = pHeight() + 'px';
}

var cdiv = "blank";
function favArea()
{
if (cdiv == "blank")
{ cdiv = window.setInterval("favArea()", 50); }
var msgBox = document.getElementById("favArea");
objh = parseFloat(msgBox.style.height)/2;
objw = parseFloat(msgBox.style.width)/2;
msgBox.style.top = Math.floor(Math.round((document.documentElement.of fsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
msgBox.style.left = Math.floor(Math.round((document.documentElement.of fsetWidth/2)+document.documentElement.scrollLeft)-objw)+'px';
}

function portfolio()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var portfolio = document.getElementById('portfolio');
portfolio.style.display = 'block';
}

function contact()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var contact = document.getElementById('contact');
contact.style.display = 'block';
}

function gallery()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var gallery = document.getElementById('gallery');
gallery.style.display = 'block';
}

function support()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var support = document.getElementById('support');
support.style.display = 'block';
}

function closeMsg()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'none';

var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'none';

var gallery = document.getElementById('gallery');
gallery.style.display = 'none';

var contact = document.getElementById('contact');
contact.style.display = 'none';

var portfolio = document.getElementById('portfolio');
portfolio.style.display = 'none';

var support = document.getElementById('support');
support.style.display = 'none';

}
</script>

<body onload="favBg(); favArea();">

<div id="favArea" class="favArea" style="width: 500px; height: 400px;">
<div id="gallery" class="gallery"><p class="infoMsg">gallery</p></div>
<div id="portfolio" class="portfolio"><p class="infoMsg">portfolio</p></div>
<div id="support" class="support"><p class="infoMsg">support</p></div>
<div id="contact" class="contact"><p class="infoMsg">contact</p></div>

<p class="closeMsg"><a onclick="closeMsg();">Close</a></p>
</div>

<div id="favBg" class="favBg"></div>

<div align="center">
<div style="width: 400px; height:200px; background-color: white;">
<form action="page.php" method="post">
<input onclick="closeMsg(); gallery();" class="buttons" style="color: blue;" type="button" value="gallery">
<input onclick="closeMsg(); contact();" class="buttons" style="color: yellow;" type="button" value="contact">
<input onclick="closeMsg(); support();" class="buttons" style="color: green;" type="button" value="support">
<input onclick="closeMsg(); portfolio();" class="buttons" style="color: red;" type="button" value="portfolio">
</form>
</div>
</div>

</body>
</html>[/HTML]

here all the order are changed, also the names of buttons(style+function+name+id etc.. related buttons).

but it still gives the same priority: green < red < blue < yellow.

in the following code i changed the colors of the divs, it gives priority to the exact same divs regardless of the properties defined to them.

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<style>
p
{
margin: 0px;
padding: 0px;
}

body, html
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #e9e9e9;
}

form
{
margin: 0px;
padding: 0px;
}

.favBg
{
display: none;
border: 0px;
padding: 0px;
margin: 0px;
width: 100%;
position: absolute;
background-color: #000000;
opacity: 0.5;
filter: Alpha(opacity:50);
z-index: 999;
}

.favArea
{
display: none;
border-width: 1px;
border-style: solid;
border-color: #125717;
padding: 0px;
position: absolute;
background-color: white;
z-index: 1000;
}

.portfolio
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: green;
}

.contact
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: blue;
}

.gallery
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: yellow;
}

.support
{
display: none;
margin-top: 86px;
margin-bottom: 0px;
margin-left: 0px;
margin-right:0px;
padding: 0px;
width: 500px;
height: 295px;
position: relative;
background-color: red;
}

.infoMsg
{
padding-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
font-family: Verdana, Arial, Tahoma;
font-weight: bolder;
font-size: 15px;
color: white;
letter-spacing: 0px;
position: relative;
}

.closeMsg
{
padding: 0px;
margin-top: 2px;
margin-bottom: 0px;
margin-left: 5px;
margin-right: 0px;
font-family: Verdana, Arial, Tahoma;
font-weight: none;
font-size: 12px;
color: black;
letter-spacing: 0px;
position: relative;
}

.buttons
{
border-width: 2px;
border-style: solid;
border-color: black;
padding: 0px;
margin-top: 80px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}

</style>

<script>

function OffWindowHeight()
{
var OffWindowHeight=0;

window.scrollTo(0,10000000);

if(typeof self.pageYOffset!='undefined')
OffWindowHeight=self.pageYOffset;
else if(document.compatMode && document.compatMode != 'BackCompat')
OffWindowHeight=document.documentElement.scrollTop ;
else if(document.body && typeof(document.body.scrollTop)!='undefined')
OffWindowHeight=document.body.scrollTop;

window.scrollTo(0,0);

return OffWindowHeight;
}

function WindowHeight()
{
var WindowHeight = 0;
if( typeof( window.innerWidth ) == 'number' )
WindowHeight = window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight)
WindowHeight = document.documentElement.clientHeight;
else if(document.body && document.body.clientHeight)
WindowHeight = document.body.clientHeight;

return WindowHeight;
}

function pHeight()
{
var pHeight = OffWindowHeight() + WindowHeight();
return pHeight;

}

function favBg()
{
var favHeight = document.getElementById('favBg');
favHeight.style.height = pHeight() + 'px';
}

var cdiv = "blank";
function favArea()
{
if (cdiv == "blank")
{ cdiv = window.setInterval("favArea()", 50); }
var msgBox = document.getElementById("favArea");
objh = parseFloat(msgBox.style.height)/2;
objw = parseFloat(msgBox.style.width)/2;
msgBox.style.top = Math.floor(Math.round((document.documentElement.of fsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
msgBox.style.left = Math.floor(Math.round((document.documentElement.of fsetWidth/2)+document.documentElement.scrollLeft)-objw)+'px';
}

function portfolio()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var portfolio = document.getElementById('portfolio');
portfolio.style.display = 'block';
}

function contact()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var contact = document.getElementById('contact');
contact.style.display = 'block';
}

function gallery()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var gallery = document.getElementById('gallery');
gallery.style.display = 'block';
}

function support()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'block';
var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'block';
var support = document.getElementById('support');
support.style.display = 'block';
}

function closeMsg()
{
var favBg = document.getElementById('favBg');
favBg.style.display = 'none';

var favAreaMsg = document.getElementById('favArea');
favAreaMsg.style.display = 'none';

var gallery = document.getElementById('gallery');
gallery.style.display = 'none';

var contact = document.getElementById('contact');
contact.style.display = 'none';

var portfolio = document.getElementById('portfolio');
portfolio.style.display = 'none';

var support = document.getElementById('support');
support.style.display = 'none';

}
</script>

<body onload="favBg(); favArea();">

<div id="favArea" class="favArea" style="width: 500px; height: 400px;">
<div id="gallery" class="gallery"><p class="infoMsg">gallery</p></div>
<div id="portfolio" class="portfolio"><p class="infoMsg">portfolio</p></div>
<div id="support" class="support"><p class="infoMsg">support</p></div>
<div id="contact" class="contact"><p class="infoMsg">contact</p></div>

<p class="closeMsg"><a onclick="closeMsg();">Close</a></p>
</div>

<div id="favBg" class="favBg"></div>

<div align="center">
<div style="width: 400px; height:200px; background-color: white;">
<form action="page.php" method="post">
<input onclick="closeMsg(); gallery();" class="buttons" style="color: yellow;" type="button" value="gallery">
<input onclick="closeMsg(); contact();" class="buttons" style="color: blue;" type="button" value="contact">
<input onclick="closeMsg(); support();" class="buttons" style="color: red;" type="button" value="support">
<input onclick="closeMsg(); portfolio();" class="buttons" style="color: green;" type="button" value="portfolio">
</form>
</div>
</div>

</body>
</html>[/HTML]

everything is completely in random order but still this happens...of course I'm saying it's not colors or other defined property of the div, or the order of css definition or order of javscript and definitively not the order of buttons.

but order of the divs.

lets say it gives priority like this:
[HTML] <div id="button1" class="button1"><p class="infoMsg">button1</p></div>
<div id="button2" class="button2"><p class="infoMsg">button2</p></div>
<div id="button3" class="button3"><p class="infoMsg">button3</p></div>
<div id="button4" class="button4"><p class="infoMsg">button4</p></div>[/HTML]

for simplicity I'll mention divs by it's color. Here the order is like this blue < red < green < yellow.

now consider.
[HTML]<div id="button2" class="button2"><p class="infoMsg">button2</p></div>
<div id="button1" class="button1"><p class="infoMsg">button1</p></div>
<div id="button4" class="button4"><p class="infoMsg">button4</p></div>
<div id="button3" class="button3"><p class="infoMsg">button3</p></div> [/HTML]

Here the order is like this red < blue < yellow < green.

So it's finally narrowed down to what the trouble maker is, but i can't still figure out why IE is doing it. It seems so simple yet can't seem to find a good way to fix it.
Jun 30 '07 #12

kovik
Expert 100+
P: 1,044
I looked at it in IE and the problem is that you aren't accessing these properly. Though the browser says the other thing are no longer displayed, they are. I think the problem is the fact that you use relative positioning.

Use absolute positioning and the visibility CSS attribute instead of display: none and see what you get.

Andplease stop posting that huge snippet of code. ^_^
Jul 1 '07 #13

P: 59
umm some people usually don't post post their code, making it difficult for others to help them. but in my case it seems to be the opposite :)

and will try out your suggestion.
Jul 1 '07 #14

P: 59
umm some people usually don't post post their code, making it difficult for others to help them. but in my case it seems to be the opposite :)

and will try out your suggestion.
actually i tried this before, the problem was that i couldn't align it properly so that it's align same for ie and other browsers. Now to correct it i used <!--[If IE]> to correct that problem. Thanks everyone.
Jul 1 '07 #15

kovik
Expert 100+
P: 1,044
actually i tried this before, the problem was that i couldn't align it properly so that it's align same for ie and other browsers. Now to correct it i used <!--[If IE]> to correct that problem. Thanks everyone.
Hehe, IE is a necessary evil.

So it's working now? Good. :-D
And my quarrel with the code is that it was too much. Most of those snippets had little to no relation to this problem. All we'd need were the CSS for the boxes and the JavaScript code to display them. The rest just makes it hard to find those two portions.
Jul 1 '07 #16

Post your reply

Sign in to post your reply or Sign up for a free account.