Results 1 to 4 of 4

Thread: Pausing up-down scroller

  1. #1
    Join Date
    Sep 2006
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Pausing up-down scroller

    1) Script Title: Pausing up-down scroller

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

    3) Describe problem: I want to use this script as an external.htm file to display on the main page but for some reason it work fine in FF but not IE. on IE it only disply 1 word per line doesn't matter if I change the width size.

    On the main page i use the following script to fetch the external.htm file

    Code:
    <tr>
    <td class="$bgclass"> 
    
    <!--<IFRAME> ticker- By Dynamic Drive-->
    <!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
    <!--This credit MUST stay intact for use-->
    
    <iframe id="tickermain" src="external.htm" width=150 height=120 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>
    
    </td>
    </tr>
    On external.htm file

    Code:
    <html>
    <head>
    
    
    <script type="text/javascript">
    
    /*Start Edit Content Here*/
    
    var pausecontent=new Array()
    pausecontent[0]='<a href="http://www.google.com">Googl</a><br />Google Search Enginge'
    pausecontent[1]='<a href="http://www.google.com">Google</a><br />Google Search Engigdh!'
    pausecontent[2]='<a href="http://www.google.com" target="_new">Google</a><br />Google Search engihdf'
    
    /*End Edit Content Here*/
    
    </script>
    
    <script type="text/javascript">
    
    /***********************************************
    * Pausing up-down scroller-  Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    
    function pausescroller(content, divId, divClass, delay){
    this.content=content //message array content
    this.tickerid=divId //ID of ticker div to display information
    this.delay=delay //Delay between msg change, in miliseconds.
    this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
    this.hiddendivpointer=1 //index of message array for hidden div
    document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
    var scrollerinstance=this
    if (window.addEventListener) //run onload in DOM2 browsers
    window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
    else if (window.attachEvent) //run onload in IE5.5+
    window.attachEvent("onload", function(){scrollerinstance.initialize()})
    else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
    setTimeout(function(){scrollerinstance.initialize()}, 500)
    }
    
    // -------------------------------------------------------------------
    // initialize()- Initialize scroller method.
    // -Get div objects, set initial positions, start up down animation
    // -------------------------------------------------------------------
    
    pausescroller.prototype.initialize=function(){
    this.tickerdiv=document.getElementById(this.tickerid)
    this.visiblediv=document.getElementById(this.tickerid+"1")
    this.hiddendiv=document.getElementById(this.tickerid+"2")
    this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
    //set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
    this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
    this.getinline(this.visiblediv, this.hiddendiv)
    this.hiddendiv.style.visibility="visible"
    var scrollerinstance=this
    document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
    document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
    if (window.attachEvent) //Clean up loose references in IE
    window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
    setTimeout(function(){scrollerinstance.animateup()}, this.delay)
    }
    
    
    // -------------------------------------------------------------------
    // animateup()- Move the two inner divs of the scroller up and in sync
    // -------------------------------------------------------------------
    
    pausescroller.prototype.animateup=function(){
    var scrollerinstance=this
    if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
    this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
    this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
    setTimeout(function(){scrollerinstance.animateup()}, 50)
    }
    else{
    this.getinline(this.hiddendiv, this.visiblediv)
    this.swapdivs()
    setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
    }
    }
    
    // -------------------------------------------------------------------
    // swapdivs()- Swap between which is the visible and which is the hidden div
    // -------------------------------------------------------------------
    
    pausescroller.prototype.swapdivs=function(){
    var tempcontainer=this.visiblediv
    this.visiblediv=this.hiddendiv
    this.hiddendiv=tempcontainer
    }
    
    pausescroller.prototype.getinline=function(div1, div2){
    div1.style.top=this.visibledivtop+"px"
    div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
    }
    
    // -------------------------------------------------------------------
    // setmessage()- Populate the hidden div with the next message before it's visible
    // -------------------------------------------------------------------
    
    pausescroller.prototype.setmessage=function(){
    var scrollerinstance=this
    if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
    setTimeout(function(){scrollerinstance.setmessage()}, 100)
    else{
    var i=this.hiddendivpointer
    var ceiling=this.content.length
    this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
    this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
    this.animateup()
    }
    }
    
    pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
    if (tickerobj.currentStyle)
    return tickerobj.currentStyle["paddingTop"]
    else if (window.getComputedStyle) //if DOM2
    return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
    else
    return 0
    }
    
    </script>
    </head>
    <body>
    
    <script type="text/javascript">
    
    //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
    
    new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
    
    </script>
    
    </body></html>
    thanks for helping

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    If you're trying to serve the Pausing Scroller within an IFRAME, just use a regular IFRAME, instead of something more complex like the IFRAME ticker script. So on your page, you'd simply have something like:

    Code:
    <iframe src="external.htm" width=250 height=200 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>
    And for external.htm, it should contain the complete Pausing Scroller code, including the CSS at the very top.

  3. #3
    Join Date
    Sep 2006
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks ddadmin for your reply.

    I did what you suggested but still facing the same problem. IE won't display the text correctly.

    if there is a space in it, it will start a new line I.E.

    Dynamic Drive Forums - Reply to Topic (that what it should print out)

    FF display it just fine but IE would display it as follow:

    Dynamic
    Drive
    Forums
    -
    Reply
    to
    Topic

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    I just run a test of my own- it works without the word wrapping issue in IE. Please post a link to the page on your site that contains the problematic script so we can check it out.

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
  •