New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Exploring highlighted HTML5, CSS3, and JavaScript technologies

From: HTML5 Projects: Engaging Ecommerce

Video: Exploring highlighted HTML5, CSS3, and JavaScript technologies

Before we get into actually building a project, I want to take a few moments to talk about each of the key technologies we are using. In all, we're going to be targeting three different technologies: the range form element, drag and drop, and localStorage. Let's start with the form element range. Here is the basic code for a range form element. As you can see, it's an input tag where the type is set to range. And there are several other attributes that you need to include.

Exploring highlighted HTML5, CSS3, and JavaScript technologies

Before we get into actually building a project, I want to take a few moments to talk about each of the key technologies we are using. In all, we're going to be targeting three different technologies: the range form element, drag and drop, and localStorage. Let's start with the form element range. Here is the basic code for a range form element. As you can see, it's an input tag where the type is set to range. And there are several other attributes that you need to include.

Minimum is now set to 0 in our example, maximum I have set at a 100, and then value is set to 50. Wherever you set the value is where the slider handle will appear to be on the range control. Now, there is also an optional attribute called step. Once you declared the step value, your range control will move in those increments. There is decent browser support for the range form element. Current versions of Chrome, Safari, and Opera already supporting it, and soon Internet Explorer 10.

The only major holdout is Firefox, which currently displays just a text field which the user can enter a value into if they choose. However, there is no interactive slider that they can move back and forth. One hopeful sign: I have noted in the Firefox development circles that they do seem to be working on this feature for some time in the future. If you are unsure of what browsers are supported at what level, I heartily recommend going to caniuse.com, and once you are there, just search for range.

Let me show you what the range input type looks like in Chrome. As you can see, here is that same code that we had: the range from 0 to 100 that starts off at 50. Now, it's pretty obvious that there is one big limitation to the current specification and browser implementation, and that is there is no associated value field to indicate what the slider is representing. It is, however, relatively easy to implement, as you'll see during our project, and I do want to point out there is at least one other ready-made option, which you can find on the jquerytools.org site.

Next up, let's take a look at drag and drop. Drag and drop has two different aspects to it: one minor but critical one on the HTML5 side and a much more robust series of options with the JavaScript API. On the HTML5 side all you need to do is to put in draggable=true into any object that you want to be able to drag. With JavaScript there are seven different events, covering everything from dragstart to drop.

There is one key related object, and that's the dataTransfer object. This is used for, as the name implies, transferring information from a dragged object to a dropped one. So you set the data transfer object and the drag start event and then it's read in the drop event. The third technology used in this project is localStorage. localStorage is really very straightforward to use, and it adds a state to websites without delving into server-side coding.

Unlike with cookies, which is another way web developers have handled the state issue, local storage is handled through the browser cache. Significantly, it also has a much larger limit, as opposed to cookies. It's basically a name/value pair structure, and while there are ways around it-- primarily using JSON--you're normally storing and retrieving strings. There are essentially two simple commands. First localStorage.setItem. Here the first of the two arguments is the name of the item to be stored and the second is its value.

The second command, getItem, just uses one argument, and that's of course the name of the item you want to retrieve. Browser support for local storage is really rocking. You can find all the details on caniuse.com, under local storage. As you can see, it's been supported for quite some time, including all the way back to Internet Explorer 8. So those are the tools we get to play with as we enhance the user experience for an ecommerce catalog, starting in the next chapter.

Show transcript

This video is part of

Image for HTML5 Projects: Engaging Ecommerce
HTML5 Projects: Engaging Ecommerce

13 video lessons · 6471 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.