I’m working on an app that has a bit of odd resizing parameters. I have a codepen I am about to attach, but basically all elements should resize when the window is resized. They all need to have their width resized but one element needs their height and width changed. The difficult part it seems is getting the other elements to stay positioned correctly.
In the Codepen, the two bottom elements must always be at the bottom of the window and never overlap other elements. That’s where I am having some trouble.
I was wondering if maybe some of you JQuery gurus could assist in helping me come up with a solution that also doesn’t bog down the browser.
Thanks for taking a crack at it! Yeah, it’s a web app. The idea is that all the elements adjust their width based on the window’s width but that only the “stretchy” div resizes its width and height. I’m not quite sure what you mean by resize or compensate. Can you explain?
And…did the test in a new html file. Looks awesome. I guess I’m wondering about where you got the vh measurements from. The original heights were around the actual heights that the app has, since those need to stay fixed. Is this possible?
Quick question, if it is an app, than why would you need support for ie8? I got the vh from Chris Coyier’s latest article, he talks about all kinds of different length properties, that is how i found it, it also has vw for width.
So i am assuming you want to change widths and heights based on the window resizing, that can be accomplished with the resize( ) method in jquery and you can always get the height and width by:
Otherwise, you can always use media queries to delegate certain heights and widths of elements.
Here is another good article from Chris about standard device sizes and the media queries to follow. The article is a little bit old, however will set you up nicely if you want to use media queries.
To answer your question, it’s an app driven by JS and C# (.NET MVC3). It’s for educational institutions so unfortunately the request is that it works on all browsers and one version back. Since IE10 is so new, we’re still supporting IE8 (sucks, I know).
The problem I am having is that every element needs to be able to have the width resize but only the “stretchy” element can have its width AND height resize while keeping the others in positions that adjust based on the window size. But something always seems to overlap when the window is made small enough.
I’ve gone down the media query route. Unfortunately, this really has to be a JS solution to get this to work exactly to the specs. :(