Grow your CSS skills. Land your dream job.

Need JS/Jquery assistance on resizing app

  • # March 16, 2013 at 4:31 pm

    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.

    # March 16, 2013 at 5:12 pm

    @theacefes,

    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?

    # March 16, 2013 at 5:36 pm

    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

    # March 17, 2013 at 1:19 am

    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?

    # March 17, 2013 at 1:27 am

    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?

    # March 17, 2013 at 1:31 am

    Eep. Also, gotta support IE8. :(

    # March 17, 2013 at 2:49 am

    @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.

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

    # March 17, 2013 at 4:50 am

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

    # March 17, 2013 at 7:56 am

    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?

    # March 17, 2013 at 3:30 pm

    Yeah, that’s correct.

    # March 17, 2013 at 5:00 pm

    @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..

    # March 17, 2013 at 6:29 pm

    @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!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".