How do I resize something with jQuery and CSS

Question

How do I change the size of a div when I push a button. I have it so far where when you push the button the side menu go away but how do I make the content one fill the rest of the container?

Where is the code:

<?php
include 'lang/language.php';
?>

<html>
<head>
    <title>Home | Gmod </title>
    <link rel="stylesheet" href="styles/buttons.css">
    <link rel="stylesheet" href="styles/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#hide").click(function(){
                $("#navbar").hide(1500);
            });
            $("#show").click(function(){
                $("#navbar").show();
            });
        });
</script>
</head>
<body>
    <div id="container">
        <div id="navbar">
            <div class="logonav">
                <font size="6"><a href="index.php">Gmod Tools</a></font>
            </div>
            <div id="divider">
                Main Menu
            </div>
            <a href="http://testingwebsite.comuv.com/" class="contentmenubutton"><div id="hoverbar"></div><div class="textnav"><?php echo "$gmod_home"; ?></div></a>
            <a href="http://testingwebsite.comuv.com/about.php" class="contentmenubutton"><div id="hoverbar"></div><div class="textnav"><?php echo "$gmod_about"; ?></div></a>
            <a href="http://testingwebsite.comuv.com/tools.php" class="contentmenubutton"><div id="hoverbar"></div><div class="textnav"><?php echo "$gmod_tools"; ?></div></a>
            <a href="http://testingwebsite.comuv.com/tools/index.php" class="contentmenubutton"><div id="hoverbar"></div><div class="textnav"><?php echo "$gmod_testing"; ?></div></a>
            <button id="hide">Hide</button>
            <button id="show">Show</button>
        </div>
        <div id="content">          
        <div id="footer">
             <div class="copyrightnotice">
                &copy gmodtools.com, 2015. All right reserved.
             </div>
        </div>
        </div>
    </div>
</body>
</html>

Can we see the CSS for `navbar` and for `content`? Does navbar have a float property applied to it? Does content have a left margin to make room for navbar? I suspect you'll have to reduce the margin size. — Eraph, Aug 21 '15 at 02:00

score 0 · Answer 1 · edited May 23 '17 at 10:26

Use the document.getElementById function to gain access to the div content and then, with javascript, edit its style information. Something like:

divContent=document.getElementById("content");
divContent.style.width=the-width-you-want;
divContent.style.height=the-height-you-want;

Besides that, if you only want to resize your div to its content, it will do that on its own unless your divs are absolute. Take a look on this another post: How to make a parent div grow with its children?

There is also another post, with something similar, that shows an example on a cross browser solution: Setting DIV width and height in JavaScript

score 0 · Answer 2 · answered Aug 21 '15 at 02:17

First get the <div> you want to resize. and resize with jQuery.

<div id="div">
</div>
<button id="resize">resize div</button>

in your jQuery code apply the css

$(function(){
 $('#resize').click(function(){
    $('#div').css({
              'width' : '200px',
              'height' : '200px'
      });
    });
  });

example on jsfiddle

score 0 · Answer 3 · answered Aug 21 '15 at 02:42

0

Use this fiddle

Effects fiddle

But I think you need

scale

effect.Take a look at this portion of the function

if ( selectedEffect === "scale" ) {
    options = { percent: 50 };//Here you want to edit size,

//And in your case Call the function callback() at click event of your 'show' button.
  }

answered Aug 21 '15 at 02:42

Sorry for this quick big answer.I don't have much time to separate your effect.I need to go for duty.When I come back I will clear it – Aug 21 '15 at 02:45

How do I resize something with jQuery and CSS

3 Answers3