/    Sign up×
Community /Pin to ProfileBookmark

Change Width & Height Dynamically of Div

Copy linkTweet thisAlerts:
Jul 15.2009

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=”[COLOR=”Red”]width:200px; height:200px;[/COLOR]”>
<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>

[/CODE]

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@MalgrimJul 15.2009 — The height get's adjusted automatically, so just remove the height property from the style. As for the width, this should work
[code=html]<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>[/code]
Copy linkTweet thisAlerts:
@theflyingminstauthorJul 15.2009 — 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
Copy linkTweet thisAlerts:
@MalgrimJul 15.2009 — 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. ?
Copy linkTweet thisAlerts:
@theflyingminstauthorJul 15.2009 — 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:

[COLOR="Red"]<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>[/COLOR]
Copy linkTweet thisAlerts:
@MalgrimJul 15.2009 — Not having read everything, this strikes me as a potential source of the problem:

obj.style.width = myImg.height+'px';
Copy linkTweet thisAlerts:
@theflyingminstauthorJul 15.2009 — 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
×

Success!

Help @theflyingminst spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...