<a style="cursor:pointer;" href="#location" onclick="javascript:return showoffice(1)"> Head Office </a>
Thursday, May 29, 2014
Wednesday, May 28, 2014
jQuery removeClass() Method : remove a specific class attribute from different elements
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
});
</script>
<style>
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">Heading 1</h1>
<h2 class="blue">Heading 2</h2>
<p class="blue">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Remove class from elements</button>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
});
</script>
<style>
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">Heading 1</h1>
<h2 class="blue">Heading 2</h2>
<p class="blue">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Remove class from elements</button>
</body>
</html>
multiple classes within the addClass() method
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").addClass("important blue");
});
});
</script>
<style>
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<div id="div1">This is some text.</div>
<div id="div2">This is some text.</div>
<br>
<button>Add classes to first div element</button>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").addClass("important blue");
});
});
</script>
<style>
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<div id="div1">This is some text.</div>
<div id="div2">This is some text.</div>
<br>
<button>Add classes to first div element</button>
</body>
</html>
jQuery addClass() Method : example shows how to add class attributes to different elements.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style>
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some important text!</div>
<br>
<button>Add classes to elements</button>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style>
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some important text!</div>
<br>
<button>Add classes to elements</button>
</body>
</html>
jQuery has several methods for CSS manipulation
- addClass() - Adds one or more classes to the selected elements
- removeClass() - Removes one or more classes from the selected elements
- toggleClass() - Toggles between adding/removing classes from the selected elements
- css() - Sets or returns the style attribute
jQuery remove() with Filter
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
</head>
<body>
<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>Remove all p elements with class="italic"</button>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
</head>
<body>
<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>Remove all p elements with class="italic"</button>
</body>
</html>
jQuery empty() Method : removes the child elements of the selected element(s).
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Empty the div element</button>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Empty the div element</button>
</body>
</html>
jQuery remove() Method : removes the selected element(s) and its child elements.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Remove div element</button>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Remove div element</button>
</body>
</html>
jQuery after() and before() Methods
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140">
<br><br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140">
<br><br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>
jQuery prepend() Method
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>Prepended text</b>. ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>Prepended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>Prepended text</b>. ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>Prepended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
</html>
jQuery append() Method
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>
jQuery methods used to add new content
- append() - Inserts content at the end of the selected elements
- prepend() - Inserts content at the beginning of the selected elements
- after() - Inserts content after the selected elements
- before() - Inserts content before the selected elements
jQuery method attr(), with a callback function
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
});
</script>
</head>
<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
});
</script>
</head>
<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
jQuery attr() method is also used to set/change attribute values.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href","http://www.w3schools.com/jquery");
});
});
</script>
</head>
<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href","http://www.w3schools.com/jquery");
});
});
</script>
</head>
<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
Set Content - text(), html(), and val()
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head>
<body>
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head>
<body>
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>
jQuery attr() method is used to get attribute values.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Show href Value</button>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Show href Value</button>
</body>
</html>
jQuery val() method
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
<button>Show Value</button>
</body>
</html>
jQuery text() and html() methods
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
</body>
</html>
jQuery methods for DOM manipulation
- text() - Sets or returns the text content of selected elements
- html() - Sets or returns the content of selected elements (including HTML markup)
- val() - Sets or returns the value of form fields
jQuery Method Chaining
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery is fun!!</p>
<button>Click me</button>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery is fun!!</p>
<button>Click me</button>
</body>
</html>
jQuery Callback Functions
1) JavaScript statements are executed line by line.
2) However, with effects, the next line of code can be run even though the effect is not finished.
3) This can create errors.
4) To prevent this, you can create a callback function.
Typical syntax: $(selector).hide(speed,callback);
5) function that will be executed after the hide effect is completed
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
6) The example below has no callback parameter, and the alert box will be displayed before the hide effect is completed
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
2) However, with effects, the next line of code can be run even though the effect is not finished.
3) This can create errors.
4) To prevent this, you can create a callback function.
Typical syntax: $(selector).hide(speed,callback);
5) function that will be executed after the hide effect is completed
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
6) The example below has no callback parameter, and the alert box will be displayed before the hide effect is completed
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
Tuesday, May 27, 2014
jQuery stop() Method : used to stop an animation or effect before it is finished.
Syntax:
$(selector).stop(stopAll,goToEnd);
$(selector).stop(stopAll,goToEnd);
The optional stopAll parameter specifies whether also the animation queue should be cleared or not. Default is false, which means that only the active animation will be stopped, allowing any queued animations to be performed afterwards.
The optional goToEnd parameter specifies whether or not to complete the current animation immediately. Default is false.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">Stop sliding</button>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
example below first moves the div element to the right, and then increases the font size of the text
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
jQuery animate() : perform different animations after each other, we take advantage of the queue functionality
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery animate() - Using Pre-defined Values as "show", "hide", or "toggle":
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery animate() - Using Relative Values
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery animate() - Manipulate Multiple Properties
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery Animations - The animate() Method
Syntax:
$(selector).animate({params},speed,callback);
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
$(selector).animate({params},speed,callback);
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery slideToggle() Method
$(selector).slideToggle(speed,callback);
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
jQuery slideUp() Method
Syntax:
$(selector).slideUp(speed,callback);
$("#flip").click(function(){
$("#panel").slideUp();
});
$(selector).slideUp(speed,callback);
$("#flip").click(function(){
$("#panel").slideUp();
});
jQuery slideDown() Method
Syntax:
$(selector).slideDown(speed,callback);
$("#flip").click(function(){
$("#panel").slideDown();
});
$(selector).slideDown(speed,callback);
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery fadeTo() Method
Syntax:
$(selector).fadeTo(speed,opacity,callback);
The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
$(selector).fadeTo(speed,opacity,callback);
The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
jQuery fadeToggle() Method
Syntax:
$(selector).fadeToggle(speed,callback);
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeOut() Method
Syntax:
$(selector).fadeOut(speed,callback);
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
$(selector).fadeOut(speed,callback);
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeIn() Method
Syntax:
$(selector).fadeIn(speed,callback);
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$(selector).fadeIn(speed,callback);
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery Fading Methods
jQuery has the following fade methods:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery toggle()
With jQuery, you can toggle between the hide() and show() methods with the toggle() method.
$("button").click(function(){
$("p").toggle();
});
$("button").click(function(){
$("p").toggle();
});
jQuery hide() and show()
Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
callback : The optional callback parameter is a function to be executed after the hide() or show() method completes
speed : The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.
$("button").click(function(){
$("p").hide(1000);
});
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
callback : The optional callback parameter is a function to be executed after the hide() or show() method completes
speed : The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.
$("button").click(function(){
$("p").hide(1000);
});
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
jQuery Syntax For Event Methods
1) click() : The function is executed when the user clicks on the HTML element.
$("p").click(function(){
$(this).hide();
});
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
$(this).css("background-color","#cccccc");
$(this).css("background-color","#ffffff");
$("p").click(function(){
$(this).hide();
});
2)dblclick() : The function is executed when the user double-clicks on the HTML element.
$("p").dblclick(function(){
$(this).hide();
});
$(this).hide();
});
3)mouseenter() : The function is executed when the mouse pointer enters the HTML element.
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
alert("You entered p1!");
});
4)mouseleave() : The function is executed when the mouse pointer leaves the HTML element
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
alert("Bye! You now leave p1!");
});
5)mousedown() : The function is executed, when the left mouse button is pressed down, while the mouse is over the HTML element
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
alert("Mouse down over p1!");
});
6)mouseup() : The function is executed, when the left mouse button is released, while the mouse is over the HTML element
alert("Mouse up over p1!");
});
7) hover() : The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
8) focus() : The function is executed when the form field gets focus
$("input").focus(function(){$(this).css("background-color","#cccccc");
});
$('#tblCadastro input').focus();
9)blur() : The function is executed when the form field loses focus
$("input").blur(function(){$(this).css("background-color","#ffffff");
});
What are events in JQuery
1) Examples:
- moving a mouse over an element
- selecting a radio button
- clicking on an element
2) Mouse Events
- click
- dblclick
- mouseenter
- mouseleave
3) Keyboard Events
- keypress
- keydown
- keyup
4) Form Events
- submit
- change
- focus
- blur
5) Documents and Windows Events
- load
- resize
- scroll
- unload
Select all even tr elements
1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:even").css("background-color","yellow");//Try odd for all odd tr elements
});
</script>
2) <table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
<script>
$(document).ready(function(){
$("tr:even").css("background-color","yellow");//Try odd for all odd tr elements
});
</script>
2) <table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
HIde all button elements and input elements of type="button"
1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(":button").hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$(":button").hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
HIde all a elements with a target attribute value NOT equal to "_blank"
1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("a[target!='_blank']").hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="http://www.w3schools.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="http://www.w3schools.com/css/">CSS Tutorial</a></p>
<button>Click me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("a[target!='_blank']").hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="http://www.w3schools.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="http://www.w3schools.com/css/">CSS Tutorial</a></p>
<button>Click me</button>
Hide all a elements with a target attribute value equal to "_blank"
1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("a[target='_blank']").hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="http://www.w3schools.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="http://www.w3schools.com/css/">CSS Tutorial</a></p>
<button>Click me</button>
3)
<script>
$(document).ready(function(){
$("button").click(function(){
$("a[target='_blank']").hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="http://www.w3schools.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="http://www.w3schools.com/css/">CSS Tutorial</a></p>
<button>Click me</button>
3)
Hide all elements with an href attribute using jquery
1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("[href]").hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="http://www.w3schools.com/html/">HTML Tutorial</a></p>
<p><a href="http://www.w3schools.com/css/">CSS Tutorial</a></p>
<button>Click me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("[href]").hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="http://www.w3schools.com/html/">HTML Tutorial</a></p>
<p><a href="http://www.w3schools.com/css/">CSS Tutorial</a></p>
<button>Click me</button>
Hide the first li element of every ul using jquery
1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:first-child").hide();
});
});
</script>
2) <p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<button>Click me</button>
3) Selects the first <li> element of every <ul>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:first-child").hide();
});
});
</script>
2) <p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<button>Click me</button>
3) Selects the first <li> element of every <ul>
Hide first li element of the first ul using jquery
1) <script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:first").hide();
});
});
</script>
2)
<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<button>Click me</button>
3) Selects the first <li> element of the first <ul>
$(document).ready(function(){
$("button").click(function(){
$("ul li:first").hide();
});
});
</script>
2)
<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<button>Click me</button>
3) Selects the first <li> element of the first <ul>
Hide first element of tag using jquery
1) <script>
$(document).ready(function(){
$("button").click(function(){
$("p:first").hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
3) Selects the first <p> element
$(document).ready(function(){
$("button").click(function(){
$("p:first").hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
3) Selects the first <p> element
hide all tags having same class name using jquery
1) <script>
$(document).ready(function(){
$("button").click(function(){
$("p.intro").hide();
});
});
</script>
2) <h2 class="intro">This is a heading</h2>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
3) Selects all <p> elements with class="intro"
$(document).ready(function(){
$("button").click(function(){
$("p.intro").hide();
});
});
</script>
2) <h2 class="intro">This is a heading</h2>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
3) Selects all <p> elements with class="intro"
Hide current element using jquery
1) <script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
3) This will hide only button
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
3) This will hide only button
Hide all elements using Jquery
1) <script>
$(document).ready(function(){
$("button").click(function(){
$("*").hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
3) It will hide all elements
$(document).ready(function(){
$("button").click(function(){
$("*").hide();
});
});
</script>
2) <h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
3) It will hide all elements
Example of jQuery Syntax
1)
Basic syntax is: $(selector).action()
- A $ sign to define/access jQuery
- A (selector) to "query (or find)" HTML elements
- A jQuery action() to be performed on the element(s)
2) Examples:
- $(this).hide() - hides the current element.
- $("p").hide() - hides all <p> elements.
- $(".test").hide() - hides all elements with class="test".
- $("#test").hide() - hides the element with id="test".
2) use of $(document).ready(function(){});
This is to prevent any jQuery code from running before the document is finished loading (is ready).
What is Jquery
1) jQuery is a lightweight, "write less, do more", JavaScript library.
2) The jQuery library contains the following features:
2) The jQuery library contains the following features:
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
hide functionality in jquery
1) Script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
2) <p>ClickTo Hide!</p>
Javascript Confirmation box
var answer = confirm('Are you sure you want to delete this?');
if (answer) {
console.log('yes');
}
else {
console.log('cancel');
}
if (answer) {
console.log('yes');
}
else {
console.log('cancel');
}
Can user enter values in javascript alert?
var person=prompt("Please enter your name","Harry Potter");
if (person!=null)
{
x="Hello " + person + "! How are you today?";
document.getElementById("demo").innerHTML=x;
}
if (person!=null)
{
x="Hello " + person + "! How are you today?";
document.getElementById("demo").innerHTML=x;
}
Monday, May 26, 2014
jquery textbox,label, a tag hide and show with ID
1) <script type="text/javascript" language="javascript">
function changepassword() {
var txtPassword = $("[id*=txtpassword]");
txtPassword.show();
var lblpassword = $("[id*=lblpassword]");
lblpassword.hide();
var idchangepassword = $("[id*=idchangepassword]");
idchangepassword.hide();
var idcancel = $("[id*=idcancel]");
idcancel.show();
var idsave = $("[id*=idsave]");
idsave.show();
}
function cancelpassword() {
var txtPassword = $("[id*=txtpassword]");
txtPassword.hide();
var lblpassword = $("[id*=lblpassword]");
lblpassword.show();
var idchangepassword = $("[id*=idchangepassword]");
idchangepassword.show();
var idcancel = $("[id*=idcancel]");
idcancel.hide();
var idsave = $("[id*=idsave]");
idsave.hide();
}
function savepassword() {
var txtPassword = $("[id*=txtpassword]");
alert(txtPassword.val());
}
</script>
2) <asp:Label ID="lblpassword" runat="server" Text="Shekhar123"></asp:Label>
<input id="txtpassword" type="text" style="display: none;" />
<a id="idchangepassword" href="javascript:changepassword();" style="text-decoration: none;
color: #15c;">Change Password</a> <a id="idsave" href="javascript:savepassword();"
style="display: none; text-decoration: none; color: #15c;">Save </a><a id="idcancel"
href="javascript:cancelpassword();" style="display: none; text-decoration: none;
color: #15c;">Cancel</a>
function changepassword() {
var txtPassword = $("[id*=txtpassword]");
txtPassword.show();
var lblpassword = $("[id*=lblpassword]");
lblpassword.hide();
var idchangepassword = $("[id*=idchangepassword]");
idchangepassword.hide();
var idcancel = $("[id*=idcancel]");
idcancel.show();
var idsave = $("[id*=idsave]");
idsave.show();
}
function cancelpassword() {
var txtPassword = $("[id*=txtpassword]");
txtPassword.hide();
var lblpassword = $("[id*=lblpassword]");
lblpassword.show();
var idchangepassword = $("[id*=idchangepassword]");
idchangepassword.show();
var idcancel = $("[id*=idcancel]");
idcancel.hide();
var idsave = $("[id*=idsave]");
idsave.hide();
}
function savepassword() {
var txtPassword = $("[id*=txtpassword]");
alert(txtPassword.val());
}
</script>
2) <asp:Label ID="lblpassword" runat="server" Text="Shekhar123"></asp:Label>
<input id="txtpassword" type="text" style="display: none;" />
<a id="idchangepassword" href="javascript:changepassword();" style="text-decoration: none;
color: #15c;">Change Password</a> <a id="idsave" href="javascript:savepassword();"
style="display: none; text-decoration: none; color: #15c;">Save </a><a id="idcancel"
href="javascript:cancelpassword();" style="display: none; text-decoration: none;
color: #15c;">Cancel</a>
textbox show using jquery
1) <asp:Label ID="lblpassword" runat="server" Text="Shekhar123"></asp:Label>
<input id="txtpassword" type="text" style="display: none;">
<a id="changepassword" href="javascript:hi();">Change Password</a>
2) <script type="text/javascript" language="javascript">
function hi() {
var txtPassword = $("[id*=txtpassword]");
txtPassword.show();
}
</script>
<input id="txtpassword" type="text" style="display: none;">
<a id="changepassword" href="javascript:hi();">Change Password</a>
2) <script type="text/javascript" language="javascript">
function hi() {
var txtPassword = $("[id*=txtpassword]");
txtPassword.show();
}
</script>
Friday, May 23, 2014
url not working www and without www when add in iis
1) go to edit binding add website with host1 name
2) then click add again and add host2
3)host 1: www.mysite.com
host2 : mysite.com
2) then click add again and add host2
3)host 1: www.mysite.com
host2 : mysite.com
Thursday, May 22, 2014
Wednesday, May 21, 2014
set label color in javascript
document.getElementById('<%= lblwarning.ClientID %>').style.color = "red";
set label text in javascript
document.getElementById('<%= lblwarning.ClientID %>').innerHTML = msg.d;
Tuesday, May 20, 2014
sorting in gridview column header
step1 : create class and paste following in it
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;
namespace E_Learning.Web.SessionWrapper
{
public class SortingClass
{
private static SortingClass _instance;
public static SortingClass Instance
{
get { return _instance = new SortingClass(); }
}
// This Function adds the sorting image in the Gridview's Column Header
public void AddSortImage(GridViewRow headerRow, object sortExp, object sortOrder, int ColumnCount, string[] ColumnName)
{
// ViewState["SortExp"] = sortExp;
//ViewState["SortOrder"] = sortOrder;
Int32 iCol = GetSortColumnIndex(sortExp.ToString(), ColumnCount, ColumnName);
if (-1 == iCol)
{
return;
}
// Create the sorting image based on the sort direction.
Image sortImage = new Image();
if (sortOrder == "ASC")
{
sortImage.ImageUrl = "../Images/asc.gif";
sortImage.AlternateText = "Ascending Order";
}
else
{
sortImage.ImageUrl = "../Images/desc.gif";
sortImage.AlternateText = "Descending Order";
}
// Add the image to the appropriate header cell.
headerRow.Cells[iCol].Controls.Add(sortImage);
}
// This Function Gets the index of the column selected For Sorting
public Int32 GetSortColumnIndex(string psortExp, int ColumnCount, string[] ColumnName)
{
Int32 iCol = 0;
for (int i = 0; i < ColumnCount; i++)
{
if (ColumnName[i] == psortExp)
{
iCol = i;
}
}
return iCol;
}
public string[] Sorting(object SortExp, object SortOrder, GridViewSortEventArgs e)
{
string[] strViewStateDetails = new string[2];
//ViewState["SortExp"] = SortExp;
//ViewState["SortOrder"] = SortOrder;
if (SortExp == null)
{
SortExp = e.SortExpression.ToString();
SortOrder = "ASC";
}
else
{
if (SortExp.ToString() == e.SortExpression.ToString())
{
if (SortOrder.ToString() == "ASC")
SortOrder = "DESC";
else
SortOrder = "ASC";
}
else
{
SortOrder = "ASC";
SortExp = e.SortExpression.ToString();
}
}
strViewStateDetails[0] = SortExp.ToString();
strViewStateDetails[1] = SortOrder.ToString();
return strViewStateDetails;
}
}
}
srep 2: aspx page
<asp:GridView ID="dgvContent" AllowSorting="true" CellPadding="5" BorderStyle="None"
AllowPaging="true" Width="100%" CellSpacing="5" PageSize="10" AutoGenerateColumns="false"
runat="server" OnPageIndexChanging="dgvContent_PageIndexChanging" PagerSettings-Mode="Numeric"
PagerSettings-PageButtonCount="4" OnRowCommand="dgvContent_RowCommand" OnRowDataBound="dgvContent_RowDataBound"
OnSorting="dgvContent_Sorting">
<RowStyle />
<AlternatingRowStyle />
<PagerStyle HorizontalAlign="Left" CssClass="pager" />
<HeaderStyle BackColor="#F1A626" />
<EmptyDataTemplate>
No Record Found
</EmptyDataTemplate>
<Columns>
<asp:BoundField DataField="LeadId" HeaderText="Lead Id" HeaderStyle-Height="35" HeaderStyle-ForeColor="Black" />
<asp:BoundField DataField="UserName" HeaderStyle-ForeColor="Black" HeaderStyle-Height="35"
HeaderText="UserName" Visible="false" />
<asp:BoundField DataField="Name" HeaderStyle-ForeColor="Black" HeaderStyle-Height="35"
HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Phone" HeaderText="Phone" HeaderStyle-Height="35" HeaderStyle-ForeColor="Black" />
<asp:BoundField DataField="LeadCategoryName" HeaderText="Status" HeaderStyle-Height="35"
HeaderStyle-ForeColor="Black" Visible="false" />
<asp:TemplateField HeaderText="Lead Status" HeaderStyle-ForeColor="Black">
<ItemTemplate>
<asp:Label ID="lblLeadId" runat="server" Text='<%# Eval("LeadId") %>' Visible="false" />
<asp:Label ID="lblleadstatus" runat="server" Text='<%# Eval("LeadCategoryId") %>'
Visible="false" />
<asp:DropDownList runat="server" ID="ddlleadstatus" AutoPostBack="true" OnSelectedIndexChanged="ddlleadstatus_SelectedIndexChanged">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="LeadCategoryId" HeaderText="LeadCategoryId" HeaderStyle-Height="35"
HeaderStyle-ForeColor="Black" Visible="false" />
<asp:BoundField DataField="ReferredBy" HeaderText="Referred By" HeaderStyle-ForeColor="Black" />
<asp:TemplateField HeaderText="Start Planning" HeaderStyle-ForeColor="Black">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="../images/track1.jpg"
CausesValidation="false" CommandName="start" CommandArgument='<%#Eval("LeadId")+","+ Eval("UserName")%>'
Text="Start Plan" ToolTip="Start Planning" />
<%-- <asp:LinkButton ID="lnkSetCredentials" runat="server" CommandName="Set" CommandArgument='<%#Eval("LeadId")+","+ Eval("Email")%>'
Text="Set"></asp:LinkButton>--%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit" HeaderStyle-ForeColor="Black">
<ItemTemplate>
<asp:ImageButton ID="imgEdit" runat="server" ImageUrl="~/images/Edit.jpg" Height="23"
Width="23" CausesValidation="false" CommandName="Edit" CommandArgument='<%#Eval("LeadId")%>'
Text="Edit" ToolTip="Edit Lead" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<table style="height: 15px; text-align: left; vertical-align: top; width: 100%;">
<tr>
<td style="width: 200px; height: 10px; text-align: center; vertical-align: middle;">
<b><i>
<%=dgvContent.PageIndex + 1%>of<%=dgvContent.PageCount%></i></b>
</td>
</tr>
</table>
step 3: protected void dgvContent_Sorting(object sender, GridViewSortEventArgs e)
{
string[] ViewStateValues = SortingClass.Instance.Sorting(this.ViewState["SortExp"], this.ViewState["SortOrder"], e);
if (ViewStateValues.Length > 0)
{
this.ViewState["SortExp"] = ViewStateValues[0];
this.ViewState["SortOrder"] = ViewStateValues[1];
}
BindGrid();
}
step 4:
private void BindGrid()
{
DataSet ds = GetLeadData();
try
{
if (ds.Tables[0].Rows.Count > 0)
{
DataView dv = ds.Tables[0].DefaultView;
if (ViewState["SortExp"] != null)
{
dv.Sort = this.ViewState["SortExp"].ToString() + " " + this.ViewState["SortOrder"].ToString();
dgvContent.DataSource = dv.ToTable();
dgvContent.DataBind();
}
else
{
dgvContent.DataSource = ds;
dgvContent.DataBind();
}
}
else
{
dgvContent.DataSource = null;
dgvContent.DataBind();
}
}
catch (Exception ex)
{
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;
namespace E_Learning.Web.SessionWrapper
{
public class SortingClass
{
private static SortingClass _instance;
public static SortingClass Instance
{
get { return _instance = new SortingClass(); }
}
// This Function adds the sorting image in the Gridview's Column Header
public void AddSortImage(GridViewRow headerRow, object sortExp, object sortOrder, int ColumnCount, string[] ColumnName)
{
// ViewState["SortExp"] = sortExp;
//ViewState["SortOrder"] = sortOrder;
Int32 iCol = GetSortColumnIndex(sortExp.ToString(), ColumnCount, ColumnName);
if (-1 == iCol)
{
return;
}
// Create the sorting image based on the sort direction.
Image sortImage = new Image();
if (sortOrder == "ASC")
{
sortImage.ImageUrl = "../Images/asc.gif";
sortImage.AlternateText = "Ascending Order";
}
else
{
sortImage.ImageUrl = "../Images/desc.gif";
sortImage.AlternateText = "Descending Order";
}
// Add the image to the appropriate header cell.
headerRow.Cells[iCol].Controls.Add(sortImage);
}
// This Function Gets the index of the column selected For Sorting
public Int32 GetSortColumnIndex(string psortExp, int ColumnCount, string[] ColumnName)
{
Int32 iCol = 0;
for (int i = 0; i < ColumnCount; i++)
{
if (ColumnName[i] == psortExp)
{
iCol = i;
}
}
return iCol;
}
public string[] Sorting(object SortExp, object SortOrder, GridViewSortEventArgs e)
{
string[] strViewStateDetails = new string[2];
//ViewState["SortExp"] = SortExp;
//ViewState["SortOrder"] = SortOrder;
if (SortExp == null)
{
SortExp = e.SortExpression.ToString();
SortOrder = "ASC";
}
else
{
if (SortExp.ToString() == e.SortExpression.ToString())
{
if (SortOrder.ToString() == "ASC")
SortOrder = "DESC";
else
SortOrder = "ASC";
}
else
{
SortOrder = "ASC";
SortExp = e.SortExpression.ToString();
}
}
strViewStateDetails[0] = SortExp.ToString();
strViewStateDetails[1] = SortOrder.ToString();
return strViewStateDetails;
}
}
}
srep 2: aspx page
<asp:GridView ID="dgvContent" AllowSorting="true" CellPadding="5" BorderStyle="None"
AllowPaging="true" Width="100%" CellSpacing="5" PageSize="10" AutoGenerateColumns="false"
runat="server" OnPageIndexChanging="dgvContent_PageIndexChanging" PagerSettings-Mode="Numeric"
PagerSettings-PageButtonCount="4" OnRowCommand="dgvContent_RowCommand" OnRowDataBound="dgvContent_RowDataBound"
OnSorting="dgvContent_Sorting">
<RowStyle />
<AlternatingRowStyle />
<PagerStyle HorizontalAlign="Left" CssClass="pager" />
<HeaderStyle BackColor="#F1A626" />
<EmptyDataTemplate>
No Record Found
</EmptyDataTemplate>
<Columns>
<asp:BoundField DataField="LeadId" HeaderText="Lead Id" HeaderStyle-Height="35" HeaderStyle-ForeColor="Black" />
<asp:BoundField DataField="UserName" HeaderStyle-ForeColor="Black" HeaderStyle-Height="35"
HeaderText="UserName" Visible="false" />
<asp:BoundField DataField="Name" HeaderStyle-ForeColor="Black" HeaderStyle-Height="35"
HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Phone" HeaderText="Phone" HeaderStyle-Height="35" HeaderStyle-ForeColor="Black" />
<asp:BoundField DataField="LeadCategoryName" HeaderText="Status" HeaderStyle-Height="35"
HeaderStyle-ForeColor="Black" Visible="false" />
<asp:TemplateField HeaderText="Lead Status" HeaderStyle-ForeColor="Black">
<ItemTemplate>
<asp:Label ID="lblLeadId" runat="server" Text='<%# Eval("LeadId") %>' Visible="false" />
<asp:Label ID="lblleadstatus" runat="server" Text='<%# Eval("LeadCategoryId") %>'
Visible="false" />
<asp:DropDownList runat="server" ID="ddlleadstatus" AutoPostBack="true" OnSelectedIndexChanged="ddlleadstatus_SelectedIndexChanged">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="LeadCategoryId" HeaderText="LeadCategoryId" HeaderStyle-Height="35"
HeaderStyle-ForeColor="Black" Visible="false" />
<asp:BoundField DataField="ReferredBy" HeaderText="Referred By" HeaderStyle-ForeColor="Black" />
<asp:TemplateField HeaderText="Start Planning" HeaderStyle-ForeColor="Black">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="../images/track1.jpg"
CausesValidation="false" CommandName="start" CommandArgument='<%#Eval("LeadId")+","+ Eval("UserName")%>'
Text="Start Plan" ToolTip="Start Planning" />
<%-- <asp:LinkButton ID="lnkSetCredentials" runat="server" CommandName="Set" CommandArgument='<%#Eval("LeadId")+","+ Eval("Email")%>'
Text="Set"></asp:LinkButton>--%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit" HeaderStyle-ForeColor="Black">
<ItemTemplate>
<asp:ImageButton ID="imgEdit" runat="server" ImageUrl="~/images/Edit.jpg" Height="23"
Width="23" CausesValidation="false" CommandName="Edit" CommandArgument='<%#Eval("LeadId")%>'
Text="Edit" ToolTip="Edit Lead" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<table style="height: 15px; text-align: left; vertical-align: top; width: 100%;">
<tr>
<td style="width: 200px; height: 10px; text-align: center; vertical-align: middle;">
<b><i>
<%=dgvContent.PageIndex + 1%>of<%=dgvContent.PageCount%></i></b>
</td>
</tr>
</table>
step 3: protected void dgvContent_Sorting(object sender, GridViewSortEventArgs e)
{
string[] ViewStateValues = SortingClass.Instance.Sorting(this.ViewState["SortExp"], this.ViewState["SortOrder"], e);
if (ViewStateValues.Length > 0)
{
this.ViewState["SortExp"] = ViewStateValues[0];
this.ViewState["SortOrder"] = ViewStateValues[1];
}
BindGrid();
}
step 4:
private void BindGrid()
{
DataSet ds = GetLeadData();
try
{
if (ds.Tables[0].Rows.Count > 0)
{
DataView dv = ds.Tables[0].DefaultView;
if (ViewState["SortExp"] != null)
{
dv.Sort = this.ViewState["SortExp"].ToString() + " " + this.ViewState["SortOrder"].ToString();
dgvContent.DataSource = dv.ToTable();
dgvContent.DataBind();
}
else
{
dgvContent.DataSource = ds;
dgvContent.DataBind();
}
}
else
{
dgvContent.DataSource = null;
dgvContent.DataBind();
}
}
catch (Exception ex)
{
}
}
Subscribe to:
Posts (Atom)