I want a scroll or progress bar in my web page.
Actually, I am not sure what is a correct word for the thing I want.
By scroll/progress bar, I mean something like a video play control, where a user can drag the progress indicator to set time stamp of the video play.
I am not aimed to implement a video control. I just want a something similar: user can "set the progress" by dragging, and the bar should fire events for user's action.
it is not a progress bar that indicating program is busy doing something.
it is not a scroll bar for scrolling a piece of content.
I hope it make sense to you.
I am asking if there is any plugin or library that can make the thing easier to implement?
Looks like you are looking for jQuery UI Slider
Related
Context
I am creating a site where there are sections stacked in rows, and each row takes up the full viewport.
I don't want the site to be scrollable normally, and would instead like the site to "snap" to the bottom of each section, so that I can then play out the animations taking up the full view port.
Issue
I took the approach of listening to scroll events, and then triggering a nextsection.ScrollIntoView when the user had scrolled far enough to snap to the next view.
This doesn't work well though, as the ScrollIntoView is interupted by user scroll activity, including the latent scrolling of the mouse that hangs around for about 300ms after you've scrolled.
I managed to get it sort of working by using a setTimeout(scrollIntoView(), 400), but this takes too much time and relies on the user not interacting with the site after scrolling.
I made a CodePen (here) showing the type of setup I'm working with, however to see the issue you need to open it as a webpage itself, as CodePen doesn't perform a smooth animation when using ScrollIntoView and just jumps there.
I need a smooth and uninterruptable animation as the site switches from one section to another, but as of yet I've found no working ways to implement this.
Thanks for any answers.
Anyone has idea how to implement this: https://paveldogreat.github.io/WebGL-Fluid-Simulation/
to get mouse interaction like on this website https://advanced.team/ ?
I have been able to set up the same style through configuration, but I have now lost days on searching for how to get canvas beneath the website content like theirs or how even effect shows beneath every element...
I'm working on horizontal website. I would like to create 2 buttons (left button and right button) which can help users to scroll to left and right.
The site that I'm working on
The functionality that I wanted to create is, when I mouseover the button the page will start and continue the scrolling action until the mouse move away from the button then the page stop scrolling.
I found something from codepen "http://goo.gl/uTQdzD" that is similar to what I looking for but that is not function in the way I wanted. It's required to keep clicking it only it can continue scroll, once it clicked then it only move a certain pixels distances and stop then have to click again... even I tried to change to mouseover, the same thing... I have to moving the mouse in and out the button only it can continue to scroll the page.
I'm not a professional web coder or developer but just a new guy. I Hope someone out here could help me out.
Thanks in advance.
Here you go: http://codepen.io/caseybaggz/pen/uBysA?editors=001
I changed the .click to a mouseenter event which is what you are looking for. Additionally, the increments that you noticed were happening because of the step variable being assigned 400. So, I just replaced the 400 with wWidth and within the mouseenter function, told it to scroll the bodyWidth.
I'm not totally sure why you would want to do this? The natural flow of web design is to design/build sites vertically. To have the user scroll horizontally is a little awkward regarding the UX and could be considered bad design…especially now that devices come into play.
Be sure to learn web-design and UX standards first before you get into a position for developing sites. It not only helps to contribute for bettering the web, but also the UX. ;)
Hope this helps and good luck!
I'm looking to make a mock-up html app. I have been using reveal JS and my own jquery to make the bulk of it, but i need only part of the page to be "sensitive" to the swipe gestures. Does anyone know of a way to make only part of the screen area sensitive?
Thanks
Well put an HTML element there covering the desired area and bind the swipe event to it.
For more of a concept you should try something and comeback with a code example if no success.
I have a div that acts like a progress bar, moving and displaying the status of a current song that is being played. How can I drag that "progress bar" forward and backward to allow a person top seek through a song?
It might be easier to just use the JQuery UI Slider if you don't mind adding JQuery to your app.