Hotshots Point of View: css

Showing posts with label css. Show all posts

Sunday, September 16, 2012

CSS 101: Display inline-block not working on IE

Below is a simple post to help you with your IE problem.

There's a problem on IE when displaying element as inline that works perfectly on other browser. On IE, it will only works on elements that are relatively inline like span element.

For inline to work on other elements with IE, you just need to put safe on your display then set the zoom to 1. Please see tricks below.


.yourelement {
  
display: inline-block;
  
*display: inline;
  
zoom:1;

}

Hope this helps on your IE issues. Happy coding!!

Saturday, July 21, 2012

Setting up shadow boxes on your website.

This is just a short post for you to put shadow inside and outside of your website's page elements such as input text box, text area, buttons, images, etc..

Inside Shadows:


.in-shadow { 

        box-shadow: inset 1px 1px 1px #a2a2a2;

        -moz-box-shadow: inset 1px 1px 1px #a2a2a2;

        -webkit-box-shadow: inset 1px 1px 1px #a2a2a2;

}

Outside Shadows:


.out-shadow { 

        box-shadow: inset 1px 1px 1px #a2a2a2;

        -moz-box-shadow: inset 1px 1px 1px #a2a2a2;

        -webkit-box-shadow: inset 1px 1px 1px #a2a2a2;

}

Hope you like this. Happy coding!!

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>

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.

Tuesday, December 20, 2011

How to put a style on input file type using CSS and jQuery

I came to this development where in I need to put a style on input file element. This is actually a challenge for me, but was able to find a way to do it. The button and inputbox is normally display in one call of an element. However, in CSS we can't style it the way we do with a normal input box, text area, etc.. and the only way for us to style it is to use jQuery/Javascript with a simple cheat using CSS.

First, we need to have a style for our inputbox and button.., that is actually for you to decide on how you want it to be.

Second, setup the HTML with the input file type element together with a styled inputbox and button. Please see below on how it will look like and take note of the id attribute I put in to be use for jQuery.



<input type="text" id="inputbox" name="inputbox" class="myinputbox"/>

<input type="button" id="button" name="button" class="mybutton"/>

<input type="file" id="inputfile" name="inputfile"/>

Once you've setup your HTML, we need to use the jQuery to trigger the #inputfile whenever we click on #inputbox or #button. Please see below.



$('#inputbox, #button').click(function() {

    $('#inputfile').trigger('click'); 

});

We also need to get the value of the #inputfile and change the value of the styled #inputbox as it changes. This is normally the filename of the file you selected on the open file dialog box.



$('#inputfile').change(function() {

    var data = $(this).val();

    var file = data.length ? data.split('\\').pop() : '';

    $('#inputbox').val(file);

});

Now, whenever you click on #inputbox and #button, the open file dialog box should appear and any change of value on #inputfile should reflect on #inputbox.

Lastly, we need to hide the #inputfile and retain the styled #inputbox and #button with a functional input file type element.

We can't use style="display:none" coz in some browsers JS will not work if the element is HIDE. So, the best way to do it is to set the opacity to "0" zero. This is a simple cheat to hide the elements without disabling them.

You will also have to consider other browsers, so the style should support all browsers. Please see below.



-moz-opacity:0;

filter:alpha(opacity:0);

opacity:0;

In summary, your HTML script should be like this.



<html>

<head>

<title>How to put a style on input file type using CSS and jQuery</title> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

    <input type="text" id="inputbox" name="inputbox" class="myinputbox"/>

    <input type="button" id="button" name="button" class="mybutton"/>

    <input type="file" id="inputfile" name="inputfile" style="opacity:0"/>

</body>

<html>

<script type="text/javascript">

$(document).ready(function() {

    $('#inputbox, #button').click(function() {

        $('#inputfile').trigger('click'); 

    });



    $('#inputfile').change(function() {

        var data = $(this).val();

        var file = data.length ? data.split('\\').pop() : '';

        $('#inputbox').val(file);

    });

}); 

</script>

Hope this helps a lot of developers.
Please see also my new post "File upload with style using jQuery and CSS".

Friday, November 18, 2011

How to disable resize functionality on textarea

Textarea by default is resizable by dragging the bottom right corner of the element. Having that functionality will causes the layout to crash if we implemented styles in our textarea, such as having a background image instead of shadow style. That is because the background image doesn't follow the size of the textarea when resized.

We can disable the resize functionality by setting the resize to none. Please see below for the implementation.



<html>

<head>

<title>Disable Resize in Textarea</title> 

</head>

<body>

