Forum Moderators: open
Is it something like this you are looking for:
<script language="javascript">
var height = screen.availHeight;
var width = screen.availWidth;
alert("Height = "+height+" Width = "+width);
</script>
HTH,
-George
1024x768 and it detected the size of the window of the browser. That doesn't tell me the size of the RENDERING AREA. The rendering area being that where the webpage is rendered, NOT toolbars, not the status bar, not the address bar, not the bookmarks....etc.
With this I got 1024x740 meaning that the task bar is 18 pixels in height.
The issue is trying to adjust the size of an objcet according to the available hieght and width to get the maximum sized element without creating scrollbars while also buffering down to adapt for the 50 or so search toolbars most (unsavey) web users have.
<script language=javascript>
alert(document.body.clientWidth+","+document.body.clientHeight)
</script>
If you set the size of an image or other object to 100% by 100%, can you then determine the dimensions of that object in pixels and pass that as a variable?
If you set the BG color to red...I'm talking about all the area int he browser that is then turned red.
I think that clearifies it a lot better! :-D
-George
<script language=javascript>
var width;
var height;
function getBodyDi(){
width = document.body.clientWidth;
height = document.body.clientHeight;
}
function getBodySize(){
alert(height+", "+width);
}
</script>
<body onload="getBodyDi()" onResize="getBodyDi()">
<a href="javascript:getBodySize()">Get size</a>
</body>
HTH,
-George
<script language=javascript>
alert(document.body.clientWidth+","+document.body.clientHeight)
</script>
Now what I want to do is size a DIV field rendered by JS to have the clientWidth and clientHeight minus 20 pixels in width and hieght.
For example if the dimensions detected are 720x420 I want the DIV to be rendered 700x400.
That's what I'm trying to do...
I've got the JS rendering my div below...
<script type="text/javascript">
<!--
document.writeln('<div>')
//-->
</script>
document.getElementById('myDiv').style.width = width-20;
PS: what you found was exactly what adni18 posted :)
Ok... here is where I'm at IoI...
[code]
<script type="text/javascript">
<!--
document.getElementById('myDiv').style.width = width-20;
document.writeln('<div class="content">')
//-->
</script>
[code]
Now I have to apply myDiv to the (array?). I have a javascript book but it's like, this is the subtract symbol but doesn't show me how to use it >__> so there little point to the book if there aren't examples. So my guess is going off of my no-example book :-D
Wait an array looks like...
if (myDiv)
{
}
So how do apply that...array name to my doc writeIn?
document.writeln('<div id="myDiv" class="content">') this will work as long as your not creating many div tags in an array list!? 'myDiv'was just the first identifying name that came to my head.
Let's know if that works now.
-George
<div style="right:20px">
Not sure whether "bottom" exists - I'm no CSS guru.
Kaled.
Here is where I'm at...
<html>
<head>
<style>
div.content {
background: #000000;
border: 10px solid #FFFFFF;
}
</style>
</head>
<body bgcolor="#FF00FF"><script type="text/javascript">
<!--
document.getElementById('myDiv').style.width = width-20;
//-->
</script>
<script type="text/javascript">
<!--
document.writeln('<div id="myDiv" class="content">')
//-->
</script>
</body>
</html>
document.getElementById('myDiv').style.width = width-20;
document.getElementById('myDiv').style.height = height-20;
This isn't working... so they have to be combined somehow.
Have you tried it with a higher number just to check?
-George
As far as Firefox goes I need to get the height to do the same thing with the code I have here...
<html>
<head>
<style>
div.content {
background: #000000;
border: 10px solid #FFFFFF;
bottom: 0px;
left: 10px;
margin: 0px 0px 100px 0px;
overflow: auto;
padding: 12px 0px 0px 116px;
position: absolute;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #00FF00;
scrollbar-base-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #EBEF92;
scrollbar-shadow-color: #EBEF92;
scrollbar-track-color: #000000;
right: 10px;
top: 10px;
z-index: 1;
}
</style>
</head>
<body bgcolor="#FF00FF"><script type="text/javascript">
<!--
document.getElementById('myDiv').style.width = width-20;
document.getElementById('myDiv').style.height = height-20;
//-->
</script>
<script type="text/javascript">
<!--
document.writeln('<div id="myDiv" class="content">')
//-->
</script>
1
<br />
1
<br />
1
<br />
1
<br />
1
1
<br />
1
<br />
1
<br />
1
<br />
1
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
<script type="text/javascript">
<!--
document.writeln('</div>')
document.writeln('</div>')
//--></script>
</body>
</html>
<script type="text/javascript">
<!--
document.writeln('<div id="myDiv" class="content">')
//here we call on function to resize the div
resizeDiv();
//-->
</script>
Do you mean this?
-George
added: I have ran it through FireFox and still works here
Here is the idea thats floating inside of my head like an inocent man in jail IoI...
1.) Detect clientWidth
2.) clientWidth detected to be say, 500
2.) Set variable mywid = 500
4.) Detect clientHeight
5.) clientHeight detected to be say, 400
6.) Set variable mywid = 400
There are two issues emerging from our approach right now, first MS browser needs a specific PX or % to render the scrollable DIV. If we don't give it a PX or % width AND height it will pull a monty python holy grail retreat. Run away! Run away!
Then the div is rendered by the doc writeIn with it's width and height defined by the variable (and hopefully IE will catch this and render it competantly.
What I'm guessing is that we will have to subtract the 20 pixels off the width and height BEFORE we pass the variable to the 2nd part of the javascript. IE doesn't seem to be able to handle more then 1 thing at a time, so I figure the final approach is something like this IoI...
1.) Get client width
2.) Set mywidth = clientWidth -10px
3.) Get client height
4.) Set myheight = clientHeight -10px
Then pass the two variables to the DIV.
I really hope this works! I thank you for spending your time helping me!
<script type="text/javascript">
<!--
var width;
var height;
width = document.body.clientWidth;
height = document.body.clientHeight;
function setDivSize(){
document.getElementById('myDiv').style.width = width-20;
document.getElementById('myDiv').style.height = height-20;
}
//-->
</script>
<script type="text/javascript">
<!--
document.writeln('</div>')
document.writeln('</div>')
setDivSize();
//--></script>
-george
added: I think the problem without being able to fully replicate it from this end is that the document is trying to do some JavaScript before it has been fully parsed and some of the objects don't exist during this period (i.e. myDiv).
Firefox rendered the DIV too large...
I really don't know what to suggest about Firefox at this moment in time as usually I'm dealing with IE as the problem child. :-D
I'm also running Mozilla 1.8a5 and it also rendered it the same way as FF 1.0.
<script type="text/javascript">
<!--
document.writeln('<div id="myDiv" class="content">')
//-->
</script>
//YOUR DIV STUFF HERE
<script type="text/javascript">
<!--
document.writeln('</div>');
//--></script>
</body>
</html>
You can replace your style and div stuff and that should work. The problem was you were trying to create and populate the div during the parsing of the document - i think.
Lets know how you get on with this
-George
added: going home now sorry :( perhaps someone else might be able to assist you further if that doesn't work :()
You can replace your style and div stuff and that should work. The problem was you were trying to create and populate the div during the parsing of the document - i think.
Yes that is the idea. Firefox has been doing this correctly in a static script I had setup. This script we're working on together is supposed to do the same only dynamically in order to avoid having to create classes for every resolution setting people can come up with.
I don't see the issue with that as it has thus far rendered correctly.
What do you think screwed up Firefox's math? Do IE 6 & Gecko use different versions of JS or...?
You are correct... it took me a moment but I realized that Gecko was rendering the padding as part of the width,,,DOH!
The solution then is to have another DIV inside to create the padding or to pad all the elements inside that DIV. Awesome! I'll try to create a page showing you the basic layout.
YEEEEEAAAAAAAAAAAAAAAAAAAAAAAHHH! :-D
Thanks! :-)
So I assume the solution is very similer but just changing the variables in order to let the two (or 4?) scripts work without interfering with each other?
Here is my guess... I don't know how to highlight with the color red on these forums....
<script type="text/javascript">
<!--
var width;
width = document.mydiv.clientWidth-100;
function setDivSize(){
document.getElementById('myDiv2').style.width = width;
}
//-->
</script><script type="text/javascript">
<!--
document.writeln('<div id="myDiv2" class="content2">')
//here we call on function to resize the div
resizeDiv();
//-->
</script>
<html>
<head>
<style>
div.content {
background: #000000;
border: 1px solid #FFFFFF;
bottom: 0px;
left: 10px;
margin: 0px 0px 100px 0px;
overflow: auto;
padding: 12px 0px 0px 116px;
position: absolute;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #00FF00;
scrollbar-base-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #EBEF92;
scrollbar-shadow-color: #EBEF92;
scrollbar-track-color: #000000;
right: 10px;
top: 10px;
z-index: 1;
}
div.content2 {
border: 1px solid #FFFFFF;
}
</style>
</head>
<body bgcolor="#FF00FF"><script type="text/javascript">
<!--
var width;
var height;
width = document.body.clientWidth;
height = document.body.clientHeight;
function setDivSize(){
document.getElementById('myDiv').style.width = width-20;
document.getElementById('myDiv').style.height = height-20;
}
function setDivSize2(){
document.getElementById('myDiv2').style.width = width-160;
}
//-->
</script><script type="text/javascript">
<!--
document.writeln('<div id="myDiv" class="content">')//here we call on function to resize the div
resizeDiv();
//-->
</script><script type="text/javascript">
<!--
document.writeln('<div id="myDiv2" class="content2">')//here we call on function to resize the div
resizeDiv();
//-->
</script>1
<br />
1
<br />
1
<br />
1
<script type="text/javascript">
<!--
document.writeln('</div>')
setDivSize2();
//--></script>
<br />
1
1
<br />
1
<br />
1
<br />
1
<br />
1
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br /><script type="text/javascript">
<!--
document.writeln('</div>')
setDivSize();
//--></script>
</body>
</html>
