Posts Tagged ‘dhtml’

Web progress bar

September 16, 2008 4 comments

Would you like something like this in your web page?
web progress bar
Then I will show you how to do it.
The basic idea is pretty simple: implement it using 3 DIVs – one for the progress bar background, one for the completed part and one for the label (indicating the completed value or percent). They are stacked on top of each other in the specified order, from bottom to top.

We will have a main DIV, the actual progress bar, and inside it a completed one that will take as much space from its parent as the task is completed and a label to indicate that percentage.

On the main DIV we specify a border that will enclose the entire progress bar and a background that will indicate the remaining part. We also specify a different background on the completed DIV to indicate the completed part of the task. As for the label we specify only a font color and the background should remain transparent, so the label just sits on the progress bar.

Both children DIVs of the progress bar are floated to left and the label one has a negative margin to allow to be displayed at the same coordinates as the completed one.

  • HTML code

    <div id='progressbar' class='progressbar'>
        <div id='completed' class='completed'></div>
        <div id='label' class='label'>0%</div>

  • CSS

    .progressbar {
        /* only for better layout :) */
        background-color: white;
        border: solid 1px black;
        width: 100px;
        height: 10px;
        font-family: arial;
        font-size: 10px;
    .progressbar .completed {
        /* mandatory */
        width: 0%; 
        height: 100%; 
        z-index: 1; 
        float: left;
        /* only for better layout :) */
        background-color: navy;
    .label {
        /* mandatory */
        width: 100%;
        height: 100%;
        z-index: 2;
        float: left;
        /* only for better layout :) */
        text-align: center;
        vertical-align: middle;
        color: yellow;

    As you can see some of the CSS properties are mandatory for the component to render as a progress bar, as some of the properties are used only for a visually appealing layout.

  • JavaScript

    function setPercent(percent) {
        document.getElementById("label").innerHTML = percent + "%";
        document.getElementById("label").style.marginLeft = "-" + percent + "%";
        document.getElementById("completed").style.width = percent + "%";

Next step will be to wrap all these into a nice component (JavaScript class). But this depends only on your architectural skills, as now you have the basic technique.

And in the end you can see a full working example, tested on IE6, FF3 and Safari 3. If you get rid of the hassle of implementing this yourself and you want a ready to use and easy to integrate progress bar component for your web pages you should see the MyUI JavaScript library. A demo is also available.

Just a side note, a throbber (or indeterminate progress bar) is easier to implement, that one being only a simple animated image.



July 23, 2007 5 comments

AJAX is gaining a lot of adopters these days and it seems to be like the new cool kid in town. If you’re in the web development area, you must use AJAX, otherwise you’re not cool at all.

But more than this, AJAX became a buzzword. And I definitely don’t like buzzwords. Because amateurs would try to use that word for everything that is related to that area.

We have to clearly see the difference between AJAX and DHTML. AJAX stands for Asynchronous JavaScript and XML and it is simply a way to communicate with a web server without making a new request in the browser. And this will happen more likely without user really feeling it. DHTML stands for Dynamic HTML and it is a set of technologies used for dynamically modifying a web page, usually incorporating JavaScript and CSS.

AJAX and DHTML are not excluding each other, but working together. With DHTML you can dynamically modify a site using client-side code. But sometimes you cannot simply have everything on the client side (or it could be too expensive to have it) and you should interact in some way with the server-side code. And then AJAX comes into stage, just to simply create a connection between some JavaScript client-side code (on an DHTML site) and a web server. Before this, you could have used signed Java applets or Flash, but this offers the opportunity of a pure JavaScript solution.

Actually you could even say that AJAX is a small part from DHTML, but people are using it the other way around. I have to admit that even the name was chosen to fit a new upcoming buzzword. With AJAX (Asynchronous JavaScript and XML) you can even do synchronous requests and handle HTML or plain text, even tough the initial intent and good practice is not to do it.
I know that it is cool to use all these new buzzwords, but it will be much more correct to use the right term.

For a good AJAX reference you can use Wikipedia. Read also the articles referenced at the end, I would especially recommend the ones from IBM developerWorks.

Categories: Web Tags: , , , , ,