...

View Full Version : Image border issue & hiding table columns outside of IE



BenBox
07-31-2006, 02:15 PM
Hey all,

I've got 2 little issues which I'm not sure how to go about.. both being because I'm not familiar with making things compatible outside of IE. The examples I've got below work in IE, but how can I adapt them to work in other browsers, such as FireFox and the like?

This first one is actually CSS.. it works perfectly in IE, and means I don't have to put border="0" on every image.. but doesn't transfer outside of IE..


image {
border: 0 none;
}



This second problem is to do with showing/hiding a navigation table, again.. works in IE but messes up in FireFox.. how can I change this to work universally?

Edit: This does actually work, but there's an issue with the column width remaining the same.. just hiding or showing its contents, is there a way around this?


var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {browserType= "gecko"}


///////////////////////////////

function toggle_nav(do_show) {

var tbl;

if (browserType == "gecko" )
tbl = document.getElementById('mainTable');
else (browserType == "ie")
tbl = document.all['mainTable'];

// var tbl = document.getElementById('mainTable');
var rows = tbl.getElementsByTagName('tr');

if( do_show == true ) {
var cels = rows[0].getElementsByTagName('td');
cels[0].style.display='none';
cels[1].style.display='block';
}
else {
var cels = rows[0].getElementsByTagName('td');
cels[0].style.display='block';
cels[1].style.display='none';
}

}


Many thanks for any help! :D

vwphillips
07-31-2006, 02:48 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style type="text/css">
<!--
img {
border: 0px;
}
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--


///////////////////////////////

function toggle_nav(do_show) {

var tbl;

var tbl = document.getElementById('mainTable')||document.all['mainTable'];
var rows = tbl.rows;
var cels = rows[0].cells;

if( do_show == true ) {
cels[0].style.display='none';
cels[1].style.display='';
}
else {
cels[0].style.display='';
cels[1].style.display='none';
}

}
//-->
</script>
</head>

<body>
<a href="#" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"></a>
<table id="mainTable" border="1">
<tr>
<td >123</td>
<td>1234</td>
</tr>
</table>
<input type="button" name="" value="Test" onclick="toggle_nav()">
<input type="button" name="" value="Test" onclick="toggle_nav(true)">
</body>

</html>

BenBox
07-31-2006, 03:00 PM
Ah ha! Awesome :D

Thank you! :thumbsup:

BenBox
07-31-2006, 03:05 PM
Actually, another quick question..

At the moment I have in the body tag onLoad="toggle_nav(true)" but what I ideally want it to do is remember the toggle status for each page viewed (possibly just for the duration of the session).

How can I go about putting cookies into this for that?

vwphillips
07-31-2006, 03:19 PM
have you any experience of cookies?

if not, google for tutorial first

then each page will have a cookie name

set the cookie value with true or false in 'toggle_nav(do_show)'

then <BODY>/window window call toggle_nav(do_show) with the cookie value as the parameter



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum