Hovering Data with Jquery & JS

Hovering Data with Jquery & JS

JS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
<script>
$(document).ready(function(){
    $(".div1").hover(function(){
        $(".div11").show();
        $(".div21").hide();
        $(".div31").hide();
        $(".div41").hide();
        $(".div51").hide();
    });
});
$(document).ready(function(){
    $(".div2").hover(function(){
        $(".div21").show();
        $(".div11").hide();
        $(".div31").hide();
        $(".div41").hide();
        $(".div51").hide();
    });
});
$(document).ready(function(){
    $(".div3").hover(function(){
        $(".div31").show();
        $(".div21").hide();
        $(".div41").hide();
        $(".div11").hide();
        $(".div51").hide();
    });
});

</script>

CSS

<style>
.main
{
margin:0 auto; 
padding:5px 5px;
width:980px;
height:40px; 
border:0px solid #000;
}
.div11,.div21,.div31
{ 
display:none;
}
.div1
{
width:150px; 
height:30px; 
border:1px solid #000; 
float:left; 
margin-left:10px;
background:#060; 
color:#FFF; 
text-align:center;
}
.div1:hover
{
background:#999;
color:#060;
text-align:center;
font-size:18px;
}
.div2
{
width:150px;
height:30px;
border:1px solid #000;
float:left; 
margin-left:10px;
background:#060;
color:#FFF; 
text-align:center;
}
.div2:hover
{ 
background:#999;
color:#060; 
text-align:center;
font-size:18px;
}
.div3
{
width:150px; 
height:30px;
border:1px solid #000;
float:left;
margin-left:10px;
background:#060; 
color:#FFF; 
text-align:center;
}
.div3:hover
{
background:#999; 
color:#060;
text-align:center;
font-size:18px;}
.div5:hover
{ 
background:#999;
color:#060;
text-align:center; 
font-size:18px;
}
.div11
{ 
margin-top:30px;
width:150px; 
height:100px;
border:0px solid #000;
float:left;
}
.div21
{ 
margin-top:30px;
width:150px; 
height:100px;
border:0px solid #000; 
float:left;
}
.div31
{ 
margin-top:50px;
width:150px;
height:100px; 
border:0px solid #000;
float:left;
}
</style>

Coding

<div class="main">
<div class="div1" >Rose
<div class="div11">
 <img src="rose.jpg"  width="100%" height="100"/>
</div>
</div>
<div class="div2" >Lotus
<div class="div21">
<img src="lo.jpg"  width="100%" height="100"/>
</div>
</div>
<div class="div3" >Lilly
<div class="div31">
<img src="lii.jpg"  width="100%" height="100"/>
</div>
</div>
</div>

color changing using css3

box

Tab Concept Using CSS

tab.php

 <div class="wrap">
   <h4>Tab Concept Using CSS</h4>  
  <ul class="ul">  
    <li><a href="javascript:tabSwitch('tab_1', 'content_1');"
     id="tab_1" class="active">PHP Frame Work</a></li>  
    <li><a href="javascript:tabSwitch('tab_2', 'content_2');" 
    id="tab_2">CSS</a></li>  
    <li><a href="javascript:tabSwitch('tab_3', 'content_3');" 
    id="tab_3">Array</a></li>  
</ul>
        <div id="content_1" class="content">
            <ul>
               <li>Wordpress</li>
               <li>Zoomla</li>
               <li>CMS</li>
               <li>Cake PHP</li>
            </ul>
        </div>  
        <div id="content_2" class="content" >
            <ul>
              
               <li>Internal Style Sheet</li>
               <li>External Style Sheet</li>
               <li>Inner Style Sheet </li>
            </ul>
        </div>  
        <div id="content_3" class="content" >
          <ul>
               <li>Single Dimensional Array</li>
               <li>Multi Dimensional Array</li>
            </ul>
        </div> 
   </div>

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>

CSS

