Hotshots Point of View: html

Showing posts with label html. Show all posts

Sunday, July 1, 2012

HTML 101: Setting up tab index in your website

Setting up tab index is very useful if you want your text boxes, buttons, and any other elements be set in a specific order.

You can set it by using "tabindex" attribute to all your input elements. Please see sample below.


<input type="text" value="" name="text" tabindex="1"></input>

<input type="text" value="" name="text" tabindex="2"></input>

<input type="submit" value="submit" name="text" tabindex="3"></input>

You can also disable the tab index of an element by setting the value to "-1". This is very useful if you have an element that is hide or you set the opacity to be not visible. Please see sample below.


<input type="text" value="" name="text" style="opacity:0;" tabindex="1"></input>

<input type="text" value="" name="text" tabindex="-1"></input>

<input type="submit" value="submit" name="text" tabindex="2"></input>

Hope this is helpful!

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>

Tuesday, September 20, 2011

JS 101: How to get URL parameters from HTML page

Same with PHP or ASP page, HTML will be able to get the query string parameters but not that as easy compare to PHP and ASP.

We can get it by parsing the URL parameters via javascript, and to help you with, I created a script below that does it.

The script will parse and get the "spage" parameter of the HTML page and prompt it via alert dialog box. Sample URL will be.. index.htm?spage=1..



var spage = getUrlParam("spage");

alert(spage);



function getUrlParam(param)

{

    var hash = [];

    var value = '';

    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        if (hash[0] == param) value = hash[1];
    }

    return value;
}

Hope you like it!!

Sunday, September 18, 2011

IE 101: Misalignment of element on IE browsers

In web development, most developers have issues on IE compatibility. One of the problem I encountered are the misalignment of the element in IE browser, specially the IE8.

This is due to the styling you made on alignment. We normally use vertical alignment in CSS to align our element vertically.

Problem here is that the value "text-top" is not working on IE8. Hence, you have to use "top" instead, which is the same behavior with "text-top".

In your CSS entries, instead of using this one:



vertical-align: text-top;

You have to use this one:



vertical-align: top;

Hope this helps.

I'll be posting more of IE issues to help other developers to get through with it. Follow IE 101 for more of IE posts.

Saturday, May 21, 2011

Tips & Tricks: Changing the site address using HTML FRAMES

To change the site address or do redirection using your own URL, you can use HTML FRAMES.

All you need to do is to supply the site address on source attribute of the FRAME and set the columns and rows to 100%.



<html>

<frameset cols="100%">

<frameset rows="100%">

<frame src="http://www.google.com/">

</frameset>

</frameset>

</html>

Hope this post helps you!

Monday, May 2, 2011

Handling HTML checkbox in AJAX

This post will teach you how to check and uncheck all the checkbox in a table using a toggle checkbox.

I have created 3 functions below.

check_toggle - this will toggle checkbox whether check all or uncheck all.
check_all - this will check all the checkbox in the form.
uncheck_all - this will uncheck all the checkbox in the form.

Please see implementation below.

<script type="text/javascript">

function check_toggle() {
        var obj = document.frmdata.checkbox_toggle;
        if (obj.checked==true) {
                check_all();
        } else {
                uncheck_all();
        }
}

function check_all() {
        var obj = document.frmdata.checkbox
        if (!obj.length) {
                obj.checked = true
        } else {
                var x = 0;
                for (x = 0; x <= obj.length; x++) {
                        obj[x].checked = true
                }
        }
}

function uncheck_all() {
        var obj = document.frmdata.checkbox
        if (!obj.length) {
                obj.checked = false
        } else {
                var x = 0;
                for (x = 0; x <= obj.length; x++) {
                        obj[x].checked = false
                }
        }
}

</script>

<form id="frmdata" name="frmdata">
<table>
        <tr>
                <td><input type="checkbox" name="checkbox_toggle" id="checkbox_toggle" onclick="check_toggle();"></input></td>
                <td>Description</td>
        </tr>
        <tr>
                <td><input type="checkbox" name="checkbox" id="checkbox"></input></td>
                <td>Row 1</td>
        </tr>
        <tr>
                <td><input type="checkbox" name="checkbox" id="checkbox"></input></td>
                <td>Row 2</td>
        </tr>
         <tr>
                <td><input type="checkbox" name="checkbox" id="checkbox"></input></td>
                <td>Row 3</td>
        </tr>
</form>

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.

Hotshots Point of View