Can you tell me why this doesn't work?

[Foamcow]

I wrote a quick and dirty function yesterday that resized a div to the height of it's parent. I hardcoded the div ID in to the function, grabbed the height, grabbed the parent ID and its height, calculated the difference then added some padding on to the original div.
It worked perfectly for what I needed at the time.

Here is the original function

	function balanceBox(){
			//get the height of the div
			var sportBox = document.getElementById('sportRelief');
			sportBoxHeight = sportBox.clientHeight;
			//get the height of the parent div
			var parentBox = sportBox.parentNode;
			parentBoxHeight = parentBox.clientHeight;
			var additionalPadding = parentBoxHeight - sportBoxHeight;
			sportBox.setAttribute('style','padding-bottom:' + additionalPadding + 'px;');
		}

This morning I thought that I should abstract it a little.
But the function no longer works.

Here is the new code

function balanceBox(element){
	//get the height of the div
	var thisBox = document.getElementById(element);
	var thisBoxHeight = thisBox.clientHeight;
	//get the height of the parent div
	var parentBox = thisBox.parentNode;
	parentBoxHeight = document.parentBox.clientHeight;
	//work out hw much extra padding to add
	var additionalPadding = parentBoxHeight - thisBoxHeight;
	thisBox.setAttribute('style','padding-bottom:' + additionalPadding + 'px;');
}

If I pass the ID of the original div to the function it grabs the element OK but fails on the next line.
I'm guessing that I've made a real fundamental error here but don't understand how the function worked with a hardcoded element id and not when I pass one to it as a function parameter.

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[tsuji]

>parentBoxHeight = document.parentBox.clientHeight;
I think document is redundant and make the reference goes astray. Should it not be this?
[tt]parentBoxHeight = parentBox.clientHeight;[/tt]

 

[Foamcow]

I've figured out that it's something to do with the fact I am using an addLoadEvent function to allow me to specify a few functions to run at the window.onload event

This doesn't seem to like me passing a parameter to the function so it's not seeing which element I am trying to manipulate.

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[cLFlaVA]

where are you referencing the addLoadEvent?



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[kaht]

This doesn't seem to like me passing a parameter to the function

Here's why it works the way it does:

function blah() {
   alert("test");
   return 1;
}

window.onload = [b]blah[/b];

[i][gray]//This declaration says assign the "object" blah (yes, functions are treated as objects in javascript) to the onload handler.  This causes the blah function to be ran after the page has loaded because it has a reference to the function[/gray][/i]

window.onload = [b]blah()[/b];
[i][gray]//This declaraction says run the function blah and return it's result to the onload handler.  In the function blah we are returning 1 - so this is the same as saying [b]window.onload = 1[/b][/gray][/i]

So, what this means is that you can't put () after your function names when assigning it to a handler via javascript, because what you actually want to pass is a reference to the function, not the result from the function. Sadly, this means that we can't pass parameters to functions that are dynamically assigned to event handlers this way.

Fortunately, there is workaround. What you need to do is create a new function that makes a call to the function you actually want to run. This allows you to pass as many parameters to the function as you would like. Here's an example:

function blah(str) {
   alert(str);
}

window.onload = function () {
   blah("FOAMCOW, PLEASE LEAVE THE FORUM");
};

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[Foamcow]

The addLoadEvent is being called from the HTML document.

The javascript functions are in an external file that is linked to from the HTML, before the call.

I can work around this by not using the addLoadEvent function if necessary. The problem is certainly that the parameter on the function is not being passed to the function. I'm just trying to make this as open ended as possible as I am building something that might end up being used with an existing, low end CMS (read, classic ASP and an Access DB). Someone else will be running the site and I want to 'wash and go' as it were


Here is the addLoadEvent function. I've just ripped this from "Dom Scripting" a while back. It's worked OK for me in the past but I don't really do a huge amount of JS in my work.

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}



function balanceBox(element){
	var element = "sportRelief"; //temporary hard coded value
	//get the height of the div
	var thisBox = document.getElementById(element);
	var thisBoxHeight = thisBox.clientHeight;
	//get the height of the parent div
	var parentBox = thisBox.parentNode;
	parentBoxHeight = parentBox.clientHeight;
	//work out hw much extra padding to add
	var additionalPadding = parentBoxHeight - thisBoxHeight;
	thisBox.setAttribute('style','padding-bottom:' + additionalPadding + 'px;');
}

You'll see that the balanceBox function has a hard coded element ID in there for now... plus it won't work in IE, but that's not an insurmountable problem.

Heck, I could do this with a CSS class and an alternative background image. But I am trying to cover all eventualities such as the DIV being a different width etc.

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[kaht]

So, you were trying to add the balanceBox function to the onload event with the addLoadEvent function like this?

addLoadEvent(balanceBox("sportRelief"))

You will run into the same problem as what I described above, the balanceBox function will run and pass it's result as the parameter to the addLoadEvent function. The addLoadEvent function is expecting a reference to a function as a parameter. I'm not sure if you can declare a function in a function call as a parameter. If so, you can try this.:

addLoadEvent(function () {balanceBox("sportRelief")})

[i][gray]//if that doesn't work, then you can do this:[/gray][/i]
var a = function () {balanceBox("sportRelief")}
addLoadEvent(a);

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[Foamcow]

Aha!

Cheers Kaht. I think I understand that.
I'll read it through a few times and try the workarounds.



<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[Foamcow]

Actually, that makes perfect sense!

I went with the second method - obvious really! Cheers!

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[kaht]

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[Foamcow]

I gave you a credit in the code ;-)

	<script type="text/javascript">
	var resizethebloominsportreliefbox = function () {balanceBox("sportRelief")} // cheers kaht!
	
	addLoadEvent(resizethebloominsportreliefbox);
	addLoadEvent(sectorTexts);
	</script>

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[kaht]

Sweet, I got to have my handle on the same line as a variable declaration with the word "bloomin" in it. I can honestly say that's never happened before.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[Foamcow]

You are truly blessed.

Wanna buy a jeep?

<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[kaht]

Sorry, I'm a truck-kind-of-guy. Something about getting soaked on the way to work when it's raining doesn't sound too fun

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]