Thursday 15 August 2013

Counting number of characters using strlen() in php

In this post we have discussed how to count the number of characters in a particular paragraph using the function strlen() in php.
      Using the function strlen() in php,we can able to calculate and count the number of letters in the content.

Counting number of characters using strlen() in php

Sunday 11 August 2013

Multiplication table using php

In this post i haved designed how  to create a multiplication table that is generated by a loop that is 12 columns across.By using for loop concept lets see how the multiplication table is going to be design.
          Here i haved used nested loop ie used the for loop inside a for loop to display the output.


Multiplication table using php

Friday 9 August 2013

Displaying a maximum amount of characters using substr() in php

In this post we have discussed about how the content is viewed by onclicking the link, more.In a paragraph we used to keep some particular lines then we will keep readmore link,by clicking on that link more the remaining content will displayed below.
     To view minimum lines visible and the maximun lines invisible using the function substring().

Displaying a maximum amount of characters using substr() in php

Wednesday 7 August 2013

Live Notification like Facebook using Jquery and Css

Today I am going to share same kind of facebook like live notification system using jquery and css.
Everyone knows that facebook has a live notification messages that pop ups bottom-left corner. 



Using the simple Jquery code,we can use the live notification messages,


<script>
 $(document).ready(function() {
     $.sticky('The webpage has loaded!');
     var callnotification = function(){
     $.sticky('<b>You have a new message!</b>');
     }
     setInterval(callnotification,4000);
 });
</script>

Sunday 4 August 2013

Static Drop down menu using css

Drop down menu can be designed using with a simple css. lets see how the coding works.

Dropdown menu


Saturday 3 August 2013

Save php file as word and excel

In this article lets see how a simple application form which is designed using PHP can be save as word and excel. Onclick the save as word and save as excel ,this php file can be converted into word as well as excel.

Application form

Name
Father name
Occuption
State
Gender MaleFemale


Friday 2 August 2013

Onclick the selectbox values and shown in textbox

Nowdays we can see in all online application form there would be select your college names or qualification option and  if your college name is not available in that option values we can use others option. on clicking that others option we get the textbox, in that text box we can enter our college name or qualification.Lets see the live demo.

Live Demo :

Select Ur Qualification : 

Lets see how it works,

Wednesday 31 July 2013

Implode and Explode the data from database in php

Implode means return a string from the elements of an array that means it converts an array into the srting.Explode split a string by string,it change a string into an array. 

      For example consider a simple driving form,


<form name="aform" method="post" action="conn.php" onsubmit="return validation();">
<table border="0px" cellpadding="10" cellspacing="0" id="tbl">
<tr><td align="center" colspan="2">Sample Driving Form</td></tr>
<tr>
     <td>Vehicle</td>
     <td><input type="checkbox" name="vehicle[]" value="bus" />bus
     <input type="checkbox" name="vehicle[]" value="car" />car
     <input type="checkbox" name="vehicle[]" value="bike" />bike</td>
</tr>
<tr><td colspan="2" align="center"><input type="submit" name="submit" value="submit" /></td></tr>
</table>
</form>

Lets see the output

Sample Driving Form
Vehicle bus car bike

Serialize and Unserialize the datas in php

Serialize is used for storing and passing the values without losing their type and structure in PHP. If we need to store or pass the values without losing their type and structure use the function serialize as serialize() . Serialize() converts an array into the string values.

      For example: serialize(array('codetruster', 'php', 'css')) 
      Then this will be output a:3:{i:0;s:11:"codetruster";i:1;s:3:"php";i:2;s:3:"css";}

Unserialize is used to convert the actual data from the Serialized data. unserialize is used to convert the string datas into an array and display it on the browser. To convert the string datas into an array using the function unserialize().


      For example: 
                           array
  0 => string 'codetruster' (length=11)
  1 => string 'php' (length=3)
  2 => string 'css' (length=3)

Tuesday 30 July 2013

Positioning and overlapping an element using CSS

The CSS positioning properties allow us to position an element.Elements can be positioned using the top, bottom, left, and right properties.There are more types of positioning they are static,fixed,absolute and relative.


<div id="containers">
  
    <div id="child"></div>
  
</div>

Monday 29 July 2013

Simple Layout designing using CSS3(Positioning)



Lets see how we have design the layout using css3.In Normal we fix width and height, background,margin,etc to design a simple layout. lets consider that as container ie outer layer.

