paper-leaf / alton Goto Github PK
View Code? Open in Web Editor NEWAlton is a jQuery-powered scrolling plugin, with a twist.
Home Page: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Alton is a jQuery-powered scrolling plugin, with a twist.
Home Page: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
As pointed out by julian3, pressing the spacebar at the last block breaks plugin.
Possible - Add if statement to switch case?
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
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"
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?
Hello,
could you add a bower.json file in order to provide your plugin from
bower package manager?
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
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.
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?
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.
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?
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?
Last commit 909e348, added resize. On mobile browsers with a address bar that hides, this adds jittery scrolling.
Possible - Add isMobile() check to onResize
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.
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! :)
This is pretty awesome. I did notice a few issues with your demos.
All-in-all I love what's going on here, im excited to try it out.
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.
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
});
#45 a callback function so the developer can call a function on each time the slide changes.
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
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.
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.
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.
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
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).
Shift + Spacebar should scroll up. Currently it scrolls only down.
Would be great if you make this available as bower package.
Based on feedback from julian3 on reddit.
Just need to add in a key case in the switch @ntan97
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?
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
is this possible?
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?
I cant find anything about slowing down the animation of hero demo, is it possible and how?
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.
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! :)
Hi there, is it somehow possible to have more than one hero-section (in my case two)?
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.
On https://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
<body class="pageWrapper">
<section class="full">
<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>
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.