Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Iframe scroller - mofify horizontal+"rewind"

  1. #1
    Join Date
    Mar 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Iframe scroller - mofify horizontal+"rewind"

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    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:

    HTML Code:
    <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?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by 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.
    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:

    Code:
    <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>

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    thelength=dataobj.offsetWidth;
    queries the span tag. This may work in FF:

    Code:
    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:

    Code:
    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:

    Code:
    thelength=findNobr(dataobj).offsetWidth;
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Code:
    thelength=dataobj.offsetWidth;
    queries the span tag. This may work in FF:

    Code:
    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:

    Code:
    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:

    Code:
    thelength=findNobr(dataobj).offsetWidth;

    THANK YOU!!!! Now it works perfectly

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Mar 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by chrille112
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •