| | |
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
Views: 898 | Replies: 2
| Thread Tools | Search this Thread |
Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxcode ajaxhelp animate api automatically beta boarder box bug button calendar card checkbox child class column cookies createrange() css cursor disablefirebug dom download dropdown editor element engine error events explorer ext file firehose flash form forms google gwt html htmlform ie8 iframe image() images internet java javascript jawascriptruntimeerror jquery jsf jsfile jump margin math matrixcaptcha microsoft mimic mp3 mysql object offline onmouseoutdivproblem onreadystatechange parent passing pdf php player post problem progressbar rated rating regex runtime scroll search select session shopping size sql star stars stretch text textarea twitter validation w3c web website window windowofwords windowsxp wysiwyg xml xspf \n





