Codetruster: May 2013

Sunday 19 May 2013

Tab Concept Using Simple Css And Javascript

Nowdays tabs are very essential thing for every websites.Even in the facebook,Gmail these tabs concept are used..
Lets see how it works using javascript and css. Just call the id were u want the tab and use the script then the output will be :

Live Demo :

IT Software Development
Web Designing
Web Hosting
Networking

Sujeeth
Kishore
Dheeksha
Naveen

Website
Blogger
Google+
Facebook

Live Demo :

Download Coding : TabConcept

Style :

<style type="text/css">
#tab_main {  
    margin: 0px auto 0px auto;  
    width:400px;  
}  
.tab_menu h4 {  
    font-family:Arial, Helvetica, sans-serif;  
    font-size:23px;  
    color:#003300;  
    letter-spacing:-1px;  
    margin-bottom:10px; 
    margin-left:130px; 
}  
.tabbed_main {  
    border:1px solid #494e52;  
    background-color:#003300;  
    padding:8px;      
}
ul.tabs {  
    margin:0px; padding:0px;  
}  
ul.tabs li {  
    list-style:none;  
    display:inline;  
}  
ul.tabs li a {  
    background-color:#009900;  
    color:#ffebb5;  
    padding:8px 14px 8px 14px;  
    text-decoration:none;  
    font-size:9px;  
    font-family:Verdana, Arial, Helvetica, sans-serif;  
    font-weight:bold;  
    text-transform:uppercase;  
    border:1px solid #464c54;   
}  
ul.tabs li a:hover {  
    background-color:#009900;  
    border-color:#2f343a;  
}  
ul.tabs li a.active {  
    background-color:#ffffff;  
    color:#282e32;  
    border:1px solid #464c54;   
    border-bottom: 1px solid #ffffff;  
}  
.content {  
    background-color:#ffffff;  
    padding:10px;  
    border:1px solid #464c54;     
}  
#content_2, #content_3 { display:none; }  
ul.tabs {  
    margin:0px; padding:0px;  
    margin-top:5px;  
    margin-bottom:6px;  
}  
  .content ul {  
    margin:0px;  
    padding:0px 20px 0px 20px;  
}  
.content ul li {  
    list-style:none;  
    border-bottom:1px solid #d6dde0;  
    padding-top:15px;  
    padding-bottom:15px;  
    font-size:13px;  
}  
.content ul li a {  
    text-decoration:none;  
    color:#3e4346;  
}  
.content ul li a small {  
    color:#8b959c;  
    font-size:9px;  
    text-transform:uppercase;  
    font-family:Verdana, Arial, Helvetica, sans-serif;  
    position:relative;  
    left:4px;  
    top:0px;  
} .content ul li:last-child {  
    border-bottom:none;  
}
ul.tabs li a {  
    background-image:url(images/tab_off.jpg);  
    background-repeat:repeat-x;    
    background-position:bottombottom;  
}  
ul.tabs li a.active {  
    background-image:url(images/tab_on.jpg);  
    background-repeat:repeat-x;  
    background-position:top;   
}  
.content {  
    background-image:url(images/content_bottom.jpg);  
    background-repeat:repeat-x;    
    background-position:bottombottom;   
}  
</style>

Script :

<script type="text/javascript">

function tabSwitch(new_tab, new_content) {  
      
    document.getElementById('content_1').style.display = 'none';  
    document.getElementById('content_2').style.display = 'none';  
    document.getElementById('content_3').style.display = 'none';          
    document.getElementById(new_content).style.display = 'block';     
      
  
    document.getElementById('tab_1').className = '';  
    document.getElementById('tab_2').className = '';  
    document.getElementById('tab_3').className = '';          
    document.getElementById(new_tab).className = 'active';        
  
}  
function tabSwitch_2(active, number, tab_prefix, content_prefix) {  
      
    for (var i=1; i < number+1; i++) {  
      document.getElementById(content_prefix+i).style.display = 'none';  
      document.getElementById(tab_prefix+i).className = '';  
    }  
    document.getElementById(content_prefix+active).style.display = 'block';  
    document.getElementById(tab_prefix+active).className = 'active';      
      
}  
</script>

