determine div size...

PriNet has asked for the wisdom of the Perl Monks concerning the following question:

Here Goes: I arrange my webpage depending on the clients browser window size. Currently I'm trying to figure out the height of the remaining div (in pixels) after I subtract the heights of other divs from the overall height (wich i have in a perl variable after client links into my page). Where I'm stuck is trying to find the height of the dynamic divs in a perl variable. I see there is a way in javascript of course, but I need the parameter in perl when I set the size of the middle div. I use jsdump to pass parameters from perl to javascript, what i need is the reverse, a way to pass javascript parameters back to perl so i can use the ("#myDiv").height(); when setting my middle div. here is a (very) rough outline of the structure:

<HTML>
<DIV ID="Top" WIDTH=100>
this is a dynamic div depending on contents
</DIV>

<DIV ID="Middle" WIDTH=100 HEIGHT={page/window height - "Top" div heig
+ht - "Bottom" div height)>
whats left of window
</DIV>

<DIV ID="Bottom" WIDTH=100>
this is a dynamic div depending on contents
</DIV>
</HTML>
[download]

Again, i'm trying to get (in perl) the heights of the top and bottom divs so as to figure what height to set the middle div to so i remain inside the browsers window without a scrollbar showing up. I really hope i explained myself correctly, i could use this result in alot of my page, i try to fit (even up to resizing text/images) everything into the clients prefered browser window size. I'm trying to avoid scrollbars, this causes missed data from the viewable area, beside being encumbersome.. *heh*...

I did try re-inventing the wheel...
But it kept getting stuck on the corners

Comment on determine div size... Download Code

Replies are listed 'Best First'.
Re: determine div size... by davido (Cardinal) on Aug 09, 2012 at 22:17 UTC
Twitter Bootstrap has a "responsive" grid system (described here). An over-simplification is that it adapts to lower resolution screens by falling back from horizontal components to stacked components. I've found the CSS framework to be pretty easy to use, and with just enough features to keep me going without bogging me down with a telephone-book sized tome of documentation. The docs are good, and wherever they fall short I'm able to just "view source" on the documentation pages themselves to see how some effect is created. And there are a bunch of jQuery-based JavaScript plugins for it. It sure beats the old days of hand-rolling (poorly) this stuff myself. Dave	[reply]
Re: determine div size... by derby (Abbot) on Aug 09, 2012 at 21:55 UTC
You could always use JS to set or inject a hidden variable but that seems a bit draconian and will be useless once the user resizes the browsers in the middle of the postback. I think the CSS frameworks do a decent job of abstracting this away and letting the browser/client side handle it. Check out blueprint, 960 grid or the current fave, bootstrap. -derby	[reply]
Re: determine div size... by rpnoble419 (Pilgrim) on Aug 10, 2012 at 04:32 UTC
This is a very simple thing to do in JQuery. What you want really can't be done in Perl as the widths and heights you want are set once the html is rendered in the browser. By forcing a Perl solution, your guaranteeing that your solution will not work across browsers as the internal page size is set differently in IE, FF and Chrome. You should have Perl create the content of the HTML and link to a JS file to handle the on-screen formatting. This way you can handle screen resize events in the browser without having to go across the internet to your server just compute three width and height values. This is a case of "when is a knife not a knife? When its a screwdriver."	[reply]