0

I am using the ascensor.js plugin to scroll through sections of content on a grid. I am trying to step through each section in sequence as the user scrolls the mouse wheel. It seems as though this should be possible using the settings, and I thought I'd done it once already in a much earlier iteration; but I cannot seem to make this work again. Admittedly, it may have been a different plugin.

Ascensor Homepage: http://kirkas.ch/ascensor/#Home Ascensor at GitHub: https://github.com/kirkas/Ascensor.js

I have defined the positions of my sections in an array.

  var ascensor = $('#grid').ascensor({ direction: [[0,0],[1,0],[1,1],[1,2],[1,3],[2,0],[2,1],[2,2],[3,0],[3,1],[4,0]] });
  var ascensorInstance = $('#grid').data('ascensor');

  $(".links li").click(function(event, index) {
        ascensorInstance.scrollToFloor($(this).index());
  });

  $(".links li:eq("+ ascensor.data("current-floor") +")").addClass("selected");
    ascensor.on("scrollStart", function(event, floor){
        $(".links li").removeClass("selected");
        $(".links li:eq("+floor.to+")").addClass("selected");
  });

  $(".prev").click(function() {
        ascensorInstance.prev();
  });

  $(".next").click(function() {
        ascensorInstance.next();
    });

  $(".direction").click(function() {
        ascensorInstance.scrollToDirection($(this).data("direction"));
    });

...and these are my variables inside the plugin:

 var defaults = {
    ascensorFloorName: false,
    childType: 'section',
    windowsOn: 0,
    direction: 'chocolate',
    loop: 'increment-x',
    width: '100%',
    height: '100%',
    time: 500,
    easing: 'linear',
    keyNavigation: true,
    queued: false,
    jump: true,
    ready: false,
    swipeNavigation: 'mobile-only',
    swipeVelocity: 0.7,
    wheelNavigation: true,
    wheelNavigationDelay: 40,
  };

This is my HTML. Currently, I can only scroll vertically through the first slides ([0,0],[1,0], [2,0]...).

<div id="home-grid">
    <section id="1a" class="active floor floor-1"></section>
    <section id="2a" class="floor floor-2"></section>
    <section id="2b" class="floor floor-3"></section>
    <section id="2c" class="floor floor-4"></section>
    <section id="2d" class="floor floor-5"></section>
    <section id="3a" class="floor floor-6"></section>
    <section id="3b" class="floor floor-7"></section>
    <section id="3c" class="floor floor-8"></section>
    <section id="4a" class="floor floor-9"></section>
    <section id="4b" class="floor floor-10"></section>
    <section id="5a" class="floor floor-11"></section>
</div>
user984464
  • 67
  • 2
  • 7
  • And.... why don't you just use something which is actually designed for that purpose like [fullPage.js](http://alvarotrigo.com/fullPage/)? – Alvaro Jul 16 '15 at 17:17
  • I needed a solution that would handle grid scrolling. The 'pages' of content are stacked in a half pyramid formation. I didn't see anything in fullpage.js that did queued or 'diagonal' scrolling. As of now, I can accomplish what fullpage.js does with ascensor. I just can't figure out how to make it scroll through the entire array in sequential order. Right now, it only scrolls through the 'pages' in the first position in each row. – user984464 Jul 16 '15 at 19:02
  • I can only think about recommending you to look for some plugin to deal with mouse wheel scrolls. If you do it yourself you will have troubles with kinetic scrolling (Apple laptops, some pc laptops and some mouses). It would also get a bit more complicated if you also want to deal with touch screen computers or devices. – Alvaro Jul 17 '15 at 09:50
  • Thanks for the suggestion. I thought maybe I'd have to resort to an additional plugin. Upon deeper research, I stumbled onto a few fairly old articles which stated that there was info 'missing' from the documentation. I tried 'ascensorMap'' in conjunction with 'direction: "chocolate" ' with no luck. The tutorials and examples out there seem to be outdated. The naming conventions have even changed. I emailed the author of the plugin with my question. If he answers back, I'll post the solution here. Thanks for your help! I'll look for another solution. – user984464 Jul 17 '15 at 15:03

0 Answers0