Results 1 to 4 of 4

Thread: Pausing up-down Scroller as div is being replaced?

  1. #1
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Pausing up-down Scroller as div is being replaced?

    1) Script Title: Pausing up-down Scroller

    2) Script URL (on DD):

    3) Describe problem: Hello! I'm VERY new to coding AND forums so apologies if this problem sounds rediculous.

    Essentially I've been tweaking the excellent "Pausing up-down Scroller" script and found many ways to adjust it to fit my layout/needs. However, I'm using long lines of content for each array (meaning it overflows into hidden areas) and wondered if it could be paused as it leaves the viewing area just like it does when it first appears?

    The content is essentially tesimonials so the user would only be reading the first few lines, if it doesn't appeal then they can let it be replaced by the next testimonial as it scrolls past. I feel that I'm missing something REALLY basic but I have clawed my way through some of the code and don't want to destroy something that is almost fnished!

    My guess is that I need another instance of "mouseoverBol=0" somewhere but I'll let someone else be the judge! Also, I'm using Dreamweaver as I'm a graphic designer turned developer. Hence: coding issues!

    Thanks for any constructive input.

    Code:
    <style type="text/css">
    
    /*Example CSS for the two demo scrollers*/
    
    #pscroller1{
    	width: 236px;
    	height: 225px;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 100%;
    	line-height: 110%;
    	color: #FFF;
    	text-align: left;
    	margin-right: auto;
    	margin-left: auto;
    	border-top-width: 1px;
    	border-right-width: 1px;
    	border-bottom-width: 1px;
    	border-left-width: 1px;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	margin-top: 50px;
    }
    
    .Susiscroller{ //class to apply to your scroller(s) if desired
    }
    
    </style>
    
    <script type="text/javascript">
    
    /*Example message arrays for the two demo scrollers*/
    
    var pausecontent=new Array()
    pausecontent[0]='<h3>Alvro said:</h3>I think Susi is an excellent teacher. She always prepared the lessons a lot and answered all my doubts. Her lessons were really interesting and entertaining. Thanks to Susi I could improve my English much faster than in schools or colleges because she observed my difficulties and they got solved quickly. In my opinion the best thing about learning English with Susi is that she adapts perfectly her lessons to your needs. In my case the worst skills that I had in English were speaking and writing. She gave different techniques to improve these skills and besides this, she helped me to increase my vocabulary and corrected my grammar. I recommend Susi without any reservation as an English teacher because she helped so much and I learnt to like English even more.'
    pausecontent[1]='<h3>Raquel said:</h3>Susi has helped me a lot with my pronunciation which was my biggest problem. I speak more fluently now and my comprehension is better too, when I hear other people talking. We have done a great deal of work on my grammar. Susi designs the lesson especially for me and she is flexible if I want do something else, or ask her questions. She has been particularly helpful, assisting me with my job search, working on my CV and application forms. Our lessons are fun and relaxed.'
    pausecontent[2]='<h3>Laraba said:</h3>My tutor is a good teacher. She is understanding and kind. She asks your opinion - did you enjoy the teaching? She works at your level and checks you understand. I am so happy to have her helping me.'
    
    </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()}, 100)
    }
    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>

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    I think this is more practical

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    
    /*Example CSS for the two demo scrollers*/
    
    #pscroller1{
    width: 200px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: lightyellow;
    }
    
    #pscroller2{
    width: 350px;
    height: 20px;
    border: 1px solid black;
    padding: 3px;
    }
    
    #pscroller2 a{
    text-decoration: none;
    }
    
    .someclass{ //class to apply to your scroller(s) if desired
    }
    
    </style>
    
    <script type="text/javascript">
    
    /*Example message arrays for the two demo scrollers*/
    
    var pausecontent=new Array()
    pausecontent[0]='<h3>Alvro said:</h3>I think Susi is an excellent teacher. She always prepared the lessons a lot and answered all my doubts. Her lessons were really interesting and entertaining. Thanks to Susi I could improve my English much faster than in schools or colleges because she observed my difficulties and they got solved quickly. In my opinion the best thing about learning English with Susi is that she adapts perfectly her lessons to your needs. In my case the worst skills that I had in English were speaking and writing. She gave different techniques to improve these skills and besides this, she helped me to increase my vocabulary and corrected my grammar. I recommend Susi without any reservation as an English teacher because she helped so much and I learnt to like English even more.'
    pausecontent[1]='<h3>Raquel said:</h3>Susi has helped me a lot with my pronunciation which was my biggest problem. I speak more fluently now and my comprehension is better too, when I hear other people talking. We have done a great deal of work on my grammar. Susi designs the lesson especially for me and she is flexible if I want do something else, or ask her questions. She has been particularly helpful, assisting me with my job search, working on my CV and application forms. Our lessons are fun and relaxed.'
    pausecontent[2]='<h3>Laraba said:</h3>My tutor is a good teacher. She is understanding and kind. She asks your opinion - did you enjoy the teaching? She works at your level and checks you understand. I am so happy to have her helping me.'
    
    </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(){ clearTimeout(scrollerinstance.to); scrollerinstance.mouseoverBol=1; }
    document.getElementById(this.tickerid).onmouseout=function(){
      scrollerinstance.to=setTimeout(function(){
       scrollerinstance.animateup();
       scrollerinstance.mouseoverBol=0;
       },50);
     }
    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"
    scrollerinstance.to=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)
    document.write("<br />")
    
    </script>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    UncleVagrant (06-13-2012)

  4. #3
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Cheers for your help. Could I be a pain and ask which lines you changed as its a bit of a Where's Wally challenge for me!

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    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(){ clearTimeout(scrollerinstance.to); scrollerinstance.mouseoverBol=1; }
    document.getElementById(this.tickerid).onmouseout=function(){
      scrollerinstance.to=setTimeout(function(){
       scrollerinstance.animateup();
       scrollerinstance.mouseoverBol=0;
       },50);
     }
    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"
    scrollerinstance.to=setTimeout(function(){scrollerinstance.animateup()}, 50)
    }
    else{
    this.getinline(this.hiddendiv, this.visiblediv)
    this.swapdivs()
    setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
    }
    }
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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
  •