Index :

<div id="tab_main" class="tab_menu">  
    <h4>Tab Concept</h4>  
    <div class="tabbed_main">  
      <ul class="tabs">  
    <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">SOFTWARE</a></li>  
    <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">FRIENDS</a></li>  
    <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">DESIGNING</a></li>  
</ul>
          
        <div id="content_1" class="content">
        
            <ul>
               <li>IT Software Development</li>
               <li>Web Designing</li>
               <li>Web Hosting</li>
               <li>Networking</li>
            
            </ul>
        
        </div>  
        <div id="content_2" class="content">
        
        
            <ul>
               <li>Sujeeth</li>
               <li>Kishore</li>
               <li>Dheeksha</li>
               <li>Naveen</li>
            
            </ul>
        
        </div>  
        <div id="content_3" class="content">
        
        <ul>
               <li>Website</li>
               <li>Blogger</li>
               <li>Google+</li>
               <li>Facebook</li>
            
            </ul>
        
        </div> 
            
    </div>  
  
</div>

Thursday 16 May 2013

5Star Rating Using Ajax

Download Coding : 5Star Rating

Index :

<h1> Rate the following movies! </h1>
<div class='movie_choice'>
  <h3>Rate: Thupaki</h3><br>


    <div id="r1" class="rate_widget">
        <div class="star_1 ratings_stars"></div>
        <div class="star_2 ratings_stars"></div>
        <div class="star_3 ratings_stars"></div>
        <div class="star_4 ratings_stars"></div>
        <div class="star_5 ratings_stars"></div>
        <div class="total_votes">vote data</div>
    </div>
</div><br>


<div class='movie_choice'>
    <h3>Rate: Mattran</h3><br>

    <div id="r2" class="rate_widget">
        <div class="star_1 ratings_stars"></div>
        <div class="star_2 ratings_stars"></div>
        <div class="star_3 ratings_stars"></div>
        <div class="star_4 ratings_stars"></div>
        <div class="star_5 ratings_stars"></div>
        <div class="total_votes">vote data</div>
    </div>
</div>

Style :

<style>
        .rate_widget {
            border:     1px solid #CCC;
            overflow:   visible;
            padding:    10px;
            position:   relative;
            width:      180px;
            height:     32px;
            background:#FFF;
            border-radius:10px;
        }
        .ratings_stars {
            background: url('star_empty.png') no-repeat;
            float:      left;
            height:     28px;
            padding:    2px;
            width:      32px;
        }
        .ratings_vote {
            background: url('star_full.png') no-repeat;
        }
        .ratings_over {
            background: url('star_highlight.png') no-repeat;
        }
        .total_votes {
            background: #eaeaea;
            top: 58px;
            left: 0;
            padding: 5px;
            position:   absolute;  
        } 
        .movie_choice {
            font: 10px verdana, sans-serif;
            margin: 0 auto 40px auto;
            width: 180px;
        }
        h1 {
            text-align: center;
            width: 400px;
            margin: 20px auto;
        }
    </style>

