I have the following code for finding the window height and width if the user is using IE. Is there an equivalant for finding the inner width/height for Firefox/Netscape?
#Flash {
height:expression(body.clientHeight-70+'px');
width:expression(body.clientWidth-270+'px');
}
I really do not want to have to use JS on this.
Thanks -Try the following example in your various browsers to see results
<script type="text/javascript">
<!--
function info4(){
str="<ul>"
if(document.body.clientWidth){
str+="<li>document.body.clientWidth = "+document.body.clientWidth
str+="<li>document.body.clientHeight = "+ document.body.clientHeight
}
if(document.body.offsetWidth){
str+="<li>document.body.offsetWidth = "+document.body.offsetWidth
str+="<li>document.body.offsetHeight = "+document.body.offsetHeight
}
if(window.innerWidth){
str+="<li>Window.innerWidth = "+window.innerWidth
str+="<li>Window.innerHeight = "+window.innerHeight
}
if(window.outerWidth){
str+="<li>Window.outerWidth = "+window.outerWidth
str+="<li>Window.outerHeight = "+window.outerHeight
}
if(document.getElementsByTagName){
str+="<li>document.getElementsByTagName('body')[0].offsetWidth = "+document.getElementsByTagName('body')[0].offsetWidth
str+="<li>document.getElementsByTagName('body')[0].offsetHeight = "+document.getElementsByTagName('body')[0].offsetHeight
}
if(document.documentElement){
str+="<li>document.documentElement.offsetWidth = "+document.documentElement.offsetWidth
str+="<li>document.documentElement.offsetHeight = "+document.documentElement.offsetHeight
}
document.getElementById("display2").innerHTML=str
}
setTimeout("info4()",250)
//-->
</script>
<P>The following examples and may vary depending on which browser you are using to view this page.
<P><center>
<table border="0" width="80%">
<tr valign="top">
<td id="display2" width="50%"></td>
</tr>
</table>You can probably use % positioning and apply negative margins to get the same thing in a more standard way.Oops, sorry, didn't notice you didn't want JSI did end up however using JS - this was my fix -
<script type="text/javascript">
<!--
var element = "Flash";
var windowHeight = window.innerHeight - 70;
function makeID(id, height) {
var str = "<STYLE TYPE='text/css'>";
str += "#" + id + " {";
str += "height: " + height + "px;";
str += "width: 100%;";
str += "overflow: hidden;";
str += "}";
str += "#mozHeight{ height: "+ height + "px; }";
str += "</STYLE>";
document.write(str);
}
makeID(element,windowHeight);
var agt=navigator.userAgent.toLowerCase();
if ((agt.indexOf('mozilla')!=-1) && ((agt.indexOf('spoofer')==-1)&& (agt.indexOf('compatible') == -1))){
function resize(){
height=window.innerHeight-70;
var a = document.getElementById("Flash");
var b = document.getElementById("mozHeight");
a.style.height = height + "px";
b.style.height = height + "px";
}
setInterval("resize()",250);
}
//-->
</script>
Pretty much just initiates my style - then if the user is running mozilla of some form - it resizes every so often. Works great so far -
Later on it gets over-written with my previous css I posted if the user is in IE.
Thanks for the help guys.
#Flash {
height:expression(body.clientHeight-70+'px');
width:expression(body.clientWidth-270+'px');
}
I really do not want to have to use JS on this.
Thanks -Try the following example in your various browsers to see results
<script type="text/javascript">
<!--
function info4(){
str="<ul>"
if(document.body.clientWidth){
str+="<li>document.body.clientWidth = "+document.body.clientWidth
str+="<li>document.body.clientHeight = "+ document.body.clientHeight
}
if(document.body.offsetWidth){
str+="<li>document.body.offsetWidth = "+document.body.offsetWidth
str+="<li>document.body.offsetHeight = "+document.body.offsetHeight
}
if(window.innerWidth){
str+="<li>Window.innerWidth = "+window.innerWidth
str+="<li>Window.innerHeight = "+window.innerHeight
}
if(window.outerWidth){
str+="<li>Window.outerWidth = "+window.outerWidth
str+="<li>Window.outerHeight = "+window.outerHeight
}
if(document.getElementsByTagName){
str+="<li>document.getElementsByTagName('body')[0].offsetWidth = "+document.getElementsByTagName('body')[0].offsetWidth
str+="<li>document.getElementsByTagName('body')[0].offsetHeight = "+document.getElementsByTagName('body')[0].offsetHeight
}
if(document.documentElement){
str+="<li>document.documentElement.offsetWidth = "+document.documentElement.offsetWidth
str+="<li>document.documentElement.offsetHeight = "+document.documentElement.offsetHeight
}
document.getElementById("display2").innerHTML=str
}
setTimeout("info4()",250)
//-->
</script>
<P>The following examples and may vary depending on which browser you are using to view this page.
<P><center>
<table border="0" width="80%">
<tr valign="top">
<td id="display2" width="50%"></td>
</tr>
</table>You can probably use % positioning and apply negative margins to get the same thing in a more standard way.Oops, sorry, didn't notice you didn't want JSI did end up however using JS - this was my fix -
<script type="text/javascript">
<!--
var element = "Flash";
var windowHeight = window.innerHeight - 70;
function makeID(id, height) {
var str = "<STYLE TYPE='text/css'>";
str += "#" + id + " {";
str += "height: " + height + "px;";
str += "width: 100%;";
str += "overflow: hidden;";
str += "}";
str += "#mozHeight{ height: "+ height + "px; }";
str += "</STYLE>";
document.write(str);
}
makeID(element,windowHeight);
var agt=navigator.userAgent.toLowerCase();
if ((agt.indexOf('mozilla')!=-1) && ((agt.indexOf('spoofer')==-1)&& (agt.indexOf('compatible') == -1))){
function resize(){
height=window.innerHeight-70;
var a = document.getElementById("Flash");
var b = document.getElementById("mozHeight");
a.style.height = height + "px";
b.style.height = height + "px";
}
setInterval("resize()",250);
}
//-->
</script>
Pretty much just initiates my style - then if the user is running mozilla of some form - it resizes every so often. Works great so far -
Later on it gets over-written with my previous css I posted if the user is in IE.
Thanks for the help guys.