<textarea style="resize:none" rows="5" cols="5"></textarea> 

</body>

</html>

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.

Sunday, May 15, 2011

How to make your background image as carousel using CSS and jQuery

This post will teach you how to set your background as carousel of images using CSS and jQuery.

To do this, just follow the 3 simple steps below.

1. First, you should have the list of images for your site's background.

2. Set an id for your <body> tag, let say id="body" as stated below.



<html>

<head>

</head>

<body id="body">

</body>

</html>

3. Create a javascript that changes the background-image property of the body tag using jquery and set it in a loop using setTimeout().



<script type="text/javascript">

        function carousel_bg(id) {

                var bgimgs = [ '1920x625_Sonata_homepage_image.jpg',  '1920x625_Equus_homepage_image.jpg',  '5_home_hero_1920x625_CF_background.jpg' ]; // add images here..

                var img = bgimgs[id];

                var cnt = 3; // change this number when adding images..



                $('#body').css("background-image", "url(http://www.pitstopmotors.com.ph/images/"+img+")");



                id = id + 1;

                if (id==cnt) id = 0;



                setTimeout("carousel_bg("+id+")", 10000);

        }



        $(document).ready(function() {

                carousel_bg(0);     

        });

</script>

You can still add images by adding the image filename on the array "bgimgs" and change the variable "cnt" to add images as part of the loop.. and that's it.

To get the complete code, please see below.



<html>

<head>

<title>Hotshots Carousel Background</title>

Wednesday, March 23, 2011

How to set up an auto adjust width and height in CSS

Again, our best friend IE has it's own way of doing things. IE interprets width and height as min-width and min-height which is totally different from other browser. Given that, this can be a problem if we want our container to adjust accordingly to the content we want to display.

To resolve this, please see below.

#container {
        background-color:#FFFFFF;
        width:840px;
        height:450px;
}
html>body #container {
        height: auto;
        width: auto;
        min-height:450px;
        min-width:840px;
        overflow:hidden;
}

All browsers including our best friend IE will read through the first set of CSS rule #container and the second set will not be interpret by IE because it uses child selector 'html > body' in which interprets Non-IE browser.

Sunday, March 20, 2011

Setting up a style in table header and data records

Just sharing you the basic but a good look style for table display.

table tr td, table tr th {
        font-size: 9px;
        background-color: #ECEFF5;
        border: 1px dotted #0B3485;
        color: #0B3485;
        height: 25px;
        padding: 2px;
        vertical-align: middle;
}

Details are as follows:

font-size - The size of the font you want.
background-color - The background color of your table.
border - The border of your table, I set it to 1px dotted to be not so usual.
color - The color of your text.
height - The height of each table row.
padding - This is to setup a padding in displaying records.
vertical-align - To align the data vertically. I set it to middle to vertically align it in center.

Setting up a style in form input button

By default, input button and submit type is not really in a good look.. I recommend to style it with a simple CSS entry below. Hope you like it!!

input[type="button"], input[type="submit"] {
background-color: #1E6591;

Setting up a style in form input text and textarea

By default, input text and textarea in a form is not really in a good look.. I recommend to style it with a simple CSS entry below. Hope you like it!!

input[type="text"], textarea {
        background: #f9f9f9;
        border: 1px solid #ccc;
        box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
        -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
        -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
        padding: 2px;
        font-family: "lucida grande",verdana,tahoma,arial,sans-serif;
}

Details are as follows:

background - This will be the color of the box shadow
border - Color of the box border
box-shadow - This is the current standard in CSS shadow settings
-moz-box-shadow - This is used to support way too old version of Mozilla
-webkit-box-shadow - This is used to support other browser
padding - To implement padding between other elements.
font-family - To put a style in fonts for textarea and input text.

Hope this helps a lot. Happy coding!!

Sunday, March 6, 2011

CSS class for transparency that all browsers support

Personally, one of my favorite in web designs are transparency. It gives life to your site as you will have layers of texts and images in one look.

It's great thing haa!! but did you know that having that in your site is a challenge for us programmers? That is because we have to consider all browsers to support transparency in one time setting.

Good thing..!! The class below will resolve the implementation of transparency for all browsers.

.transparency {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}

Below are the CSS properties we used:

opacity: 0.5; - This is the current standard in CSS transparency settings. This will work in most versions of Firefox, Safari, and Opera.
filter: alpha(opacity=50); - This one is for our best friend IE.
-moz-opacity: 0.5; - This one you need for way too old version of Mozilla.
-khtml-opacity: 0.5; - This one you need for old Safari (1.x).

Resource: css-tricks.com

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