▼

Sunday, January 8, 2012

Creating dynamic progress bar in HTML

This post will teach you how to create a dynamic progress bar in HTML using jQuery and CSS.

First, you need to have an HTML, please see below on how I do it.

- Create 3 divs: progressWrap, progressBar, and progressNum
- #progressWrap : this will be the container of the progressbar, take note of the width coz this will be the basis to compute for the percentage.
- #progressBar : this will be the actual progress bar
- #progressNum : this will be the percentage

For the benefit of this post, I set the #progressBar width to 50px which is 25% of #progressWrap width = 200px

<html>
<head>
        <title>Progress Bar</title>
        <style type="text/css">
        #progressWrap
        {
                margin: 0px 0px 0px 5px;
                background: #FFF;
                height: 11px;
                width: 200px;
        }

        #progressWrap #progressBar
        {
                height: 11px;
                position:absolute;
                background-color: #000;
        }

        #progressWrap #progressNum {
                text-align:center;
                width:100%;
                color:#515151;
                font-size:9px;
                font-weight:bold;
        }
        </style>
</head>
<body>
<div id="progressWrap">
        <div id="progressBar" style="width:50px"></div>
        <div id="progressNum">25%</div>
</div>
</body>
</html>


Next is to set our progress bar dynamic using jQuery. Please see below.

The formula for the percentage is based on the width of the container in CSS. The width is divided by 100 and will be multiplied to the percentage value to get the width of the progress bar.

<script type="text/javascript">
        $(document).ready(function() {
                var percent = 25;
                var width = percent * parseInt($('#progressWrap').css('width')) / 100;

                $('#progressNum').html(percent+'%');
                $('#progressBar').css('width', width+'px');
        });
</script>


To see the working script, please see below.

<html>
<head>
        <title>Progress Bar</title>
        <style type="text/css">
        #progressWrap
        {
                margin: 0px 0px 0px 5px;
                background: #FFF;
                height: 11px;
                width: 300px;
        }

        #progressWrap #progressBar
        {
                height: 11px;
                position:absolute;
                background-color: #000;
        }

        #progressWrap #progressNum {
                text-align:center;
                width:100%;
                color:#515151;
                font-size:9px;
                font-weight:bold;
        }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="progressWrap">
        <div id="progressBar"></div>
        <div id="progressNum"></div>
</div>
</body>
</html>
<script type="text/javascript">
        $(document).ready(function() {
                var percent = 25;
                var width = percent * parseInt($('#progressWrap').css('width')) / 100;

                $('#progressNum').html(percent+'%');
                $('#progressBar').css('width', width+'px');
        });
</script>
at No comments:

Thursday, January 5, 2012

File upload with style using jQuery and CSS

This post is an improved version of my previous post "How to put a style on input file type using CSS and jQuery". The improvement is due to the problem on IE sucks with security issues.

My previous post I have is basically working and will teach you how to open a dialog box and select the file you want to upload with a styled layout.

However, the problem on IE is that it doesn't accept the approach of jQuery or Javascript, that triggers the click event of the input file element that causes an error "Access is Denied" when submitted.

Good thing I was able to find a way to trick IE. Please see below on how I do it and hopefully will be able help developers.

First, we need to understand what IE's requirement are to make it work. So, basically for the file upload to work on IE, the user should have to click on the input file element without using jQuery or Javascript to do it for us.

Given the requirement of IE and the style to put in, the best solution for me is to use CSS opacity and z-index.

In logic, what you need to do is #1. set your input file element on top of your styled textbox using z-index, this is for user to be able to click the file input element. #2. set the input file element as invisible using the opacity equal to zero "0", this is to hide the input file element and the styled textbox will be visible instead. That way, we can satisfy IE and at the same time, be able to style the file upload.

As for the sample script I made, please see below.
The sample compose of 2 scripts: index.html and upload.php

index.php

<html>
<head>
        <title>File Upload</title>

        <style type="text/css">
        div.inputContainer {
                position: relative;
        }
        div.inputStyled {
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 1;
        }
        input.inputHide {
                position: relative;
                text-align: right;
                -moz-opacity:0 ;
                filter:alpha(opacity: 0);
                opacity: 0;
                z-index: 2;
        }
        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
                $('#docufile').change(function() {
                        var vals = $(this).val();
                        val = vals.length ? vals.split('\\').pop() : '';

                        $('#document').val(val);
                });

                $('#btnSubmit').click(function() {
                        $('#frmAdd').submit();
                });
        });
        </script>
</head>
<body>
<form id="frmAdd" name="frmAdd" action="upload.php" method="post" enctype="multipart/form-data" encoding="multipart/form-data">
        <div class="inputContainer">
        <div class="inputStyled">
                <input name="document" id="document" type="text">
                <input name="button" type="button">
        </div>
        <input type="file" class="inputHide" name="docufile" id="docufile"/>
        </div>
        <input type="submit" value="submit" id="btnSubmit"/>
</form>
</body>
</html>


upload.php

<?php

$docufile = '';
if (@$_FILES['docufile']['tmp_name']) {
        $docufile = upload_file($_FILES['docufile']);
}

echo $docufile;

function upload_file($docu=null) {
        $upload_dir = "files/";
        $docu_file='';

        if (!$docu['error'] == 0) return '';
        if (!@is_uploaded_file($docu['tmp_name'])) return '';

        $filename = preg_replace("/\s+/", "", $docu['name']);
        if (!file_exists($upload_dir.$filename)) {
                $docu_file = $filename;
        } else {
                $rand = 1;
                while(file_exists($upload_dir.$rand."-".$filename)) {
                        $rand ++;
                }
                $docu_file = $rand."-".$filename;
        }

        $upload_file = $upload_dir.$docu_file;
        if (!@move_uploaded_file($docu['tmp_name'], $upload_file)) {
                return '';
        }

        return $docu_file;
}
?>


Quote for the day:
If you want to reach your potential, you need to add a strong work ethic to your talent. If you want something out of your day, you must put something in it. Your talent is what God put in before you were born. Your skills are what you put in yesterday. Commitment is what you just put in today in order to make today your masterpiece and make tomorrow a success. - john m.
at 2 comments: