Forum Moderators: open
I have 2 javascript problems with my website which I know I cannot resolve myself so I’m turning to the professionals. All the javascript I have on my website works fine with Internet Explorer 6 and Opera 7.54 but Firefox 1.0.1 and Netscape Navigator 7.2 refuse to work with it.
I had a nasty shock when I previewed my 3 year old site on those browsers a few weeks ago. I have a very basic vague idea about how javascript works and most of my code I’ve nicked from other places figured out how it worked and tweaked it to fit my needs. But I don’t know how to write java or what to do to debug it and because I only have 3 things to fix don’t want to or have the time to learn it. I want the fixes to be cross browser compatible and still work with ie, and opera but also work with firefox and netscape.
Problem 1
I nicked some javascript from a website years ago which would perform the onmouse over and out functions without swapping one gif image for another but by changing the background colour of a cell in a table.
I designed my navigation bar by making a one column multiple row table. Then putting text in the cells in the table which were links of course. Then when someone moves there mouse over a link the cell in the table the links in changes its background colour. I don’t know about you but I think this looks neat.
Also it makes redesigning the menu’s easy for me and I don’t have to bother about lots of small irritating gifs! So don’t send me a solution which involves swapping gifs because I’m not interested in that! The links still work in firefox and netscape but the nice background cell background colour changes do not!
To see how it supposed to work save it to a file and open it up in ie or opera. If you click on one of the links it will load to one of my pages on my real website where you can see how I’ve used it on every page with a menu. Hence the reason I don’t want to redesign. Here’s the complete code.
<?xml version="1.0" encoding="iso-8859-2"?>
<!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>
<title>Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<script language="JavaScript" type="text/JavaScript">
function NavRollOver(oTd) {if (!oTd.contains(event.fromElement)) {oTd.bgColor="#C40F25";}}
function NavRollOut(oTd) {if (!oTd.contains(event.toElement)) {oTd.bgColor="000000";}}
function SideRollOver(oTd) {if (!oTd.contains(event.fromElement)) {oTd.bgColor="#C40F25";}}
function SideRollOut(oTd) {if (!oTd.contains(event.toElement)) {oTd.bgColor="#000000";}}
</script>
</head>
<body>
<div id="Menu" style="position:absolute; left:385px; top:47px; width:160px; height:525px; background-color:#000000; z-index:1; visibility: visible;">
<table width="160" border="0" id="MenuTable">
<tr>
<td width="154" align="center" onmouseover="SideRollOver(this);" onmouseout="SideRollOut(this);">
<tt><a href="http://www.example.com"
target="_parent">16mm Cameras</a></tt></td>
</tr>
<tr>
<td align="center" onmouseout="SideRollOut(this);" onmouseover="SideRollOver(this);">
<tt><a href="http://www.example.com"
target="_parent">16mm Lenses</a></tt></td>
</tr>
<tr>
<td align="center" onmouseout="SideRollOut(this);" onmouseover="SideRollOver(this);">
<tt><a href="http://www.example.com"
target="_parent">16mm Accessories</a> </tt></td>
</tr>
<tr>
<td align="center" onmouseout="SideRollOut(this);" onmouseover="SideRollOver(this);">
<tt><a href="http://www.example.com">16mm
External Motors and Sync sound Equipment</a></tt></td>
</tr>
<tr>
<td align="center" onmouseout="SideRollOut(this);" onmouseover="SideRollOver(this);">
<tt><a href="http://www.example.com">Super
16mm Conversion</a></tt></td>
</tr>
<tr>
<td align="center" onmouseout="SideRollOut(this);" onmouseover="SideRollOver(this);">
<tt><a href="http://www.example.com">Books
on Bolex</a></tt></td>
</tr>
<tr>
<td align="center" onmouseout="SideRollOut(this);" onmouseover="SideRollOver(this);">
<tt><a href="http://www.example.com">Current
Bolex Equipment Prices</a></tt></td>
</tr>
<tr>
<td align="center" onmouseout="SideRollOut(this);" onmouseover="SideRollOver(this);">
<tt><a href="http://www.example.com">Bolex
Repair Manuals</a></tt></td>
</tr>
<tr>
<td align="center" onmouseout="SideRollOut(this);" onmouseover="SideRollOver(this);">
<tt><a href="http://www.example.com">Useful
Links </a></tt></td>
</tr>
<tr>
<td align="center" onmouseout="SideRollOut(this);" onmouseover="SideRollOver(this);">
<tt><a href="http://www.example.com">History
Of Bolex</a></tt></td>
</tr>
</table>
</div>
</body>
</html>
Problem 2
The lowest resolution I design my site for is 800 x 600 which on Internet Explorer 6 gives a usable onscreen width of 779, minus 19 pixels due to scrollbar or right and 2 pixels on left. So I have designed my site around this width with the height fluctuating depending on how much I have to write about something (naturally).
Every page I write is written in a layer using a DIV tag with the ID “Page”, the 800 x 600 style sheet gives the DIV tag with the ID “Page” the follwing attributes:- position: absolute; left: 0px; top: 0px; height: 461px; width: 779px; visibility: visible;
The 1024 x 768 style sheet give the following attributes:- position: absolute; left: 112px; top: 0px; height: 461px; width: 779px; visibility: visible; The only difference being the Layer is shifted 112 pixels to the right. The reason being at 1024 x 768 Internet Explorer 6 gives a usable onscreen width of 1003, minus 19 pixels due to scrollbar on right and 2 pixels on left 1003-779=224 /2 = 112.
So I have positioned my 779 layer in the centre of my 1024 resolution so it looks better. I have noticed lots of sites design for the minimum resolution which currently is 800 x 600 and don’t redesign up for 1024 x768. But at least on mine I detect it and move it to the centre of my screen! Look at [bbc.co.uk...] they don’t redesign the entire site for 1024 x768 they just keep the 779 width and leave it stuck at the left.
I know you can probably recommend better ways to design a site for multiple resolutions but the way I have chosen is I have a bit of javascript on every page of my site (missing from the above examples) which determines the browsers resolution and loads one of two style sheets I described above. This works fine on all browsers! This isn’t the problem I would like you to solve but you need to know the background!
When it detects 1024 x 768 or above and you are on a page on the furthest level down in my site structure when you’ve finally found what you want to read about there is no navigation menu on a page. But just for the 1024 x 768 resolution I would like to use the 112 pixel space on the left to put a floating one in there! This I did a while ago and it works fine on ie and opera but again firefox and netscape don’t work.
<No URLs, thanks. See TOS [WebmasterWorld.com]>
It does the job well but I know it could be made smaller than it is. I found it on some website years ago I have tried re searching to find out where I downloaded it from but I cannot find it anymore. I know it’s designed to do more fancy stuff than what I’ve used it for. If you could get it to work with firefox, and netscape and cull it down some I would be very gratefull. I don’t ask much do i? Or if you can point me in the direction of another floating navigation menu I could use for my own purposes that would be great.
Thanks for looking
Best Regards
Gareth
[edited by: DrDoc at 3:35 pm (utc) on Mar. 31, 2005]
[edit reason] examplified URLs [/edit]
here is the solution to your first problem..
javascript
<script type="text/javascript">
<!--
function SideRollOver(oTd) {
oTd.style.backgroundColor="#c40f25";
oTd.onmouseout=function() {
oTd.style.backgroundColor="#000000";
}
}
//-->
</script>
<td width="154" align="center" onmouseover="SideRollOver(this);">
birdbrain
...better ways to design a site for multiple resolutions...
Fluid, using CSS ;)
I've tried out your solution out in firefox and it works a treat. Thank you very much! To me you'll always be master brain!
I will get dreamweaver to do a big find replace to strip out all my crap code and replace it with yours!
Thanks Mate
Gareth
birdbrain - aka... coothead
