jQuery resize CSS elements

Question

I know how to solve my issue using CSS. I need to set every value, 1000's of them, from pixels to percentages (fun times!). Whether I do this after the fact or as I go, it is always painful. I've been able to design quicker avoiding it in favor of pixels, but now looking to avoid it all together.

I assume using CSS percentages (my entire page is a fixed aspect ratio, so literally every element needs to be translated to percentages) will be the most lightweight solution, but I was hoping maybe some jQuery script existed that could resize the elements?

At one point I thought to try accessing browser zoom, but that doesn't seem to be possible. This is my last shot at another approach. If I can't get something to work... I'll have to suck it up and translate all my elements into percentages (there really should be a tool to do that for you!).

Any and all help is appreciated. Thanks!

edit* Here is a fiddle depicting a simple structure of the website: http://jsfiddle.net/hkdeA/4/. I included some code to attempt to expand the outer container. If all the inner containers were CSS percentages, it would work, but I have 1000's of values to be translated and a simple script to resize all the elements would save a tremendous amount of time, effort, and energy.

  <div id="container">
    <div id="vid">

    </div>
    <div id="sidebar">

    </div>
    <div id="footer">

    </div>    
</div>

#container{
    background:grey;
    width:480px;
    height:270px;
    float:left;
}

#vid{
    background:black;
    width:320px;
    height:180px;
    float:left;
}

#sidebar{
    background:blue;
    width:160px;
    height:180px;
    float:right;
}

#foot{
    background:yellow;
    width:480px;
    height:90px;
    float:left;
}

Ultimate goal: get my website app to resize to 100% width or height (depending on aspect ratio of window) of the browser window. I know it can be accomplished with CSS percentages and script to change the containing div's size. However, I'd like to change ALL the divs with scripts to avoid the tedium of translating every fixed value I have into percentages.

Can you post some code to get your question across more clearly? — Lowkase
– Lowkase, Commented Feb 23, 2013 at 2:00
I've added some code and a quick fiddle. Imagine the structure I've laid out but an entire web app within these few containers I've shown you. I need every single element to be resized. Same as they would if they were all percentages and I changed the outside container size. — jstacks
– jstacks, Commented Feb 23, 2013 at 2:06
So to be a bit more precise you want your 1000's of containers to act in a "fluid" manner? — Lowkase
– Lowkase, Commented Feb 23, 2013 at 2:08
Yup, I just edited again to give an "ultimate goal" which says what you've mentioned. To clarify though: each page doesn't have thousands of containers. It's more that each page still has a great deal of elements (containers, inputs, fonts, etc.) each which has width, height, padding, position, and so on. All together, this is 1000's of calculations that need to be performed (and ultimately, to keep it maintainable, each calculation documented/commented with fixed values present). It is something I will do if it comes down to it but really trying to find a solution to avoid this. — jstacks
– jstacks, Commented Feb 23, 2013 at 2:11

Oden · Accepted Answer · 2013-02-23 02:47:12Z

1

Try something like this:

var list = [];
var containerW = $("#container").width();
var containerH = $("#container").height();
$("#container").find("*").each(function(){
  var obj = {};
  obj.w = $(this).width() * 100 / containerW;
  obj.h = $(this).height() * 100 / containerH;
  obj.el = $(this);
  list.push(obj);
});


for (var i in list) {
  var obj = list[i];
  obj.el.width(obj.w+'%');
  obj.el.height(obj.h+'%');
}


$("#container").width('100%');
// if you want height also to be 100%
$("#container").height('100%');

You can test it here: http://jsbin.com/izubed/1/edit

answered Feb 23, 2013 at 2:47

Oden

7508 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jstacks Over a year ago

That seems to be exactly what I want. So, you are telling it to find all with '*' and then manipulating all of that by the width & height of the container. This outer container is then being manipulated to follow the browser window. That's awesome. I guess I'll find out when I implement this... but will this be any slower than using CSS percentages? I understand that scripts run after the CSS, so in that case I suppose it will be slower... but this approach frowned upon?

jstacks Over a year ago

Unfortunately, it didn't end up working. It broke everything. It's hard to say why. Also, after playing with your example more, that doesn't keep the aspect ratio (I'd like the height to remain proportional to the width) - not a big concern in this post though as I'm mainly looking to scale all the children elements, which your example seems to do... but doesn't work when used with the rest of my code. Darn. :(

Oden Over a year ago

it is obvious that on a simple example like this, will work. If you have more elements probably some of them dont like the percentage width/height on the first place! Some adjustments may be needed. The conclusion is that for small experiments like this, its ok to come with this approach but in a production enviroment you should follow the correct path.

Kevin Carmody · Accepted Answer · 2013-02-23 02:39:05Z

0

Are you looking for something like this?

$('div').each(function(i,v){
  if($(v).width() > 0){
    $(v).width('auto');
  }
});

answered Feb 23, 2013 at 2:39

Kevin Carmody

2,3192 gold badges23 silver badges23 bronze badges

1 Comment

jstacks Over a year ago

This seems simpler than the other reply, but I don't see how it would work? Can you explain?

Collectives™ on Stack Overflow

jQuery resize CSS elements

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related