dcsimg
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

  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>

  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

  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

  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

  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 09:29 AM.

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