<div class="container">
<div class="main1">
</div>
</div>

By fixing width,height,background,margin,and padding we will have the output as shown below:

Saturday 27 July 2013

Date Of Birth in php


DATE OF BIRTH
Date Of Birth
In the date of birth we are going to use for loop condition and these values are inserted into database in the form of  $dob=$date1."-".$month1."-".$year1;  Lets see the example for date of birth in php.

Thursday 25 July 2013

Phone Number Validation Using simple Javascript



Type Your Phone No.and Submit[Validation]

  •  


Here let's see the validation for  the phone number using simple javascript.Here is the script for the validation phoneno = /^\d{10}$/ . Using this script we can validate the phone number.Above is the live demo we can check by entering the alphabets and also numbers. By entering the alphabets we get the alert message as Not a valid Phone Number  and by entering the Number we can get the alert message as Your Phone Number have accepted : you can try another.

Thursday 11 July 2013

Like Button using jQuery

Let's see the example for the like button using jquery. Nowadays we are using this type of function in all the websites.Having a simple jquery function we can design the like button for a image or form.

Like Button using jQuery

Image


Like (0)

Index :


<div class="container">
            <h1>Like Button using jQuery</h1>
            
            <div id="item1" class="well">
                <h2>Image</h2>
                <p><img src="Penguins.jpg" width="500" height="300"></p>
                <p><a href="">Like</a> (<span>0</span>)</p>
            </div>
    
        </div>


Style :


<style type="text/css">

