Iframe scroller - mofify horizontal+"rewind"

[chrille112]

I'm trying to modify this script: http://dynamicdrive.com/dynamicindex...e-scroller.htm
to make it scroll hotizontally. The scrolling works great, but I can't manage the "rewinding" (make the scroller start from the beginning when it's done).
How do I do that? I know I can't use a div, so I changed to a span, but offsetWidth returns wrong size...

Please help!

/Chrille

[jscheuer1]

How do I do that? I know I can't use a div, so I changed to a span, but offsetWidth returns wrong size...

Right. There could be other problems but as far as this part goes, a span, being an inline element can have no width property or attribute. It will have an offsetWidth but, since it can't have either of the other two, it may wrap, changing its offsetWidth. So, try this:

<span><nobr>content</nobr></span>

In determining the content's offsetWidth, it is necessary in some browsers to obtain the nobr tag's offsetWidth (not the span's), most notably in FF.

[chrille112]

Right. There could be other problems but as far as this part goes, a span, being an inline element can have no width property or attribute. It will have an offsetWidth but, since it can't have either of the other two, it may wrap, changing its offsetWidth. So, try this:

<span><nobr>content</nobr></span>

In determining the content's offsetWidth, it is necessary in some browsers to obtain the nobr tag's offsetWidth (not the span's), most notably in FF.

Hi! I tried the nobr before, but it doesn't help. FF returns the correct offsetWidth, but IE returns the with of the iframe.. :/
Any ideas?

[jscheuer1]

PLEASE: Include the URL to your problematic webpage that you want help with.

I'm not sure how the iframe is influencing this as what I was talking about has to do with self contained pages. In those IE is usually happy with the outer containing element but also can use the nobr tag to get the content offsetWidth. Perhaps you are not referencing the tag (element) in a way that IE understands.

[chrille112]

PLEASE: Include the URL to your problematic webpage that you want help with.

I'm not sure how the iframe is influencing this as what I was talking about has to do with self contained pages. In those IE is usually happy with the outer containing element but also can use the nobr tag to get the content offsetWidth. Perhaps you are not referencing the tag (element) in a way that IE understands.

Hi!

I've been testing a while now, and the code below works in IE, but in FF it returns the iframe width. This is my version of "external". I have cut of some comments to save space in this post:

<span id="datacontainer" style="position:absolute;left:0px;top:0px;" onMouseover="scrollspeed=0" onMouseout="scrollspeed=cache"><nobr>
<img src="http://www.dynamicdrive.com/forums/designfiles/logo.gif"><img src="http://www.dynamicdrive.com/forums/designfiles/logo.gif"><img src="http://www.dynamicdrive.com/forums/designfiles/logo.gif"><img src="http://www.dynamicdrive.com/forums/designfiles/logo.gif"><img src="http://www.dynamicdrive.com/forums/designfiles/logo.gif"><img src="http://www.dynamicdrive.com/forums/designfiles/logo.gif"><img src="http://www.dynamicdrive.com/forums/designfiles/logo.gif"><img src="http://www.dynamicdrive.com/forums/designfiles/logo.gif"><img src="http://www.dynamicdrive.com/forums/designfiles/logo.gif"><img src="http://www.dynamicdrive.com/forums/designfiles/logo.gif"><img src="http://www.dynamicdrive.com/forums/designfiles/logo.gif"><img src="http://www.dynamicdrive.com/forums/designfiles/logo.gif">END
</nobr></span>
<span style="position:absolute;top: 130px; right: 0px;">Some text</span>

<script type="text/javascript">
	var scrollspeed=cache=20

	function initializeScroller(){
	dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
	dataobj.style.left="5px"
	thelength=dataobj.offsetWidth;
	scrollDiv();
	}

	function scrollDiv(){
	dataobj.style.left=parseInt(dataobj.style.left)-scrollspeed+"px"
	if (parseInt(dataobj.style.left)<thelength*(-1))
		{
		alert('left: ' + dataobj.style.left + " length: " + thelength);
		dataobj.style.left="5px"
		}
	setTimeout("scrollDiv()",40)
	}

	if (window.addEventListener)
	window.addEventListener("load", initializeScroller, false)
	else if (window.attachEvent)
	window.attachEvent("onload", initializeScroller)
	else
	window.onload=initializeScroller
	</script>

[jscheuer1]

That is exactly what I was first talking about. In FF the offsetWidth of the nobr tag must be queried:

thelength=dataobj.offsetWidth;

queries the span tag. This may work in FF:

thelength=dataobj.firstChild.offsetWidth;

However, due to the way that child nodes are reckoned in FF it may not get it. So, a function may need to be used:

function findNobr(obj){
if (typeof obj.tagName=='undefined'||obj.tagName.toLowerCase()!=='nobr') {
returnobj=obj.firstChild
while (typeof returnobj.tagName=='undefined'||returnobj.tagName.toLowerCase()!=='nobr')
returnobj=returnobj.nextSibling
return returnobj
}
else
return obj
}

With that function available, this will get the nobr's offsetWidth, as long as the nobr tag hasn't been left out of the markup by mistake:

thelength=findNobr(dataobj).offsetWidth;

[chrille112]

That is exactly what I was first talking about. In FF the offsetWidth of the nobr tag must be queried:

thelength=dataobj.offsetWidth;

queries the span tag. This may work in FF:

thelength=dataobj.firstChild.offsetWidth;

However, due to the way that child nodes are reckoned in FF it may not get it. So, a function may need to be used:

function findNobr(obj){
if (typeof obj.tagName=='undefined'||obj.tagName.toLowerCase()!=='nobr') {
returnobj=obj.firstChild
while (typeof returnobj.tagName=='undefined'||returnobj.tagName.toLowerCase()!=='nobr')
returnobj=returnobj.nextSibling
return returnobj
}
else
return obj
}

With that function available, this will get the nobr's offsetWidth, as long as the nobr tag hasn't been left out of the markup by mistake:

thelength=findNobr(dataobj).offsetWidth;

THANK YOU!!!! Now it works perfectly

[jscheuer1]

Funny thing though, I just ran your unmodified code here and in FF1.5.0 and IE6 inside an iframe and on its own page it worked fine, as is, with both browsers reporting about 3600 as the width.

[chrille112]

Hmm, that's strange :/
Well, it works, and I'm happy

[jscheuer1]

Hmm, that's strange :/
Well, it works, and I'm happy

Great! I've never tested this phenomenon on the newer FF, the problem I was talking about, I can only be certain occurred in older, pre 1.5 versions of FF.