Change whole content of div size relatively

Question

there is an HTML code like bellow:

<div class="home">
    <img id="back" src="" />
    <div class="menu">
        <ul>
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
            <li><a href="#">link4</a></li>
            <li><a href="#">link5</a></li>
        </ul>
    </div>
    <div id="data" class="data">
       a few data that will change for every page, in fact content of each link will comes here by ajax.
    </div>
</div>

Everything here has an absolute size by pixel in width and height, now I want to minimize the whole thing in this div by 90%, so none of their position wont be changed. In fact I prefer to put whole of the code into another div and make it a little smaller than its actual size.

How could it be possible? I prefer CSS but jquery is Ok too.

When you say width and height, do you just mean the dimensions of the div, or do you mean you want to scale down everything inside of it as well? — crush, May 30 '13 at 15:23
everything inside of it. just like this: .home { -webkit-transform: scale(.9); -moz-transform: scale(.9); transform: scale(.9); } its great the only problem is the browsers that it cant support — dpfarhad, May 30 '13 at 15:33

JSackey · Accepted Answer · 2013-05-30T15:02:46.560

1

A CSS3 approach:

.home {
  -webkit-transform: scale(.9);
  -moz-transform: scale(.9);
  transform: scale(.9);
 }

ETA: Be aware of the browser support for the transform property.

edited May 30 '13 at 15:02

answered May 30 '13 at 14:57

JSackey

26
3

He wants to reduce it by 90%. So, shouldn't you be doing `scale(.1)` instead of `scale(.9)`? Nice approach though. Probably the easiest. – crush May 30 '13 at 15:04
wow thanks this will work great in Chrome and firefox, but it won't work in IE. how could fix this to work in IE too. – dpfarhad May 30 '13 at 15:08
it's not even work in IE 10, and for record scale(.9) is what I mean. – dpfarhad May 30 '13 at 15:22
http://stackoverflow.com/questions/7805870/css3-transformscale-in-ie Shows you how to do it in IE – crush May 30 '13 at 17:18

score 0 · Answer 2 · answered May 30 '13 at 14:56

0

Something like this i guess

<script>
function resize() {
   $("div#data").height(10*$("div#data").height()/100);
}
</script>

answered May 30 '13 at 14:56

blpsilva

69
1
3

That won't change the size of the fonts inside of it, etc. – crush May 30 '13 at 14:56
Well, since he only mentioned width and height, I thought he didnt mean font-sizes. Reducing font sizes by 90% would actually make things pretty much unreadable.. – blpsilva May 30 '13 at 14:59
1

You're right, his question is a bit vague on the details. Maybe he means just width and height. He also hasn't answered back about whether we can use jQuery to solve the problem. – crush May 30 '13 at 15:04
yeap, and I want to resize the whole data (everything in div by class home – dpfarhad May 30 '13 at 15:11

score -1 · Answer 3 · answered May 30 '13 at 14:48

-1

Try to this one

<script>
function hideMenus() {
   $(".menu").find("ul").hide();
}
</script>

answered May 30 '13 at 14:48

minam.cho

122
1
12

He didn't say he wants to hide it. He said he wants to make it 90% of it's original size. – crush May 30 '13 at 14:49
yeap crush, I guess he didn't get the question. – dpfarhad May 30 '13 at 15:10

Change whole content of div size relatively

3 Answers3