tholman / elevator.js Goto Github PK
View Code? Open in Web Editor NEWFinally, a "back to top" button that behaves like a real elevator.
Home Page: http://tholman.com/elevator.js
Finally, a "back to top" button that behaves like a real elevator.
Home Page: http://tholman.com/elevator.js
I love the new github-corners
project you created. The demo page for elevator.js could use it! http://tholman.com/elevator.js/
I don't think it's a good idea to stop the music suddenly, maybe a smooth fade out will make the scrolling sounds better XD
Cool, but I find the demo on the homepage awkwardly slow.
I'd fix this if I weren't on mobile, but basically - because the configuration options are not instance variables, whatever "Elevator" that is created last overrides the configuration options for all previous Elevators. For example, by doing the following:
var elevator1 = new Elevator({
element: $('#button-one'),
mainAudio: './music/elevator-music-one.mp3', // Music from http://www.bensound.com/
endAudio: './music/ding-one.mp3',
duration: 1000
});
var elevator2 = new Elevator({
element: $('#button-two'),
mainAudio: './music/elevator-music-two.mp3', // Music from http://www.bensound.com/
endAudio: './music/ding-two.mp3',
duration: 5000
});
elevator
will have the configuration of elevator2
even though I really wanted two different behaviors.
Thanks for making this, I had a good laugh. :)
Of course, this should be optional.
I'd really like to use this library, but without a force close door button I'm afraid it has no place in our application.
Hey is there any way to set the volume of the mp3?
I tried reducing it's volume, but it doesn't seem to work in my Opera.
Kind Regards,
Dennis Bitsch
If you click "scroll to top" but then tab out while the music is playing, the music will keep playing despite the page having reached the top. Then when you switch back to the page, it will abruptly stop with a "ding", but youll still be at the bottom (of the page).
I'm missing the extra ding sound when you reach the top!
Hello
When click back to top and then lost focus from browser, elevator goes to first of page and music stopped. Can anybody fix that?
Per a comment from HN, I love the idea of adding stops along the way.
The elevator music is no longer royalty free.
Is the music licensed as MIT too? Given that it is included in this repo I assume it is, but it would help if that was clarified.
I've noticed that the nice "go to top" button has been hidden by the adblocker because of 'back-to-top' class it has. Can this class name be changed to something more ad-blocker friendly?
Elevator breaks on IE8 and I'm blessed to work on a product that still supports it.
Will PR a fix today (basically checking for the lack of it and return
afterwards).
E.g., redux.js.org. elevator.js.org is still available.
Details at dns.js.org.
Hey, my friend i was searching some libs on cdnjs then i saw elevator.js so when i goto example and clicked on back to top suddenly music started and i was putted earphones and my earphones are very loud i got feeling like heart attacked
A real elevator is slow to start and finish for comfort, but fast in the middle. You should add some easing :)
Hey @tholman,
I'd like to host your library, elevator.js on cdnjs โ It is one of the most famous free and public web front-end CDN services which is used by ~1,143,000 websites worldwide.
The git auto-updater for cdnjs relies on git tags to recognize a release version and automatically update the library in the cdnjs repo.
If it's not too much to ask, can you please add git tags for this repo, say 1.0.0?
Note: Even though this package is available on npm and I'll be using npm for the auto-update code, I'm suggesting the addition of release tags as a fail safe method.
You should be able to supply multiple tracks as arguments and have it select one randomly.
would you please consider adding package.json so that we can add your lib on https://cdnjs.com with git auto-update.
thank you very much!
cdnjs/cdnjs#5529
In method init
, binding click event to element should be done after checking if browser meets requirements.
First response: this is awesome! Until I get dizzy, a mild headache, and feel like I might barf ๐คฎ
It would be rad if there was a reduced-motion animation (maybe jump points with subtle fades/wiggles?), that automatically kicked in on matchMedia('(prefers-reduced-motion)')
๐ป
The animation and the music are fine but the ding sound in the end it's not playing.
Hello,
I just want to point out that this is to me the best project I've seen during 2020 so far. Keep on rockin'!
Really.
I wanted endAudio but when I use just endAudio it produces a javascript error assuming I also want a mainAudio. I currently have mainAudio set to empty string but allowing just one would be better I think. Thanks.
Hi!
It's amasing stuff! Really. But I need some your help.
How I can hide the button with elevator when it's top of page? I mean, when is top of page I need to hide elevator button, else show it.
Summary: An elevator car arriving at its topmost floor will always be traveling next to a lower floor. Therefore upon arrival, the elevator car should always signal with two alerts or announcement including the word "down".
Developers needing to meet Section 508 compliance standards are unable to use elevator.js in its present form.
US ADA guidelines for elevators require audible signals at each individual entrance; typically these signals are installed withinin the light assembly for each car. Please see the relevant ADA guidelines below.
https://www.ada-compliance.com/ada-compliance/ada-elevators.html
4.10.4 Hall Lanterns. A visible and audible signal shall be provided at each hoistway entrance to indicate which car is answering a call. Audible signals shall sound once for the up direction and twice for the down direction or shall have verbal annunciators that say "up" or "down."
Though I have focused on US-centric guidelines; there is a high degree of similarity worldwide among accessibility standards.
Also if I might make a personal request; and this is just my opinion -- I find the music to be a little bit too loud for an elevator.
If you are amenable to this change, I would be happy to submit a PR.
Unless this is an open-door elevator, when it reaches the top you should not be able to interact with the page again until the doors have opened.
would you please consider adding tags for each version so that we can add your lib on https://cdnjs.com with git auto-update.
thank you very much!
cdnjs/cdnjs#5529
Hi loved the plugin, since i am a beginner in javascript, i was trying to attach the plugin to a element within the page that has overflow scroll. (long content div && body height 100%). I was wondering how do i about doing that?
Can you add an opportunity to tune the volume cause if a user has high volume settings it can really bother.. Thanks
I understand the principal point behind a scroll-to-top mini-library... but it seems (on the thought level) that it would be trivial to implement scroll-to-bottom functionality! I prefer the stairs, but If I use an elevator, I probably use it both ways.
Open to a chrome extension? GF just said she would love to use this when looking online for clothes lol.
Why not use the 'old fashioned way' of providing a link with a #top anchor?
That way, this at least degrades nicely for those not inclined to use JS.
As #top is a specialcase anchor, you wont need to name/id the body to make this work.
Is there a way to set the scrolling-speed, independently from the scrolling-distance? With a fix duration the scrolling-speed is very different at long and short sites.
Hey Tim,
I've been looking into using your library on a site that I'm setting up, and in doing research on the problem, I came across several suggestions of using the Home button on the keyboard in conjunction with this library. After setting up a test page, I tried using the Home button, and it bypassed the normal behavior and simply moved to the top of the page immediately. Do you have any suggestions as to how I could suppress this behavior? Perhaps some options in the library to intercept the Home button and use it to trigger the elevator behavior? I feel that this library would give my site the responsiveness and interactivity that it needs to really stand out.
Thanks in advance,
I feel like the elevator needs to ding at the top. Otherwise, how does the user know when to get off? Lovely product otherwise!
Uncaught ReferenceError: module is not defined
at elevator.js:265
(anonymous) @ elevator.js:265
Hey, I know this is mostly a gag so you might not care, but you don't get the "ding" in Mobile Safari. My guess is that it's the fact that iOS requires user intervention to play audio on websites? I'm not sure if there's a way around it.
As the title say, I'd like the example page to be even longer! There isn't enough time to fully embrace the awesomeness which is elevator.js.
How does one go about installing this on a Chromebook? Will there be a easy-to-use browser extension available?
If the user clicks the trigger to scroll up, but during the upscroll desides that he wants to scroll in another direction / stop the scroll, the user should be able to do so by scrolling. elevator.js should then stop the scrolling.
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.