how to link slides via a menu not pagination ?

gerbenvandijk commented 11 years ago

I'd also love a method that we could use to link to a specific page. :+1: I love the transition/animation, but I'd also like to have traditional navigation on the page that functions the same way as the pagination does. Thanks!

gerbenvandijk commented 11 years ago

I think I can find a working solution already for this, I'll give it a try in a bit and paste the code here.

gerbenvandijk commented 11 years ago

I found a way to get around this.

step 1: remove all the CSS related to the pagination

step 2: disable pagination (pagination: false)

step 3: edit the JS:

Find line 223 if(settings.pagination == true) { and remove it completely
Find line 242 } which normally closes this if loop and remove it as well

step 4: Create your own pagination with the following markup

<ul class="onepage-pagination">

    <li><a data-index="2" href="#2" class="back">Go to page 2</a></li>

</ul>

gerbenvandijk commented 11 years ago

Would be cool if the source could be edited, in my opinion the click trigger for the pagination should not be disabled even when there is no pagination to be generated. Would be cool as well if we could set the class of the pagination selector ourselves, so that we don't have to change existing markup (except for adding the data-index). :+1:

gerbenvandijk commented 11 years ago

To maintain the active classes while scrolling also remove lines 110, 113, 137 and 139.

bwyss commented 11 years ago

I am also trying to get this type of behavior. I was not able to get it to work as you described above, do you have a working demo? What exactly do you mean by step 1?

gerbenvandijk commented 11 years ago

Edit onepage-scroll.css, and remove all blocks starting with ".onepage-pagination". Good luck :)

gerbenvandijk commented 11 years ago

Working demo (integrated in a quite complicated system): http://portfolio.gportdev.nl/

rubeonline commented 11 years ago

I did the stuff, like you told but it doesnt anything when i click on my menu... when i scroll it works. but not when I click. Can you help me?

gerbenvandijk commented 11 years ago

do you have a link where I can check?

rubeonline commented 11 years ago

http://www.rubeonline.de/test/ thanks for check!

Domtaholic commented 11 years ago

Hey Guys - i did it that way.

Add that function to jquery.onepage-scroll.js

$.fn.jumpTo = function(newIndex) { var el = $(this) index = $(settings.sectionContainer +".active").data("index"); current = $(settings.sectionContainer + "[data-index='" + index + "']"); next = $(settings.sectionContainer + "[data-index='" + (newIndex+1) + "']"); if(next.length < 1) { if (settings.loop == true) { pos = 0; next = $(settings.sectionContainer + "[data-index='" + (newIndex) + "']"); } else { return }

  }else {
    pos = (newIndex * 100) * -1;
  }

  current.removeClass("active")
  next.addClass("active");
  if(settings.pagination == true) {
    $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
    $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
  }

  $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
  $("body").addClass("viewing-page-"+next.data("index"))

  if (history.replaceState && settings.updateURL == true) {
    var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1);
    history.pushState( {}, document.title, href );
  }
  el.transformPage(settings, pos, newIndex);
}

It´s a copy of the moveUp with little changes.

Now add to your navigation for each point a data-target attribute. Like that.

input type="button" value="Jump to 1" data-target="1" / input type="button" value="Jump to 2" data-target="2" / input type="button" value="Jump to 3" data-target="3" /

Dont forget the tags - have to leave it here ;)

Now i´ve got that function to handle the click on these buttons.

$(".navigation > input").click(function(){ $(".main").jumpTo($(this).data("target"));
});

Works well for me.

-Domtaholic

rolfnilsson commented 11 years ago

Domtaholic: Is it the whole jumpTo function. Feels like its missing something in the end.

rolfnilsson commented 11 years ago

Or is it possible for you to upload your whole jquery.onepage-scroll.js?

Domtaholic commented 11 years ago

/* ===========================================================

jquery-onepage-scroll.js v1.1.1
===========================================================
Copyright 2013 Pete Rojwongsuriya.
http://www.thepetedesign.com *
Create an Apple-like website that let user scroll
one page at a time *
Credit: Eike Send for the awesome swipe event
https://github.com/peachananr/onepage-scroll *
License: GPL v3 *
========================================================== */

!function($){

$.support.transition = (function(){ var thisBody = document.body || document.documentElement, thisStyle = thisBody.style, support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined; return support; })();

var defaults = { sectionContainer: "section", easing: "ease", animationTime: 1000, pagination: true, updateURL: false, keyboard: true, beforeMove: null, afterMove: null, loop: false };

/------------------------------------------------/ /* Credit: Eike Send for the awesome swipe event / /------------------------------------------------*/

$.fn.swipeEvents = function() { return this.each(function() {

    var startX,
        startY,
        $this = $(this);

    $this.bind('touchstart', touchstart);

    function touchstart(event) {
      var touches = event.originalEvent.touches;
      if (touches && touches.length) {
        startX = touches[0].pageX;
        startY = touches[0].pageY;
        $this.bind('touchmove', touchmove);
      }
      event.preventDefault();
    }

    function touchmove(event) {
      var touches = event.originalEvent.touches;
      if (touches && touches.length) {
        var deltaX = startX - touches[0].pageX;
        var deltaY = startY - touches[0].pageY;

        if (deltaX >= 50) {
          $this.trigger("swipeLeft");
        }
        if (deltaX <= -50) {
          $this.trigger("swipeRight");
        }
        if (deltaY >= 50) {
          $this.trigger("swipeUp");
        }
        if (deltaY <= -50) {
          $this.trigger("swipeDown");
        }
        if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
          $this.unbind('touchmove', touchmove);
        }
      }
      event.preventDefault();
    }

  });
};

