==>>In this article I am posting how to rotate multiple div like a slide show . It's a basic functionality that is used mostly in various websites. So i explain how to rotate div In Asp .Net using JQuery.In the Previous Article post the New-Features-in-Visual-Studio-2013 will help you for increase knowledge .: -
First you Need to create a website that have a aspx page.
Then add a Div in the body that have multiple divs.
. Div
<div id="MainDv">
<div id="Div1" class="DvCss DvCssa">
div 1 Show now
</div>
<div id="Div2" class="DvCss">
div 2 Show now
</div>
<div id="Div3" class="DvCss">
div 3 Show now
</div>
</div>
After the add div in body need to write css and js .
Css.
<style type="text/css">
div
{
width: 100px;
height: 100px;
}
#MainDv
{
position: relative;
}
.DvCss
{
position: absolute;
top: 0;
left: 0;
display: none;
}
.DvCssa
{
display: block;
}
#Div1
{
background-color: Pink;
}
#Div2
{
background-color: Aqua;
}
#Div3
{
background-color: Fuchsia;
}
</style>
.JS
<script type="text/javascript" language="javascript">
$(window).load(function() {
var divs = $('.DvCss');
function fade() {
var current = $('.DvCssa');
var currentIndex = divs.index(current),
nextIndex = currentIndex + 1;
if (nextIndex >= divs.length) {
nextIndex = 0;
}
var next = divs.eq(nextIndex);
next.stop().fadeIn(2000, function() {
$(this).addClass('DvCssa');
});
current.stop().fadeOut(2000, function() {
$(this).removeClass('DvCssa');
setTimeout(fade, 2500);
});
}
fade();
})
</script>
.donot forgot add
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts
Tuesday, July 23, 2013
Monday, July 1, 2013
Show Hide div using JQuery in asp .net
==>> In this article I am posting how to show and hide div using JQuery. Some time we need to hide and show div for show hide information on page so this post will heplfull for you.
.ASPX Code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#show").click(function() {
$(".mydiv").show(1000);
});
$("#hide").click(function() {
$(".mydiv").hide(1000);
});
});
</script>
<title>Show-Hide div using JQuery</title>
<style type="text/css">
.mydiv
{
margin:10px;padding:12px;
border:2px solid #666;
width:100px;
height:100px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="mydiv">
This is test div
</div>
<input id="show" type="button" value="Show" />
<input id="hide" type="button" value="Hide" />
</form>
</body>
</html>
Show-Hide div using JQuery
.ASPX Code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#show").click(function() {
$(".mydiv").show(1000);
});
$("#hide").click(function() {
$(".mydiv").hide(1000);
});
});
</script>
<title>Show-Hide div using JQuery</title>
<style type="text/css">
.mydiv
{
margin:10px;padding:12px;
border:2px solid #666;
width:100px;
height:100px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="mydiv">
This is test div
</div>
<input id="show" type="button" value="Show" />
<input id="hide" type="button" value="Hide" />
</form>
</body>
</html>
DEMO:-
Show Hide test div
Thursday, April 18, 2013
Get Selected Value on Dropdownlist selectedindexchanged event using JQuery
==>> In this post I explain how Get Selected Value on
Dropdownlist selectedindexchanged event using JQuery this is help
us for get value of dropdown without any page post back in asp .net
We use the change event in the JQuery for get value of dropdown
on Dropdownlist selectedindexchanged event in JQuery
In the JQuery we write code like :-
<script type="text/javascript">
$(document).ready(function() {
$('#ddlName').change(function() {
$("#lName").text($("#ddlName option:selected").text());
$("#lValue").text($("#ddlName").val());
return false;
})
});
</script>
.ASPX Page Code:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Get Selected Value on Dropdownlist selectedindexchanged event using JQuery
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#ddlName').change(function() {
$("#lName").text($("#ddlName option:selected").text());
$("#lValue").text($("#ddlName").val());
return false;
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table width="50%">
<tr>
<td align="right">
Select Name:
</td>
<td>
<select id="ddlName" onchange="GetName()" runat="server">
<option value="0">Select</option>
<option value="1">Subhash</option>
<option value="2">Rakesh</option>
<option value="3">Satendra</option>
<option value="4">Raju</option>
<option value="5">Sachin</option>
</select>
</td>
</tr>
<tr>
<td align="right" style="font-family: Century Gothic; font-size: 12pt; color: Black">
Selected Name:-
</td>
<td>
<b>
<label id="lName" style="font-family: Century Gothic; font-size: 12pt; color: Aqua" />
</b>
</td>
</tr>
<tr>
<td align="right" style="font-family: Century Gothic; font-size: 12pt; color: Black">
Selected Name value:-
</td>
<td>
<b>
<label id="lValue" style="font-family: Century Gothic; font-size: 12pt; color: Aqua" />
</b>
</td>
</tr>
</table>
</form>
</body>
</html>
DEMO:-
Get Selected Value on Dropdownlist selectedindexchanged event using JQuery
We use the change event in the JQuery for get value of dropdown
on Dropdownlist selectedindexchanged event in JQuery
In the JQuery we write code like :-
<script type="text/javascript">
$(document).ready(function() {
$('#ddlName').change(function() {
$("#lName").text($("#ddlName option:selected").text());
$("#lValue").text($("#ddlName").val());
return false;
})
});
</script>
.ASPX Page Code:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Get Selected Value on Dropdownlist selectedindexchanged event using JQuery
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#ddlName').change(function() {
$("#lName").text($("#ddlName option:selected").text());
$("#lValue").text($("#ddlName").val());
return false;
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table width="50%">
<tr>
<td align="right">
Select Name:
</td>
<td>
<select id="ddlName" onchange="GetName()" runat="server">
<option value="0">Select</option>
<option value="1">Subhash</option>
<option value="2">Rakesh</option>
<option value="3">Satendra</option>
<option value="4">Raju</option>
<option value="5">Sachin</option>
</select>
</td>
</tr>
<tr>
<td align="right" style="font-family: Century Gothic; font-size: 12pt; color: Black">
Selected Name:-
</td>
<td>
<b>
<label id="lName" style="font-family: Century Gothic; font-size: 12pt; color: Aqua" />
</b>
</td>
</tr>
<tr>
<td align="right" style="font-family: Century Gothic; font-size: 12pt; color: Black">
Selected Name value:-
</td>
<td>
<b>
<label id="lValue" style="font-family: Century Gothic; font-size: 12pt; color: Aqua" />
</b>
</td>
</tr>
</table>
</form>
</body>
</html>
DEMO:-
Thursday, April 11, 2013
Asp.Net Textbox Readonly using JQuery
==>> In this post i want to make asp .net text box read only
using JQuery .Some time we need this type of functionality in your
website so you can easily implement in your website just copy paste
blow code on your aspx page :----
1. ASPX PAGE CODE:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Asp.Net Textbox Readonly using JQuery</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#<%=txtBoxName.ClientID%>').attr('readonly', true);
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtBoxName" runat="server" />
</div>
</form>
</body>
</html>
Hope this will help you...
1. ASPX PAGE CODE:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Asp.Net Textbox Readonly using JQuery</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#<%=txtBoxName.ClientID%>').attr('readonly', true);
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtBoxName" runat="server" />
</div>
</form>
</body>
</html>
Hope this will help you...
Mouse or Cursor Position on the web page using JQuery in Asp .Net
==>> In this post i want to get current mouse or cursor position using JQuery :----
you just need paste this code on .aspx page you will find the your cursor position in browser....
1. ASPX PAGE CODE:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Mouse or Cursor Position on the web page using JQuery in Asp .Net</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$(document).mousemove(function(e) {
$('#lblAxistxt').html("X Axis: "+e.pageX+"<br/>"+ "Y Axis: "+e.pageY);
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<label id="lblAxistxt" style="background-color:Aqua;" />
</div>
</form>
</body>
</html>
DEMO
Mouse or Cursor Position on the web page using JQuery in Asp .Net
you just need paste this code on .aspx page you will find the your cursor position in browser....
1. ASPX PAGE CODE:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Mouse or Cursor Position on the web page using JQuery in Asp .Net</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$(document).mousemove(function(e) {
$('#lblAxistxt').html("X Axis: "+e.pageX+"<br/>"+ "Y Axis: "+e.pageY);
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<label id="lblAxistxt" style="background-color:Aqua;" />
</div>
</form>
</body>
</html>
DEMO
Friday, March 29, 2013
Check Empty Value or Null Value using JQuery in ASP .NET
==>> Create a website in add new page and paste the Code:--
1. ASPX PAGE CODE:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Empty Value or Null Value using JQuery in ASP .NET</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#btnClick').click(function () {
var str = $('#txtfield');
if (str.val() != null && str.val() != '') {
alert('you entered String ' + str.val())
}
else {
alert('Please enter text')
}
})
});
</script>
</head>
<body>
<div>
Enter Text: <input type="text" id="txtfield" />
<input type="button" id="btnClick" value="Click" />
</div>
</body>
</html>
1. ASPX PAGE CODE:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Empty Value or Null Value using JQuery in ASP .NET</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#btnClick').click(function () {
var str = $('#txtfield');
if (str.val() != null && str.val() != '') {
alert('you entered String ' + str.val())
}
else {
alert('Please enter text')
}
})
});
</script>
</head>
<body>
<div>
Enter Text: <input type="text" id="txtfield" />
<input type="button" id="btnClick" value="Click" />
</div>
</body>
</html>
Subscribe to:
Posts (Atom)