Randika Says

Life Experiences and Experiments of a Software Developer…

HTML5 Code Snippets 1 – Progress Element

html5Ok.This is our first meet up that we are gonna talk about anything related to technical stuffs.It’s about HTML5 elements.A newly introduced tag within the new HTML spec.It’s “Progress” element or the Progress tag.It helps us to show a progress bar,simply embedded(built) into our web pages.And bellow I will post a URL to our example Fiddle (sorry guys,as I’m not a WordPress Pro User,they don’t allow me to publish an alive instance of the JSFiddle,instead they always convert my <iframe> tags into just <a> anchor tags,and lets me keep the hyper link only.So unfortunately throughout this Blog you all will have to click on the links that redirect to the JSFiddle code samples.So sorry once again.) :

http://jsfiddle.net/DXrKX/embedded/result/

So hope you did click on the above link and then,Run the fiddle at their web page and saw what’s the behavior of this Progress element or how does it look like.(run the fiddle by clicking on the play button on the right side upper corner 0f the window…).ok,then let me walk you through the code,just to simplify and explain the code to you.It’s really a lovely garden of JS and HTML,that’s all. 🙂

(I hope that you know the very basic structure of any HTML page,It’s to be started with <html> tag and then end with the related closing tag which is </html>.And just because we are gonna deal with HTML5,there we should have given the Doctype as follows before the starting html tag,as like this <!DOCTYPE html><html> and the others goes as the same.)

Ok,After the closing head tag </head> the pages’ body starts and in anywhere of the page where we need our Progress bar to placed within just keep the following code lines.(Assume that my web page only have a paragraph and then the progress bar only,it’ll look like as follows) :

<body>
<p>Hello HTML5 Progress

This is my explanatory paragraph and you can keep any content you need here or you can directly remove this paragraph tags and place any work of HTML tags you need to be rendered in your webpages.you just need the bellow, “progress” element pair only to build a progress bar within your webpage….Ooops and a little JavaScript to.Here I’m gonna add only a visual effects only.It’s up to you to find out how to give the real values to your progress bar to be visualized whether your web page is fully loaded or how much of your photo/video/doc is uploaded,is really dependent on your purpose of the web design and development.</p>

<progress min = “0” max = “100” value = “0” id = “progrs”></progress>
</body>

Remember, that the major attributes of our progress tag are, Min,Max,Value and the must Id attribute to grasp needed progress tag element’s HTML within the JS script.Min and Max tells that how much of the file or the content are we gonna meter or monitor through the progress bar.And the Value attribute tells that start the visual animation from which point of the progress bar.And we need the id attribute to keep reference back to the progress tag within JavaScript.

Ok,let’s go through the JavaScript that is needed to animate our little progress bar.Here’s the JavaScript “Code Snippet” :

var p = document.getElementById(‘progrs’);
setInterval(function() {
p.value += 1;
}, 50);

First we grab out reference pointer to the progress bar element from the DOM,to be used it to be manipulated by JS to animate it.it’s done by passing the parameter of Id value of our progress element which is “proggrs”.Then we call the default function of V.Simple JavaScript “setInterval()”.It sets an Interval and keep calling any code we pass it as parameter again and again accordingly to the given time interval.It’s method signature looks like

  • setInterval(functionName or the function with whole body,and TimeInterval) ;
  • setInterval(functionName,5000);  //function body should have been declared within the script in somewhere else.
  • setInterval(functionName(){

    //some code to be executed here within the time interval.
    } ,5000);

So as you can see we tell in our code to JS,just keep increasing the value of the progress elements’ value attribute,by 1 at a time where the interval get expired.And according to that DOM manipulation within the JavaScript we write,it keeps updated the visualization of the progress bar as when it’s keep progressing towards the 100% the fullest progression.And here is the simplest JavaScript we used for this example.

var p = document.getElementById(‘progrs’);
setInterval(function() {
p.value += 1;
}, 50); //given interval time value is 50 milliseconds.You can set it to 5000ms if you need to increase the value //within next 5 secs.

P.S. : You can view how the code has been done in JSFiddle by clicking on the “+” (plus mark) on the right side’s upper corner.And also you can edit the code I have done and update it and then run it what differences could have been done by yourself.Specially you should try doing this example by giving different values for the Progress element’s value attribute,and also changing the time interval which I have used is 50 inside the “setInterval” function.

So I hopefully posted that this code snippet will be helpful to you wherever,however though you are a professional than me or if you are a beginner too.Anyway….let me continue this topic to Common category,while wishing you All the Best for Your HTML5 Studies…(if want to proceed further click the link bellow) —->a link will be added sooner.Thanks…!

Advertisements

2 comments on “HTML5 Code Snippets 1 – Progress Element

  1. Eranda
    June 16, 2012

    This is good. Post a practical usage (like loading of an image) if you can

    • Randika Vishman
      June 16, 2012

      Yap,that’s true still finding out how to get the amount of the uploaded portion as a number in our JS,jQuery or in PHP….I really don’t know how to yet! 😐

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on June 16, 2012 by in Code Snippets and tagged , , , , , , .
%d bloggers like this: