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>
Posted by Unknown at 12:08 PM 0 comments
Labels: , , , , ,

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.
Posted by Unknown at 5:35 PM 2 comments
Labels: , , , , , , ,
Subscribe to: Posts (Atom)

Leadership 101


  • Leadership demands sacrifices for the near-term to receive lasting benefits. the longer we wait to make sacrifices, the harder they become. Successful people make important decisions early in their life, then manage those decisions the rest of their lives.
  • Growth does not happen by chance. If you want to be sure to grow, you need a plan something strategic, specific, and scheduled. it's a discipline that would need incredible determination from us.
  • Success comes by going the extra mile, working the extra hours, and investing the extra time. The same is true for us. If we want to get to excel in any segment of life, a little extra effort can help. Our efforts can go a long way if we only work a little smarter, listen a little better, push a little harder, and persevere a little longer.
  • Making a difference in your work is not about productivity; it's about people. When you focus on others and connect with them, you can work together to accomplish great things.
  • Envision a goal you'd like to reach. Make it big enough to scare you a little. Now write down a plan for moving toward it. Create mini-goals within the big goal, to set yourself up for continual progress. And include some risks, too. Set yourself up for success.
  • Leaders build margins, not image. A leader may be forced to take unpopular stands for the good of the company. Popularity isn't bad, but decisions made solely on the basis of popular opinion can be devastating. So take courage and make the right though sometimes painful choices.