View original (French)

Change the size of a div with onclick

tidave Posted messages 32 Status Member -  
animostab Posted messages 3003 Registration date   Status Member Last intervention   -
Hello everyone
actually everything is in the title,
I would like that by clicking on one, I could change the size of a div

For example

I have the div "example" which is 300px high, I would like that by clicking on the link, "change size" the height of the div goes to 500px

Thank you for your help
See you soon

4 answers

  1.
    kij_82 Posted messages 4102 Registration date   Status Contributor Last intervention   857
     
    Hello,

    You need to use JavaScript to change the size of your div.

    1- Identify your DIV component with an identifier as follows: 
     <div id="target"> Target content </div>


    2- Define a JavaScript function 'changeSize' responsible for changing the size of an element on your page. This function will take as parameters the identifier of the element to modify, as well as the desired size: 
     <script language="javascript"> function changeSize (_divId_, _newSize_){ if ( document.getElementById(_divId_) != null ){ document.getElementById(_divId_).style.width = _newSize; } } </script>


    3- On an event from another DIV, call the 'changeSize' function on the other DIV, giving it the identifier of the other DIV as a parameter, as well as the size: 
     <div id="source" onclick="javascript:changeSize('target',500);"> Click here to change the size! </div>


    Untested example, only to explain how to do it. Now it's your turn.

    --

    ~ Don't forget the "Resolved" tag when your problem is... resolved :) ~
    8
  2. biscuit
     
    Hello, the code proposed by kij82 has several errors. It lacks the underscore on newSize, and width and height are strings and not ints. In short, you need to add "+"px".

    So here is a correction:

    <script language="javascript">
    function changeSize (_divId_, _newSize_){
    if ( document.getElementById(_divId_) != null ){
    document.getElementById(_divId_).style.width = _newSize_ +"px";
    }
    }
    </script>

    And an evolution:

    <script language="javascript">
    function changeSize (divId, newSizex, newSizey){
    if ( document.getElementById(divId) != null ){
    document.getElementById(divId).style.width = newSizex +"px";
    document.getElementById(divId).style.height= newSizey +"px";
    }
    }
    </script>
    2
  3. animostab Posted messages 3003 Registration date   Status Member Last intervention   738
     
    In jQuery it would be simpler

    <!doctype html>
    <html><head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style>
    #change {
    width:100%;
    height:300px;
    background-color:#FFFF99;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    </head>

    <body>
    <script>
    $(document).ready (function(){
    $("#achanger").toggle(function(){
    $("#change").css("height", "500px");
    },function(){
    $("#change").css("height", "300px");
    });
    })
    </script>
    <div id="change"></div>
    <button id="achanger">click here</button>
    </body>
    </html>

    --
    A small thank you is worth more than great ignorance!
    So if your issue is resolved, a reply with thank you is appreciated.
    1
  4. tidave Posted messages 32 Status Member 3
     
    Hello
    Thank you for your quick response, but it doesn't work
    yet the code looks fine

    strange anyway

    I’m using this: 

    <script language="javascript" type="text/javascript"> function petit(ob) { document.getElementById(ob).style.width="10"+'px'; } function grand(ob) { document.getElementById(ob).style.width="200"+'px'; } </script>


    with a div "exemple"

    I call

    <a onclick="grand('exemple');">enlarge</a>
    or
    <a onclick="petit('exemple');">shrink</a>

    it works perfectly

    What I want to do is use a single link
    when I click on it, it enlarges if it was small and shrinks if it was large

    Thank you for your help.
    0
    1. kij_82 Posted messages 4102 Registration date   Status Contributor Last intervention   857
       
      Hello,

      This is an example. I believe that since your DIV is not fully occupied, the size has been adjusted to that of the content.
      If you play around with another property, I think it will work.
      It's up to you to see how to manage this size at the level of the CSS properties then, but the idea is there.
      0
    2. rl
       
      You don't have to concatenate the value and the pixel: 
      document.getElementById(ob).style.width="200px";

      that's already enough.
      0