How to start the jquiry application and basic steps
hi,how to start the jquiry application and basic steps and how to add the jquiry file to the application.
Thanks
penchala
You must Sign In to post a response.
Category: JQuery
how to start the jquiry application and basic steps and how to add the jquiry file to the application.
Thanks
penchala
#721024
In this article I have explained about how to show simple Popup window using jQuery. Each steps I have clearly explained in this article .
The jQuery java script file can be downloaded from jQuery Official website http://www.jquery.com/
To load JQuery in your application Just copy and past below line titile tag
<script type="text/javascript" src="jquery-1.2.6.js"> </script>
Just copy and paste below code after import jquery
<style type="text/css">
/* PopupDiv Styles*/
#PopupDiv
{
display:none; /* Hide the PopupDiv */
position:fixed;
_position:absolute;
height:200px;
width:500px;
background:grey;
left: 300px;
top: 150px;
z-index:100;
margin-left: 15px;
border:10px solid black;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px Yellow;
-webkit-box-shadow: 0 0 5px white;
box-shadow: 0 0 5px #ff0000;
}
#MainPage
{
background: #d2d2d2;
width:100%; height:100%;
}
a{ cursor: pointer; text-decoration:none; }
/* Close button */
#btnClose
{
font-size:20px;
line-height:15px;
right:5px;
top:5px;
position:absolute;
color:#6fa5e2;
font-weight:500;
}
</style>
Full Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Simple Popup Window using JQuery</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<style type="text/css">
/* PopupDiv Styles*/
#PopupDiv
{
display:none; /* Hide the PopupDiv */
position:fixed;
_position:absolute;
height:200px;
width:500px;
background:grey;
left: 300px;
top: 150px;
z-index:100;
margin-left: 15px;
border:10px solid black;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px Yellow;
-webkit-box-shadow: 0 0 5px white;
box-shadow: 0 0 5px #ff0000;
}
#MainPage
{
background: #d2d2d2;
width:100%; height:100%;
}
a{ cursor: pointer; text-decoration:none; }
/* Close button */
#btnClose
{
font-size:20px;
line-height:15px;
right:5px;
top:5px;
position:absolute;
color:#6fa5e2;
font-weight:500;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
ShowPopupBox();
$('#btnClose').click( function() {
HidePopupBox();
});
$('#MainPage').click( function() {
HidePopupBox();
});
function HidePopupBox() { // TO Hide PopupBox
$('#PopupDiv').fadeOut("slow");
$("#MainPage").css({ // this is just for style
"opacity": "1"
});
}
function ShowPopupBox() { // To Show PopupBox
$('#PopupDiv').fadeIn("slow");
$("#MainPage").css({ // this is just for style
"opacity": "0.3"
});
}
});
</script>
</head>
<body >
<form id="theform" runat="server">
<div id="PopupDiv" style="left: 232px; top: 179px; width: 265px; height: 96px;"> <!-- OUR PopupBox DIV-->
<table>
<tr>
<td style="width: 100px">
User Name</td>
<td style="width: 100px">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 100px">
Password</td>
<td style="width: 100px">
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
<asp:Button ID="btnSave" runat="server" Text="Save" /></td>
</tr>
</table>
<a id="btnClose">Close</a>
</div>
</form>
</body>
</html>
The jQuery java script file can be downloaded from jQuery Official website http://www.jquery.com/
To load JQuery in your application Just copy and past below line titile tag
<script type="text/javascript" src="jquery-1.2.6.js"> </script>
Just copy and paste below code after import jquery
<style type="text/css">
/* PopupDiv Styles*/
#PopupDiv
{
display:none; /* Hide the PopupDiv */
position:fixed;
_position:absolute;
height:200px;
width:500px;
background:grey;
left: 300px;
top: 150px;
z-index:100;
margin-left: 15px;
border:10px solid black;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px Yellow;
-webkit-box-shadow: 0 0 5px white;
box-shadow: 0 0 5px #ff0000;
}
#MainPage
{
background: #d2d2d2;
width:100%; height:100%;
}
a{ cursor: pointer; text-decoration:none; }
/* Close button */
#btnClose
{
font-size:20px;
line-height:15px;
right:5px;
top:5px;
position:absolute;
color:#6fa5e2;
font-weight:500;
}
</style>
Full Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Simple Popup Window using JQuery</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<style type="text/css">
/* PopupDiv Styles*/
#PopupDiv
{
display:none; /* Hide the PopupDiv */
position:fixed;
_position:absolute;
height:200px;
width:500px;
background:grey;
left: 300px;
top: 150px;
z-index:100;
margin-left: 15px;
border:10px solid black;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px Yellow;
-webkit-box-shadow: 0 0 5px white;
box-shadow: 0 0 5px #ff0000;
}
#MainPage
{
background: #d2d2d2;
width:100%; height:100%;
}
a{ cursor: pointer; text-decoration:none; }
/* Close button */
#btnClose
{
font-size:20px;
line-height:15px;
right:5px;
top:5px;
position:absolute;
color:#6fa5e2;
font-weight:500;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
ShowPopupBox();
$('#btnClose').click( function() {
HidePopupBox();
});
$('#MainPage').click( function() {
HidePopupBox();
});
function HidePopupBox() { // TO Hide PopupBox
$('#PopupDiv').fadeOut("slow");
$("#MainPage").css({ // this is just for style
"opacity": "1"
});
}
function ShowPopupBox() { // To Show PopupBox
$('#PopupDiv').fadeIn("slow");
$("#MainPage").css({ // this is just for style
"opacity": "0.3"
});
}
});
</script>
</head>
<body >
<form id="theform" runat="server">
<div id="PopupDiv" style="left: 232px; top: 179px; width: 265px; height: 96px;"> <!-- OUR PopupBox DIV-->
<table>
<tr>
<td style="width: 100px">
User Name</td>
<td style="width: 100px">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 100px">
Password</td>
<td style="width: 100px">
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
<asp:Button ID="btnSave" runat="server" Text="Save" /></td>
</tr>
</table>
<a id="btnClose">Close</a>
</div>
</form>
</body>
</html>
Thanks & Regards
G.Renganathan
Nothing is mine ,Everything is yours!!!
#721047
You can add any Jquery file using the script tag as below.
For sample application and syntax please refer the officaial site as
Thanks & Regards
Anil Kumar Pandey
Microsoft MVP, DNS MVM
<script type="text/javascript" src="jquery-Validation.1.2.6.js"> </script>
For sample application and syntax please refer the officaial site as
http :// jquery.com /
Thanks & Regards
Anil Kumar Pandey
Microsoft MVP, DNS MVM
#721049
If you want to start any thing from scratch you need to just follows step by step..
So I suggest you keep on book and go chapter by chapter.
for jquery most of the things like javascript you need the study some syntax and different type of selector which is commonly used.
see the the common selector here
http://blog.akumars.esoftera.in/post/2012/12/20/jQuery-Selector.aspx
and than you can start step by step with example
see this link for sample
http://www.w3schools.com/jquery/jquery_examples.asp
Regards & thanks
Arvind kumar
Visit--blog.akumars.esoftera.in
So I suggest you keep on book and go chapter by chapter.
for jquery most of the things like javascript you need the study some syntax and different type of selector which is commonly used.
see the the common selector here
http://blog.akumars.esoftera.in/post/2012/12/20/jQuery-Selector.aspx
and than you can start step by step with example
see this link for sample
http://www.w3schools.com/jquery/jquery_examples.asp
Regards & thanks
Arvind kumar
Visit--blog.akumars.esoftera.in
#721060
Hi.
You can also learn jquery from the following site.
http://learn.jquery.com/
Thanks
Reena
You can also learn jquery from the following site.
http://learn.jquery.com/
Thanks
Reena
#721063
hello Penchala,
Please follow this below link would help how to start with jquery and asp.net application.
http://www.dotnetcurry.com/ShowArticle.aspx?ID=231
Regards
Prabhu.
www.dotnetgallery.com
Please follow this below link would help how to start with jquery and asp.net application.
http://www.dotnetcurry.com/ShowArticle.aspx?ID=231
Regards
Prabhu.
www.dotnetgallery.com
#721067
Hi,
JQuery is a light weight Javascript Library.
JQuery is the library created using JavaScript and you will be using the inbuilt functionalities from the library by adding reference to it.
You can go through my article for simple example,
http://weblogs.asp.net/varadam/archive/2011/03/22/toggling-expand-collaps-panel-using-jquery.aspx
If you are interested to go through the step by step learning tutorials then please use below link: learn.jquery.com/about-jquery/how-jquery-works/
Regards,
Asheej T K
JQuery is a light weight Javascript Library.
JQuery is the library created using JavaScript and you will be using the inbuilt functionalities from the library by adding reference to it.
You can go through my article for simple example,
http://weblogs.asp.net/varadam/archive/2011/03/22/toggling-expand-collaps-panel-using-jquery.aspx
If you are interested to go through the step by step learning tutorials then please use below link: learn.jquery.com/about-jquery/how-jquery-works/
Regards,
Asheej T K
#721403
JQuery is a Light weight tool added to animate some tools,
It is included as:
<script type="text/javascript" >
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
the above is for click function(), when any <p> control is clicked can be triggered
This goes on with Large plug-in files
When you want to include a large animated files, you wil do as:
<script type="text/javascript" src="jquery.1.2.6.js"> </script>
Now the current version exceeded Jquery 1.9.2
It is included as:
<script type="text/javascript" >
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
the above is for click function(), when any <p> control is clicked can be triggered
This goes on with Large plug-in files
When you want to include a large animated files, you wil do as:
<script type="text/javascript" src="jquery.1.2.6.js"> </script>
Now the current version exceeded Jquery 1.9.2
Return to Return to Discussion Forum