$.fn.onepage_scroll = function(options){ var settings = $.extend({}, defaults, options), el = $(this), sections = $(settings.sectionContainer) total = sections.length, status = "off", topPos = 0, lastAnimation = 0, quietPeriod = 500, paginationList = "";

$.fn.transformPage = function(settings, pos, index) {
 if ( ! $.support.transition ) {
    $(this).animate({
     'top': pos + '%'
    },400);
    return;
 }  
  $(this).css({
    "-webkit-transform": "translate3d(0, " + pos + "%, 0)",
    "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing,
    "-moz-transform": "translate3d(0, " + pos + "%, 0)",
    "-moz-transition": "all " + settings.animationTime + "ms " + settings.easing,
    "-ms-transform": "translate3d(0, " + pos + "%, 0)",
    "-ms-transition": "all " + settings.animationTime + "ms " + settings.easing,
    "transform": "translate3d(0, " + pos + "%, 0)",
    "transition": "all " + settings.animationTime + "ms " + settings.easing
  });
  $(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    if (typeof settings.afterMove == 'function') settings.afterMove(index);
  });
}

$.fn.jumpTo = function(newIndex) {
  var el = $(this)
  index = $(settings.sectionContainer +".active").data("index");
  current = $(settings.sectionContainer + "[data-index='" + index + "']");
  next = $(settings.sectionContainer + "[data-index='" + (newIndex+1) + "']");
  if(next.length < 1) {
    if (settings.loop == true) {
      pos = 0;
      next = $(settings.sectionContainer + "[data-index='" + (newIndex) + "']");
    } else {
      return
    }

  }else {
    pos = (newIndex * 100) * -1;
  }

  current.removeClass("active")
  next.addClass("active");
  if(settings.pagination == true) {
    $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
    $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
  }

  $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
  $("body").addClass("viewing-page-"+next.data("index"))

  if (history.replaceState && settings.updateURL == true) {
    var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1);
    history.pushState( {}, document.title, href );
  }
  el.transformPage(settings, pos, newIndex);
}

$.fn.moveDown = function() {
  var el = $(this)
  index = $(settings.sectionContainer +".active").data("index");
  current = $(settings.sectionContainer + "[data-index='" + index + "']");
  next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']");
  if(next.length < 1) {
    if (settings.loop == true) {
      pos = 0;
      next = $(settings.sectionContainer + "[data-index='1']");
    } else {
      return
    }

  }else {
    pos = (index * 100) * -1;
  }
  if (typeof settings.beforeMove == 'function') settings.beforeMove( current.data("index"));
  current.removeClass("active")
  next.addClass("active");
  if(settings.pagination == true) {
    $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
    $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
  }

  $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
  $("body").addClass("viewing-page-"+next.data("index"))

  if (history.replaceState && settings.updateURL == true) {
    var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1);
    history.pushState( {}, document.title, href );
  }
  el.transformPage(settings, pos, index);
}

$.fn.moveUp = function() {
  var el = $(this)
  index = $(settings.sectionContainer +".active").data("index");
  current = $(settings.sectionContainer + "[data-index='" + index + "']");
  next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']");

  if(next.length < 1) {
    if (settings.loop == true) {
      pos = ((total - 1) * 100) * -1;
      next = $(settings.sectionContainer + "[data-index='"+total+"']");
    }
    else {
      return
    }
  }else {
    pos = ((next.data("index") - 1) * 100) * -1;
  }
  if (typeof settings.beforeMove == 'function') settings.beforeMove(current.data("index"));
  current.removeClass("active")
  next.addClass("active")
  if(settings.pagination == true) {
    $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active");
    $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active");
  }
  $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
  $("body").addClass("viewing-page-"+next.data("index"))

  if (history.replaceState && settings.updateURL == true) {
    var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index - 1);
    history.pushState( {}, document.title, href );
  }
  el.transformPage(settings, pos, index);
}

function init_scroll(event, delta) {
    deltaOfInterest = delta;
    var timeNow = new Date().getTime();
    // Cancel scroll if currently animating or within quiet period
    if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {
        event.preventDefault();
        return;
    }

    if (deltaOfInterest < 0) {
      el.moveDown()
    } else {
      el.moveUp()
    }
    lastAnimation = timeNow;
}

// Prepare everything before binding wheel scroll

el.addClass("onepage-wrapper").css("position","relative");
$.each( sections, function(i) {
  $(this).css({
    position: "absolute",
    top: topPos + "%"
  }).addClass("section").attr("data-index", i+1);
  topPos = topPos + 100;
  if(settings.pagination == true) {
    paginationList += "<li><a data-index='"+(i+1)+"' href='#" + (i+1) + "'></a></li>"
  }
});

