Need JS/Jquery assistance on resizing app

[theacefes]

Hey all,

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.

[JohnMotylJr]

@theacefes,

Play with this idea: CodePen

My reference for that: https://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?

[JohnMotylJr]

Also, this one is kinda test in a codepen/jsfiddle so i would suggest maybe trying this in a new html file just to test on your device or browser.

http://codepen.io/johnmotyljr/pen/skzLb

[theacefes]

Hey @JohnMotylJr,

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?

[theacefes]

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?

[theacefes]

Eep. Also, gotta support IE8. :(

[JohnMotylJr]

@theacefes,

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:

$(window).height();

$(window).width();

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.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

[theacefes]

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. :(

[JohnMotylJr]

Yeah, i can see JS being your solution. What are your dimensions for each element’s height and width? Same height and widths as in your example?

[theacefes]

Yeah, that’s correct.

[JohnMotylJr]

@theacefes,

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:

* {

margin:0;

padding:0;

}

Or something similar like targeting body, html, etc..

[theacefes]

@JohnMotylJr,

Oh, wow…thank you so much! I was trying something *kinda* similar to this but my math was off and it was messing everything up.

Again, thanks a ton!

[Author]

Posts