Script :

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

    // This is the first thing we add 
    $(document).ready(function() {
        
        $('.rate_widget').each(function(i) {
            var widget = this;
            var out_data = {
                widget_id : $(widget).attr('id'),
                fetch: 1
            };
            $.post(
                'ratings.php',
                out_data,
                function(INFO) {
                    $(widget).data( 'fsr', INFO );
                    set_votes(widget);
                },
                'json'
            );
        });
    

        $('.ratings_stars').hover(
            // Handles the mouseover
            function() {
                $(this).prevAll().andSelf().addClass('ratings_over');
                $(this).nextAll().removeClass('ratings_vote'); 
            },
            // Handles the mouseout
            function() {
                $(this).prevAll().andSelf().removeClass('ratings_over');
                // can't use 'this' because it wont contain the updated data
                set_votes($(this).parent());
            }
        );
        
        
        // This actually records the vote
        $('.ratings_stars').bind('click', function() {
            var star = this;
            var widget = $(this).parent();
            
            var clicked_data = {
                clicked_on : $(star).attr('class'),
                widget_id : $(star).parent().attr('id')
            };
            $.post(
                'ratings.php',
                clicked_data,
                function(INFO) {
                    widget.data( 'fsr', INFO );
                    set_votes(widget);
                },
                'json'
            ); 
        });
        
        
        
    });

    function set_votes(widget) {

        var avg = $(widget).data('fsr').whole_avg;
        var votes = $(widget).data('fsr').number_votes;
        var exact = $(widget).data('fsr').dec_avg;
    
        window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes);
        
        $(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');
        $(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote'); 
        $(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );
    }
    // END FIRST THING
    
    
    </script>

Wednesday 15 May 2013

To Create a Beautiful Document Icon with CSS3 only

Download Coding : Document Icon Using CSS3

Here I would like to show you a neat trick to create a document icon with pure CSS3 only.

Step 1 : Create A Square Box

Just Add a single HTML element in the anchor tag and call the CSS.

<a class="docIcon" href="#">Document Icon</a>

.docIcon
{
    background:#eee;
    background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
    border:1px solid #ccc;
    display:block;
    width:100px;
    height:100px;
    position:relative;
    margin:42px auto;
}
.docIcon {
   background: #eee;
 
   background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
 
   border: 1px solid #ccc;
   display: block;
   width: 40px;
   height: 56px;
   position: relative;
   margin: 42px auto;
}

Next, let’s add some shine using CSS box shadows.And also I’ve also used the `text-indent` property to hide the text.

.docIcon
{
   
    -webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
 
    text-indent:-9999em;
}

So For We Have like this

Step 2 : Create a Rounded Corners

Next, we have to create a rounded corner effect. so Add the following coding in your css,

.docIcon
{
    ...
    -webkit-border-radius:3px 18px 3px 3px;
    -moz-border-radius:3px 18px 3px 3px;
    border-radius:3px 18px 3px 3px;
}

Then We would have like this

Step 3 : Create one Side Curled Corners

Here i have used CSS pseudo-elements.CSS pseudo-elements are used to add special effects to some selectors.

The syntax of pseudo-elements:

selector:pseudo-element {property:value;}

.docIcon:before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   width: 15px;
   height: 15px;
   background: #ccc;
 
   background: -webkit-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
   background: -moz-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
   background: -o-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
   background: -ms-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
   background: linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
 
   -webkit-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
   -moz-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
   box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
 
   border-bottom: 1px solid #ccc;
   border-left: 1px solid #ccc;
}

Then Add the top-right rounded edge to the curled rounded corners

-webkit-border-radius:3px 15px 3px 3px;
-moz-border-radius:3px 15px 3px 3px;
border-radius:3px 15px 3px 3px;

Atlast I got like this

Step 4 : Add the lines inside the rounded box

Next, I am going to use the :after psuedo element to add some dashed lines to represent zoomed out text.Add multiple lines using CSS3 Gradient

.docIcon:after
{
    content:"";
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:60%;
    margin:22px 20% 0;
    height:15px;
}
.docIcon:after
{
    ...
    background:#ccc;
    background: -webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background: -moz-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background: -o-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background: -ms-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
    background:linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
}

Finally I have Designed a Document Icon Using CSS3 Only.

Tuesday 14 May 2013

Checking Password Strength Using Simple Jquery

Download Coding : Password Strength

Index :

<div class="container">

<h2>Checking Password Strength with jQuery</h2>

<form id="main">
        <label for="password">Password : </label>
        <input name="password"  id="password" type="password" class="text"/>&nbsp;&nbsp;
        <span id="result"></span>
