Archive for January, 2016

ConfirmButtonExtender – How to use line break in ConfirmText

In ConfirmButtonExtender, We can use   character code to break line & put remaining character in new line.

Example :

<cc1:ConfirmButtonExtender ID=”cbeDelete” runat=”server” ConfirmText=“Before submitting your Application, Verify all filled details in the application. If you want to Submit your Application, Click on OK button.”
TargetControlID=”btnsubmit”>

 

If you like this post, pls leave your valuable comment.

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>