Forum Moderators: open
Thanks for all the help you've given me on previous threads on this site. Most of the questions i've been posing recently have been in regard to making my website cross browser compatible. And it's nearly there now thanks to your help. I think this will be my final question before i can finally sit down and start writing content having got the layout where i want it. I kind of treat this place now like those emergency stop panels you see on trains which say Break glass in case of an emergency.
Here's my latest problem.
The background to it:-
I have a bit of javascript in every page of my site which checks what resolution the page is being seen at and loads a different style sheet based on it. (It works fine that's not the prob!)
I worked out I would have a 779 pixel width layer <div> which I would write and design my site in. The main reason being i did not want to rewrite my site for different resolutions. The main reason for choosing a 779 width was based on setting my screen resolution to 800 x 600 on my monitor and print screening how many pixels are lost by each browser horizontally. Internet explorer seems to take the most (21 pixels) the other browsers take less. So i set my width at 779.
This would obviously fill the screen at 800 x 600 resolution. So on IE 6.0 it fits perfectly and on Netscape, firefox and opera there is a few pixels difference because there browsers scroll bar on the right take up less pixels. But the difference isn't really noticeable. If the resolution of a viewers browser is set to 1024 x 768 or above it loads another style sheet. All this does is position the same layer which is still 779 pixels wide in the middle of the screen. Rather than having a big gap on the right my website has two smaller ones left and right.
It's in the blank left hand gap i would like to put a floating javascript menu. Which will nicely bounce up and down the empty left handside border when the screen is scrolled up and down. I had a javascript floating menu like this which worked before when i only designed the site with the intention of it being veiwed in ie6. This used a very long convoluted bit of javascript which doesn't work in firefox and doesn't anymore in IE6 now i've gone all W3C complaint. All the javascript to do the floaty menu was put in a file called Java1.js.
I used to call it and switch resolutions at the same time by using this code in all of my pages:-
<script language="JavaScript" type="text/JavaScript">
if (screen.width <= 800) {
document.write('<link rel="stylesheet" href="Stylesheets/SiteStyle800x600.css">'); }
if (screen.width >= 1024) {
document.write('<link rel="stylesheet" href="Stylesheets/SiteStyle1024x768.css">')
document.write('<script language="JavaScript" src="Java1.js">'); }
</script>
As you can see from the above if screen res is 800 x 600 it pulls just a stylesheet only but if screen res is 1024 x 768 it pulls a stylesheet and loads the javascript for the floaty menu. The only difference between the style sheets being an instruction to position the 779 width div to a middle position on the 1024 x 768 stylesheet. All this used to work fine. But as i said i was only designing for ie then (3 years ago) and had no proper DTD at the start of all my code and the quirks box model reined supreme (not that i knew what a quirks model was back then) but later when i came to view my site in firefox it was all messed up.
However one of the things i had to do recently to get my website working in all browsers properly was to make sure i was using proper Document Type Definitions at the start of my docs so as to get IE6 into using the proper box model so everything would match between firefox and IE and that is the case now. Took me ages to figure out the problem until someone gave me the idea here!
Anyhow I have found another javascript floaty meu which has less bloated code and works fine in firefox and IE6 but the moment i put a proper DTD at the top it stops it working in both! I cannot go back to having no DTD at the start of my code becuase that puts ie into quirks mode so bang goes my cross browser compatibility and my site start to look crap again.
The new javascript floaty menu's code is this:- You can cut and paste the bellow and open and get it to work in IE6 and firefox right now. Just put lots of text at the point which says "LOTS OF TEXT PUT HERE"
<html>
<head>
<script type="text/javascript">
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
</head>
<body>
<div id="divStayTopLeft">
<table border="0" width="112">
<tr>
<td width="100%" bgcolor="#000000">
<a href="HomePage.htm">Home Page</a>
<a href="16mmCamerasMenu.htm">16mm Cameras</a>
<a href="16mmLensesMenu.htm">16mm Lenses</a>
<a href="16mmExternalMotorsMenu.htm">16mm Motors</a>
<a href="16mmAccessoriesMenu.htm">Accessories</a></td>
</tr>
</table>
</div>
<script type="text/javascript">
var verticalpos="frombottom"
if (!document.layers)
document.write('</div>')
function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 600;
var ns = (navigator.appName.indexOf("Netscape")!= -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
<body>
LOTS OF TEXT PUT HERE AS YOU WOULD IN BODY TAGS SO AS TO MAKE THE HEIGHT OF THE PAGE BE BIGGER THAN ONE SCREEN SO AS TO SEE THE MENU FLOAT
</body>
</html>
What i would like somebody to help me with is the following.
1) Allow me to have as the first line of code this DTD which i've used for the rest of my site and dreamweaver is set to check my site towards
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and not have the floaty meu stop working.
2) I'd like to put all the java into one file, the moment i do this it stops working, same if i move the java code around.
3) The Div tag which contains a table of links and the menu itself has to be next to the first short bit of javascript and in the <HEAD>? Of course dreamweaver when checking my code throws a fit at this narurally it should be in the <body> i'm completely at a loss what to do. No other script seems appropriate for what i want to do but i don;t seem to be able to make this one work. Someone help me please i'm tearing my hair out.
Gareth
<script language="JavaScript" type="text/JavaScript">
if (screen.width <= 800) {
document.write('<link rel="stylesheet" href="Stylesheets/SiteStyle800x600.css">'); }
if (screen.width >= 1024) {
document.write('<link rel="stylesheet" href="Stylesheets/SiteStyle1024x768.css">')
You say you're only using the resolution switcher to center the contents. Why not do that the proper way, with something like
* body {text-align: center}
* or: <div style="margin: auto"> [contents here] </div>
* or even good old <center> [contents here] </center>
That way, visitors using a resolution with a width between 800 and 1024 pixels will also get to enjoy the benefits of your style sheet.
document.write('<script language="JavaScript" src="Java1.js">'); }
Maybe a closing tag helps? </script>
Does the W3C validator report any errors?
