Archive for the ‘JQuery’ Category

Print Html page using javascript in asp.net

function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById(“printbtn”);
//Set the print button visibility to ‘hidden’
printButton.style.visibility = ‘hidden’;
//Print the page content
window.print()
//Set the print button to ‘visible’ again
//[Delete this line if you want it to stay hidden after printing]
printButton.style.visibility = ‘visible’;
}

 

<input id=”printbtn” type=”button” value=”Print page” onclick=”printpage()”/>

 

Call Button server event on enter key pressed in password textbox

<html>
<head>
http://../JQuery/jquery-1.7.2.js

$(document).ready(function () {
$(‘#txtPassword’).keypress(function(e)
{
var key = e.which;
if(key == 13)
{
//$(‘#btnSubmit’).click();
$(“#btnSubmit”)[0].click();
//alert(‘hi1’);
//return false;
}
});

});

</head>
<body>
<form id=”form1″ runat=”server”>
<fieldset>

 <asp:TextBox ID=”txtUser” runat=”server” class=”form-control” placeholder=”UserID”
MaxLength=”8″></asp:TextBox>
<asp:TextBox ID=”txtPassword” runat=”server” class=”form-control” placeholder=”Password”
TextMode=”Password”></asp:TextBox>
<asp:LinkButton ID=”btnSubmit” runat=”server” class=”btn btn-bricky pull-right”>Login <i class=”fa fa-arrow-circle-right”></i> </asp:LinkButton>

</fieldset>
</form>
</body>

</html>

How to call server side button event using JQuery

<html>
<head>
    <title>Call Server side Button event using JQuery</title>
     src="scripts/jquery-1.4.1.min.js" type="text/javascript">
     type="text/javascript">
        $(document).ready(function () {
            $("#lnkbtn").click(function () {
                $("#<%=Button1.ClientID %>")[0].click(); }); }); 
</head> 
<body>  
   <form id="form1" runat="server"> 
     <a id = "lnkbtn" href = "#">Click</a> 
     <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> 
   </form> 
</body> 
</html>

Mouse over Background color effect on HTML Table using CSS / JQuery

Method : 1 (Using CSS)

<style>
tr:nth-child(even)
{
background: #E3F3FB;
color:Black;
}
tr:nth-child(odd)
{
background: #FFF;
color:Black;
}

tr:hover
{
background: #FFFFCB;
cursor: hand;
font-weight:bold;
color:Black;
cursor:pointer;
}
</style>

 

<table width=”100%” cellspacing=”0″ cellpadding=”0″ style=”border: none; border-collapse: collapse;”
border=”0″ id=”tbl”>
<tr style=”background-color: #294E79; color: White; text-align: center”>
<td style=”border: none; font-family: Arial” width=”5%”>
Sr No.
</td>
<td style=”border: none; font-family: Arial” width=”50%”>
Heading1
</td>
<td style=”border: none; font-family: Arial” width=”10%”>
Heading2
</td>
<td style=”border: none; font-family: Arial” width=”10%”>
&nbsp;
</td>
</tr>
<tr>
<td style=”border: none; font-family: Arial; text-align: center” width=”5%”>
1
</td>
<td style=”border: none; font-family: Arial” width=”50%”>
<asp:label runat=”server” id=”lbl1″ text=”TEXT2″></asp:label>
</td>
<td style=”border: none; font-family: Arial; text-align: center” width=”10%”>
<a href=”pdf file link” target=”_blank”>
<img src=”images/pdf.png” width=”20px” height=”20px” /></a>
</td>
<td style=”border: none; font-family: Arial; text-align: center” width=”10%”>
</td>
</tr>
<tr>
<td style=”border: none; font-family: Arial; text-align: center” width=”5%”>
2
</td>
<td style=”border: none; font-family: Arial” width=”50%”>
<asp:label runat=”server” id=”Label1″ text=”TEXT2″></asp:label>
</td>
<td style=”border: none; font-family: Arial; text-align: center” width=”10%”>
<a href=”pdf file link” target=”_blank”>
<img src=”images/pdf.png” width=”20px” height=”20px” /></a>
</td>
<td style=”border: none; font-family: Arial; text-align: center” width=”10%”>
</td>
</tr>
</table>

 

Method : 2 (Using Jquery & CSS)

 

$(document).ready(function () {
$(‘#tbl tr:has(td)’).mouseover(function () {
$(this).addClass(“initial”);
});
$(‘#tbl tr’).mouseout(function () {
$(this).removeClass(“highlight”);
})
})

<style>
.initial
{
background-color: red;
color: #000000;
}
.normal
{
background-color: #CCCCCC;
}
.highlight
{
background-color: #8888FF;
}
</style>

<table width=”100%” cellspacing=”0″ cellpadding=”0″ style=”border: none; border-collapse: collapse;”
border=”0″ id=”tbl”>
<tr style=”background-color: #294E79; color: White; text-align: center”>
<td style=”border: none; font-family: Arial” width=”5%”>
Sr No.
</td>
<td style=”border: none; font-family: Arial” width=”50%”>
Heading1
</td>
<td style=”border: none; font-family: Arial” width=”10%”>
Heading2
</td>
<td style=”border: none; font-family: Arial” width=”10%”>
&nbsp;
</td>
</tr>
<tr>
<td style=”border: none; font-family: Arial; text-align: center” width=”5%”>
1
</td>
<td style=”border: none; font-family: Arial” width=”50%”>
<asp:label runat=”server” id=”lbl1″ text=”TEXT2″></asp:label>
</td>
<td style=”border: none; font-family: Arial; text-align: center” width=”10%”>
<a href=”pdf file link” target=”_blank”>
<img src=”images/pdf.png” width=”20px” height=”20px” /></a>
</td>
<td style=”border: none; font-family: Arial; text-align: center” width=”10%”>
</td>
</tr>
<tr>
<td style=”border: none; font-family: Arial; text-align: center” width=”5%”>
2
</td>
<td style=”border: none; font-family: Arial” width=”50%”>
<asp:label runat=”server” id=”Label1″ text=”TEXT2″></asp:label>
</td>
<td style=”border: none; font-family: Arial; text-align: center” width=”10%”>
<a href=”pdf file link” target=”_blank”>
<img src=”images/pdf.png” width=”20px” height=”20px” /></a>
</td>
<td style=”border: none; font-family: Arial; text-align: center” width=”10%”>
</td>
</tr>
</table>