Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

HTML5 Elements: Drag&Drop, Video and GeoLocation

This article will discuss about html5 elements, more precisely about Drag&Drop, Video and GeoLocation.

In today’s article we will discuss some advanced concepts and elements of HTML5 to see how it works and advantage of each one.

Drag and Drop:

It’s an interesting new feature , which enables user to change place of an element to another location.

This is done by javascript in a very easy way. Steps for this:

  • Enable attribute draggable to be true
  • Write down JavaScript functions to handle the actions.

Common Event Handlers for Drag and Drop:

  • ondrag: this event handler is invoked during dragging operation
  • ondragend: this event handler is invoked just when dragging operation end
  • ondragenter: this event handler is invoked when dragged object enter dragging area
  • ondragleave: this event handler is invoked when dragged object leaves dragging area
  • ondragover: is specified where the dragged data can be dropped
  • ondragstart: this event handler is invoked when dragging operation has just started
  • ondrop: this event handler is invoked when the object is dropped.

You can see the demo below:

Drag and Drop
Figure 1: Drag and Drop

Listing 1: Drag and Drop

<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <script>
            function letsdeop(ev)
            {
                ev.preventDefault();
            }
            function drag(ev)
            {
                ev.dataTransfer.setData("img", ev.target.id);
            }
            function drop(ev)
            {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("img");
                ev.target.appendChild(document.getElementById(data));
            }
        </script>

    </head>
    <body>
        <table border="1">
            <tr >
                <td style="width: 50%"> <img src="" id="div1"
                                             draggable="true"
                                             ondrop="drop(event);"
                                             ondragstart="drag(event)"
                                             ondragover="letsdeop(event)"
                                            alt="drop here"
                                             ></td>
                <td style="width: 50%">  <img id="drag1" src="images.jpeg"
                                              draggable="true"
                                              ondrop="drop(event);"
                                              ondragstart="drag(event)"
                                              ondragover="letsdeop(event)"
                                              alt="Drop Here">

                </td>
            </tr>
        </table>
    </body>
</html>

Isn't it good chance to make Solitaire game ?

Video Element:

It is one of the most attractive new feature in HTML5 as it has facilitated media embedding .

Has it to embed only Videos? The element is flexible enough to carry out audio and images as well. So, how to use it?

Before answering this question, let's see how we used to use it before:

Listing 2: Old way

<object classid="" width="" height="" codebase="">
              <param name="allowFullScreen" value="true" />
              <param name="allowscriptaccess" value="always" />
              <param name="src" value="" />
              <param name="allowfullscreen" value="true" />
             <embed type="" width="" height="" src="" allowscriptaccess="" allowfullscreen=""></embed>
</object>

Horrible !!!!! Okay, let' see how it's easy to embed a video in HTML5:

Listing 3:Video element

<video width="" height="">
             <source src="" type="">
             <source src="" type="">
              //Enter Text here
</video> 

OMG Really Easy, Let’s talk in details. What is src and type?

  • Src : indicate the media source to be displayed
  • type : is the mime type of the media , like the following
MP4 Video/mp4
WebM Video/webm
Ogg Video/ogg

Like we say:

<video width=”300” height=”250” controls>
    <source src=”vid.mp4” type=”video/mp4”>
        This msg appears because video tag is not supported by your browser
</video>

It will be displayed as following:

Video element
Figure 2: Video element

Notice that the control appear because I have restricted the tag to display controls like play, sound adjustment, duration ...etc

Also, I can define more than one tag but it will display the first specified known format only.

What if I want to make it autoplay upon element load? Just use attribute autoplay in video tag, it will do the job, so our code will be like below:

<video width=”300” height=”250” controls autoplay>
    <source src=”vid.mp4” type=”video/mp4”>
        This message appears because video tag is not supported by your browser
</video>

Notice that the previous code can be written without source tag and specify, the src attribute like that:

<video width=”300” height=”250” src=” vid.mp4 ” controls autoplay></video>

Another attribute in video tag is autobuffer which is used to buffer video in background before watching, as obvious it can't be used with autoplay, since it opens immediately but autobuffer need time, so if used together autobuffer is completely ignored.

Another cool attribute is poster which is used to specify poster to the media file before playing if it's video else it will be fixed.

It is used like below:

<video width=”300” height=”250” src=” vid.mp4 ” poster=”post.jpeg”  controls ></video>

And it will look like that:

Video

Figure 3: Video

One interesting thing to mention is we can override”ignore” the traditional controls attribute and create our own controls using Javascript by play(), pause() methods or setting new dimensions by width and height.

Geo-location

Have you ever think how much fancy things you can do if you know your latitude and longitude? I can share my location on any social networking website, I can create my own application to follow where I am . It can be used for military and national usage.

It's really fancy feature offered by HTML5 without third party APIs which will make things much more easier for developers.

GeoLocation let us share our location with a favourite web apps or even capture it in back-end server to be stored in database.

As mentioned before Javascript is involved, so we have no tag called geolocation but we invoke some predefined methods from JavaScript to do the job.

So how can we invoke the geolocation

Do you remember the element navigator which is DOM component? It's the invoker.

All you have to do is to write navigator.geolocation and invoke the methods you need in the APIs,

The most common methods are:

getCurrentPosition() Which retrieves the current geographic location of the user “latitudes and longitudes”
watchPosition() It's a watcher “think of it as a spy” which retrieves periodic updates about GL, think of it as it's working in separate thread in background
clearWatch() It cancel WatchPosition()

Demo:

This demo will get geolocation automatically on page load.

Listing 4: Geolocation

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script>
            var pos;
            function getLocation() {
                navigator.geolocation.getCurrentPosition(pos);
                document.writeln(pos.coords.latitude + " " + pos.coords.longitude);
            }
        </script>

    </head>
    <body onload="getLocation();">

    </body>
</html>

From the previous demo, we find that getCurrentPosition method is invoked and a parameter is passed to it to store the upcoming longitude and latitude.

Parameter contents can be invoked by the following:

  • [parameter].coord.latitude : as we saw in the demo, it returns the latitude in decimal format
  • [parameter].coord.longitude : as we saw in the demo, it returns the longitude in decimal format
  • [parameter].coords.altitude : The altitude in meters above the mean sea level
  • timestamp : the date/time of the response
  • [parameter].coords.speed : the speed in meters per second

Interesting, isn't it? It's not everything it's some of all.

Hope you liked the article. See you next time.



My main area of specialization is Java and J2EE. I have worked on many international projects like Recorders,Websites,Crawlers etc.Also i am an Oracle Certified java professional as well as DB2 certified

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login