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.
[Here is a Codepen!](http://codepen.io/katbella5/pen/DrbqK “Here is a Codepen!”)
Thanks a lot. Please let me know if I’m being too vague.
Play with this idea: CodePen
My reference for that: http://css-tricks.com/the-lengths-of-css/
That codepen was just for fun, now, you are working on an app? Is it a web app, native android app, ios app? Do you want elements to change size when the window is resized or compensate?
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?
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. :(
Here ya go: Forked CodePen.
As i noted, i didn’t wrap the code in functions (minus the jQuery resize), so you could see what happened and replicate it yourself. I based the code off the given element’s heights.
If i missed something lemme know.
EDIT: Just noticed, if you want it to work in IE7/8 then you need to add either a reset or:
Or something similar like targeting body, html, etc..
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".