paper-leaf / alton Goto Github PK

View Code? Open in Web Editor NEW

217.0 217.0 34.0 114 KB

Alton is a jQuery-powered scrolling plugin, with a twist.

Home Page: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/

JavaScript 100.00%

alton's People

Contributors

Stargazers

Watchers

alton's Issues

change speed of heroscroll

I cant find anything about slowing down the animation of hero demo, is it possible and how?

Scroll Bar Does Not Track Scroll Position

Bug pointed out by JosephLeo on reddit.

OS: Windows 7
Browser: Google Chrome
Bug:
Scroll to the bottom of the page using the scrollbar.
Scroll down again, this time using the mousewheel.

You will see it scroll "up" to the next "scroll state" instead of the expected "do nothing" action since you're at the bottom of the page already and can't go down any further.

Typo in Description

On https://paper-leaf.com/alton-jquery-scroll-jacking-plugin/

<body class="pageWrapper">
    <section class="full"&gt
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
    </section>
</body>

should be like the example on Github

<body class="pageWrapper">
    <section class="full">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
    </section>
</body>

Changing useSlideNumbers to false causes error

I have set the useSlideNumbers to false and get the following error in my console:

Uncaught TypeError: Cannot read property '2' of undefined

Which relates to the following lines in the script within the slideindex function within the else brackets (line 250 of the un minified version)

$(slideNumbers[$(element).parent().children().index(element)]).toggleClass('active');

My options are as follows

$(document).alton({
    fullSlideContainer: 'full', // Tell Alton the full height container
    singleSlideClass: 'slide', // Tell Alton the full height slide class
    useSlideNumbers: false, // Set to false if you don't want to use pagination
    slideNumbersBorderColor: '#fff', // Set the outside color of the pagination items
    slideNumbersColor: 'transparent', // Set the inner color of the pagination items
    bodyContainer: 'pageWrapper', // Tell Alton the body class
});

Space bar for scrolling breaks

I noticed on the bookends example that there is an error when I'm spacing through slides. If get to the bottom and hit "Page Up" to get to the top that it breaks the space bar scrolling.

Thanks! This is a great tool.

Link for Slide

Can I make a link to a specif slider.
The same way the navigation works.

If I use element id, it works, however the scroll position stays at the last point it scrolled, therefore if I send a user to from the top to the bottom trought id link, when he uses the mouse scroll, the fuction will resume from the top, instead of the current slide.

Thoughts on alton on mobile/tablet devices

Awesome plugin, this enhancement may be for another plugin but it would be cool to know your thoughts anyway.

So on mobile the height of each slide is still equal to the height of the viewport however if the content of the slide takes up more space that the slide on mobile it extend out of the element, get hidden or just looks really squished.

I was wondering how can this plugin still be used/improved for mobile, for example maybe making the slides min-height the viewport height instead of giving it a fixed height? Not to sure what else you could do to improve the functionality for mobile devices

Bower package

Would be great if you make this available as bower package.

Bookend doesn't work properly with big footer

I am trying to implement the bookend functionality but it doesn't work properly

Here is the layout that I need:

HEADER
ALTON DIVS
SOME DIV
SOME DIV
FOOTER

