Wednesday, December 28, 2011

Grid Accordion in jQuery

The Grid Accordion is an advanced accordion navigation that offer an interesting method to display your portfolio and by combining the functionality of a thumbnail grid and an accordion panel

  You have the option to use either XML or HTML .Accordions are a UI pattern where you click on a title 
(in a vertical stack of titles) and a panel of content reveals itself below.


Features

  • supports XML and HTML
  • easy to customize
  • multiple Grid Accordions on the same page
  • supports captions with simple text or HTML text
  • you can add a link to each panel
  • auto slideshow mode
  • shuffled panels
  • public methods which allow you to control the accordion using outside input (e.g. openPanel(3), nextPanel(), previousPanel(), getPanelAt(2) etc.)
  • callback functions
Posted by at No comments:
Labels:

Navigator Detect: Like Code Name, Browser Name, Browser Version, Cookies Enabled,Platform

Navigator Detect: Like Code Name, Browser Name, Browser Version, Cookies Enabled,Platform

<!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>Browser Detect</title>
</head>

<body>
<center>
<div id="example"></div>

<script type="text/javascript">

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";

document.getElementById("example").innerHTML=txt;

</script>
</center>
</body>
</html>
Posted by at No comments:
Labels: , , , ,

calculator : For Addition(+), Subtraction(-), Multiplication(*), Division(/)

calculator : For Addition(+), Subtraction(-), Multiplication(*), Division(/)

<!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>calculator</title>
<script language="javascript">
function add()
{
var value1=document.calculate.inputA.value
var value2=document.calculate.inputB.value
document.calculate.output.value=value1+value2
}

function sub()
{
var value1=document.calculate.inputA.value
var value2=document.calculate.inputB.value
document.calculate.output.value=value1-value2
}

function multiply()
{
var value1=document.calculate.inputA.value
var value2=document.calculate.inputB.value
document.calculate.output.value=value1*value2
}

function division()
{
var value1=document.calculate.inputA.value
var value2=document.calculate.inputB.value
document.calculate.output.value=value1/value2
}

</script>
</head>

<body>
<center>
<h3> Calculator</h3>
<form name="calculate">
 Enter the first value <input type="text" name="inputA" value="" size="8" />
Enter the second value <input type="text" name="inputB" value="" size="8" /><br />
<br /><br />
<input type="button" value="+" onclick="add()" />
<input type="button" value="-" onclick="sub()" />
<input type="button" value="*" onclick="multiply()" />
<input type="button" value="/" onclick="division()"  />
<p> </p>
Result is  <input type="text" name="output" size="8" />
</form>
</body>
</html>
Posted by at No comments:
Labels: , , ,

Click a button show a massage through an alert box

Example: When you click the button the message will display through an alert box.

<!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>button</title>
<script language="javascript">
function showMsg(msg) {
alert("The button sent:" + msg)
}

</SCRIPT>
</head>

<body>
<center>
<h3>When you click the button the message will display through an alert box</h3>
<form>
<input type="button" value="click me" onclick="showMsg('The button has been clicked.')" />
</form>
</center>
</body>
</html>
Posted by at 3 comments:
Labels:

Sunday, December 25, 2011

Use of first(), last(), eq() function


Example : change the background and foreground effect of the paragraph when you click on the button by using css [first(), last(), eq()] function.

<html>
<head>
<title> css function</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("color", "#333");
$("p:first").css("background", "yellow");
$("p:last").css("background", "green");
$("p:eq(3)").css("font", "20px tahoma");
$("p").eq(2).css("font-style","italic");
});
});
</script>
</head>

<body>
<center>
<h2>change the background and foreground effect of the paragraph when you click on the button by using css[first(), last(), eq()] function.</h2>
<p>[I am the first paragraph. when you click on the button, it will be change the effect of background and foreground.] </p>
<p>[I am the second paragraph. when you click on the button, it will be change the effect of background and foreground.] </p>
<p>[I am the third paragraph. when you click on the button, it will be change the effect of background and foreground.] </p>
<p>[I am the fourth paragraph. when you click on the button, it will be change the effect of background and foreground.] </p>
<p>[I am fifth paragraph. when you click on the button, it will be change the effect of background and foreground.] </p>
<button>Click me</button>
</center>
</body>
</html>
Posted by at No comments:
Labels: , ,

change the background and foreground effect


Example : change the background and foreground effect of the paragraph when you click on the button.

<html>
<head>
<title> css function</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("color", "#fff");
$("p").css("background", "maroon");
$("p").css("font", "20px tahoma");
});
});
</script>
</head>

<body>
<center>
<h2>change the background and foreground effect of the paragraph when you click on the button.</h2>
<p>[I am a paragraph. when you click on the button, it will be change the effect of background and foreground.] </p>
<button>Click me</button>
</center>
</body>
</html>
Posted by at No comments:
Labels:

change the text color of the paragraph when you click on the button


Example : change the text color of the paragraph when you click on the button

<html>
<head>
<title> css function</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("color", "red");
});
});
</script>
</head>

<body>
<center>
<h2>change the text color of the paragraph when you click on the button.</h2>
<p>[I am a paragraph. when you click on the button, my text color will be change.] </p>
<button>Click me</button>
</center>
</body>
</html>
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)