473,375 Members | 1,318 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,375 software developers and data experts.

problem display:none/block divs via JavaScript

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
15 3117
acoder
16,027 Expert Mod 8TB
Hide the other buttons when you display a button.
Jun 25 '07 #2
cssExp
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
16,027 Expert Mod 8TB
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
cssExp
59
ah good!

but wouldn't using visibility occupy the space even when it's hidden?
Jun 26 '07 #5
cssExp
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
naurus
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
naurus
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
cssExp
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
naurus
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
cssExp
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
cssExp
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
1,044 Expert 1GB
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
cssExp
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
cssExp
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
1,044 Expert 1GB
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

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

Similar topics

13
by: Dan R Brown | last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div...
1
by: Jon W | last post by:
This is a small table with hover on the table cells. The first cell is setup to switch from div element to input element by use of display:block/none. In IE, onclick the input element is displayed...
3
by: Erwin Moller | last post by:
Hi all, Situation: A (rather long) page that contains a lot of divs. Some are visible (display:inline) at a certain time, other not. The javascript is responsible for divs to be visible or...
2
by: Jake Barnes | last post by:
Imagine I've this block of HTML: <p>Alex Schein Mailing List <input type="checkbox" name="newslettersToUse" value="133156"> (<a href="mcControlPanel.php"...
8
by: VK | last post by:
Hi, given a block element with some content and a link, is it possible to set this element display to none by CSS only? It has to be done only once. It is an absolutely positionned element so...
5
by: libsfan01 | last post by:
function switch_display(switchme) { var el = document.getElementById(switchme); el.style.display = (el.style.display == 'none')? '' : 'none'; } im using this function to switch the display on...
4
by: gimme_this_gimme_that | last post by:
Hi, I have an onchange method for a select box that goes something like this (the select is in a form named aForm): function page_on_change() { pageElement = aForm.my_page_id;...
5
by: bissatch | last post by:
Hi, I ocasionally use display: none; to hide divs that, on the click of a link they will reappear. For example, maybe I create a menu and when you click a link of menu options the submenu...
1
by: jelumalai | last post by:
I am using display:none with using Table. When show the onClick using javascript. Then it will show, again i will hide, content only hidden, but that table doesn't hide. <script> function...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.