<style type="text/css">
.wrap{
width:500px; 
border:0px solid #CCC; 
height:200px;
margin:0 auto; 
padding:0; 
text-align:center;
}
.ul{
width:500px; 
border:0px solid #CCC; 
height:45px; 
position:absolute;
margin-left:10px;
margin:0 auto; 
}
.ul li{ 
float:left; 
list-style-type:none; 
width:130px; 
border:1px solid #CCC;  
color:#FF8040; 
padding:5px; 
margin-left:5px;
background:#00CACA; 
}
.ul li a{ 
text-decoration:none;
color:#FF8040;
}
.ul li a:hover{ color:#FFF; }
.ul li .active{color:#FFF; }
#content_2, #content_3 { display:none; }
.content{margin:0 auto;
padding:0;
text-align:justify;
margin-left:40px;
} 
.content ul {width:200px; 
border:5px solid #00CACA; 
height:auto;
margin-top:50px; 
position:absolute;
margin-left:10px; 
padding:0; 
} 
.content ul li {padding:10px;
list-style-type:none; 
color:#FF8040; 
}
h4{ color:#FF8040;
font-size:24px; 
text-align:center;
}
</style>

How To Display Active Menu

Source Code

<?php
$i=1;
?>
<!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" />
<title>Menu Active</title>
<style>
body{ text-align:center; font-size:24px; color:#FFF;}
.div{ width:500px; border:1px solid  #C03;
 background:#666;}
.ul {width:500px;list-style-type:none;}
.ul li { width:auto;float:left;text-align:center; 
margin-left:20px;  }
.ul li a{border:1px solid #0CC; text-decoration:none; 
 background:#0CC; color:#FFF;}
.ul li.current a{ color:#FFF; background:#F60;
 border:1px solid #F60;}
h2{ color:#03C;}
</style>
</head>
<body>
<div class="div" >
<h2>Menu Active</h2>
<ul class="ul">
<li <?php if($i==1){echo 'class="current"';}?>>
<a href="menu1.php">HOME</a></li>
<li <?php if($i==2){echo 'class="current"';}?>>
<a href="menu2.php">ABOUT US</a></li>
<li <?php if($i==3){echo 'class="current"';}?>>
<a href="menu3.php">PROGRAME</a></li>
</ul>
**** Home ****
</div>
</body>
</html>

To Resize Your Original Image While Uploading

Source Code

<html><div class="rst"> <h2 align="center">
To Resize Your Original Image While
 Uploading</h2></div>
<form name="rstech" action="" method="post"
  enctype="multipart/form-data" class="rs">
<h3 align="center">Upload Images</h3>
<p><?php echo $msg;?></p>
<p><label>Name&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input type="text" name="name"  value="" 
required></p>
<p style="margin-left:20%;">
<label>Photo&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input type="file" value="" name="photo"  required>
&nbsp;&nbsp;</p>
<p style="margin-left:20%;"> 
<input type="submit" value="submit" name="submit"
 class="ser"></p>
<div class="rstech"> 
<table width="100%" height="30%" cellpadding="10"
 cellspacing="5">
<tr>
<th>S.No</th>
<th>Categories</th>
<th>Original Image</th>
<th>Resize Image</th>
<th>Delete</th>
</tr>
<?php
$select=mysql_query("select * from resize 
order by name asc");
$i=1;
while($row=mysql_fetch_array($select))                      
{   
$id=$row['id'];
$name=$row['name'];
$photo=$row['photo'];
?>
<tr>
<td><?php echo $i++; ?></td>
<td><?php echo $name; ?></td>
<td><a href="upload/<?php echo $photo; ?>"
 target="_blank"> 
<img src="upload/<?php echo $photo; ?>" 
title="click here see the original image"
 width="100" height="100 "></a></td>
<td><a href="thumb/<?php echo $photo; ?>" 
target="_blank"> 
<img src="thumb/<?php echo $photo; ?>" 
title="click here see the resize image" >
</a></td>
<td><a href="index.php?
del=<?php echo $id;?>">Delete</a></td>
</tr>
<?php } ?>
</table>
</div>
</form></html

click here to download

Rating Using JS

Source Code

!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" />
<title>Rate</title>
<style type="text/css">  
    .main{width:50%; height:250px; border:1px solid #633; 
margin-left:200px; margin-top:100px;}
    #rateMe{ width:50%; margin:0 auto; margin-top:100px;}
     #rateMe li a:hover,
    #rateMe .on{background:url(star-on.png) no-repeat;}
    #rateMe a{float:left;background:url(start-off.png)
no-repeat;width:50px; height:50px;}
    #rateStatus{width:200px; height:50px; color:#903;}
    #ratingSaved{display:none;}
    .saved{color:red; }
</style> 
<script type="text/javascript" language="javascript"
 src="rating.js"></script> 
</head>
<body>   
    <div class="main">    
    <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></div>
         <p> <textarea  id="rateStatus" name="rate"></textarea></p>
    <span id="ratingSaved"></span>  
   </div>
</body>
</html>

Download

Date Function with Calender Icon

Source Code:

 <!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" />
<title>Calender</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="calendar_db.js"></script>
<link rel="stylesheet" href="calendar.css" type="text/css" />
<style>
.ratediv2
{
width:300px;
height:35px;
padding:20px;
border-radius:3px;
background-color:#f7f7f7;
margin:10px auto;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border:1px solid #CCC;
margin-top:100px;
}       
</style>
</head>
<body>
<form action="" method="post" name="form">
<div class="ratediv2" >
<tr>
<td align="center">&nbsp;&nbsp;Date</td>
 <td align="center">
 <input type="text" name="dateone" class="tcal"  id="date" value=""/>
 <script language="Javascript"> new tcal({'formname':'form',
'controlname':'dateone'});</script>
 </td>
 </tr>
</div>
</form>
</body>
</html>

 Download