First of all, I created a simple layout with a big footer (http://codepen.io/gmourasilva/pen/bpZqzO?editors=1111) and I got stuck. I saw that I can use the a footer parameter, but in the demo you don't use.

What is wrong here?

Spacebar at last block breaks plugin

As pointed out by julian3, pressing the spacebar at the last block breaks plugin.

Possible - Add if statement to switch case?

Jittery Scrolling on Mobile

Last commit 909e348, added resize. On mobile browsers with a address bar that hides, this adds jittery scrolling.

Possible - Add isMobile() check to onResize

Spacebar in Form causes Alton to jump

When a user is entering a form on an Alton slide, and hits the space bar, alton triggers moveDown()

Also look into option for removing keyboard accessibility options and having them do nothing.

customize circle button

i am still newbie in web design, can you please tell me how to modifiy the circle button?? (useSlideNumbers)
.i want to make it customize like at the header or footer
thanks for your attention

Implement a Callback function

#45 a callback function so the developer can call a function on each time the slide changes.

Scrolling UX Issues in demos

This is pretty awesome. I did notice a few issues with your demos.

When you scroll all the way to the bottom or top the scroll delay before you can change directions makes you feel like the site has broken. Perhaps resetting the scroll delay when you hit the top of bottom will solve this.
If you scroll using the scroll-bar to the bottom of the page, when you scroll up using the scroll wheel it scrolls as if it would without the script, then allows you to scroll down in the same manner. Perhaps its wise to use the scroll position with the scroll-bar to update the target as it goes, that way the same effect can be achieved with a mix of the two scrolling options.
Sometimes when you hit the top or bottom it does legitimately freezing until you refresh.

All-in-all I love what's going on here, im excited to try it out.

Heroscroll in the middle of a page

is this possible?

position:absolute divs displayed on first slide only

Got an issue trying to position a div on second layer so it could be aligned on the bottom side of the slide nevermind the height. Setting a position property to absolute makes a div display on a first slide.
Would you recommend a method to solve this task?

Look into specific compatibility for Screen Readers

Enabling native scrolling on the last slide

Hey y'all!
First of all great plugin! Love it!

I saw a closed issue in this repo, but the problem hasn't been resolved. #20
Can someone help me find the solution for this?
I need something like this: http://www.hugeinc.com/
(no need for hiding the previous slides)

I can try modify this myself, but any help is appreciated!
Thanks! :)

Alton standard scrolls back to top

I've made a simple html file including jquery.js and jquery.alton.js

Really simple example ripped right off the readme.

Problem: After a short interval (~1s), Alton scrolls back up one section until it reaches the first slide.

Any idea as to why this occurs would be appreciated.

alton is not working in firefox on macbook (osx latest)

As title is saying, alton does not work in firefox on macbook running latest osx using touchpad. Page is scrolling randomly going many slides at the time. Your examples from webpage are not working also.

Shift + Spacebar should scroll up

Shift + Spacebar should scroll up. Currently it scrolls only down.

Scroll the heroes

Hi there, is it somehow possible to have more than one hero-section (in my case two)?

Add Spacebar Scrolling

Based on feedback from julian3 on reddit.

Just need to add in a key case in the switch @ntan97

Support layouts with a footer but no header

Pressing Down Arrow causes page to scroll all the way back to top

Alton is probably the best scrolling plugin I've seen yet! However, I'm having one issue, when I hit the down arrow on the keyboard to scrolldown, it immediately scrolls me up to the very top of the page, through all previous sections. Have you seen anything like this before?

Can I remove the function of scrolling by number keys on keyboard?

I recently discovered this plugin that I wanted to try designing a login page for learning purposes. With reference to your bookend demo, I plan to use the header as a login page and the footer part as a sign up part, where each section consists of a form with some basic inputs for a user registration page to find out that pressing 1 and 2 would lead me to either the top or bottom of the page that I would find it an issue when the input required for the page that I'm designing to consist of numbers that may consist of 1 or 2. I wonder if it would be possible to remove the function, or may I know how I could remove the function in my own? I'm sorry for my poorly-written description of request.

Alton Standard adds extra navigation dots

I'm using Alton within WP and realise my slides aren't using:
div class="slide slideOne" div class="slide slideTwo"
etc, like the standard demo, but for some reason my nav is adding additional dots.

[UPDATE]: It reads additional divs within the section and applies nav dots for them. Problem solved.

Hero scroll is too sensitive with the trackpad, flicker affect occurs.

There seems to be a little issue when using the track pad on a Macbook pro, OS El Capitan and most likely other computers. When going to the next slide using the trackpad there is a flicker / fast up and down affect for the 'Hero scroll' functionality. It seems it's way too sensitive with the trackpad. Using the scroll on a mouse works fine. This issue is replicated on your 'Hero scroll' example as well but not on the standard or book examples. Other from that it works as intended but unfortunately I can't use it with this issue. Would be great to get a fix. Great plugin though. Thanks.

Re-enable Native Scrolling after Featured Section in Bookmark Mode

Firstly, absolutely LOVE this plugin! Great work and thank you so much for sharing it with us.

