Net width and net height of current browser

StackOverflow https://stackoverflow.com/questions/23496966

Question

I try to build a web application that will fit with almost all sizes of devices/browsers. To do so, my actual approach is to define,inside of my body, a div that will take the whole space of body:

#mydiv {
width: 100%;
height: 100%;
}

I calculate, then, width and height of my available space using:

var Width= $("#mydiv").width();
var Height= $("#mydiv").height();

I do what I want after. I position my elements with jQuery/CSS (percentages, top property, absolute positionnong,...), I draw with Rapahael.js....

I discovered that this approach is not always efficient, especially for browsers that display their addons as HTML. For example in my Chrome, when I install a toolbar addon, this toolbar is rendered in the page code source as HTML elements with their own styles (top=0, fixed postion..). The consequence is that all my work with top position is shifted by the height of the toolbar.

How can I calculate the net height of body? What are alternative approaches to create webpage that adapts with the net browser size (I mean after any DOM injected elements outside of my control like ask.com toolbar... )?

Was it helpful?

Solution

Edit: so I gave this problem a little thought and I figure that if an add-on is going to draw to the DOM, it's most likely going to append itself to body. So, if you structured your document body in this manner:

<body>
  <div id="container">
    ... all your content here
  </div>
</body>

and the add-on inserted itself like this:

<body>
   <div id="toolbar" style="margin:0;padding:5px;position:fixed;top:0px;left:0px;width:100%;height:20px;background-color:#000;color:#fff">toolbar</div>
   <div id="container">
     ... all your content here
   </div>
</body>

You could overcome this by setting #container's position to relative and adding the following script to your page:

var shift_amount = 0; 
var children = document.body.children;
for(var i = 0; i < children.length; i++){ 
    if(children[i].style.position == 'fixed'){ 
        shift_amount += parseFloat(children[i].style.height); 
    }
}

var Height = $(window).height();
var Width =  $(window).width();

if(shift_amount > 0){
    // subtract fixed element height from available height
    Height -= shift_amount;
}

As I'm pretty sure the question @RoryMcCrossan linked answers the question you asked, I will add that the preferred approach to creating responsive websites is to use media queries to adapt your CSS at various widths (mobile, tablet, desktop). Here is an example of media queries in action using Twitter Bootstrap, open that page and resize your browser window.

<style>
/* target only browsers less than or equal to 600px; */
@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}
</style>

Regarding the issue of having toolbars and other components rendered in the HTML, this is going to be difficult to overcome as you can't know any and every element that will get injected into the DOM outside of your control. If you are targeting a specific use case, please point us to that add-on and there may be a solution to find.

OTHER TIPS

I would take a look at the "mutation observers" to detect changes in the DOM structure.

Then you can just get those values again.

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    Width= $("#mydiv").width();
    Height= $("#mydiv").height();  
});

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top