asked on 7/21/2008

Onload event where left side DIVs offsetTop values are arrayed and compared to right DIV value...

Hello Experts,

I have a three column page. In the center column, there are two-columned DIVs. I need the page to do several things onload.

First, I need the script to find the offsetTop of every left-side floated DIV and store them in an array.
Second, I need the script to find the location of the bottom of the right-side floated DIV and keep the value. This DIV actually contains two other DIVs inside that is why I need the total of the encompassing.
Third, I need the script to loop the array of left side values and compare those values to the right side value. If the value of the left is greater than the right, set the width of that DIV and every DIV after that equal to 100%.

The script you see below is the second of my tasks. Basically it loops through the page and finds the top (and left) value of the right side DIV and then adds the height of that DIV to get the location of the bottom of that DIV on the page.

If you have any other questions, please let me know.

Thanks Experts,
Brad

<script type="text/javascript">
	function findPos() {
		var obj = document.getElementById("detContFacRight");
		var objBottom = document.getElementById("detContFacRight").offsetHeight;
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			do {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
			} while (obj = obj.offsetParent)
		}
		curBot = curtop + objBottom;
		//return [curleft,curtop];
		alert('location of the Left of the DIV: ' + curleft);
		alert('location of the Top of the DIV: ' + curtop);
		alert('location of the Bottom of the DIV: ' + curBot);
	}
	window.onload = function()
	{
		findPos()
	}
//-->
</script>

Open in new window

Web Languages and Standards JavaScript

Last Comment

Brad Dobyns, CSM

7/23/2008

Brad Dobyns, CSM

7/21/2008

ASKER

I'm thinking that this will involve a two-dimensional array where the array would look something like this:

MultiArray = new Array(7);
MultiArray [0] = new Array(2);
MultiArray [0][0] =
MultiArray [0][1] =

Hopes this helps,
Brad

ASKER CERTIFIED SOLUTION

Lolly-Ink

7/23/2008

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Brad Dobyns, CSM

7/23/2008

ASKER

That is very good and thank you for finally answering my question. I wasn't sure if anyone would.

The hard part in all of this is to just use the DIVs that are a part of the problem. While all the DIVs that are floated left are the ones I need to be affected by the width change, there are many DIVs on this page.

Instead of using: var div = document.getElementsByTagName("div");
Could I instead use: var div = document.getElementsByClassName("pfProText"); ??

The reason I ask is because those DIVs that need the style.width = 100% have that class whereas all the other DIVs on the page don't. Otherwise I didn't see a change in the width when I removed the quoteDiv from the right.

Thanks,
Brad

Brad Dobyns, CSM

7/23/2008

ASKER

Well, I tweaked it a little bit (see below) but it still uses the same code you provided. I cannot thank you enough!

Thanks,
Brad

<script type="text/javascript">
	function findPos()
	{
		var getDivs = document.getElementsByTagName("div");
		var divsLeft = new Array();
		for (var i=0; i < getDivs.length; i++) {
			if (getDivs[i].className == "pfProText") {
				var curtop = 0;
				var obj = getDivs[i];
				do {
					curtop += obj.offsetTop;
				} while (obj = obj.offsetParent)
				divsLeft.push([getDivs[i], curtop]);
				//alert("Found " + getDivs[i]);
			}
		}
		var obj = document.getElementById("detContFacRight");
		var objBottom = document.getElementById("detContFacRight").offsetHeight;
		var curtop = 0;
		if (obj.offsetParent) {
			do {
				curtop += obj.offsetTop;
			} while (obj = obj.offsetParent)
		}
		curBot = curtop + objBottom;
		//alert('location of the Top of the Right DIV: ' + curtop);
		//alert('location of the Bottom of Right DIV: ' + curBot);
		var foundPos = false;
		for (var j=0; j < divsLeft.length; j++) {
			if (foundPos || (divsLeft[j][1] > curBot)) {
				foundPos = true;
				divsLeft[j][0].style.width = "100%";
			} else {
				divsLeft[j][0].style.width = "48%";
			}
		}
	}
	window.onload = function()
	{
		findPos();
	}
	//-->
	</script>

Open in new window