Forum Moderators: open
I'm kind of teaching myself the world of Javascript and from what I've seen, it doesn't seem that hard for the basics.
I know about using percentages to increase / decrease the table sizes, but what I'm after is a little more involving.....
The contents of the page is essentially encapsulated inside the one main table (which is set at 780 pixels wide to cater for 800 and above screen sizes).
It's the height part that I'm trying to get around.
What I want to do is to find out what size the user's screen is (which is easy enough), but then to set the main table to follow the following rules:
- If the screen height is 600 pixels (800x600), set the table height to 768 pixels (not 100%).
- If the screen height is 768 pixels (1024x768 or more), just leave the table height set at 100%.
The reason for this is to make the page sizes more consistent with regards to the scrolling since the pages I have contain slightly different amounts of information (which can make the table slightly more than 600 pixels in height, but less than 768 pixels).
Any help would be appreciated - many thanks.
I've been experimenting with the code, but I am obviously more of a novice than I thought originally.
I know this will probably prompt a few "stooooopid!" reactions, but how do you go about incorporating that into the actual HTML page?
I placed the code into the HTML body, but it doesn't seem to do anything - unless I'm missing something blindingly obvious :)
I've been doing HTML for a while now, but Javascript is a whole new ball-game to me! :)
Thanks for your patience.
Here is a complete HTML file that does as you require
I have added a background color so that you can be certain
that it works at the different resolution....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>sniff changer</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
div {
height:100%;
}
.one {
width:768px;
height:800px;
border:solid 1px #000000;
background:#ff0000
}.two {
width:768px;
height:768px;
border:solid 1px #000000;
background:#000ff
}/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[function sniffer() {
var screen_height = screen.height;
var screen_width = screen.width;
if (screen_height >= 768) {
screen_width = 1024;
screen_height = 768;
change('foo','one');
}
else {
screen_width = 800;
screen_height = 600;
change('foo','two');
}
}
function change(id,className) {
document.getElementById(id).className=className;
}
onload=sniffer;
//]]>
</script>
</head>
<body>
<div>
<table id="foo"><tr><td></td></tr></table>
</div>
</body>
</html>
But if you are going to 'SniffOut' the screen resolution...
Why not go the whole hog and have a 'css' file for each resolution like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>sniff changer</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link id="foo"rel="stylesheet" type ="text/css" href="1024.css"/>
<script type="text/javascript">
//<![CDATA[function sniffer() {
var screen_height = screen.height;
var screen_width = screen.width;
if (screen_height >= 768) {
screen_width = 1024;
screen_height = 768;
change('foo','1024.css');
}
else {
screen_width = 800;
screen_height = 600;
change('foo','800.css');
}
}
function change(id, href) {
document.getElementById(id).href=href;
}
onload=sniffer;
//]]>
</script>
</head>
<body>
<div>Your contents</div>
</body>
</html>
birdbrain
I'll give this a go and see what comes of it.
Again, many thanks for your time!
