Drag progress bar forward and backward - javascript

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.

Related

Change Direction of Scroll in Horizontal Scrolling?

Hi I am creating Scroll effect Like this website https://durimel.io/nel and For this I am using a GitHub repo https://github.com/corentinfardeau/horizontal-scroll#container-node-dom-null, I have two Concerns the Primary Concern is that How can I change the direction of scroll in horizontal Scrolling {Means Like when I am moving my scroll wheel of mouse Forward the Text is going From left to right "But How can I change it from Right to Left"} Pretty much same like in the reference website when we are scrolling one line is going from right left and two vice versa. Today I spent a lot of time surfing through the internet for find the answer How we can change the direction of Scroll in Horizontal Scrolling?
The second Concern is the How can I make the horizontal scrolling infinite? Means Like When I am scrolling to the end (till item 12 {you will get that when you will see the codepen}) the scrolling Stops But I do not want scrolling to be stopped instead the item 1 have to come again Pretty much same like the reference website I have given in the first line .
Here is the Code Pen <!-- https://codepen.io/shayan-kanwal/pen/RwZdvmw -->
Thanks For help Advance

Slick Slider stop anywhere drag is left

I wanted to ask if there is a way to move the slick slider more naturally like when we drag it, it either goes to the next slide and if not dragged much, it goes back to the previous slide. But I am trying to find a way like if I drag and stop anywhere, the slider should just stop there if it is in between two slides

How to make videojs progress bar responsive to click/tap right-to-left?

I can get almost all of the videojs player (version 4.6.4) to play right-to-left. In the css, transform: scale(-1, 1) flips the .vjs-default-skin .vjs-control and, with it, even the .vjs-play-progress bar loads RTL. But clicking on the .vjs-slider to advance or rewind the video works LTR. For example, with the .vjs-play-progress at half-way along the .vjs-slider, clicking .vjs-slider at the far left should move the playhead and the progress bar to the end of the video (if it were RTL). Instead the progress bar (and the video) returns to the start, which it would normally as LTR. Vice-versa, clicking near the RTL start (far right) moves the progress bar and video to the end (far left). Probably nothing can be done about that in the css, but maybe in video.js? Is it possible to set RTL there?
The workaround, 28-29/10 - Tried making the progress bar unclickable, using this: https://github.com/rsadwick/videojs-disable-progress - OK on PCs but the result on mobiles (iPad, Samsung) was a native player overlay and the start button not working. Ditched that. Thanks to this question/answer), the best solution was to add 'pointer-events: none'; in the css for .vjs-slider.

Suggestions for implementing a scroll/progress bar (javascript)

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

Need Scroller with both autoplay and manual scrolling functionality

I am looking for a scroller which auto scrolls to the end and stops and switches to manual navigation. I tried googling, there are thousands of scrollers but I need one with both autoplay and manual scroll functionality. Where user can also switch to manual scroll with a single click while it is auto scrolling, something like this.
But it must stop auto scrolling when it has reached end and then switch to manual scrolling.
jQuery Easy Slider 1.7 (Demo here) has both manual scrolling and automatic scrolling, which automatically turns off as soon as the user clicks on the slider. It's also really easy to customize and extend - and I've done so in a few past projects.
As for the autoscrolling to stop at the last slide, you could manually add the functionality using a timer that turns off autoscrolling after all the slides are done. Or you could play with it and just add an event that gets fired whenever the last slide is reached.
Edit:
Using SmoothDivScroll is even better, because it allows the user (you) to add a number of callbacks. So you can just turn off autosliding when the last slide is reached:
$("#makeMeScrollable").smoothDivScroll({
autoScrollingRightLimitReached: function(eventObj, data) {
$("#makeMeScrollable").smoothDivScroll("option","autoScrollingMode","");
}
});
Edit 2:
Sadly, it seems that callbacks not working are a known issue on their bugtracker. You could try and contact the creator of the script and see whether he's planning on fixing them.

Categories