Question

I am looking at writing a cookie that will be updated everytime the ‘news scroller’ moves to the next image/news item. when a user returns to the page it will automatically then start the scroller from the next news item.. helping to ensure our users get to see all the items.

i am using the ‘anything scroller’ by chris coyier et al, with php to pull in the news data.

each

element has a unique id and are in numerical order so my cookie needs to retrieve the latest value and then +1 . the scroller allows for triggers to specific items.. but i can’t seem to get the cookie to update on each, moreover it loads once the maximum id of those rendered in html…

is this even practical? assuming a maximum of 10 news items, would it slow the website down.

edit this is the could trying to get some output to the browser / console… but nothing.

       <script>
      // Set up Sliders
      // **************
      $(function(){
      $('#slider').anythingSlider({
      theme : 'minimalist-round',
      easing : 'swing',
      infiniteSlides : true,
      delay : 8000, // How long between slideshow transitions in AutoPlay mode (in milliseconds)
      resumeDelay : 8000, // Resume slideshow after user interaction, only if autoplayLocked is           true (in milliseconds).
      animationTime : 1, // How long the slideshow transition takes (in milliseconds)
      autoPlayLocked : true, // If true, user changing slides will not stop the slideshow
      })
      $('#slider').bind('slide_complete', function(event, slider){
      console.debug( 'You are on page ' + slider.currentPage );
      // Do something else
      })
      });
      </script>

Answer 1

solution: using local storage this works

  <script type="text/javascript">
  var ls = null, // local storage
  sp = 1;    // starting page

  if ('localStorage' in window && window['localStorage'] !== null) {
  ls = window.localStorage;
  sp = ls.getItem('anythingSlider') || 1;

  }
  </script>

and

  <script>
         $('#slider').anythingSlider({

startPanel: sp,
// Callback when slide completes - no event variable!
onSlideComplete: function(slider) {
    if (ls) {
        ls.setItem('anythingSlider', (slider.currentPage+1));
        $('.storage').val(slider.currentPage);
    }
}
 </script>