franklyn Posted January 13, 2007 Share Posted January 13, 2007 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 Quote Link to comment Share on other sites More sharing options...
franklyn Posted January 14, 2007 Author Share Posted January 14, 2007 ok i've sort of fixed it. apparently something was wrong with my table code everything outside the table was being showed so i just removed it and edited the div with css.http://franklyn.ifastnet.com/News/News.html Quote Link to comment Share on other sites More sharing options...
franklyn Posted January 14, 2007 Author Share Posted January 14, 2007 ok im still having a few porblems basicaly everything within html tags wont show in internet explorer its really weird all the text from the post shows but when i collapse the post and then expand it again everything within html tags disappears. Quote Link to comment Share on other sites More sharing options...
franklyn Posted January 15, 2007 Author Share Posted January 15, 2007 any takers? Quote Link to comment Share on other sites More sharing options...
fenway Posted January 15, 2007 Share Posted January 15, 2007 You sure you don't mean the display attribute? Quote Link to comment Share on other sites More sharing options...
franklyn Posted January 15, 2007 Author Share Posted January 15, 2007 I've tried it with both display and visibility and neither of them work in ie 7.0 . Quote Link to comment Share on other sites More sharing options...
franklyn Posted January 16, 2007 Author Share Posted January 16, 2007 fixed it .apparently ie doesnt like "obj.style.position='absolute'" Quote Link to comment Share on other sites More sharing options...
irken Posted January 16, 2007 Share Posted January 16, 2007 [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] Quote Link to comment Share on other sites More sharing options...
mainewoods Posted January 18, 2007 Share Posted January 18, 2007 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? Quote Link to comment Share on other sites More sharing options...
mainewoods Posted January 18, 2007 Share Posted January 18, 2007 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) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.