Hello,
Here's the beginning of my page
<html>
<head>
<title>No title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#header { background-color:#003399; }
#scroll { overflow: auto; width:820px; height:550px; padding:0px; margin: 0px }
</style>
</head>
My problem is that I want to catch the browser width/height and then use it in the properties of the #scroll (i want to make the height dynamic, something like $win_height+100 instead of 550)
and as the Javascript function must be in the <body> of the page... you guess the problem...
Please help me to get that *$! size :) (php before the <html> is ok)
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
how about this
<html>
<head>
<title>No title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#header { background-color:#003399; }
#scroll {
overflow: auto;
width:820px;
height:550px;
padding:0px;
margin: 0px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
<!--
var oId = document.getElementById("s
var bHeight = screen.height;
var bWidth = screen.width;
window.onload = function(){
if(bHeight == 800){
oId.style.height = oId.style.height + 100;
}
/* If you want to check for the width do as follows
if(bHeight == 800 && bWidth == 600){
oId.style.height = oId.style.height + 100;
}
*/
// continue test for larger and smaller heights and widths
}
// -->
</script>
</head>
<body>
<div id="header">Hello</div>
<div id="scroll">foo foo foo foo foo</div>
for IE only you can use an expression:
#scroll {overflow:auto;width:820px
height:expression(self.scr
If you need it cross-browser then as already stated you have to use scripting. You can still use the CSS, just generate it dynamically:
<html>
<head>
<title>No title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
var H=self.screen.availHeight+
var str='<style type="text/css">';
str+='#header { background-color:#003399; }';
str+='#scroll { overflow: auto; width:820px; height:'+H+'px; padding:0px; margin: 0px }';
str+='</style>'
document.write(str);
</script>
</head>
Cd&
Here's the code that worked on both IE & Mozilla (don't bug me, it IS NOT optimized, I know it :)
<script type="text/javascript">
if (document.all != null){
var str = '<style type="text/css">';
str += '#header { background-color:#003399; }';
str += '#scroll { overflow:auto;width:820px;
str += '</style>';
document.write(str);
}
else if ((navigator.appName == 'Netscape' || navigator.appName == 'Mozilla')) {
var H=self.window.innerHeight-
var str='<style type="text/css">';
str+='#header { background-color:#003399; }';
str+='#scroll { overflow: auto; width:820px; height:'+H+'px; padding:0px; margin: 0px }';
str+='</style>'
document.write(str);
}
else {
var str = '<style type="text/css">';
str += '#header { background-color:#003399; }';
str += '#scroll { overflow:auto;width:820px;
str += '</style>';
document.write(str);
}
</script>
Our hours are opposite, we must be on different sides of the world. Glad you got it work out.. Thanks for the A. :^)
Jay,
Yes there are several DOM methods for manipuating th esheets, but no of them will let you use the window or document properties reliably. This:
document.styleSheets[x].cs
is buggy.
The addrule() is for IE and insertrule() is Mozilla/Netscrap but the rules collect has different names. "rules" in IE and cssRules in Mozilla. The other big problem is cssText which in Mozilla refers to the text in a rule, but in IE is all the text for the whole stylesheet.
So using DOM for styles is still prety dicey ecept in failry controlled situations
Cd&
Business Accounts
Answer for Membership
by: M_N_MPosted on 2004-03-04 at 07:32:45ID: 10514741
hm I don't get it, why should you get the size??
You can just work with tables and set them to x% so on every resolution, it'll use full screen..
If you want a fixed size in css:
body {
width:820;
height:550
}
but I think that's a bit too easy, like said, I don't get ur problem completely :-|
Grtz