Jump to content

Changin the visibility of a div


franklyn

Recommended Posts

hey there. I'm trying to change the visibility of div elements on my page using a combination of JavaScript and CSS I'm sure most of you are familiar with this. I'm using this code to give users the option to expand and collapse posts . the script works properly in FF 2.0 but it doesn't work in IE 7.0 .
heres the code I'm using :
[code]
function show(menu,parent,state) // function to show the div
{
var sho =document.getElementById(menu)// the post that is supposed to get shown.
var pho =document.getElementById(parent)// the parent div that the post is in (header)
pho.style.background="#3d3e3e"
sho.style.visibility = 'visible'
sho.style.position = state
}
function hide(menu,parent) // function to hide the div
{
var sho =document.getElementById(menu)
var pho =document.getElementById(parent)
pho.style.background="#858585"
sho.style.visibility = 'hidden'
sho.style.position = 'absolute'
}
[/code]
the code is then called from a div element like this
[code]
<div id="parHD0" class="header" align="left">
<div id="hd0" align="right">
<a href="#" onclick="show('chiNWS0','parHD0','relative')">[+]</a>
<a href="#" onclick="hide('chiNWS0','parHD0')">[-]</a>
</div>
<DIV id="chiNWS0" ALIGN=left style="position:relative;">
<table border="0">
<td background="images/tablebg2.gif" width="300">
<font color="#b1b1b1">
<br>Example POST 1 <br>
</font>
</td>
</table>
</DIV>
</DIV>
[/code]
heres a link to the page im working on so you can have a look for yourself http://franklyn.ifastnet.com/News/News.html
Link to comment
https://forums.phpfreaks.com/topic/34051-changin-the-visibility-of-a-div/
Share on other sites

[quote author=franklyn link=topic=122268.msg505808#msg505808 date=1168920890]
fixed it .apparently ie doesnt like "obj.style.position='absolute'"
[/quote]

Not sure why you're having problems in IE7.. the attributes you're trying to use workes fine. Visiblity, position etc.

[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" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Abcd</title>
</head>

<body>

<div id="something" style="height: 100px; width: 200px"></div>

    <script language="javascript" type="text/javascript">
 
        var el = document.getElementById('something');
        with (el.style)
        {
            position = 'absolute';
            visibility = 'visible';
            backgroundColor = '#000';
        }
       
      </script>

</body>
</html>
[/code]
the 'background' style below is non cross browser compatable
[code]pho.style.background="#858585"[/code]
instead use 'backgroundColor' 
[code]pho.style.backgroundColor="#858585"[/code]
--the 'C' must be capitalized
--you should have been thrown an error on your statement and the rest of the js left unexecuted.  Do you have error reporting on?
what I've found:
ie6 position:absolute == firefox position:fixed
--but ie6 requires extra hacks for 'absolute' to actually work
--I've read that the 'fixed' attribute was supposed to be fixed for ie7, so where you used 'absolute' with ie6, use 'fixed' with ie7(supposed to now work the same as firefox)

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.