Hello Kirkas!! :)
Really amazing Plugin (what else can a web designer ask for??) 1. We can manage our different webpages as a full screen layout 2. We have an intuitive and easy to use navigation system and 3. the scrolling effect is fun and renders the content in an understandable way for the end user.

One thing I would like to know is regarding to the "active" link effect: when you go to some "floor" or div, you expect the corresponding text-link turns to an "active" state (changing the text color, for example).

When I use the ".links-to-floor" class method in the menu system, the corresponding script work perfectly:

ascensor.on("scrollStart", function(event, floor){
$(".links-to-floor a").removeClass("selected");

$(".links-to-floor a:eq("+floor.to+")").addClass("selected");
});

But when I try to point the link to an specific class (.example) using:

$(".exmple").click(function() {
ascensor.trigger("scrollToStage", 10);
});

I have not a clue about how to produce the "active" text-link effect at the corresponding "floor" or div.

I will apreciate to much if you give me some advice on this…
Thank you very much!
And congratulation for this awsome and usefull plugin!!

The time doesn't work the easing too ?

  var ascensor = $('#ascensorBuilding').ascensor({                                                    
    easing: 'easeInElastic',                                                                           
    time: '5500',                                                                                      

    direction: [[0,0],[0,1],[1,1],[1,0]]                                                               
  });                                                                                                  
  var ascensorInstance = $('#ascensorBuilding').data('ascensor');                                      

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

  $(".links-to-floor li:eq("+ ascensor.data("current-floor") +")").addClass("selected");               

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

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

I am seeing the new options for width and height. Can the option for top and left also be added?

I am making the change in my code but was wondering if it can also be added to the code on your end.

      // Setup floor size & position
      this.node.css({
        'position': 'absolute',
        'overflow': 'hidden',
        'top': '100px',
        'left': '100px',
        'width': this.options.width,
        'height': this.options.height
      });

I have changed to the following and added the options accordingly and it appears to work fine and not break the code any. Is this all I need to do?

      // Setup floor size & position
      this.node.css({
        'position': 'absolute',
        'overflow': 'hidden',
        'top': this.options.top,
        'left': this.options.left,
        'width': this.options.width,
        'height': this.options.height
      });

Seems that using Ascensor makes the page unprintable. Safari shows a blank print preview and Chrome give the message "Print preview failed". I don't have a Windows machine to test IE.

I'm thinking this is something to do with the positioning?

Less frenglish

I think there is some confusion about what a "floor" is. Ascensor treats all elements on the same x axis as being on the same floor.

e.g. if we have 4 pages as follows (pure horizontal navigation):
[1,0]
[1,1]
[1,2] <--- e.g. this is the current page, current index
[1,3]

ascensor reports that all of these pages would be activeFloor = 1, or "current-floor" =1.

This is good for some situations, but i would like to see a property that returns the "page" or activeIndex that we're currently on. In the example above, we are on the 3rd page, ascensor should return 3 (or 2 if it's zero-based) for this new activeIndex property.

Why?
The floor.from and floor.to properties in StartScroll and ScrollEnd report that all these pages are on the same floor as well, so you can never trap page change events that happen on the same "floor".

Unless i'm missing something, I suggest we need a new property activeIndex.

thanks.

I just wanted to see what the plugin looks like and went on http://www.waterevive.com. When I use my arrow keys to first go down and then to the right, the correct panel comes into place, but once the animation finishes, it jumps back to the first floor. The navigation is still on the "correct" panel and if I navigate from there, it jumps to the correct next floor.

I'm using the current Chrome Beta on Ubuntu.

For some reason, the hashChange listener disappear, need to be put back!

