Forum Moderators: open
Is there a better way to change img height?
Here's the code:
<body style="font-family:Verdana, Geneva, sans-serif;">
<div align="center"><h2>scroll down to see RooftopView</h2></div>
<table><tr><td height="700"></td></tr></table><div style="width: 500px; margin:0 auto 0 auto;">
<div id="dTop" style="margin:0 0 0 0; "></div>
<div id="dMiddle" style="margin:0 0 0 0; height:50px; background:url(http://example.com/projects/rooftopImages/middle.gif) no-repeat; width:500px;"><h3 style="margin:0 0 0 0; padding:12px 0 0 15px; color:#666;">RooftopView</h3></div>
<div id="dBottom" style="margin:0 0 0 0;"></div>
</div><table><tr><td height="900"></td></tr></table>
<script>
function rooftop () {
var initDivV=findPos(document.getElementById('dMiddle'));
var midpoint=f_clientHeight()/2;
var currentDivV=(initDivV-f_scrollTop());
var constant=midpoint/110;
var difference=currentDivV-midpoint;
var divH=Math.round(difference/constant);
if(divH<0){
document.getElementById('dTop').style.display='none';
document.getElementById('dBottom').style.display='';//THIS PART************************************
document.getElementById('dBottom').innerHTML='<img src="http://example.com/projects/rooftopImages/bottom.gif" height="'+(-divH)+'" width="500" >';
//********************************************}
else{
document.getElementById('dTop').style.display='';
document.getElementById('dBottom').style.display='none';//AND THIS PART NEDDS BETTER METHOD *******************
document.getElementById('dTop').innerHTML='<img src="http://example.com/projects/rooftopImages/top.gif" height="'+divH+'" width="500" >';
//********************************************}
setTimeout('rooftop()', 200);
}
rooftop();//-- From <snipped>
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return curtop;
}//-- cross browser functions from -- <snipped>
function f_clientWidth() {
return f_filterResults (
window.innerWidth ? window.innerWidth : 0,
document.documentElement ? document.documentElement.clientWidth : 0,
document.body ? document.body.clientWidth : 0
);
}
function f_clientHeight() {
return f_filterResults (
window.innerHeight ? window.innerHeight : 0,
document.documentElement ? document.documentElement.clientHeight : 0,
document.body ? document.body.clientHeight : 0
);
}
function f_scrollLeft() {
return f_filterResults (
window.pageXOffset ? window.pageXOffset : 0,
document.documentElement ? document.documentElement.scrollLeft : 0,
document.body ? document.body.scrollLeft : 0
);
}
function f_scrollTop() {
return f_filterResults (
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0
);
}
function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result ¦¦ (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result ¦¦ (n_result > n_body)) ? n_body : n_result;
}
</script>
</body>
[edited by: whoisgregg at 3:17 pm (utc) on May 6, 2009]
[edit reason] Whoops, no URLs please. See TOS [webmasterworld.com] [/edit]
document.getElementById('dBottomImg').style.height = -divH+'px';
To debug this sort of thing, I would add a couple alerts to see if it's referencing the right object and to check the current value:
alert(document.getElementById('dBottomImg'));
alert(document.getElementById('dBottomImg').style.height);
alert(document.getElementById('dBottomImg').style.height); shows nothing
alert(document.getElementById('dBottomImg').style.height);
document.getElementById('dBottomImg').style.height = "10px";
alert(document.getElementById('dBottomImg').style.height);
I went ahead and put the img in <div id="dBottom"> and named it "bottom" like so:
<div id="dBottom">
<img name="bottom" src="img/bottom2.gif" height="110" width="500" >
</div>
and then changed
document.getElementById('dBottom').innerHTML='<img...
to
document.images['bottom'].height=-divH;
Thanks guys
