Dear friends, here another little thing I’m not getting to work unfortunately.
I need to resize the first (top) DIV to the viewport, which works. However, I can’t et the DIV to resize along with the window/viewport when resizing the window. Once the page is loaded, it doesn’t resize anymore. How can this be solved?
The issue is that you’re calling the function only once – at page load – and never again thereafter. The value of $(window).height() is fixed at the moment you ask for it. It’s inside a closure, in technical terms, and only has access to the values that were true at the instant it was called.
If you were to wrap up your function as a named variable, and call it when the page loads, and again when the page resizes, then you would have the result you’re after.
But if you’re going to use the level of CSS you’re using here, why use jQuery or JavaScript at all? This is the same thing, and it’s always going to be the right size:
On Nov 28, 2013, at 11:11 AM, Richard van Heukelum wrote:
Dear friends, here another little thing I’m not getting to work unfortunately.
I need to resize the first (top) DIV to the viewport, which works. However, I can’t et the DIV to resize along with the window/viewport when resizing the window. Once the page is loaded, it doesn’t resize anymore. How can this be solved?
To be honest, I’ve been looking for ‘viewport to div’ in Google, and I ended up with tons of search results, mostly (if not all) js/jquery driven. Not knowing anything about this, I started there …
You totally got me by surprise solving it ‘simply’ with just CSS.
But … thanks for explaining what I did wrong, and how it ‘should’ work in stead of just passing me the code. This way I might just pick up something
With just one DIV I manage to resize the #header div to the viewport, but as soon as I add additional DIV’s underneath it … they squize themselves to the right of #header.
I am not exactly sure what you are trying to achieve with the additional Divs but because they are all clear:both and the header has no float property then there is nothing to clear against. Not sure if that makes sense!
Anyway if you add the float property to the header you will also need to do something about the height - I think. Tricky without your file and intentions.
I just want to ‘open’ the page with a flexible DIV, being ‘the cover’ of this one-page site. That works for as long as I don’t add additional div’s underneath the first one. As soon as I do that the end up at the right. The demo above shows there’s no floating, either way it works as it should.
There are some pitfalls to avoid - I used a secondary div (FirstDiv) rather
than try to wrestle with the ubiquitous PageDiv… although similar results
could be achieved either way, I suppose. To avoid the problem with the
FirstDiv height of 100%, I set the height to PX (whatever the page height
minus the combined heights of the bottom items) and then Extended the item
height to 100%. This will keep the appearance in the workspace from going
nuts while also preserving the output code.
I was unsure how literal you wanted to follow the example… FWP uses id
styles for structural stuff and the example uses class styles instead. So I
used Max Fancourt’s ID to Class action to convert the id styles to class
styles. There are some drawbacks to using this action - first the styles
are written into the document head instead of being swept into the css
stylesheet and externalized. Also, FWP still writes the id styles to
external stylesheet, regardless.
It’s a matter of fact I started with using a surrounding div, containing ‘the others’. After experiencing the issues mentioned above I removed the surrounding div, and started inserting the html items directly into the PageDiv (obviously without result).
Funny thing is that I’ve been fiddling around with the ‘ID to Class action’ as well, the example shown however is without the action applied … trying to get my vinger on the sore spot.
I guess this is a typical example of me trying too hard, looking too far for the obvious solution(s). Walter, Dave and Ernie all pointed that out very clearly … but I tap my hat for you guys, thanks (again) for the effort, but It’s great to see that you can accomplish a lot with FWP
Now let’s see what else I can come up with
I will try all three options offered by you, perhaps every occasion needs another solution …
Richard, I went back and reworked my example using the PageDiv as the first
div (like you seem to have intended). Also, I backed off being literal
about your example - so I let FWP manage the item styles through id’s
instead of classes.