el.swipeEvents().bind("swipeDown", function(){
  el.moveUp();
}).bind("swipeUp", function(){
  el.moveDown();
});

// Create Pagination and Display Them
if(settings.pagination == true) {
  $("<ul class='onepage-pagination'>" + paginationList + "</ul>").prependTo("body");
  posTop = (el.find(".onepage-pagination").height() / 2) * -1;
  el.find(".onepage-pagination").css("margin-top", posTop);
}

if(window.location.hash != "" && window.location.hash != "#1") {
  init_index = window.location.hash.replace("#", "")
  $(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active")
  $("body").addClass("viewing-page-"+ init_index)
  if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active");

  next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']");
  if(next) {
    next.addClass("active")
    if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_index) + "']").addClass("active");
    $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
    $("body").addClass("viewing-page-"+next.data("index"))
    if (history.replaceState && settings.updateURL == true) {
      var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index);
      history.pushState( {}, document.title, href );
    }
  }
  pos = ((init_index - 1) * 100) * -1;
  el.transformPage(settings, pos, init_index);

}else{
  $(settings.sectionContainer + "[data-index='1']").addClass("active")
  $("body").addClass("viewing-page-1")
  if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active");
}
if(settings.pagination == true) {
  $(".onepage-pagination li a").click(function (){
    var page_index = $(this).data("index");
    if (!$(this).hasClass("active")) {
      current = $(settings.sectionContainer + ".active")
      next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']");
      if(next) {
        current.removeClass("active")
        next.addClass("active")
        $(".onepage-pagination li a" + ".active").removeClass("active");
        $(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active");
        $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, '');
        $("body").addClass("viewing-page-"+next.data("index"))
      }
      pos = ((page_index - 1) * 100) * -1;
      el.transformPage(settings, pos, page_index);
    }
    if (settings.updateURL == false) return false;
  });
}

$(document).bind('mousewheel DOMMouseScroll', function(event) {
  event.preventDefault();
  var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
  init_scroll(event, delta);
});

if(settings.keyboard == true) {
  $(document).keydown(function(e) {
    var tag = e.target.tagName.toLowerCase();
    switch(e.which) {
      case 38:
        if (tag != 'input' && tag != 'textarea') el.moveUp()
      break;
      case 40:
        if (tag != 'input' && tag != 'textarea') el.moveDown()
      break;
      default: return;
    }
    e.preventDefault();
  });
}
return false;

}

}(window.jQuery);

Please be sure to copy all of the js text.

Here my whole onepagescroll js file - it´s IE9 compatible as well ;)

Hope this helps sorry but i do not know how to attach files here^^

-Domtaholic

rolfnilsson commented 11 years ago

Thank you Domtaholic.

rubeonline commented 11 years ago

Hello Domtaholic, thanks a lot for your post. Can you make an example for a navigation item? It doesn´t work on my site...

Domtaholic commented 11 years ago

This is a example i use.

navigation

And now, as described above, add that to your document.ready function

$(".navigation > input").click(function(){ $(".main").jumpTo($(this).data("target")); });

the $(".main") have to be changed by you to your needs.

You have to be sure that these targets are available - check this by turnin on the update of the url in the plugin so you can see the different ID´s the section got.

Hope this helps.

-Domtaholic

PS: Sorry for the late answer. Quite busy the last days were

rubeonline commented 11 years ago

Yeah. I found my mistake. Thanks a lot! It works ;)

PS: No problem. Thanks for looking after it!

csantiago132 commented 10 years ago

@Domtaholic youre aweosme!!!! this fixed scroll issues on ipad and iphone. had a jquery menu and now is firing. funny thing is that i had the console open and wasn't reporting any issues, even tho the menu wasnt firing. youre the man man!

ZRktty commented 10 years ago

same problem but I cant find where is the problem. Everything seems okay... I added the jumpTo function to the onescroll.js:

$.fn.jumpTo = function(newIndex) { var el = $(this) index = $(settings.sectionContainer +".active").data("index"); current = $(settings.sectionContainer + "[data-index='" + index + "']"); next = $(settings.sectionContainer + "[data-index='" + (newIndex+1) + "']"); if(next.length < 1) { if (settings.loop == true) { pos = 0; next = $(settings.sectionContainer + "[data-index='" + (newIndex) + "']"); } else { return }

}else { pos = (newIndex * 100) * -1; }

current.removeClass("active") next.addClass("active"); if(settings.pagination == true) { $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active"); $(".onepage-pagination li a" + "[data-index='" + next.data("index") + "']").addClass("active"); }

$("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index"))

if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1); history.pushState( {}, document.title, href ); } el.transformPage(settings, pos, newIndex); }

My navigation:



              
              HELLO
              WORK
              CONNECT
              RESUMÉ

The trigger script:

Githubissues.

Githubissues is a development platform for aggregating issues.

peachananr / onepage-scroll

how to link slides via a menu not pagination ? #6