It appears that in /dist/jquery.ascensor.js as of dd7b19c there is some non breakable space which cause parsing error at least in Chrome. An example of thoses non breakable space can be found at line 704 and beyond (https://github.com/kirkas/Ascensor.js/blob/master/dist/jquery.ascensor.js#L704)

alpineconstruction.ca was developed using Ascensor.js

Note: it would be great to see parallax support added, or an example of how to integrate one of the popular parallax libs like skrollr.js or jparallax, or some other decent lib.

BTW, just saw you made some improvements such as Touchswiping and Triggering.

May I suggest putting that GitHub logo link on the page. That would make it easy for users to find. Though I know its there I often miss the text link on the home page though it is obvious. But, after being on the page so many times I think I 'know' whats on the homepage and I don't get that Visual Cue with the link if you know what I mean.

Regards,
Brian

First of all Great Plugin Love arrow navigation !!!

I thought it will be great to include working demo it could kick the learning curve up in the air.

Cheerz,
Guby

For some reason, when I call ascensor.on("scrollEnd", function(event, floor){ floor.from and floor.to are both the same value

Hi Léo,

I would like to create a similar website like Reverse Büro, where it is possible to navigate between the items (left / right) and sections (up / down) regardless which item is active, and if you switch between sections it jumps back to the first item.
I do not get it done with the new script. What is the solution?

Thanks in advance,

Koen.

http://kirkas.ch/ascensor/#Examples
Plural, so should be "Websites using ascensor "

Thanks for your neat plugin!

Seems it does not work with Android 2.3.7.
You can check it here:
https://www.manymo.com/emulators/88/connect
with http://kirkas.ch/ascensor/ in Android browser.

Hi Léo,
thanks for your great animation script!
Do you see any possibility to get ascensor.js integrated with angular.js' ngAnimate and ngRoute?
The idea would be to define routing in a single page application via ngRoute and animate transitions via ascensor.js. Seems that there is already a hook for javascripts in ngAnimate (http://docs.angularjs.org/guide/animations). But how define the respective functions?
Thanks & Cheers, Chris.

The scrollbars are pretty disturbing. And no one need them because the
jquery does the scrolling job. Please remove the scrollbars.

The bug has fixed fixed :P.

Is it possible to restrict movement on specific floors? For instance, I only want users to move up and down, rather than right and left when they are at a certain level in my site (in the portfolios) Here's a mockup to illustrate my structure / flow (https://dl.dropboxusercontent.com/u/25010219/MichaelNovia-Sitemap.jpg)

I'm using twitter-bootstrap framework.
The problem is the bottom of the scrollbar is hidden, and you can't access to the bottom of each section. To prove it I put a <h4> which indicates the end of the section, but you won't be able to see. May be I'm missing something.

Here is the fiddle: http://jsfiddle.net/zb8zB/8/ and here you can see the result in full screen mode: http://jsfiddle.net/zb8zB/8/embedded/result/.

Do you have any idea or fix to solve it? is a bug?

from issue #17

Specify next/prev/up/down target by using data-attribute if present

From the API, we can trigger the method "scrollToStage", but as it don't take time as 3rd argument, the method should use the default time property, given when the plugin is instanciated.

After line 88, you should add a line like (not tested) :

time = time || self.options.time;

As an enhancement, it would be nice to prevent the browser history from being polluted with every content section view.

I want certain scripts to run when a person reaches a specific floor on ascensor is there anyway to obtain which floor we're on?

I'm not up to date on the latest changes but I think mouse scrolling should be integrated into Ascensor. At the moment I use a plugin to call the Ascensor next()/previous() method depending on the direction one is scrolling in.

It is the natural way in which people expect to interact with the website. A lot of users get confused with the layout especially if it's a simple vertical layout.

When I use the plugin, I found that the file contains non-break space. the space made me crazy:>

Just like line 268, in the jquery.ascensor.js:

The space after 'function()' is a non-break space. There are about 10 non-break spaces, and the ten spaces may make some coders unable to use the plugin directly. So hope to be fixed~

It could be fine to have a method to get the current floor. Maybe it's already possible : how to get the value of windowsOn property ?

Léo:

Can a trigger named 'scrollToFloorName' be added? Here is the code I use:

    var $aryAscensorFloorName = ['Home','Product','Services','Activity','Home2','Product2','Services2','Activity2','Home3','Product3','Services3','Activity3'];
    var $aryAscensorDirection = [[1,0],[1,1],[1,2],[1,3],[2,0],[2,1],[2,2],[2,3],[3,0],[3,1],[3,2],[3,3]];

    var ascensor = $('#ascensorBuilding').ascensor({
        childType: 'section',
        ascensorFloorName: $aryAscensorFloorName,
        time: 250,
        windowsOn: 0,
        direction: $aryAscensorDirection,
        directionStart: "y",
        easing: 'easeInOutQuad',
        keyNavigation: true,
        loop: true,
        queued: 0,
        overflow:"hidden"
    });

    function scrollToFloorName($floorName) {
        try {
            ascensor.trigger("scrollToStage", $.inArray($floorName, $aryAscensorFloorName));
        }
        catch(err) {
              txt="The requested floor [" + $floorName +  "] does not exist. \n\n";
              txt += "Click OK to continue.\n\n";
              alert(txt);
        }
    }

An example of actioning this is:

  <div onclick="scrollToFloorName('Product')">Home</div>

Of course the try/catch is not required, without it if the floorName is not found nothing will happen.

Hi Léo,

I'm in the process of building my portfolio website using your amazing plugin. There's one thing I'm struggling with: I would like to be able to hide the navigation on certain floors.
Here you can see the work in progress: http://manifoldstudio.com/2014/
Basically, one the top floor, I'd like to only have the logo (linking to the second floor). But I can't figure out how to hide the navigation.
On the second floor, I'd like all the navigation to be visible.
And on the third and fourth floors, I'd like to only have the menu but not the left / right arrows.

Is there, by any chance, a way to achieve that? I feel like it might be something that other people might find interesting for their own project.
Any hints into the right direction would be greatly appreciated.

Cheers,

Thomas

I'm having issues with some of the pages scrolling on my website. I'm not sure if it's your code or our CSS (we suspect it's something with our code conflicting yours), but on occasion scrollable pages don't scroll and instead they just go to the next page. It doesn't happen every time and so we're rather confused by it. The website is http://www.tttkjk.com/dosxx/

(brilliant work on ascensor.js)

Ascensor is preventing default css/jquery mouseover/hover and click behavior on anchor links that are located inside page/floor divs.

For example, when i add google to a floor div, nothing happens when i cursor over the link. The cursor does not change to a hand, and also clicking on the link does not work either.

I have tried setting the CSS, etc. but no luck. It's like Ascensor is blocking the default CSS and event behavior.

// CLOSED
it turned out to be a z-index issue in the css.

For better performance.

from issue #17

Add an option to jump through floor to floor, on same axis, even if white space in between.

Noticed an issue with fixed background attachments in Firefox. Please see this link for demonstration: http://elemisdesign.com/ascensor/examples/fixed.html#Implementation I have a div with a fixed background attachment on Floor 2. It appears properly on Chrome but the image is not available in Firefox. When I move this div on the first floor, it works in Firefox too. But not when it is on other floors. Any ideas on how to fix it?

queued: false,
queuedDirection: "x"

could be

queued: false || "x" || "y"

Where the direction is specified only on one parameters

Any chance we will see Parallax support?

A good, basic tutorial is here:
http://www.webdesignerdepot.com/2013/07/how-to-create-a-simple-parallax-effect/

thanks.

replace this:

if ($("input, textarea, button").is(":focus")) return !1;

with something equivalent to this:

if ($("input, textarea, button").is(":focus")) {  
            if(key == 40 || key == 83 || key == 38 || key ==87 || key == 37 || key == 65 || key == 39 || key == 68 )
            {
                return false;
            }
        }

In order to let the form behavior intact.

Hi,

Just a general question is there a way to notify the ascensor script that dom has been updated. Im appending content to the dom dynamically and ascensor desn't seem to be picking up the new element even though I add the position to ascensorMap. Please help if possible. Thanks

Add a "ready" function as parameter when ascensor finish the setup.

floor.to and floor.from always report the same number (the floor.to value).

Its not working properly on IE when u have animation from example [1,1] to [2,2] it does not going smooth, but jelly, unstable with vibrations on it.

This has been a wonderful experience using and watching this project grow and grow to such a top level.

I noticed the site was offline a few months aback and I just came back to get some info and was pleasantly surprised to see the new site and logo. GREAT STUFF!! :)

Just 2 things I noted:

1. Two minor typos:

Home: It work with >> It works with... (missing the 's' in works)

and

Donate: here's and ugly button >> here's an ugly button (should be 'an', not 'and')

2. On the #Doc page, can you include the text 'Scroll down on the Github page for usage instructions' or something like that.

Again, great work!

Regards,
Trinione