How do I get the pixel width of a dynamically sized div?

[tanderso]

I'm building a basic horizontal marquee scroller to fit inside of a dynamically sized table cell. Inside the cell, I have a relatively positioned div called "marquee_container" set to "width:100%". This works as expected. Inside "marquee_container", I have an absolutely positioned div called "marquee_div" which assumes the width of the text inside of it. On an interval, I change the "left" attribute of "marquee_div" so that the text scrolls, while "marquee_container" has "overflow:hidden" so that the scrolling text remains within its boundaries.

Now, the problem is that I want to restart the scrolling once the text finishes. So, if (marquee_div.style.left < (0 - marquee_div.style.width)), I want to set marquee_div.style.left = marquee_container.style.width. However, both of these widths are "100%" or "null", so I cannot calculate if the end of the string passed the left side of the container, nor set the left edge of the string to a pixel location at the right edge of the container.

Is there any way to get the pixel width of a dynamically sized div?

Sincerely,

Tom Anderson
Order amid Chaos, Inc.

http://www.oac-design.com

 

[BillyRayPreachersSon]

I'm not sure how cross-browser this is - it might be IE only, but you can use one of either:

element.style.clientWidth

or

element.style.offsetWidth

Hope this helps,
Dan

 

[tanderso]

Ok, it took a lot of work, but I got it to work with offsetWidth on IE and Mozilla. Here's the final code:

function scroll_marquee(marquee_div,marquee_speed)
{
	if (document.getElementById) // newer browsers only
	{
		if (parseInt(marquee_div.offsetLeft)<(0-marquee_div.offsetWidth)) 
                { marquee_div.style.left=marquee_div.parentNode.offsetWidth+"px"; }

		marquee_div.style.left = (parseInt(marquee_div.style.left)-marquee_speed)+"px";

		var t = setTimeout("scroll_marquee()",10);
	}
}

In addition to the basic setup function which defines the divs and starts the initial scrolling, this easily allows me to horizontally scroll in any dynamically sized area.

Sincerely,

Tom Anderson
Order amid Chaos, Inc.

http://www.oac-design.com