Drag element back and forth….

To make an element drag back and forth you just need to follow the same procedure as of drag and drop , you just need to create one more <div> tag with all the events (i.e ondragover and ondrop) like of the <div1>

Advertisements
By Mydailylife Posted in HTML5

Drag and Drop…

uha,,,it took so long for me to catch up with the concept of drag and drop in html5..but after so so many research i got something,,…i mean a little bit of idea ..so i am going to write here in my diary for the future reference….

Below is an example i have tired with reference to some sites,

<html>
<head>
<style type=”text/css”>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type=”text/javascript”>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData(“TEXT”,ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData(“TEXT”);
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
<br/>
<img src=”images/river.gif” id=”drag1″ ondragstart=”drag(event)” draggable=”true” width=”336″ height=”69″>
</body>
</html>

So from the above example let me explain a little bit on it,

1. To make an element draggable set the draggable attribute to true.

like, <img src=”images/river.gif””  draggable=”true”>

2. What to drag- onstartdrag and setData

onstartdrag is an event and in the example above the onstartdrag is an attribute that calls a function called drag(event) which specify what data to be dragged. In the function dataTransfer is a property that pass the information between draggable object and drop target. And this property has two methods setData() and getData(). In order to pass the data one must use these two methods, setData() while dragging an object using some event and to receive the object in the drop target using some event it has to use getData(). The parameter of setData is the dataTypes and data that is going to be set and for the dataType so far, the only cross-browser dataTypes that can be set are ‘Text’ and ‘Url’. And for the getData() only dataTypes is the parameter.

3. Where to drop-ondragover

The ondragover event specifies where the dragged data can be dropped.

By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.

This is done by calling the event.preventDefault() method for the ondragover event attribute. And the function name is allowDrop().

4. Do the drop- ondrop

When the dragged data is dropped, a drop event occurs.

In the example above, the ondrop attribute calls a function, drop(event), here

  • Get the dragged data with the dataTransfer.getData(“Text”) method. This method will return any data that was set to the same type in the setData() method
  • Append the dragged element into the drop element
  • Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop).

This is all i have understood but i will try to browse it again and try to get it more clear…

HTML5 Audio

We can even play audio on our web pages without flash and other audio plugins.

The syntax –

<audio controls=”controls”>

<source src=” ” type=”audio/mpeg”>

your browser may not support audio tag.

</audio>

this is same like video the only difference is about the format the tag name is <audio> and the format of the audio is mpeg  and other formats are as following , currently there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:

Browser MP3 Wav Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES

 

By Mydailylife Posted in HTML5

HTML Video+DOM

The post i posted an hour ago is also about the <video> tag but with the control in itself  using “controls” attribute but this is about the <video> tag where the control is created using DOM concept…

Steps:

1. First of all create the buttons for the controls by calling the functions created in the script.

2. Then create the video with its id and with its attribute width and height.

3. Create a script

4. Create a variable for whose vale is called with id created for video.

5. Then create functions.

 

By Mydailylife Posted in HTML5

HTML5 video

The HTML5 <video> tag makes it possible to embed video clips in web pages much like how the<img> tag works for images. The browser itself provides the playback functionality without any need for plugins like Quicktime or Flash.

The syntax is-

<video width=” ” height=” ” controls=”controls”>

<source src=” ” type=” video/mp4″>

Your browser doesn’t support HTML5 <video>.

</video>

<video>  tag is used to create video,

width and height are the attributes of <video> tag in which we specify the width and height in number,

controls is another attribute which enables the control including play,pause and volume control.

<source> tag include attribute of source of video and type, here the type is mp4(format of the video file).

For the type, different browser supports different types, following shows which browser supports which type, currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

Browser MP4 WebM Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES NO NO
Opera 10.6 NO YES YES

 

By Mydailylife Posted in HTML5

Video and audio with html5…

Today i have learnt about video and audio using html5 and it’s really really awesome ..i enjoyed it a lots …i am moving forward to learn on my own by exploring…i feel happy…god bless me always..my lord…

 

Now next…..to move on…..keep exploring and one day you will become a master of something….

Learnt sth…

I have learnt something yesterday of real world implementation of my work…i went to Bhutan Telecom and put my project that i was doing for so long in their server and found out some error and so now i am working to fix those errors..and i have learnt how things work in real world…and i am really excited to learn more..i wanted to get in some reputed organisation as an volunteerism and get experience… before i really get into job market…

 

I am really worried about my future,…so that’s why i am trying to make myself capable of sth..God help me…

Client side form validation – Javascript

One of the ways to do a form validation at client side is as following-

 

1. create a <div> tag with an id.

<div id=””></div>

2. with javascript create a function where it checks whether the field is empty or not.

3. display the message in the id created, and here we use innerHTMl concept to display the message near the textbox rather then shoeing in a pop up window…

 

Below is the example to make you more clear about validation—
<script type=”text/javascript”>
function validation()
{
if(document.login.username.value==””){

document.getElementById(‘login_error’).innerHTML=”Please enter username”;
return false;

}

else if(document.login.password.value==””){

document.getElementById(‘login_error’).innerHTML=”Please enter password”;
return false;
}

}
</script>

<table>
<form name=”login” method=”get” onSubmit=”return validation()” action=”login_process.php”> <!–here “action” is where you want to proceed–>

<div id=”error”></div>
<tr>
<th>Login</th>
</tr>
<tr>
<th><div id=”login_error”></div>Username <input type=”text” name=”username”/></th>
</tr>

<tr>
<th>Password <input type=”password” name=”password”/></th>
</tr>

<tr>
<th colspan=”2″><input type=”submit” name=”submit” value=”Submit”/></th>
</tr>

</form>
</table>

“Read more” link + html+css+javascript

The below is how to create a “read more” inline link:

this is html…

<p>Royal Thimphu College (RTC), Bhutan’s first private college, offers general degree programs under the auspices of the Royal University of Bhutan.
Our objective is to contribute to educational excellence in Bhutan and to become an institute of international repute attracting outstanding students
from Bhutan and abroad. The College aims to provide the best possible education to its students, while keeping fees affordable and competitive with
those in the region.
<a href=”#” id=”example-show” class=”showLink”
onclick=”showHide(‘example’)”>Read More</a>

<div id=”example” class=”more”>The RTC campus, covering an area of 25 acres in Ngabiphu, offers a secluded and peaceful natural environment for study.
At the same time, it is only a 15 – 20 minute drive from the capital city, Thimphu, which offers sports, leisure and cultural
attractions as well as the potential for student internships and field trips.

RTC faculty staff hail from six different countries. Together they provide diverse and innovative teaching methods and offer
students an international perspective on their studies. All of our lecturers are well qualified and dedicated to providing the
best possible education for RTC students.</p>
</div>

this is css…

 

.more {
display: none;
}
a.showLink{
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(‘down.gif’) no-repeat left; }
a.showLink:hover{
border-bottom: 1px dotted #36f; }

 

this is javascript…

 

<script type=”text/javascript”>
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+’-show’).style.display != ‘none’) {
document.getElementById(shID+’-show’).style.display = ‘none’;
document.getElementById(shID).style.display = ‘block’;
}
else {
document.getElementById(shID+’-show’).style.display = ‘inline’;
document.getElementById(shID).style.display = ‘none’;
}
}
}

 

 

HTML5 ..Awesome!!!

Today i have learnt about web forms in html5 and it is really awesome i enjoyed a lot and will master in it..Thank you HTML5 for making our task easier…

 

Now slowly scripting is being converted into markup language and even provide more features which really make our work easier and interesting , i love it…