problem display:none/block divs via javascript.

**cssExp** · Jun 25, 2007 05:09

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 Code:

<!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.offsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
 msgBox.style.left = Math.floor(Math.round((document.documentElement.offsetWidth/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>

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

**gRoberts** · Jun 25, 2007 05:46

I've had a look and I can replicate the issue, but I can't find the reason why.

I'll have a play soon.

**cssExp** · Jun 25, 2007 06:22

ah gRoberts again, you are a very helpful person. Thanks in advance

**gRoberts** · Jun 25, 2007 08:21

i'm trying to rewrite this to see if there is anything wrong, but I can't find what it is. What are you trying to do?

**cssExp** · Jun 25, 2007 09:23

Originally Posted by gRoberts

i'm trying to rewrite this to see if there is anything wrong, but I can't find what it is. What are you trying to do?

well i think that would be obvious if you tried out the code on browser, anyway here is what I'm trying to do

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

**Chroniclemaster1** · Jun 25, 2007 18:47

I hope 3s not a crowd.

I use this general method for a set of drop down menus on my website. Let me poke around and see what I can come up with too.

**Chroniclemaster1** · Jun 25, 2007 19:23

ok, I've diagnosed the problem. In IE, clicking a button fundamentally changes favArea. It applies the color of the button, and each button overrides the lower numbers.

In Firefox, favArea is always white when it's first called so that the final step, button, applies the appropriate color and text. In IE favArea is only white the very first time it's called. Then the button you click applies that color to favArea. So when you click your second button, favArea comes up the color of the previous button. If your second button is higher than the first, the button function overlays that color, but if the second (and successive) buttons are lower, the button function is apparently applied "under" the color.

I can also doesn't seem to be a cascade issue. Changing the order of the button styles doesn't affect which takes precedence. Button 4 always trumps the other styles.

**cssExp** · Jun 25, 2007 22:11

Originally Posted by Chroniclemaster1

ok, I've diagnosed the problem. In IE, clicking a button fundamentally changes favArea. It applies the color of the button, and each button overrides the lower numbers.

In Firefox, favArea is always white when it's first called so that the final step, button, applies the appropriate color and text. In IE favArea is only white the very first time it's called. Then the button you click applies that color to favArea. So when you click your second button, favArea comes up the color of the previous button. If your second button is higher than the first, the button function overlays that color, but if the second (and successive) buttons are lower, the button function is apparently applied "under" the color.

I can also doesn't seem to be a cascade issue. Changing the order of the button styles doesn't affect which takes precedence. Button 4 always trumps the other styles.

i put each color specific for each button so that everyone can understand better, so there are 4 divs within favArea. Each is toggled to display:none/block depending on which button is clicked. and all the button divs are set to display:none on clicking close. and also when the "error" happens, the text are also displayed.

**gRoberts** · Jun 25, 2007 22:31

no your more then welcome to join in, i'm stumped on this one. Whats worse is it seems extremely simple. I think its down to the favArea/favBg javascript.

**cssExp** · Jun 25, 2007 22:49

the problem most surely is IE rendering, do you think you could suggest a workaround for that?

**cssExp** · Jun 26, 2007 22:41

can anyone help me? is there no way to do it? no workaround?

**gRoberts** · Jun 26, 2007 22:53

CssExp... Another early bird I see.

I'm at home at the mo, and don't have long until I leave for work. I will try and see what I can find whilst at work.

Gav

**Chroniclemaster1** · Jun 27, 2007 00:09

I haven't come up with any solutions yet.

I agree with both of you. It's a problem in how IE renders it, and I think we've localized it to the favArea/favBg javascript. I've tried two main tacks so far. Preventing IE from imposing default color on the favArea, or failing that, refreshing the favArea so it goes white again.

It goes well, really.

**cssExp** · Jun 27, 2007 03:36

ah, sorry if i seemed impatient. It's just that i myself kept experimenting to get a viable workaround, but i kept failing so i got a bit frustrated and impatient. :P

**Chroniclemaster1** · Jun 28, 2007 10:01

don't we all? No apologies necessary. We're all part of the same crazy club.

No breakthroughs yet. Usually I find a way to fix a piece of code for a browser that makes it break even worse in the other, but so far no dice. And I'm really frustrated that I can't figure out why it gives priority to the higher numbers. That seems like something we should be able to track it down.

**cssExp** · Jun 28, 2007 10:37

i tried using without any numbers i.e. "hotel" instead of "button1" and so on, until there are no id's functions etc with numbers. It still does the same. IE seems to give priority to the one which defined after another. Moreover what truly baffles me is that, if it's going to keep showing a div that it gave priority to then why the text of that div is also not appearing. I can't seem to figure out why it's this way.

But the thing is, i have seen many sites using the same approach and they all seem to work on IE. Maybe it couldn't be done by this method. Well I'll keep on experimenting...

**Chroniclemaster1** · Jun 28, 2007 23:02

you may be on to something there, so it doesn't care about the numerics? It still does it when you deploy non-integer ids?

hmmmmm... is it following the order of the CSS definitions (what was .button1, .button2, etc.), or the order of the javascript functions (what was button1(), button2(), etc.)? Which determines the preference?

**cssExp** · Jun 29, 2007 04:59

Originally Posted by Chroniclemaster1

you may be on to something there, so it doesn't care about the numerics? It still does it when you deploy non-integer ids?

hmmmmm... is it following the order of the CSS definitions (what was .button1, .button2, etc.), or the order of the javascript functions (what was button1(), button2(), etc.)? Which determines the preference?

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 Code:

<!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&#37;;
 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.offsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
 msgBox.style.left = Math.floor(Math.round((document.documentElement.offsetWidth/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>

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 Code:

<!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.offsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
 msgBox.style.left = Math.floor(Math.round((document.documentElement.offsetWidth/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>

everything is completely in random order but still this happens...

**Chroniclemaster1** · Jun 29, 2007 14:38

It's the COLORS????

@#$%$#%^*&(^&*&*()

There, I feel a little better. How in the @$#%^@#$^ is it getting an order from the colors! Wait, no I'm rereading.... hang on...

ok, so it's the order of the divs? hmmm.... I thought I'd tried changing the order of the divs already (but leaving the colors the same), and the colors still had the same order of priority.

May I just say, in the perfect English accent of a good butler, of course... this is infuriating.

Well, look at it this way, at least you know your command of javascript and CSS are good if nobody can find a solution yet. I'll go back and look at the divs specifically again. Maybe it IS an issue with the cascade, if the Javascript or the HTML somehow are exposing each class as we activate and it wipes any attempts to trigger previous divs.

**cssExp** · Jun 29, 2007 22:27

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 Code:

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

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

now consider.

HTML Code:

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

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.

**cssExp** · Jun 30, 2007 23:59

Problem Solved, came up with a workaround.

HTML Code:

<!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&#37;;
 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;
 padding: 0px;
 margin-top: 86px;
 margin-left: 0px;
 width: 500px;
 height: 295px;
 position: absolute;
 background-color: blue;
}

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

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

.button4
{
 visibility: hidden;
 padding: 0px;
 margin-top: 86px;
 margin-left: 0px;
 width: 500px;
 height: 295px;
 position: absolute;
 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: 383px;
  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;
}

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

<!--[If IE]>
<style>
.button1
{
 visibility: hidden;
 padding: 0px;
 margin-top: 86px;
 margin-left: -5px;
 width: 500px;
 height: 295px;
 position: absolute;
 background-color: blue;
}

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

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

.button4
{
 visibility: hidden;
 padding: 0px;
 margin-top: 86px;
 margin-left: -5px;
 width: 500px;
 height: 295px;
 position: absolute;
 background-color: yellow;
}
</style>
<![endif]-->
<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.offsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';
 msgBox.style.left = Math.floor(Math.round((document.documentElement.offsetWidth/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="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>

**Chroniclemaster1** · Jul 2, 2007 13:15

Sweet!

This is awesome!

I played around with it here at work. I've got Firefox and IE7 on an XP box and it works beautifully

I even played with it. I'm not sure how it works on other computers, but it's all pretty standard syntax and works identically on my work computer & browsers. I think it should transport well. I was able to reduce the If statement to...

Code:

<!--[If IE]>
<style>

.button1, .button2, .button3, .button4
{
 margin-left: -5px;
}

</style>
<![endif]-->

**cssExp** · Jul 2, 2007 19:57

ah right, i forgot to group it all in to one since they all use the same property

thanks.

I hope this thread will be useful to other people like me who to want do something like this.

**Chroniclemaster1** · Jul 2, 2007 21:44

I'm glad that changing from display to visibility making the positioning absolute finally got it to behave. It doesn't look like you had to change any of the real javascript at all. Just switch the CSS.

I hope other people found this interesting as well. I know I did. If fact, now that it looks like we're finished with this, I posted my own problem. It's not as sophistacated but it is using unobtrusive javascript. I'd appreciate if anyone reading this has any ideas. Stop on by.
http://www.sitepoint.com/forums/showthread.php?t=488973

User Tag List

Thread: problem display:none/block divs via javascript.

Thread Tools

Display

problem display:none/block divs via javascript.

Bookmarks

Bookmarks

Posting Permissions