www.webdeveloper.com
Results 1 to 2 of 2

Thread: JS Slider Auto-Scroll Help - Urgent!

  1. #1
    Join Date
    Apr 2012
    Posts
    2

    JS Slider Auto-Scroll Help - Urgent!

    Hi everyone,

    I really need urgent help with a slider I am using on a client's website. It is designed to work on Prestashop ecommerce software and is running absolutely fine (with a number of cosmetic changes I've made).

    However, my client has insisted that it 'auto-scrolls' (auto-plays) through the product list (shown at the left of the slider as thumbnails). Please see this website for the live example >> http://monebrothersdiy.co.uk. As you can see, it only works manually at the moment when you click on a thumbnails.

    There is just the 'engine'js' file in the folder that needs amending but I am not primarily a programmer and I'm not familiar with 'dojo JS'. Everything I have tried doesn't work.

    Could someone please advise on what I would need to add to make this slider auto-scroll (auto-play)?? This is rather urgent as this is the final problem to overcome before I can sign off this project. I've posted all of the .engine.js. file below.

    Many thanks in advance! If you need to see any other parts of this module, please let me know

    Code:
    dojo.require("dojo.fx");
    dojo.require("dojo.fx.easing");
    
    WWViewer = {
    };
    
    dojo.declare("WWViewer", null, {
    	constructor: function(args) {
        dojo.mixin(this,args);
        this.lock = false;
        this.node = dojo.byId(this.node);
        this.blockheight = 60;
    	  
    	  this.left = dojo.query('.WW-innerleft', this.node)[0];
    	  this.left.onselectstart = function() {return false;}
        this.left.onmousedown = function() {return false;}
    
        this.leftcontents = dojo.query('td.WW-leftcontent', this.left);
        this.leftshadows = dojo.query('td.WW-shadow', this.node);
        this.rightcontents = dojo.query('.WW-rightcontent', this.node);
        
        dojo.forEach(this.leftcontents,function(content, i){
          this.leftcontents[i].addHover = this.leftshadows[i];
          this.leftcontents[i].index = i;
          dojo.connect(content,"onmouseenter", function(){dojo.addClass(this.addHover,"WW-hover");});
          dojo.connect(content,"onmouseleave", function(){dojo.removeClass(this.addHover,"WW-hover");});
          dojo.connect(content,"onclick", dojo.hitch(this, "glideTo", i));
        }, this);
        this.start(4);
        },
        
        start: function(index){
          dojo.style(this.left, "top", -(index-2)*this.blockheight+"px");
          dojo.addClass(this.leftcontents[index],"WW-selected");
          dojo.addClass(this.leftshadows[index],"WW-selected");
          dojo.style(this.rightcontents[index],"display", "block");
          this.current = index;
        },
            
        glideTo: function(index){
          if(this.lock) return;
          this.lock = true;
          var top = dojo.style(this.left,"top");
          var move = dojo.position(this.leftcontents[index],true).y-dojo.position(this.leftcontents[this.current],true).y;
          var anim = dojo.animateProperty({node: this.left, properties: {top: top - move}, duration: this.effect, rate: 33});
          dojo.connect(anim, "onEnd", dojo.hitch(this, "movingblocks", this.leftcontents[this.current].index-this.leftcontents[index].index));
    
          anim.play();
          
          dojo.removeClass(this.leftcontents[this.current],"WW-selected");
          dojo.removeClass(this.leftshadows[this.current],"WW-selected");
          dojo.addClass(this.leftcontents[index],"WW-selected");
          dojo.addClass(this.leftshadows[index],"WW-selected");
          dojo.style(this.rightcontents[this.current],"display", "none");
          dojo.style(this.rightcontents[index],"display", "block");
          this.current = index;
        },
        
        movingblocks : function(blocknum){
          var top = dojo.style(this.left,"top");
          if(blocknum > 0){
            for(var x = 0; x < blocknum; x++){
              var t = dojo.query("table", this.left);
              dojo.place(t[t.length-1], this.left, "first");
              top-=this.blockheight;
              dojo.style(this.left,"top", top+"px");
            }
          }else if(blocknum < 0){
            for(var x = 0; x < -blocknum; x++){
              dojo.place(dojo.query("table", this.left)[0], this.left, "last");
              top+=this.blockheight;
              dojo.style(this.left,"top", top+"px");
            }
          }
          dojo.query('td.WW-leftcontent', this.left).forEach(function(content, i){
            content.index = i;
          });
          this.lock = false;
        }
    
    });

  2. #2
    Join Date
    Apr 2012
    Posts
    2
    Can anybody help?

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