CODEWITHSUNDEEP
javascriptjqueryhtmlcssresize
daveycroqet
daveycroqet

Reputation: 2727

Mass Resizing of Elements on Page

I want to add a side menu that pops out and takes up 30% of the screen's width. I would also like for all of the elements currently on the page to stay positioned correctly, but be scaled down automatically to accommodate for the screen real estate loss (let's say everything is sized using viewport width, i.e. vw).

How could I go about mass-resizing every element on the page -- or even just build an array of ones to target -- via jQuery? (If jQuery is not ideal for performance, I'd be interested in another approach, especially CSS.)

Not seeking an in-depth example. Just one with text and images (<h1>, <p>, and <img>).

Edit for clarity: How would I go about mass-capturing the size of every element on a page and then reducing all of them simultaneously by 30%? I am curious whether or not anyone has had success with something like this and what the performance ramifications are. I obviously expect it to be bad, but on light pages (i.e. landing sites) it might be tolerable. I am interested in seeing someone else's code and running it through its paces on jsperf, etc.

Upvotes: 0

Views: 55

Answers (2)

jh42
jh42

Reputation: 78

This is suuuuper quick and dirty:

$('h1, p, img').each(function(){
    $(this).width($(this).width() * .7);
    $(this).height($(this).height() * .7);
    $(this).css('font-size', '70%');
});

The jQuery selector can include whatever element types you want, of course. I included the font-size bit because the <p> tags that I used otherwise stayed pretty much the same! You can also do this:

$('*').each(function(){
    $(this).width($(this).width() * .7);
    $(this).height($(this).height() * .7);
    $(this).css('font-size', '70%');
});

...but it makes the font suuuuper teensy. OTOH, leaving the font-size line out means that as before, it doesn't actually change at all.

But maybe that's enough to give you a start!

Upvotes: 1

vals
vals

Reputation: 64164

I think that by far the easiest way to do that is using a transform; scale(0.7) on some kind of container. All the children of the container will be scaled automatically.

.container {
  position: absolute;
  left: 30%;
  top: 0px;
  background-color: lightblue;
  transform: scale(0.7);
  transform-origin: top left;
}

.sidebar {
    width: 30%;
  background-color: yellow;
}
<div class="container">
  <p>TEST 1</p>
  <img src="http://lorempixel.com/400/200/sports/1/">
</div>
<div class="sidebar">SIDEBAR
  </div>

All you need to do in jQuery is to assign the container class

Upvotes: 1

Related Questions