Forum Moderators: open
below is a simplified layout of the page
_____________________
¦header ....... ¦ g ¦
¦_______________¦ a ¦
¦nav¦ content ..¦ l ¦
¦bar¦ ......... ¦ l ¦
¦.. ¦ ......... ¦ e ¦
¦.. ¦ ......... ¦ r ¦
¦___¦___________¦ y ¦
¦footer ....... ¦ ..¦
¦_______________¦___¦
Anyway the gallery is just a section that displays random art work of students or whatever just so people browsing can see what the students do. The thing I want is to have the gallery openable and closeable. As it stands I can kind of have it work.. When users click on the close gallery button I use javascript to hide the gallery div and to show a 2nd gallery div which is just a new image file that looks like the edge of the gallery slightly sticking into the page so that users can click on it and re-open the main gallery.
The problem is that I also want the text in the content itself to re-size and fill in the gap of space left by the gallery shrinking. In IE6 it works exactly how I want... but in Netscape 7 the content div will not re-size.
Below is my script,
function interactivegallery(action){ if(action == 0 && isgalleryopen == 1){
if (document.getElementById){
document.getElementById('gallery').style.display = 'none';
document.getElementById('gallery').style.visibility = 'hidden';
document.getElementById('gallery2').style.display = 'block';
document.getElementById('gallery2').style.visibility = 'visible';
document.getElementById('container2').style.width = '780';
document.getElementById('mainbody').style.width = '780';
document.getElementById('content').style.width = '590';
isgalleryopen = 0;
}else if(action == 1 && isgalleryopen == 0){
if (document.getElementById){
document.getElementById('gallery').style.display = 'block';
document.getElementById('gallery').style.visibility = 'visible';
document.getElementById('gallery2').style.display = 'none';
document.getElementById('gallery2').style.visibility = 'hidden';
document.getElementById('content').style.width = '440';
document.getElementById('mainbody').style.width = '620';
document.getElementById('container2').style.width = '620';
isgalleryopen = 1;
}
Below is my div structure,
<body>
<div id="container">
<div id="container2">
<div id="header">
</div> <!-- close header --> <div id="mainbody">
<div id="navbar">
</div> <!-- close navbar -->
<div id="content">
<p>...</p>
</div> <!-- close content -->
</div> <!-- close mainbody -->
<div id="footer">
</div> <!-- close footer -->
</div> <!-- close container2 -->
<div id="gallery" title="gallery">
</div> <!-- close gallery -->
<div id="gallery2" title="gallery">
</div> <!-- close gallery2 -->
</div> <!-- close container -->
</body>
It would be easier to just link the site but I read the posting guidelines and that is apparently a no-no so I'm trying my best. I cut out all of the content of my body to try and shorten this post and i just left the structure... not sure what if any css stuff would be useful to help with this...
Anyways thanks in advance for any help.
I'll have a stab. I think Netscape may be stricter with it's CSS dimensions, and won't default to 'px'. Try adding 'px' to all the numerical string values ['440px' etc].
Hope it works for you, especially as then I'll have earned the right to add an extra..
I reckon that, if you are turning 'display' on/off, then you don't need to toggle the 'visibility' as well.
Come to think of it, the behavior should be possible using the right combination of smart CSS {float, margins, and some % widths}, and simply toggling the display property only. I'm not such a CSS smarty, and I don't have browsers X,Y,Z to back up the argument, so I'll swiftly move on to..
A Radical Conservative Argument
New CSS converts seem to think that CSS and tables are mutually exclusive features. Tag soup, and nested tables should be left in the dustbin, sure, but this layout (the major part - not buttons etc) could be called a 'grid layout' or a ... table.
Using a table would only add a handful of angle brackets to your code, but - with a 100% width table - toggling the display of the 'gallery' cell is 99.9% certain to be all you need to do to get it working. The table would also provide easy vertical alignment (should you need it), and give the elements a logical hierarchical structure.
You can still do all the styling with CSS, but you wouldn't need as much.
The only drawback is that, if you want to feature some part of the code in a different order than its display (for some SEO), then a table can't do it.
What do you reckon?
I tried out your suggestion and it worked great. I feel like such an idiot. I had read about the px problem in other threads and I had tried using '780 px' and it didn't work so I gave up.. apparently the space in betwwen the number and the px kills it since '780px' did the trick. Thanks again.
As for the visibility and display you are probably right, but I had read in some post on some site that certain browsers use display and some use visibility. In this respect I figure better safe then sorry, the browsers who don't understand one of the two should disregard it I hope. My actual code is a little more robust allowing also for more browser compatablility as well...
function interactivegallery(action){
if(action == 0 && isgalleryopen == 1){
if (document.getElementById){
}else if (document.all){
}else if (document.layers){
}
}else if(action == 1 && isgalleryopen == 0){
if (document.getElementById){
}else if (document.all){
}else if (document.layers){
}
}
}
Im not very familiar with browser compatability issues myself so I am just using stuff I've found here and there. Apparenty the browser that uses document.all uses the display property, and the browser that uses document.layers uses the visibility property. Which specific browsers those are I dont know.
The tables thing is something I had considered using as well, but I figured if I used tables it would kind of nullify the point of using the new CSS design method. I am fairly new with CSS since I have always used the old table design format which seems easy and straight forward to me, but as this is a school project that is required to conform to accessibility standards on the Bobby site I figured I'd take the time to learn it this way.
Anyway thanks a lot for the help.
Apparenty the browser that uses document.all uses the display property, and the browser that uses document.layers uses the visibility property. Which specific browsers those are I dont know.
document.layers - Netscape 4 [less than 2% now!]
document.all (only) - Internet Explorer 4 [probably nobody]
document.getElementById - All browsers after that (not incl. obscurities)
IE 5 & 6 still respond to document.all (it's the easiest test for them) as well as getElementById
..so you could you getElementById without that much worry, but if you insist..
Other issues (just in case you aren't aware):
1. Netscape 4 doesn't use the style property. Properties are simply attched to the element reference: document.layers['id'].width = '100px'
2. Netscape 4 can only reference form elements, and positioned DIVs.
[position:relative;left:0;top:0; - this may work]
3. The resulting function - with all it's branches - will be very long.
Here's a quick JavaScript block for the top of the code that will mean
that you can use document.getElementById for all IE browsers. Taking out
one of the branches in your functions.
[blue]
if(document.all&&!document.getElementById)
document.getElementById = function(id){return this.all[id]}
[/blue]If you're interested (ie send me a sticky), I have a more general solution for making older browsers speak modern.
Does anyone know where to download an old copy of netscape 4 or ie5 for testing purposes? Thanks again Bernard for the help and advice.
