Rebuild YouTube's mobile-like progress bar in jQuery

#1

Post by ynh » Fri, May 24, 2013, 9:08 AM UTC

Rebuild YouTube's mobile-like progress bar in jQuery
blog.ynh.io

Re: Rebuild YouTube's mobile-like progress bar in jQuery

#2

Post by zemaj » Fri, May 24, 2013, 10:50 AM UTC

That's very nifty, thanks! Subtle, yet gets the point across.

Plenty of interesting ways that kind of bar could be included in a site.

Re: Rebuild YouTube's mobile-like progress bar in jQuery

#3

Post by X4 » Fri, May 24, 2013, 11:24 AM UTC

Yep, I've also seen that. But your markup is wrong. You should use instead

I am using a kde widget called adjustable-clock which uses html5/css3/javascript and qml to render my system clock.

Here's the source for the current clock I use, it uses a progressbar for the seconds: http://htmlpaste.com/7e957bb5523fa58f98b6657073c4a544942a13c...

QML:

  Clock.setRule('#hour', Clock.Hour);
  Clock.setRule('#minute', Clock.Minute);
  Clock.setRule('#second', 'value', Clock.Second, {'short': true});

Re: Rebuild YouTube's mobile-like progress bar in jQuery

#4

Post by ynh » Fri, May 24, 2013, 11:32 AM UTC

X4 wrote: post #3

Yep, I've also seen that. But your markup is wrong. You should use instead I am using a kde widget called adjustable-clock which uses html5/css3/javascript and qml to render my system clock. Here's the source for the current clock I use, it uses a progressbar for the seconds: http://htmlpaste.com/7e957bb5523fa58f98b6657073c4a544942a13c... QML: Clock.setRule('#hour', Clock.Hour); Clock.setRule('#minute', Clock.Minute)…

Use progress as html tag?

Re: Rebuild YouTube's mobile-like progress bar in jQuery

#5

Post by mediumdeviation » Fri, May 24, 2013, 11:44 AM UTC

ynh wrote: post #4

X4 wrote: post #3

Yep, I've also seen that. But your markup is wrong. You should use instead I am using a kde widget called adjustable-clock which uses html5/css3/javascript and qml to render my system clock. Here's the source for the current clock I use, it uses a progressbar for the seconds: http://htmlpaste.com/7e957bb5523fa58f98b6657073c4a544942a13c... QML: Clock.setRule('#hour', Clock.Hour); Clock.setRule('#minute', Clock.Minute)…

Use progress as html tag?

It's a HTML5 form element: http://developers.whatwg.org/the-button-element.html#the-pro.... It might be somewhat difficult to style, though.

Re: Rebuild YouTube's mobile-like progress bar in jQuery

#6

Post by thejosh » Fri, May 24, 2013, 12:02 PM UTC

I really dislike the new loading bar in the YouTube site as videos continue to play while the next page is loaded.

I'm on a fast connection so normally youtube loads instantly anyway, but this new method takes 4-10 seconds.

Re: Rebuild YouTube's mobile-like progress bar in jQuery

#7

Post by ezraroi » Fri, May 24, 2013, 12:45 PM UTC

Nicely done and handful. Thanks

Re: Rebuild YouTube's mobile-like progress bar in jQuery

#8

Post by BaconJuice » Fri, May 24, 2013, 12:51 PM UTC

very cool, thanks for sharing

Re: Rebuild YouTube's mobile-like progress bar in jQuery

#9

Post by paulfarino » Fri, May 24, 2013, 1:37 PM UTC

I've been looking for this for a few weeks. Noticed on the Google Search iOS app. Thanks!

Re: Rebuild YouTube's mobile-like progress bar in jQuery

#10

Post by mistercow » Fri, May 24, 2013, 3:03 PM UTC

X4 wrote: post #3

Yep, I've also seen that. But your markup is wrong. You should use instead I am using a kde widget called adjustable-clock which uses html5/css3/javascript and qml to render my system clock. Here's the source for the current clock I use, it uses a progressbar for the seconds: http://htmlpaste.com/7e957bb5523fa58f98b6657073c4a544942a13c... QML: Clock.setRule('#hour', Clock.Hour); Clock.setRule('#minute', Clock.Minute)…

Support for the progress element is still missing from a lot of browsers, so I don't know if it's right to say that the markup is "wrong" for not using it