www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Javascript replacement for <marquee>

  1. #1
    Join Date
    Feb 2007
    Posts
    11

    Javascript replacement for <marquee>

    Hi,

    I am creating a site http://www.michaelgaisford.com/

    Currently I am using the Marquee tag to power the moving images on the left side of 3 of the pages (Home, About, Contact).

    I don't want to use <marquee> as it is proprietary and invalid and doesn't work consistently across browsers.

    is there a simple Javascript replacement for this, the script would need to take a long list of images and loop through them vertically.

    Would be willing to pay for this as it is for a paying client's site.

    Thanks for reading

    Tom Willmot

  2. #2
    Join Date
    Feb 2004
    Location
    London UK
    Posts
    248

  3. #3
    Join Date
    Feb 2007
    Posts
    11
    Have already searched, all the ones I have found have loaded the images from an array, I need one that can do this with a list of images wrapped in <div> and <a>

    Sorry for not putting this in original post

  4. #4
    Join Date
    Feb 2007
    Posts
    11
    Web standards are high on my list of priorities, would prefer the script to be in a separate file and work unobtrusively.

    Tom

  5. #5
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    See if this example is any good for you

    http://www.huntingground.freeserve.c...mgscroll3v.htm
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  6. #6
    Join Date
    Feb 2007
    Posts
    11
    Unfortunately that script needs the images in an array, I don't have control over the which images might appear as the site is dynamic. I am looking for a script that can parse the html and scroll all images in <div id="scroll">.

    Thanks fro your reply though

  7. #7
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Give this a try, place your content within the div

    Code:
    <script type="text/javascript">
    
    step=1
    timerDown="" 
    
    onload=function scrollDivDown(){
    el=document.getElementById("scroll")
    clearTimeout(timerDown) 
    el.scrollTop+=step
    timerDown=setTimeout("scrollDivDown()",10)
    
    if(el.scrollTop>=el.scrollHeight-el.offsetHeight){
    el.scrollTop=0
    }
    
    }
    
    </script> 
    
    
    <DIV id="scroll" style="width:250px; height:550px; overflow:hidden">
    
    
    </DIV>
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  8. #8
    Join Date
    Feb 2007
    Posts
    11
    Brilliant as ever, works without fault, thanks a lot

    on a sidenote, would it be difficult to have it remember its position when changing pages?

    Tom

  9. #9
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Give this example try.

    Remove my previous script and place this in the head section of your page

    Code:
    <script type="text/javascript" src="divscroller.js"></script>
    add

    Code:
    onload="initDivScroller()" onunload="savePosY()"
    to the opening body tag

    save the following code as divscroller.js and place in the same directory as the file

    Code:
    step=2
    
    timer=""
    expdays=365
    cookieName="divscroller2"
    
    function initDivScroller(){
    divScroller=document.getElementById("scroll")
    
    posY=getCookie(cookieName)
    
    if(posY){
    divScroller.scrollTop=posY
    }
    
    scrollDivUp()
    
    }
    
    function scrollDivUp(){
    clearTimeout(timer) 
    divScroller.scrollTop+=step
    
    if(divScroller.scrollTop>=divScroller.scrollHeight-divScroller.offsetHeight){
    divScroller.scrollTop=0
    }
    
    timer=setTimeout("scrollDivUp()",50)
    }
    
    function savePosY(){ // added function
    var expdate = new Date ()
    expdate.setTime (expdate.getTime() + (expdays*24*60*60*1000))
    
    var y = (document.getElementById("scroll").scrollTop)
    Data=y
    setCookie(cookieName,Data,expdate)
    }
    
    // An adaptation of Dorcht's cookie functions.
    
    function setCookie(name, value, expires, path, domain, secure){
    if (!expires){expires = new Date()}
    document.cookie = name + "=" + escape(value) + 
    ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
    ((path == null) ? "" : "; path=" + path) +
    ((domain == null) ? "" : "; domain=" + domain) +
    ((secure == null) ? "" : "; secure")
    }
    
    function getCookie(name) {
    var arg = name + "="
    var alen = arg.length
    var clen = document.cookie.length
    var i = 0
    while (i < clen) {
    var j = i + alen
    if (document.cookie.substring(i, j) == arg){
    return getCookieVal(j)
    }
    i = document.cookie.indexOf(" ", i) + 1
    if (i == 0) break
    }
    return null
    }
    
    function getCookieVal(offset){
    var endstr = document.cookie.indexOf (";", offset)
    if (endstr == -1)
    endstr = document.cookie.length
    return unescape(document.cookie.substring(offset, endstr))
    }
    
    function deleteCookie(name,path,domain){
    document.cookie = name + "=" +
    ((path == null) ? "" : "; path=" + path) +
    ((domain == null) ? "" : "; domain=" + domain) +
    "; expires=Thu, 01-Jan-00 00:00:01 GMT"
    }
    
    // add  onload="initDivScroller()" onunload="savePosY()" to the opening BODY tag
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  10. #10
    Join Date
    Dec 2006
    Posts
    17
    Quote Originally Posted by Mr J
    Give this a try, place your content within the div

    Code:
    <script type="text/javascript">
    
    step=1
    timerDown="" 
    
    onload=function scrollDivDown(){
    el=document.getElementById("scroll")
    clearTimeout(timerDown) 
    el.scrollTop+=step
    timerDown=setTimeout("scrollDivDown()",10)
    
    if(el.scrollTop>=el.scrollHeight-el.offsetHeight){
    el.scrollTop=0
    }
    }
    
    </script> 
    
    <DIV id="scroll" style="width:250px; height:550px; overflow:hidden">
    
    </DIV>
    Seems that what I'm trying to do should be simple enough - if I knew javascript! I simply want a bunch of lines of text to scroll by (kinda like movie credits) in an endless loop. The above code scrolls a bit upon page load and each time I refresh, but how to make it KEEP scrolling?

  11. #11
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  12. #12
    Join Date
    Dec 2006
    Posts
    17

    That's slick!

    and just what I need.
    • Can I use it?
    • Do I credit Mr. J?

  13. #13
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    If your happy with the script then feel free to use it
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  14. #14
    Join Date
    Dec 2006
    Posts
    17
    I'm happy, so I'll use it. Many thanks!

    Your example text said it would display 6 paragraphs - and it did. I experimented and found I could display 16 paragraphs - but no more. I wonder if I'm hitting a limit in the size of the array.

  15. #15
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Hi dagnew.

    This example will continually scroll through six messages
    This was mentioned so a visitor would know how many messages there were in the example and not intended as a limit.

    I don't think there is a limit to an array but .............

    just out of curiosity I extended the array up to 21 (using the existing array contents) and it scrolled all 21 messages
    Last edited by Mr J; 12-27-2007 at 08:29 AM.
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles