|
JavaScript - Get The Browser Outer Height Firefox
Hi Everyone,
I am using javascript to find the browser window's innerheight and outerheight(ie both document body + task bar ,statusbar,menubar etc)I am using the following command for the calculation of the above thing var browserOuterheight; var browserInnerHeight; var browserWidth; var yCordinate; var xCordinate; if (typeof (window.outerHeight) == 'number') { browserOuterheight = window.outerHeight; alert("browserOuterheight " + browserOuterheight) browserInnerHeight = window.innerHeight; alert("browserInnerHeight " + browserInnerHeight) yCordinate = browserOuterheight - browserInnerHeight; alert("yCordinate" + yCordinate); xCordinate = 1 } This one works perfectly for the following browser's GoogleChrome,Safari,Firefox with small problem on Firefox Following is the problem The window.outerheight and window.innerHeight returns different values , a)when the script is run locally on the same browser b)when the script is run after publishing the page on the server and ran from the same browser. This issues do not come for other browser except firefox.For other browser the outerheight and innerheight comes same, before and after the script is published on the server. The firefox browser version used is : firfox 3.6.16 Os is Windows Xp Best Regards, Sagar Singh Similar TutorialsHi, I am trying to get the Chrome Height of a browser window. I tried window.outerHeight - window.innerHeight but that gives me the height of the chrome plus the status bar. Does anyone know of a way to just get the height of the chrome of a browser window? Or, get the screen coordinates of the inner body of the browser window. Because, then I can subtract those coordinates from screenX and screenY. Thanks for your help. I have a script where the user selects an item on the main nav and it will display the sub-nav below. It works fine in every browser except Firefox. ANy ideas? http://tinyurl.com/79wlwq3 EDIT: It's just that script that won't work, btw. I tested an alert box for Firefox and it works fine. i used the code window.close(); it works well for Internet Explorer but it not worked in firefox Hi, I need to re-size a div to be 100% of the browser but taking into account the height of an existing header div. Currently it works but it doesn't factor the height of the above header div, and therefore scrolls off the page (the height of the header div) I need to manipulate ( subtract the height value of the header) in the javascript somehow. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function SetHeightOfDiv(){
var theDiv = document.getElementById('content');
theDiv.style.height = BrowserHeight()+"px";
}
function BrowserHeight() {
var theHeight;
if (window.innerHeight) {
theHeight = window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
theHeight = document.documentElement.clientHeight;
}
else if (document.body) {
theHeight = document.body.clientHeight;
}
return theHeight;
}
</script>
</head>
<body style="height:100%; background-color:blue; margin:0; padding:0; color:#ffffff; font-size:15px; text-align:center; font-family:monospace,arial"
onload="SetHeightOfDiv()">
<div id="wrapper" style="height:100%; width:900px; background-color:yellow; margin-left:auto; margin-right:auto; overflow:hidden">
<div id="header" style="margin-top:0px; height:130px; width:890px; margin-left:5px; background-color:red; position:fixed">
<p>The FIXED HEADER</p>
</div>
<div id="content" style="margin-top:132px; background-color:grey; width:890px; margin-left:5px">
<p>THE BODY - that extends below the browser window (possibly the height of the header)</p></br>
<p>So how do we manipulate the Javascript to 'Subtract' the height of the HEADER?</p></br>
<p style="text-align:left; padding-left:10px">
function SetHeightOfDiv(){ <br>
var theDiv = document.getElementById('content');<br>
theDiv.style.height = BrowserHeight()+"px";<br>
}<br>
</br>
function BrowserHeight() {<br>
var theHeight;<br>
if (window.innerHeight) {<br>
theHeight = window.innerHeight;<br>
}<br>
else if (document.documentElement && document.documentElement.clientHeight) {<br>
theHeight = document.documentElement.clientHeight;<br>
}<br>
else if (document.body) {<br>
theHeight = document.body.clientHeight;<br>
}<br>
return theHeight;<br>
}</p>
</div>
</div> <!--end of wrapper-->
</body>
</html>
Thanks I need a script that will redirect to a specific page is the browser is safari version 4. if the browser is NOT safari 4 I want the browser to stay on the current page.
Greetings, I am currently using the websites tutorial about browser detection using the navigator. http://www.javascriptkit.com/javatutors/navigator.shtml I am however finding myself unable to detect a pattern in order to learn from. My aim is to use Browser detection to have a CSS file for each browser type, such as Firefox, IE, Opera, Safari and then an overall CSS file if none of the above, to fix numerous flaws. For IE and Firefox using the site's code is all well and good and while I haven't tested it yet I'm wondering how to set up the coding so that it can detect a safari browser. There are lots of slashes and d's and brackets and I do find myself unable to understand their purpose. So if someone can explain how I could do it for Safari I would be very appreciative. Hello, I have a question what is the best way to identify a browser, browser version and OS in javascript. I have try a few scripts but they all fail. This will help me out formating the code for diferent browsers. Thanks Hello... Just curious on what I am doing wrong: I want to get the pixelHeight of a div called content and assign it to a variable. Then I want to use that variable as the css top position property for another div. I'm new to Javascript, but am learning it. Right now I am just having trouble assigning the variable. I get 'undefined' when I try to output the variable to the browser. Here's the code : Code: <script language="javascript">
var divh = document.getElementById('top').style.pixelHeight;
</script>
</head>
<body>
<!-- output divh -->
<script language="javascript">
document.write(divh);
</script>
this gives me undefined in my browser What am I doing wrong?? Thanks Kevin Can DIV located in the MasterPage be resized depending on the screen resolution? <tr style="vertical-align: top;"><td> <div id="mainArea"> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server" /> </div></td></tr> I've tried unsuccessfully - var height = screen.height; var area1 = document.getElementById('ctl00_mainArea'); if (height == 1024) { area1.setAttribute("height", "700px"); } else if (height == 864) { area1.setAttribute("height", "540px"); } Also tried area1.style.height = 700 + "px"; (no luck as well) hi guys.. i have a problem.. first i have a about_us.php page.. which inside the about_us page i include right banner page.. using php include.. and this right banner page height must be the same height as the about_us page.. so i need using js to get the actually about_us page height and send to right_banner page so i can process it.. my logic are get the div height from about_us page.. send it to right_banner page.. and using php to process it,so the right banner height can be similar to about_us page when about_us page open by user.. about_us.php i using div input all the stuff Code: <div class="mainarticel">text goes here </div> and mainarticle css i put in outside css.. called style.css nb:mainarticle height i using auto; and in right_banner page i using Code: function getHeight (id) {
var gh = document.getElementById(id).offsetHeight;
alert (gh);}
but this cannot get the div from another file.. so how can i get the div height from another file? This works: Code: <div id="oDiv" style="width:300;height:100;background-color:#000000;"></div>
<a href="#" onclick="getHght('exp');">Expand</a>
<a href="#" onclick="getHght('con');">Contract</a>
<script type="text/javascript">
<!--
function getHght(act){
var doc = document.getElementById("oDiv");
if (act == "exp"){
doc.style.height = 300 ;
} else if (act == "con"){
doc.style.height = 100 ;
}
}
//-->
</script>
This is exhibits the desired functionality, but it doesn't work: Code: <div id="oDiv" style="width:300;height:100;background-color:#000000;"></div>
<a href="#" onclick="getHght('exp');">Expand</a>
<a href="#" onclick="getHght('con');">Contract</a>
<script type="text/javascript">
<!--
function getHght(act){
var doc = document.getElementById("oDiv");
if (act == "exp"){
doc.style.height += 30 ;
} else if (act == "con"){
doc.style.height -= 30 ;
}
}
//-->
</script>
IE give an "invalid argument" error. No error in FF. I had the same [failed] result using .getAttribute(), and .setAttribute(). How should I approach this? -james I just placed this div named iframe_container in a table cell. There's an iframe and another div inside of it and when I went to fine tune the alignment I discovered I could change the width of the div but not the height I can set it to 200 or 1000, it doesn't make the slightest difference. It seems to be clinging to the outside of the iframe. I can make it bigger by inserting breaks after the iframe but then the compass_rose div loses its absolute position for some reason I searched the page for height tags that might be interfering with this but I've turned up squat. I took the height specs off the table but still no effect. Can anyone spot the problem? <td style="width: 800px; height: 700px" valign="top" class="style3" align="left"> <div id="iframe_container" style="width:1000px; height=700; position: relative; overflow-x:auto; overflow-y:hidden"> <div id="compass_rose" style="top: 5px; left: 1200px; position: absolute; z-index: 2; visibility:visible;"><img alt="Compass Rose" src="compass_rose_animated2.gif" width="80" height="80" /></div> <iframe id="viewer" width="1600" height="635" src="front_page2.jpg" marginwidth="1" marginheight="1" name="viewer"></iframe> </div> </td> </tr> </table> I'm trying to make height of my leftNav div the same height as the mainContent div. currently I have Code: jQ(document).ready(function() {
//even the left bar and the main Content
jQ('#leftNav').height( jQ('#mainContent').innerHeight() );
});
This only works on some pages, and not on others. for example it works here http://nminvestigates.townsendwebdd.com/index.php but not here http://nminvestigates.townsendwebdd...._prepared2.php Help please Hello guys ! I'm fairly new to JavaScript, so this is maybe an obvious mistake, but here is the code that doesn't work, it goes inside the body of my document : Code: <script type="text/javascript">
aImg = new Image();
aImg.src = "myimage.jpg";
aHeight = aImg.height;
aWidth = aImg.width;
document.write(aHeight + "," + aWidth);
document.write("<img src=" + aImg.src + ">");
</script>
While the image is displayed, the value written for the height and width is "0". This code worked fine when I compiled it in the "Tryit Editor" of w3schools.com (I told you I was new to JS :P), but it fails when I insert it in a page and then view the page with Google Chrome or IE7. Of course this is not all fo the code, I intend to display the image differently depending of its size... but I need to get that part right before moving on Any help would be greatly apreciated, thanks ! i want to set the second container's height according to the first container's.but how to achieve the height of the container dynamically. thank you! Hi My html document contain many images which has the attribute src of img tag as the flowing : PHP Code: http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&y=83&q=85&sig=Tua1ukyUEVKTPSsz7xGPsg-- All those images has the common source folder http://images.mysite.com/a/p This is an example : PHP Code: <img src = "http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&y=83&q=85&sig=Tua1ukyUEVKTPSsz7xGPsg--" width = "105" height = "73" > I tried during many days to find the solution using RegExp but I didn't arrives. What I want to do is I - change for all image from the seem folder the src attribute to match the exact url of the image without special characters, for this example : PHP Code: http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&y=83&q=85&sig=Tua1ukyUEVKTPSsz7xGPsg-- Became : PHP Code: http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg II - Control the width and height of the image by changing its height and width attributes resp. from two javascript variables : PHP Code: var v_width = 320 // Just for example var v_height = 250 // Just for example This is an example of try didn't work for me, for the first issue : PHP Code: var element = document.getElementsByTagName("img"); for(var i=0;i<element.length;) { var myString = new String(); var myRegExp = new RegExp("http:\/\/d\.images\.mysite\.com\/a\/p[^\?]*(jpg|png|gif)","i"); var myRegExp0 = new RegExp("\?.*","i"); myString = element[i].getAttribute("src"); if(myRegExp.test(myString)) { var newString = myString.replace(myRegExp0,""); element[i].setAttribute("src",newString); } } Help me please Think you Hey guys, so i have a comment section. And what i want to do is if the height of the comment box is larger then lets say 100px. I want to set the height of the comment box to 50px and then display a "read more" button. And this read more button would toggle and allow the height to be "auto" and not set to 50px. so my html would look like this Code: <div class="comment-section"> <div class="comment"><p>This is where text would go. </p></div> <div class="read-more">Read More</div> </div> I have the class "read-more" set to "display:none" How would i do this? This is what i have / was trying and have been unsuccessful Code: <script type="text/javascript">
$(function(if ($".comment".style.height > 100px;){
{
$".comment".style.height = 50px;
$".read-more".style.display = block;
}
});
</script>
It appears Lightbox has a bug in IE when the screen height exceeds 65,505 pixels. I have created two test pages for you to see. One that shows the bug and another that shows it working. The problem seems to be ONLY with Internet Explorer (of any version). In the following test htm pages click the "Click Here" link at the top left corner. You will see a lightbox pop up on screen. The issue is related to the opacity level. When the screen height is <= 65,505 pixels the opacity works fine for IE. But if the height >=65,506 it fails. It is not an IE bug because i tried using filter: alpha(opacity) and it works fine. It seems to be a lightbox bug. Test 1: Opacity Works because Height of Screen is 65,505 pixels: http://fatcatdaily.com/test-works.htm Test 2: Opacity Fails because Height of Screen is 65,506 pixels: http://fatcatdaily.com/test-fail.htm NOTE: You MUST be using Internet Explorer to see the BUG |
|||||||