Posts categorized as: Tutorials

Code a Mobile-Friendly HTML5 Video Stream with Multiple Sources

by Jake Rocheleau

September 27, 2012 in Tutorials

New media on the Internet has gone through a rigorous process of quality control and best practices for web developers. Back just a few years ago Flash video was the most prominent solution. But with HTML5 support in all modern browsers the solution to embedding audio/video media has become a lot less complicated.

In this tutorial I want to explore how we can build a very simple webpage for embedding mobile-responsive HTML5 video. I have included two versions of the page – one with standard HTML5 video and the other using Video.js. The HTML is almost identical which shows how much progress HTML video has made in a few short years. But you can check out a demo of both pages from the links I’ve included below.

Preview Screen HTML5 Video Stream MP4/WebM

Read More

Dynamic TinyURL Links Generator using jQuery

by Jake Rocheleau

August 23, 2012 in Tutorials

There are so many web applications available for shortening URLs to share online. TinyURL is one of the originals and has been around longer than I can even remember. Their service is always online and it works perfectly for translating into tweets or posts on Facebook.

In this tutorial I want to build a mini-app which will generate tiny URLs right from your web browser. You could install this script on any domain and you’ll be able to generate dynamic links using Ajax without even refreshing the page! Their service doesn’t have a detailed API but it’s enough that we can pass a full URL and get the tiny version back as a result. And that’s just enough functionality for this app to hold some value when hosted on a 3rd party website.

TinyURL Links Generator with Ajax - preview

Read More

Build a User Settings Dropdown Menu with jQuery

by Jake Rocheleau

July 26, 2012 in Tutorials

There are many social networking websites designed with a specific layout in mind. User profile pages are some of the more complex designs included with a community-based network. You’ll often have access to edit user profile settings, subscriptions, and e-mail options. I want to create such a simple menu for a minimalist Digg-style layout.

In this tutorial I have actually built two working demo pages. The first runs on jQuery to fade the menu in and out as you hover. The 2nd demo is built using just CSS effects which display the submenu using the :hover selector. It’s even easier to combine both methods for legacy support – however at that point I’d recommend the CSS-only methodology. But you can see for yourself in the live demo examples and build this yourself by following my code below.

jQuery sub-menu navigation dropdown

Read More
Page 7 of 23« First...56789...Last »