| | |
Get the Height of Available Window Space with Javascript
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved
![]() |
Hi,
I've been designing a web application that scales to fit the available window space in the web browser so that there is no need to use the scroll bar (and the whole point of the application is to fit the window). I've already figured out how to catch resizes and change the height of the elements on the page (It's pretty simple using onload, onresize and document.getElementById().style.height), but I can't seem to get an accurate height to scale the web content with. The height I want is not the height of the document (Which would be the height of the content...which is what I'm trying to change in the first place!) and not the height of the window (Because if I'm not mistaken that includes the status bar, the tab bar, the URL bar, etc. which can vary between browsers). I need the height of the available web space that I can fit my content into. This would be the space between below the tab bar and above the status bar (To make my height as clear as possible I've provided a link to a screenshot). How can I get this height with Javascript (And I really need it to be cross-browser because I want this app to be able to work on multiple browsers)?
Thanks,
FlashCreations
Screenshot (For some reason the DaniWeb Attachment System just refuses to upload my image and gives me a blank page each time I upload the screenshot so I'll just upload it to an image host): http://img15.imageshack.us/img15/4186/screenshothyb.jpg
I've been designing a web application that scales to fit the available window space in the web browser so that there is no need to use the scroll bar (and the whole point of the application is to fit the window). I've already figured out how to catch resizes and change the height of the elements on the page (It's pretty simple using onload, onresize and document.getElementById().style.height), but I can't seem to get an accurate height to scale the web content with. The height I want is not the height of the document (Which would be the height of the content...which is what I'm trying to change in the first place!) and not the height of the window (Because if I'm not mistaken that includes the status bar, the tab bar, the URL bar, etc. which can vary between browsers). I need the height of the available web space that I can fit my content into. This would be the space between below the tab bar and above the status bar (To make my height as clear as possible I've provided a link to a screenshot). How can I get this height with Javascript (And I really need it to be cross-browser because I want this app to be able to work on multiple browsers)?
Thanks,
FlashCreations
Screenshot (For some reason the DaniWeb Attachment System just refuses to upload my image and gives me a blank page each time I upload the screenshot so I'll just upload it to an image host): http://img15.imageshack.us/img15/4186/screenshothyb.jpg
Last edited by FlashCreations; Jul 2nd, 2009 at 3:07 am.
![]() |
Similar Threads
- javascript know whether a window is opened or not (JavaScript / DHTML / AJAX)
- popup window not working in javascript (JavaScript / DHTML / AJAX)
- open pop up window without Javascript enabled (XML, XSLT and XPATH)
- Keep sub-window on top of main window (JavaScript / DHTML / AJAX)
- iframe height (HTML and CSS)
- window events and javascript objects (JavaScript / DHTML / AJAX)
- iframe help - Height (HTML and CSS)
- help with php and javascript (PHP)
- JavaScript's window.opener (JavaScript / DHTML / AJAX)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: mouseover Dropdown Menu
- Next Thread: php within echo statement / hide element
| Thread Tools | Search this Thread |
acid2 ajax ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser captchaformproblem cart checkbox child close codes css debugger decimal dependent disablefirebug dom download editor element engine enter error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math media menu microsoft mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php player position problem programming prototype redirect regex runtime safari scale scriptlets search security select shopping size software sql textarea unicode w3c window windowofwords wysiwyg \n





