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.

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.

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

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>

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

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.

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 :

Lets see how it works,

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

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)

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>

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:

Date Of Birth in php

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.

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.

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.

Application form
Name
Father name
Occuption
State
Gender	MaleFemale

Sample Driving Form
Vehicle	bus car bike

DATE OF BIRTH
Date Of Birth

Pages

Thursday, 15 August 2013

Sunday, 11 August 2013

Friday, 9 August 2013

Wednesday, 7 August 2013

Sunday, 4 August 2013

Dropdown menu

Saturday, 3 August 2013

Application form

Friday, 2 August 2013

Wednesday, 31 July 2013

Tuesday, 30 July 2013

Monday, 29 July 2013

Saturday, 27 July 2013

Thursday, 25 July 2013

Type Your Phone No.and Submit[Validation]

Thursday, 11 July 2013

Like Button using jQuery

Image

Index :

Style :

Script :

Thursday, 4 July 2013

Wednesday, 3 July 2013

Index :

Style :

Tuesday, 2 July 2013

Sunday, 30 June 2013

Insert Coding Using Mqsql :

Thursday, 27 June 2013

Wednesday, 26 June 2013

Friday, 21 June 2013

Live demo :

MP4 Video format coding :

Download Coding : MP4video format

Script :

Index :

Sunday, 19 May 2013

Live Demo :

Live Demo :

Download Coding : TabConcept

Style :

Script :

Index :

Thursday, 16 May 2013

Download Coding : 5Star Rating

Index :

Style :

Script :

Wednesday, 15 May 2013

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

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