Dynamically resize div using JS

Maharg105

Hey Guys,

I've been asking about on various forums and no one seems to be able to figure this out.

I've currently got a twitter ticker in my right hand navigation bar and I am dynamically resizing it to make sure that it is the same height as the main content.

I am using the following code to achieve this;

<!--
window.onload=function() {
var divh = document.getElementById('center_bar').offsetHeight;
var target1 = document.getElementById('twitter-ticker');
var target2 = document.getElementById('tweet-container');
target1.style.height = (divh+13) + "px";
target2.style.height = (divh-43) + "px";
}
//-->

When I first load the page or do a hard refresh this works absolutely fine. But when I am navigating around the site, the ticker will revert to the height defined by my stylesheet.

I have tried preventing caching of the page through HTML and JS and neither has had an effect. It must be something to do with this specific element because I have tried changing the code to target my footer (a much simpler element) and it behaves as expected everytime.

Also, quite strangely, if I add the following code to the JS

var divg = document.getElementById('tweet-container').offsetHeight;
alert(divg);

Then the alert tells me that the twitter div now has a height of 505px, which it should be. But in actual fact it only appears as 300px (as defined by CSS).

I'm not entirely sure what's happening here. I can only assume that it is the fact that the twitter tickers content is also being generated by JS that is causing some kind of conflict. But I am clean out of ideas.

Anyway, I hope all of that made sense and I would hugely grateful for any help anyone could give me.

Thanks,

Maharg105

As always, sods law dictated that as soon as I asked the question. I figured out the answer. It seemed to have something to do with the fact that I was calling and defining the function at the same time.

I changed my code to the following;

<!--
function twitter() {
var divh = document.getElementById('center_bar').offsetHeight;
var target1 = document.getElementById('twitter-ticker');
var target2 = document.getElementById('tweet-container');
target1.style.height = (divh+13) + "px";
target2.style.height = (divh-43) + "px";
}

window.onload=twitter();
//-->

and it's all working perfectly. If anyone could explain why this is the case, to expand my understanding, I would be very much obliged.

Thanks, as always, people,