SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    toronto
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding 'Play' functionality to Gmail-like ticker

    ok, so here's what i would like to do:

    i have this javascript code (see below) that works like the RSS-feed ticker in gmail.

    once it's loaded, it starts playing through a number of items. it's got a pause, 'previous' and 'forward' functionality, too.

    i have been trying to find a way to start 'playing' the ticker once it's paused, but i can't seem to get it.

    hopefully someone can help me out.
    much appreciated.
    thanks.



    -----------------------------------------------


    <style type="text/css">
    .slide {
    position: absolute;
    visibility : hidden;
    }
    #slide0 {
    visibility : visible;
    }
    </style>



    <script type="text/javascript">
    //Browser check
    var DHTML = (document.getElementById || document.all || document.layers);
    if ( !DHTML ) alert('Your browser is not capable of displaying DHTML');
    function getObj(name) {
    if (document.getElementById) {
    this.style = document.getElementById(name).style;
    } else
    if (document.all) {
    this.style = document.all[name].style;
    } else
    if (document.layers) {
    this.style = document.layers[name];
    }
    }

    //Switch elements visible or hidden
    function visib(objName, flag) {
    x = new getObj(objName);
    x.style.visibility = (flag) ? 'visible' : 'hidden';
    }

    //Switch next element visible and previous hidden.
    var curImg = 0; // index of the array entry
    var lastImg = 0;

    function changeSlide ( change ) {
    if (!DHTML) return;
    curImg += change;
    if ( curImg < 0 ) curImg = slides.length-1;
    else
    if ( curImg >= slides.length ) curImg = 0;

    visib(slides[lastImg], false);
    visib(slides[curImg], true);
    lastImg = curImg;
    }

    var sec = 1 //Auto-Slide Intervals
    var stopped = 0
    var auto = setInterval("changeSlide(1)",sec*1000)

    function stopSlide() {
    if (stopped==0) {
    stopped==1
    clearInterval(auto)
    }
    }

    function startSlide() {
    if (stopped==1) {
    stopped==0
    setInterval("changeSlide(1)",sec*1000)
    }
    }

    //Array containing all element names (== pictures)
    slides=new Array()
    var i=0;
    for (i=0;i<=10;i++){
    slides[i]="slide"+i;
    }


    function outputSlider(){

    document.write('<a href="javascript:stopSlide();changeSlide(-1);" class="ftm_next">Previous</a>&nbsp;|&nbsp;<a href="javascript:stopSlide();changeSlide(1)" class="ftm_next">Next</a>&nbsp;|&nbsp;<a href="javascript:stopSlide();" class="ftm_next">Pause</a>&nbsp;|&nbsp;<a href="javascript:startSlide();" class="ftm_next">Play</a>')

    for (i=0;i<=10;i++){
    document.write('<span id="slide'+i+'" class="slide" style="width: 380px;">'+(i+1)+'</span>')
    }

    }

    </script>



    ------------------------------------------------------

    i place this code in an html file to ouput the ticker:


    <script type="text/javascript">
    outputSlider()
    </script>

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi FRANTIC,

    I just recently wrote a demo that is very similar to yours. Check it out: xSlideShow.


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
  •