The issue I have been trying to solve (but sadly, have a hard time moding the JS since I'm very novice) is to try to re-enable native scrolling after my last featured section--then un-enabling it as they scroll up back into the featured section.

I believe this would be a wonderful addition to the plugin--but was wondering if you knew of a work-around in the meantime?

Again, thanks so much--you all are a super team! :)

Possible Issues with ScrollWheel

Issue noticed by davetica on reddit

"If I scroll more than about 3 clicks on my mousewheel in less time than it takes for the new screen to slide in, the screen just locks and I can't scroll anymore"

Callback?

Hello can we get some callback for function to stop function working (when we use lightbox or fancybox) and after close fancybox start alton again? It's easy to do with fancybox (we got some callbacks on close and open, but how to stop function from website).

Would it be possible to change height to min height?

Hi I was wondering is it possible to change the style height to min-height as on mobile my content for each slide extends beyond the viewport height.

Or is there any other options/settings that can be used to change this happening or is this the wrong plugin for me?

SideScroll triggers moveDown

Issue pointed out by doedels on reddit.

There seems to be a bug when trying to sidescroll in OSX to go back, it just keeps scrolling down.

Adding animation - Adding events on Slide Animation Start and End

Is there a built in way to have the copy and images animate in as you navigate from slide to slide? If not, does anyone have a solution they recommend? I tried using http://scrollrevealjs.org/ but it's really buggy.

Heres what I have so far: https://www.npd.com/latest-reports/longitudinal-data/

I appreciate any help or suggestions.

Thanks,
Elliot

Excessive delay on scroll

On Certain Devices, (Macbooks, devices with inertia scroll etc), delay will not cease until user has full stopped scrolling for .5s.

Pointed out by a few users on Reddit

Uncaught TypeError

Would love to get this working on site, but keep getting the following js error:

"Uncaught TypeError: Cannot read property 'top' of undefined" - line 300 of alton.js

Am running this on home page of wp site. This is using a group of sections each of which has a full-screen background image being sized thru css, not js. Structure is the following -- seems OK per docs:

<body class="home">
   <div class="site-container">
        <header class="site-header"></header>
        <div class="home-welcome slide"></div>
        <div class="home-featured slide"></div>
        <div class="home-testimonials slide"></div>
        <div class="home-communities slide"></div>
        <footer class="site-footer"></footer>
    </div>
</body>

Here's my init file contents:

jQuery(document).alton({
    bodyContainer: 'home', // Tell Alton the body class
    fullSlideContainer: 'site-container', // Tell Alton the full height container
    singleSlideClass: 'slide', // Tell Alton the full height slide class
    useSlideNumbers: true, // Set to false if you don't want to use pagination
    slideNumbersContainer:"slide-numbers",
    slideNumbersBorderColor: '#fff', // Set the outside color of the pagination items (also used for active)
    slideNumbersColor: 'transparent', // Set the inner color of the pagination items (not active)
    firstClass:"site-header",
    nextElement:"div",
    previousClass:null,
    lastClass:"site-footer",
    scrollMode:"featuredScroll",
    animationType:"slow"
});

Dev site is local, so have nothing to show. Any thoughts on what might be causing this error? Am a js newbie, so very well could be 'user-error'.

Regards, Mark

Add a bower.json configuration file

Hello,

could you add a bower.json file in order to provide your plugin from
bower package manager?

Callback Function

I'd like to be able to fire my own JS functions after the scroll effects are done -- this way I could animate additional elements or update other parts of the page.

The most likely place seems to be the scrollDown and scrollUp functions. Is this something you're considering adding?

Broken text fields

I would like to use this plugin to navigate a page containing a few forms, but it seems that all keypress events are being handled by the plugin and that their default behavior is prevented... so that you cannot enter anything in text fields! There's a simple fix for that: Removing the default case in:

        onkeydown = onkeyup = function(e) {
            e = e || event; // to deal with IE
            map[e.which] = e.type == 'keyup';
            switch (e.which) {
              case 40: // arrowDown
                e.preventDefault();
                $(document).moveDown(e);
                break;
              // [...]
              default:
              e.preventDefault();
            }
        }

Any objection?

paper-leaf / alton Goto Github PK

alton's People

Contributors

Stargazers

Watchers

Forkers

alton's Issues

Recommend Projects

Recommend Topics

Recommend Org