JavaScript - How To Get Pixel Height Of A Div?
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 Similar TutorialsI'm currently trying to move a div that holds a text message forward pixel by pixel and eventually I'll write the code for it to go backwards and repeat. But I am not quite understanding what I've done wrong. It seems like a simple task, but It's not going anywhere. I call a function from the xhtml document like so: Code: <body onload = "moveText()"> <div id="movingText"> <p>This message should scroll forward</p> </div> ............ and the function looks like: Code: function moveText() { var movingText = document.getElementById("movingText"); movingText.style.left = (parseInt(movingText.style.left) + 1) + "px"; setTimeout("moveText()", 50); } it seems so clear cut, I can't imagine what could be wrong but apparently all my browsers don't like it. Anyway spot anything? How do I get the pixel position of the caret in an editable IFrame? I am building a WYSIWYG editor which works for Gecko, Trident, Webkit and Presto. I am doing this by setting the designMode to 'on' for an IFrame. The problem that I am having is that I need to know the pixel position of the caret so I can determine if the caret is at the bottom of the page. The reason I want the pixel position is so that way I can auto scroll the scrollbar to that position. I should mention that we are using JavaScript. Any ideas appreciated. Hi I would appreciate a pointer in the right direction for a script I require. I will have two text boxes that will accept numeric values and an image. What I need is if the user change the value of box 1, the value in box 2 will automatically update depending on the pixel dimensions of the image and vice versa. Basically I need to automatically calculate the pixel ratio of an image and then use that value to multiply by the user inputted size. Any ideas? Rob Hello All, I'm about to pull my hair out dealing with this pixel. This is the information CJ has given me. The OID (order ID) is a unique alphanumeric ID that needs to be generated on your end, and will be assigned to each unique transaction that occurs. If the OID is not unique, meaning if our system detects a duplicate OID for another transaction, the second transaction will be ignored, which is why it is important that unique OIDs are generated for each transaction (in your case, for each lead form that is completed and submitted) and What I would suggest doing for your OID, is hardcoding a time and date stamp into the pixel to act as the OID. When you do this, you must exclude any symbols (colons, slashes, periods, etc) from the time/date stamp, and have the time be recorded all the way down to the millisecond. Since it will be extremely rare (if it happens at all) that two transactions will occur within the same millisecond, it will create a unique number to act as the OID for each lead that is submitted. I have no idea what this means or how to do it. Here's an example of a pixel. http://cj.com/u?CID=1520654&OID=Invo...TYPE=344815&IT EM1=lead&AMT1=0&QTY1=1&CURRENCY=USD& METHOD=IMG" height="1" width="20"> Someone please help, I am at my wits end. 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 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? 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> 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) 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'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 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 I am struggling to find a solution that enables me to have a div that is a certain percentage height of the window and then when the user is using a different resolution, it remains at that percentage of the screen height - not going off of the bottom as I have a fixed percentage no scroll full background image. I have sorted it for width but can't get it to work for height. any ideas? lol Bee x 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 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 Folks, Hope someone can help. I want to do this with js and not with any html/css tables, image fills or whatever other trick, but I don't know how... Say I have multiple DIV containers below each other, which contain multiple DIV boxes floating next to each other. None of the DIV elements have a fixed height: Code: <div id="container1"> <div id="box1">some text</div> <div id="box2">some double more text</div> <div id="box3">some other text</div> </div> <div id="container2"> <div id="box4">some double more text</div> <div id="box5">some more text</div> <div id="box6">some other text</div> </div> I want for each container (separately) to have the contained box divs to fit the biggest one in height. For example, in container1, if box2 contains more text than the others, I want box1 and box3 height to fit box2. And in container2, if box4 has more text than the others, I want box5 and box6 height to fit box4, etc. In my dreamworld, the solution would be flexible and fully automated, which means, it would look for all container divs of class x or Id x and apply the same rule to all child divs. Hope it's clear enough ;o) I have heard of jquery "equalheights" plugin but I don't think it can do that ? or then I misunderstood something. Could I be using some "get element by class" function and then apply a style.height to the divs? TIA for any suggestion 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 ! Hi, 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. |