Dynamic Div Height

JavaScript
1

Hi Guys,

I’ve been reading over the forums for a while now, but have only just started dipping my toe into the murky waters of javascript and wondered if you might be able to lend me a little bit of help?

I am currently trying to use Javascript to dynamically resize a navigation div (that is present on every page) according to the size of the main content div.

I am currently using the following code;


<script type="text/javascript">
<!--
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";
}
//-->
</script>

This works the first time I go to the site and if I refresh a page. However, if I use my on site navigation to switch between pages the div simply uses the height variable defined within my CSS (this needs to be here for users with JS disabled)

Does anybody have any ideas on what the problem might be. It’s as if the script is only executed the first time any page on the site is loaded, but then not again.

Thanks in advance for any help you can offer,

2

It’s using the cache version instead of reloading. I did a quick look for javascript force refresh and saw two solutions offered on the first link:

<meta http-equiv=“Pragma” content=“no-cache”>

They thought that would be best, but also offered this:

<SCRIPT LANGUAGE=JavaScript>
function now(){
window.location.reload(true);
}
</SCRIPT>

3

Hey poolmwv,

Thanks so much for dropping in. I have tried placing both;

<META HTTP-EQUIV=“CACHE-CONTROL” CONTENT=“NO-CACHE”>
and
<meta http-equiv=“Pragma” content=“no-cache”>

in the header of the page, but to no avail. The div still takes on the height defined by the style sheet unless I refresh the page. I also tried the above javascript that you very kindly suggested and this did not work either.

I’m completely stumped :frowning:

4

Just to add, if I add an alert to the function then this is displayed without the hard refresh. So the the script itself is obviously being executed whenever the page is loaded.

It’s just that the new heights are not applied to the two divs in question unless I perform a hard refresh.

Any light anyone could shed on this would be amazing.

Thanks,

5

Also, if I follow the existing script with the line

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

Then it displays the height that the div should be, but that isn’t the size that it actually appears. The new heights are not applied to the two divs in question unless I perform a hard refresh.

Christ this is confusing!

6

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,

7

You’d be better off calling an anonymous function on the onload event of the window…that way further down the track if you want to add any additional functions that trigger after the page has loaded you can easily manage it.

E.g:

instead of:

window.onload=twitter();

You could use:


window.onload = function()
{
   twitter();
   //another function
   myOtherFunc();
}