mimicking iPhone main screen slide in JavaScript

Question

I'd like to mimick iPhone main screen in JavaScript on Safari / Chrome / Firefox.

By mimicking I mean: - Having a couple of pages - Switching between the pages by clicking & dragging / swiping with my mouse - Having those dots from the bottom iPhone main screen displaying which page it is

The closest to what I want is: http://jquery.hinablue.me/jqiphoneslide/ But the sliding doesn't work nearly as good as in iPhone (i have to slide first, and the animation appears after i release the mouse button), and there are no dots at the bottom.

Answer 1

I solved the problem by using jQuery & jquery.slide-0.4.3.js .

jQuery Slide automatically slides between each page, so I had to add a mouse event (onMouseDrag) that stops automatic slide & reacts to user. It works very well.

This is what I added to jSlide

var jSlide = function(element, options)
    {


    element = $(element);

    $('ul.layers li', element).sliderDisableTextSelect();

    // my code here

    var dragging = false;
    var srcX;
    var offsetX;
    var diff; 



    this.manualDown = function(event) {
       dragging = true;
       srcX = event.pageX;
       offsetX =  parseFloat($('ul.layers li', element).css('marginLeft'));

       obj.settings.easing = "easeOutExpo";

       if(obj.settings.loopNr != null) {
           obj.toggleLoop(0);
       };



       return false;
    };

    this.manualMove = function(event) {     
       if (dragging) {
           diff = event.pageX - srcX;
           $('ul.layers li', element).css('marginLeft',(offsetX+diff)+'px');
           console.log((offsetX+diff)+'px');
       };           
       return false;
    };

    this.manualUp = function(event) {
      if (dragging) {
        dragging = false;


        if ((diff<-obj.settings.layerWidth/5) && (obj.settings.slidePos<obj.settings.layersSize-1)) {
            obj.slideTo(parseInt(obj.settings.slidePos)+1);
        } else if ((diff>obj.settings.layerWidth/5) && (obj.settings.slidePos>0)) {
            obj.slideTo(parseInt(obj.settings.slidePos)-1);
        } else { // if not slid far enough nor is it the last slide 
            obj.slideTo(obj.settings.slidePos);
        };
      };
    };

    this.manualLeave = function(event) {
      if (dragging) {
        dragging = false;

        if ((diff<0) && (obj.settings.slidePos<obj.settings.layersSize-1)) {
            obj.slideTo(parseInt(obj.settings.slidePos)+1);
        } else if ((diff>0) && (obj.settings.slidePos>0)) {
            obj.slideTo(parseInt(obj.settings.slidePos)-1);
        } else { // if it's the last slide 
            obj.slideTo(obj.settings.slidePos);
        };
      };

    };


    element.mousedown(this.manualDown);
    element.mousemove(this.manualMove);
    element.mouseup(this.manualUp);
    element.mouseleave(this.manualLeave);

And also, to prevent text selection when dragging with mouse I added before jSlide class declaration:

  $.extend($.fn.disableTextSelect = function() {
        return this.each(function(){
            if($.browser.mozilla){//Firefox
                $(this).css('MozUserSelect','none');
            }else if($.browser.msie){//IE
                $(this).bind('selectstart',function(){return false;});
            }else{//Opera, etc.
                $(this).mousedown(function(){return false;}); // this is handled in jSlide
            }
        });
    });

    $.extend($.fn.sliderDisableTextSelect = function() {
        return this.each(function(){
            if($.browser.mozilla){//Firefox
                $(this).css('MozUserSelect','none');
            }else if($.browser.msie){//IE
                $(this).bind('selectstart',function(){return false;});
            }else{//Opera, etc.
        //      $(this).mousedown(function(){return false;}); // this is handled in jSlide
            }
        });
    });

I'm not sure if all the code is necessary... most probably you'll still need to tweak it after pasting into jquery.slide, but it should get you started..