JQUERY

Friday, July 15, 2016

July 15, 2016

JQuery Notification bar on top of the page

JQuery Notification bar on Top of the web page. This is the new thing in the mind i.e when we click on hyperlink then show a division with some message on top of the web page. The logic behind the thing is too much simple, In JQuery we have two method slideUp( ) and slideDown( ) , which are used for animation. In this article , i have used both.

Application of the article:

If you want to give special notice on website then you can use it.
Use it in Current News Section.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery: Notification bar Example </title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function () {
$("#Button1").click(function () {
$("#NotificationDiv").slideUp('slow');
});

$("#ShowNotificationBar").click(function () {
$("#NotificationDiv").slideDown('slow');
});

});
</script>
<style>
.NotficationBar{
background-color:blue;
color:white;
position:absolute;
width:100%;
top:0px;
left:0px;
text-align:center;
border-bottom-width:3px;
border-bottom-color:#000000;
border-bottom-style:solid;
padding:15px;
}

</style>
</head>
<body>
<div id="NotificationDiv" class="NotficationBar">
<label>Welcome to dotprogramming.blogspot.com</label>
<br/>
<input type="button" id="Button1" value="close"/>
</div>
<div>
<a href="" id="ShowNotificationBar">Show Notification Bar </a>
</div>
</body>
</html>

Saturday, June 25, 2016

JQUERY

June 25, 2016

jQuery Autocomplete List appear onFocus TextBox

In this example i will show you, How to show array list when we focus on TextBox. I mean to say that array list contain users name and its show when we focus on TextBox. Here we have a simple example which is contain list of users name, also i have a autocomplete function in Script library . I have a video , you can check for implementation as well as output.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0-rc.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
<script>
$(function () {
var users = ['jacob lefore', 'Bill', 'smith wick', 'ammey', 'rodkils', 'BillSmith'];
$('#TextBox1').autocomplete({
source: users,
minLength:0
}).focus(function () {
$(this).autocomplete("Search", "");
})
})

</script>
</head>
<body>
Enter name: <input type="text" id="TextBox1" placeholder="TextBox Focus"/>
</body>
</html>

Tuesday, May 31, 2016

JQUERY

May 31, 2016

Calendar Control with Disabled past date

In this article, i will show you, how to show calendar control with disabled past date. I mean to say that if you select date then calendar control disabled all previous day. Also i will provide you, After select a specific date then you don't move to previous months. Lets see an example.

Before example i will teach you about calendar control. If you write following function then you can see full calendar control. If you want to disabled previous date after select specific date then see next example.

$(function () {
$("input[id*='calid']").datepicker();
})

Disabled Previous Date:

$(function () {
$("input[id*='calid']").datepicker({
minDate: new Date(2016,6,1)
});
})

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendar Control with Disabled past date</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>

$(function () {
$("input[id*='calid']").datepicker({

minDate: new Date(2016,6,1)
});
})

</script>

</head>
<body>
<form id="form1">
<input type="text" id="calid" />
</form>
</body>
</html>

Code Generate the Following code

Saturday, May 14, 2016

JQUERY

May 14, 2016

JQuery Bind function handles Click, DblClick, MouseEnter and MouseLeave Event

In this article i will show you how to use Bind( ) function in JQuery. Bind function is used to call events using string or triggers. I mean to say that either you can pass event directly in the method or externally using triggers. In this example, i will show you click , double click , Mouse Enter and Mouse Leave event directly in Bind Function. In this example i will show you , when cursor moves on paragraph boundary then class toggle with different color. Lets check this example.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default7.aspx.cs" Inherits="Default7" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
p{
background-color:red;
padding:5px;
font-size:larger;
}
.over{
color:white;
background-color:blue;
}
span{
color:green;
}
</style>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function () {
$("p").bind("click", function (event) {
var string = "Get Cordinate" + event.pageX + "and" + event.pageY;
$("span").text("single Clicked " + string);

});

$("p").bind("dblclick", function (event) {

$("span").text("Double Clicked " + this.nodeName);

});

$("p").bind("mouseenter mouseleave", function (event) {

$(this).toggleClass("over");
});

})
</script>
</head>
<body>
<form id="form1" runat="server">
<p>Click, Double Click, MouseEnter and MouseLeave Event Example</p>
<span></span>
</form>
</body>
</html>

Monday, May 9, 2016

JQUERY

May 09, 2016

JQuery: Show Distinct items of DropdownList

In this article i will show you, how to remove duplicates in DropdownList when it appear on browser window. If you have multiple item in the table and you want to show only distinct items of the table then you can use siblings function of the JQuery. Lets check the simple example:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function () {
$("select option").each(function () {
$(this).siblings("[value=" + this.value + "]").remove();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h2>How to Remove duplicate dropdown option elements with same value</h2>
<div><select name="selectlist">
<option value="">Fruit List</option>
<option value="1">Apple</option>
<option value="2">Mango</option>
<option value="1">Grapes</option>
<option value="2">Orange</option></select>
</div>
</form>
</body>
</html>

Code Generate the following output:

JQuery: Show Distinct items of DropdownList

Saturday, April 16, 2016

JQUERY

April 16, 2016

Find some of Html Table column using JQuery

In this article i will show you how to find sum of single column of a html Table. We all know that a table contain table row and table column. Each row and column contains a cell. in this article i will use Id of the cell. We all know that id of the cell is different from other cell so we arrange id with numerical no like first cell id is amtlbl_0 and further is amtlbl_1, amtlbl_2. by using each method we can get the all ids. So the main logic is get the id which contain text like "amtlbl". In Jquery we have some technique to get the approximate id by using

$("[id*=amtlbl]")

Check the complete source code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">

$(function () {
var grandtotal = 0;
$("[id*=amtlbl]").each(function () {
grandtotal = grandtotal + parseFloat($(this).html());

})
$("[id*=totlbl]").html(grandtotal.toString());

});

</script>
</head>
<body>
<table style="width:100%;">
<tr><td>Id</td><td>Amount</td><td>City</td></tr>
<tr><td>1</td><td id="amtlbl_0">200</td><td>Pilani</td></tr>
<tr><td>2</td><td id="amtlbl_1">800</td><td>Jaipur</td></tr>
</table>
<label id="totlbl"/>
</body>
</html>

Code generate the following output:

Find some of Html Table column using JQuery