</form> 

</div>

Style :

.container
{
    border:0 solid red;
    border-radius:15px;
    width:36%;
    margin:7% auto;
    box-shadow: inset 0 0 4px 4px #CCC; 
    padding:19px 10px;
    color:#060;
}
#main
{
    border:0 solid red;
    width:80%;
    margin:6% auto;
    color:#060; 
}
input[type=password]
{
    border-radius:15px;
    box-shadow: 0 0 2px 2px #CCC;
   -moz-box-shadow:  0 0 2px 2px #CCC;
   -webkit-box-shadow:  0 0 4px 4px #CCC;   
   -0-box-shadow:  0 0 4px 4px #CCC;    }

Script :

$(document).ready(function() {

    $('#password').keyup(function(){
        $('#result').html(checkStrength($('#password').val()))
    })  
    
    function checkStrength(password){
    
    //initial strength
    var strength = 0
    
    //if the password length is less than 6, return message.
    if (password.length < 6) { 
        $('#result').removeClass()
        $('#result').addClass('short')
        return 'Too short' 
    }
    
    //length is ok, lets continue.
    
    //if length is 8 characters or more, increase strength value
    if (password.length > 7) strength += 1
    
    //if password contains both lower and uppercase characters, increase strength value
    if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1
    
    //if it has numbers and characters, increase strength value
    if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 
    
    //if it has one special character, increase strength value
    if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1
    
    //if it has two special characters, increase strength value
    if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
    
    //now we have calculated strength value, we can return messages
    
    //if value is less than 2
    if (strength < 2 ) {
        $('#result').removeClass()
        $('#result').addClass('weak')
        return 'Weak'           
    } else if (strength == 2 ) {
        $('#result').removeClass()
        $('#result').addClass('good')
        return 'Good'       
    } else {
        $('#result').removeClass()
        $('#result').addClass('strong')
        return 'Strong'
    }
}
});

Wednesday 8 May 2013

To Remove the Top White Space of Your Web Page

Just copy the below code and use it:

 
<style>

BODY {margin-top: 0px}

</style>

This code is used to remove white space in your top of the web page.

3D Circles Using CSS3 Only

Index:

<div id="circle"></div>

#circle
{
       border:1px solid #000;
       border-radius:50px;
       width:100px;
       height:100px;
       background:#8C8CFF;         
}
#circle:before, #cicle:after
{
   border:1px solid #000;
       border-radius:50px 50px 50px 50px;
       left:70px;
   content:"";
       position:fixed;
       top:30;
       width:100px;
       height:100px;
       background:#FF7DFF;
}
#circle:after
{
       border:1px solid #000;
       border-radius:50px;
       width:100px;
       height:100px;
       background:#093;
       left:30px;
       content:"";
       top:60px;
       position:fixed;
}

Pages

Sunday 19 May 2013

Tab Concept Using Simple Css And Javascript

Live Demo :

Live Demo :

Download Coding : TabConcept

Style :

Script :

Index :

Thursday 16 May 2013

5Star Rating Using Ajax

Download Coding : 5Star Rating

Index :

Style :

Script :

Wednesday 15 May 2013

To Create a Beautiful Document Icon with CSS3 only

Download Coding : Document Icon Using CSS3

Step 1 : Create A Square Box

Next, let’s add some shine using CSS box shadows.And also I’ve also used the text-indent property to hide the text.

Step 2 : Create a Rounded Corners

Step 3 : Create one Side Curled Corners

Step 4 : Add the lines inside the rounded box

Tuesday 14 May 2013

Checking Password Strength Using Simple Jquery

Download Coding : Password Strength

Index :

Style :

Script :

Wednesday 8 May 2013

To Remove the Top White Space of Your Web Page

Just copy the below code and use it:

3D Circles Using CSS3 Only

Index:

Next, let’s add some shine using CSS box shadows.And also I’ve also used the `text-indent` property to hide the text.