.container
{
    width:550px;margin-left:auto;margin-right:auto;zoom:1;
}
a
{
    color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;
}
a:hover
{
    color:#00438a;text-decoration:underline;
}
p
{
    font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;
}
h1
{
     font-weight:bold;color:#ffffff; text-align:center;}h2{font-weight:bold;color:#404040;
}
.well
{
    background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
        </style>

Script :


<script>
        $( function() {
            $( "a" ).click( function( e ) {
                var thisrecord = $( this ).closest( "div" );
                var likes = parseInt( thisrecord.find( "span" ).html() ) + 1;
                thisrecord.find( "span" ).html( likes );
                var previousrecord = "";
                var prevrecordlikes = "";
                do
                {
                    prevrecord = thisrecord.prev( "div" );
                    prevrecordlikes = parseInt( prevrecord.find( "span" ).html() );
                    if ( likes <= prevrecordlikes ) break;
                    thisrecord.after( prevrecord );
                }
                while ( likes >= prevrecordlikes );
                e.preventDefault();
            }); 
        });        
        </script>

Thursday 4 July 2013

Date Calendar(Date picker) using Simple Jquery

Let's see the date calendar function using simple Jquery.Just create a text box by onclicking the text box the datepicker is shown as a slide below. we have to pick up the date click enter.





<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text"  class="search"id="datepicker" /></p>


Wednesday 3 July 2013

HTML Validation for a simple login form

Here let's see the simple validation for a login form using HTML5. Just add the name called 'Required' for the validation. For example in a input text box just add the field required in the tag.Live demo is shown below refer that one.

Index :


<div class="login">
<form action="" method="post">
<strong>Username &nbsp;&nbsp; </strong>
        <input autocomplete="off" class="search" name="username" placeholder="Enter your username" required="" style="width: 220px;" type="text" />
        <br />
<strong>Password &nbsp;&nbsp; </strong>
        <input autocomplete="off" class="search" name="password" placeholder="Enter your password" required="" style="width: 220px;" type="password" />
        <br />
<span style="margin-left: 120px;"><input id="submit" name="submit" style="margin-left: 50px;" type="submit" value="Login" />
</span>
<span style="margin-left: 120px;"><br /></span>
<span style="margin-left: 120px;"><br /></span>
<span style="margin-left: 120px;"><br /></span></form>
</div>


Style :

<style>
.login
{
    box-shadow: 0 0 2px 2px  #CCC;
    border-radius: 15px 15px 15px 15px; 
    padding: 10px; 
    float:left;
    margin:0 auto;
    width:370px;
}
.search
{
    
    padding: 8px 5px;
    margin: 0 0 10px 0;
    width: 238px;
    border: 1px solid #CCC;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 1px #CCC inset;
    -webkit-box-shadow: 0 1px 1px #CCC inset;
    box-shadow: 0 1px 1px #CCC inset;
  }
  #submit{
    padding: 6px 10px;
    color: #fff;
    border: 1px solid #666666;
    border-top-color: #666666;
    border-bottom-color: #666666;
    background: #666666;
    background: -moz-linear-gradient(top, #999999 0%, #CCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#CCC));
    background: -webkit-linear-gradient(top, #999999 0%,#CCC 100%);
    background: -o-linear-gradient(top, #999999 0%,#CCC 100%);
    background: -ms-linear-gradient(top, #999999 0%,#CCC 100%);
    background: linear-gradient(top, #999999 0%,#CCC 100%);
    -moz-border-radius: 3px ;
    -webkit-border-radius: 3px;
    border-radius: 3px ;
  }
</style>


Tuesday 2 July 2013

Edit,update & delete Coding in the database using PHP



On click the edit option in the page , it will be go to edit.php page  and by using  id value in the database the values will be fetched from database.

edit.php:

<?php
$s=$_GET['edit'];
if(isset($_GET['edit']))
{
    $varname=mysql_query("select * from tablename where id='$s'",$conn);
    while($row=mysql_fetch_array($varname))
    {
       $varname1=$row['databasename'];
       echo '$varname1';
    }
}
?>



After by editing the values we have to update the form. For that we will have the following coding.


Update code:


$s=$_GET['edit'];
if(isset($_POST['update'])

{
    $varname=$_POST['fieldname'];
    $update=mysql_query("update tablename set databasename='$varname'where id='$s'");
    if($update)
    {
        echo"<script>alert('updated')</script>";
}
}


On click the delete option in the page , it will automatically delete by using  id value in the database and return to the view page.

delete code:

<?php
s=$_GET['delete'];
if(isset($_GET['delete']))
{
    $delete=mysql_query("delete from upload where id='$s'")or die(mysql_error());
    }
?>

Coding for viewing the values by fetching from the database


Here is the coding for viewing the values in your designing page by fetching the values from the database.

<table border="1px" cellpadding="10" cellspacing="0" width="50">
<tr>
     <th scope="col">S.No</th>
     <th scope="col">Image</th>
     <th scope="col">Edit</th>
     <th scope="col">Delete</th>
</tr>
<tr>
<?php
//include the connection code here
$select=mysql_query("select * from tablename"); 
$x=1;
while($row=mysql_fetch_array($select))
{
    echo "<td>".$x++."</td>";
    echo "<td><img src='foldername/".$row['name']."' width='50px' height='50px' alt=".$row['name']."</td>";
    echo "<td><a href='edit.php?edit=".$row['id']."'>Edit</a></td>";
    echo "<td><a href='delete.php?delete=".$row['id']."'>Delete</a></td>";
    echo "</tr>";
    
}
?>
</table>

Coding to connect to MySQL database using PHP


Before you go to your MySQL database, you must know how to establish a connection to MySQL from inside a PHP script. This blog will help you to how to connect  your database easily.

<?php
//connect to a database
$hostname="localhost";
$username="Type your username";
$pass="Type your password";
$conn=mysql_connect($hostname,$username,$pass)or die (mysql_error());
echo 'connected to database';
?>

Now you have connected to a database, then we have to select a database.Let's assume the database name is called 'codetruster'. To start working in this database, you'll need the mysql_select_db() function:


<?php
//select to a database
$seletc_db=mysql_select_db("codetruster",$conn) or die (mysql_error());
echo 'selected database';
?>


Let's see the example to create 'codetruster' database  on your MySQL server. For that  you have to run the following script:


CREATE DATABASE 'codetruster';
CREATE TABLE 'web'  (
   `id` int UNIQUE NOT NULL,
   `name` varchar(40),
   `design` varchar(50),
   PRIMARY KEY(id)
);
INSERT INTO web VALUES(1,'php','nice');
INSERT INTO web VALUES(2,'js','good');
INSERT INTO web VALUES(3,'ajax','neat');

Sunday 30 June 2013

Insert Coding using mysql



Insert Coding Using Mqsql :


This insert coding is used to  insert the values into the database using mysql.. This will be very usefull for the beginners who is learning PHP....


<?php 
if(isset($_POST['submit']))
{
    $varname1=$_POST['fieldname1']; //field name in the form
    $varname2=$_POST['fieldname2'];
    $varname3=$_POST['fieldname3'];
    //insert coding
    $insert=mysql_query("insert into tablename(fieldname1 in database,fieldname2,fieldname3) values ('$varname1','$varname2','$varname3')") or mysql_error(); 
   //field name in the Database
    if($insert)
    {
        echo "Inserted";
    }
}
?>

Thursday 27 June 2013

On Hover Star Rating with Database



    
<form name="aform" method="post">
<div id="rateMe" title="Rate Me...">
    <a onclick="rateIt(this)" id="_1" title="Very Poor" onmouseover="rating(this)" onmouseout="off(this)"></a>
    <a onclick="rateIt(this)" id="_2" title="Poor " onmouseover="rating(this)" onmouseout="off(this)"></a>
    <a onclick="rateIt(this)" id="_3" title="Good" onmouseover="rating(this)" onmouseout="off(this)"></a>
    <a onclick="rateIt(this)" id="_4" title="Very Good" onmouseover="rating(this)" onmouseout="off(this)"></a>
    <a onclick="rateIt(this)" id="_5" title="Excellent" onmouseover="rating(this)" onmouseout="off(this)"></a>&nbsp;&nbsp;&nbsp;&nbsp;
        <textarea  id="rateStatus" name="user_rate" hidden="hidden" ></textarea>
              <span id="ratingSaved"></span>
              <span id="rate5"></span>
</div>
        <input type="submit" name="sub" class="submit" value="submit"/>
</form>

Wednesday 26 June 2013

Multiple Select box with select & disable concept



Download Coading : Multiple select field


Index :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="chosen.css" rel="stylesheet" />
<title>Multiple Select box with select & disable concept</title>
</head>

<body>

          <p><em>Multiple Select</em>&nbsp;&nbsp;
          <select data-placeholder=" Types Your Favorite"  multiple class="chzn-select" tabindex="8" size="20" >
            <option value=""></option>
            <option>Web Designing</option>
            <option>Web Developer</option>
            <option>Web Hosting</option>
            <option>IT</option>
            <option selected>Bpo</option>
            <option disabled>Software</option>
            <option selected>Networking</option>
            <option disabled>Web Technology</option>
          </select></p>
        
      
</body>
</html>



Script :


<script src="prototype.js" type="text/javascript"></script>
<script src="chosen.proto.js" type="text/javascript"></script>
 <script type="text/javascript">
        document.observe('dom:loaded', function(evt) {
        var config = {
        '.chzn-select'           : {},
        '.chzn-select-deselect'  : {allow_single_deselect:true},
        '.chzn-select-no-single' : {disable_search_threshold:10},
        '.chzn-select-no-results': {no_results_text: "Oops, nothing found!"},
        '.chzn-select-width'     : {width: "95%"}
        }
        var results = [];
        for (var selector in config) {
        var elements = $$(selector);
        for (var i = 0; i < elements.length; i++) {
          results.push(new Chosen(elements[i],config[selector]));
        }      
        }
        return results;
        });
  </script>




Friday 21 June 2013

Uploading videos in MP4 Format

Live demo :




MP4 Video format coding :


Download Coding :  MP4video format

Script :

<script type="text/javascript" src="videofiles/swfobject.js"></script>
       <script type="text/javascript">
        var attributes = {};

        var params = {};
        // for fullscreen
        params.allowfullscreen = "true";

        var flashvars = {};
        // the video file or the playlist file
        flashvars.file = "Brave Kitten Stands Up to Dog - YouTube.mp4";
        //flashvars.file = "upload/vclassvideo/1296426907_Rajini video songs.flv.mp4";
        // the PHP script NONE FOR LOCAL ACCESS
        //flashvars.streamscript = "flvprovider.php";
        //flashvars.bufferlength = "1.5";

        // width and height of the player (h is height of the video + 20 for controlbar)
        // required for IE7
        flashvars.width = "520";
        flashvars.height = "460";
        // width  and height of the video
        flashvars.displaywidth = "520";
        flashvars.displayheight = "460";
        flashvars.autostart = "true";
        flashvars.showdigits = "true";

        // for fullscreen
        flashvars.showfsbutton = "true";

        // 9 for Flash Player 9 (for ON2 Codec and FullScreen)

</script>



Index :




<div id="flashcontent">
  <p>To view this video you need JavaScript enabled and the latest Adobe Flash Player installed.  <br />
    <a href="http://www.adobe.com/go/getflashplayer/">Download the free Flash Player now</a>.</p>
  <p><a href="http://www.adobe.com/go/getflashplayer/"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Download Flash Player" style="border: none;" /></a></p>
</div>



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.