Archive for the ‘Jquery’ Category
Coloring the HTML Table by Using Jquery
With Jquery we can change multi color to the table of HTML.Here are source code for HTML Multi color Table.
<html>
<head>
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(”tr:even”).css(”background-color”, “red”);
$(”tr:odd”).css(”background-color”, “green”);
});
</script>
</head>
<body>
<table border=”1″>
<tr><td>Cell1</td>
<td>Cell2</td>
</tr>
<tr><td>Cell3</td>
<td>Cell4</td>
</tr>
<tr><td>Cell5</td>
<td>Cell6</td>
</tr>
<tr><td>Cell7</td>
<td>Cell8</td>
</tr>
</table>
</body>
</html>
You can also Hide the cell from the table.Here are source code.
<html>
<head>
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(”tr:even”).css(”background-color”, “red”);
$(”tr:odd”).addClass(”headingload”);
$(”button”).click(function(){
$(’tr:odd’).hide();
});
});
</script>
</head>
<body>
<table border=”1″>
<tr><td>Cell1</td>
<td>Cell2</td>
</tr>
<tr><td>Cell3</td>
<td>Cell4</td>
</tr>
<tr><td>Cell5</td>
<td>Cell6</td>
</tr>
<tr><td>Cell7</td>
<td>Cell8</td>
</tr>
</table>
<button type=”button”>Click</button>
</body>
</html>
Have fun with Jquery
Door Menu with Jquery
Door ပံုစံ Menu တခုတည္ေဆာက္ဖုိ႕အတြက္ အရင္ဆံုး Photoshop နဲ႕ Width: 800px, height: 101px .jpg တခုကိုတည္ေဆာက္ပါ။ၿပီးလ်င္ shutter နဲ႔ window အတခုစီအတြက္ Width: 200px, height: 100px ဆီရွိတဲ့ .jpg တခုစီတည္ေဆာက္ပါ။ အားလံုးၿပီးသြားရင္ Html နဲ႕ coding ေရးပါမယ္။
ဒါကေတာ့ Html code ပါ။
<html>
<head>
<title>Door Menu Using Jquery</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<ul id=”menu”>
<li class=”shutter” id=”shutter1″><a class=”link” href=”#”>Shutter 1</a></li>
<li class=”shutter” id=”shutter2″><a class=”link” href=”#”>Shutter 2</a></li>
<li class=”shutter” id=”shutter3″><a class=”link” href=”#”>Shutter [...]
Animation Button with Jquery
Jquery Code:
<script type=”text/javascript”>
$(document).ready(function(){
$(”.button”).hover(function(){
$(”.button img”)
.animate({top:”-10px”}, 200).animate({top:”-4px”}, 200) // first jump
.animate({top:”-7px”}, 100).animate({top:”-4px”}, 100) // second jump
.animate({top:”-6px”}, 100).animate({top:”-4px”}, 100); // the last jump
});
});
</script>
CSS Code:
<style type=”text/css”>
body {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
margin: 20px;
}
.button {
padding: 4px 10px 3px 25px;
border: solid 1px #8AB134;
position: relative;
cursor: pointer;
display: inline-block;
background-image: url( ‘bkg.png’ );
background-repeat: repeat-x;
font-size: 11px;
height: 16px;
text-decoration: none;
color: #40740D;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
.button img {
position: absolute;
top: -4px;
left: [...]
jQuery
jQuery
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating,and Ajax interactions for rapid web development. jQuery is designed to change the way that you write.The jQuery framework itself has enjoyed a great deal of mainstream exposure. It has been used by
Google, Dell, Digg, NBC, CBS, Netflix, The [...]
