www.webdeveloper.com
Results 1 to 7 of 7

Thread: Change Width & Height Dynamically of Div

  1. #1
    Join Date
    Jul 2007
    Posts
    461

    Change Width & Height Dynamically of Div

    Hi. This script changes the image, I wanted to know if there is a way to automatically resize the div's height and width based on the actual image proportions.

    Thank you

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Switch Picture</title>
    
    <script type="text/javascript">
    function changeIt(imageName,objName)
    {
    var obj = document.getElementById(objName);
    var imgTag = "<img src='"+imageName+"' width='100&#37;' height='100%' border='0' />";
    obj.innerHTML = imgTag;
    return;
    }
    </script>
    
    </head>
    
    <body>
    
    <div id="change" style="width:200px; height:200px;">
    <img src="cat.jpg" width="100%" height="100%" border="0" />
    </div>
    
    <br/>
    
    <a href="#" onclick="changeIt('dog.jpg','change');">Switch to Dog Pic</a>
    
    </body>
    
    </html>

  2. #2
    Join Date
    Jun 2008
    Posts
    62
    The height get's adjusted automatically, so just remove the height property from the style. As for the width, this should work
    HTML Code:
    <script type="text/javascript">
    function changeIt(imageName,objName)
    {
    	var obj = document.getElementById(objName);
    	var imgTag = "<img src='"+imageName+"' border='0' />";
    	obj.innerHTML = imgTag;
    	var myImg = new Image();
    	myImg.src = imageName;
    	obj.style.width = myImg.width+'px';
    }
    </script>

  3. #3
    Join Date
    Jul 2007
    Posts
    461
    Cool, thanks so much Malgrim. Does this method also work if image is smaller.

    I ask because I noticed the (myImg.width+'px') line.


    Edit: Actually how would I add the height tag as well it seems to be giving me issues.. Thanks
    Last edited by theflyingminst; 07-15-2009 at 03:36 PM.

  4. #4
    Join Date
    Jun 2008
    Posts
    62
    I'm not quite following you.

    The line simply takes the width of the new picture (in pixels) and applies it to the containing div-element, whether this used to be larger or smaller doesn't matter. The +'px' is just adding the unit, since width:100 is rather meaningless in itself.

  5. #5
    Join Date
    Jul 2007
    Posts
    461
    I think my problem is the example I sent you is a simplified version of what I'm trying to do but when I implement it in my "bigger" code it doesn't seem to resize properly.

    function changeIt(imageName,objName)
    {
    var obj = document.getElementById(objName);
    var imgTag = "<img src='"+imageName+"' width='100&#37;' height='100%' border='0' />";
    obj.innerHTML = imgTag;
    var myImg = new Image();
    myImg.src = imageName;
    obj.style.width = myImg.width+'px';
    obj.style.width = myImg.height+'px';
    return;
    }

    This span is a hidden div at first and has visibility turned on-onclick:

    <span class="drsElement drsMoveHandle" id="256a" style="position:absolute; top:310px; left:77px; width: 176px; height: 159px; z-index:2; visibility:hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
    <img src="image.jpg" width="100%" height="100%" border="0" />
    </span>
    Last edited by theflyingminst; 07-15-2009 at 03:46 PM.

  6. #6
    Join Date
    Jun 2008
    Posts
    62
    Not having read everything, this strikes me as a potential source of the problem:

    Code:
    obj.style.width = myImg.height+'px';

  7. #7
    Join Date
    Jul 2007
    Posts
    461
    When I take away the height code, the image changes EXTREMELY lopsided, when I add the line back it's just a tad.

    Edit: I cleared the cache and retried it and now the image is disappearing altogether.. I'm assuming because of the visibility being set to hidden.

    I tried adding this: obj.style.visibility = myImg="visible";

    and it's still doing the same thing
    Last edited by theflyingminst; 07-15-2009 at 04:32 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles