1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Need help with making script to be based on real time!

Discussion in 'HTML & JavaScript' started by Zoekban, Feb 6, 2015.

  1. Zoekban

    Zoekban Newbie

    Joined:
    Apr 23, 2013
    Messages:
    18
    Likes Received:
    0
    How can i add a real time counter so that the randomizing will be based on real time and will not start over from every refresh?
    Having trouble with finding a script that i can add to this to make this happen.
    Thanks from advanced!

    Code:
    <script class="jsbin" src="src">
      
    
    
    </script>
    <meta charset=utf-8 />
    <style>
      .rotator-wrapper{
        width: 0px;
        border: 0px solid black;
      }
      ul#rotator, ul#rotator li{
        float: left;
        width: x;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
      }
      ul#rotator li{
        width: 0px;
        position: relative;
      }
      .rotator-image{
        position: absolute;
        display: none;
        width: 69px;
        height: 69px;
      }
      .img1{
        background-color: red; 
      }
        .img2{
        background-color: green; 
        }
     
        
    </style>
    
    
    
    
    <div class="rotator-wrapper">
      <ul id="rotator">
        <li>
          <div class="rotator-image img1"><img src="src" /></div>
          <div class="rotator-image img2"><img src="src" /></div>
    
    
     
       
    
    
        </li>
      </ul>
    </div>
    <script>$(function(){
      // time between image rotate
      var delay = 1800000;
      
      // for each list item in 
      // the rotator ul, generate
      // show a random list item
      $('#rotator > li').each(function(){
        // save images in an array
        var $imgArr = $(this).children();
        // show a random image
        $imgArr.eq(Math.floor(Math.random()*$imgArr.length)).show();
      });
      // run the changeImage function after every (delay) miliseconds
      setInterval(function(){
        changeImage();
      },delay);
      
      function changeImage(){
        // save list items in an array
        var $liArr = $('#rotator > li');
        // select a random list item
        var $currLi = $liArr.eq(Math.floor(Math.random()*$liArr.length));
        // get the currently visible image
        var $currImg = $('.rotator-image:visible', $currLi);
        if ($currImg.next().length == 1) {
          var $next = $currImg.next();
        } else {
          var $next = $('.rotator-image:first', $currLi);
        }
        $currImg.fadeOut();
        $next.fadeIn();
      }  
    });
    </script>
    



     
  2. Gogol

    Gogol Jr. VIP Jr. VIP

    Joined:
    Sep 10, 2010
    Messages:
    3,412
    Likes Received:
    3,059
    Gender:
    Male
    You have a working JSBin link? Your problem is not clear.
     
  3. Zoekban

    Zoekban Newbie

    Joined:
    Apr 23, 2013
    Messages:
    18
    Likes Received:
    0
    Sent you the link in private
    this one, How i can make it to be based on real time, for example, if i refresh the page, so the script wont start over again, but that it will continue "online" by himself without being disturbed with refreshing or anything.
    (every time it will start from the red, I want it to start from the red/blue, depends on the color it should be from the first time i will launch the script.)
     
  4. Debugger

    Debugger Junior Member

    Joined:
    Aug 16, 2009
    Messages:
    174
    Likes Received:
    34
    Location:
    India
    hmm for that i suggest you need something call database :p to store current counter value and retrieve it on GET request and then update it store it back.