Forum guidelines
  • Home
  • »
  • C# Language
  • »
  • populate a div on mouseover on textbox inside gridview in jq
AuthorQuestion
populate a div on mouseover on textbox inside gridview in jq
Posted By Sinu Joseph on 07 Jan 2014
i have a grid view ...
 
i need to populate a div obove the textbox on mouse over inside the gridview , 
 
its working properyly on some of the text i need to display the div when the cursor move into the td the div will show with corresponding value on above the text box , and on other td the previous div hide and show new on corresponding div
 
 
 
 
 
 
here is the code :
 
  function storevalue(obj) {

$('#TestDiv1').hide();
var pos = $(obj).offset();
$('#TestDiv1').show('slow');
$('#TestDiv1').offset({ top: pos.top-30, left: pos.left-30 });
//alert(pos.top); alert(pos.left);


$('#sidebarPage1').show();
var gridview = $(".arrowkeygv");
$.keynavigation(gridview);

obj.style.backgroundColor = "#DFEBF4";
var curmark = parseFloat(obj.value, 10);
var chk = obj.value

if (!isNaN(curmark)) {
document.getElementById('ctl00_ContentPlaceHolder1_HiddenField3').value = curmark;
}
else {
document.getElementById('ctl00_ContentPlaceHolder1_HiddenField3').value = chk;
}


var closest = $(obj).closest("td").index();

var Cutoff = 'ctl00_ContentPlaceHolder1_lvMarkEntry_ctl01_Cutoff' + closest;

var cut = Cutoff;

var Cutoffvalue = document.getElementById(cut).innerHTML;

var arr1 = Cutoffvalue.split("(");

var val1 = arr1[1];

var arr2 = val1.split(")");

var cutof = arr2[0];

var cutoffmark = parseFloat(cutof, 10);

// var lblElement = document.getElementbyId("lblmaxmark");
// lblElement.innerHTML(cutoffmark);
// document.getElementById('lblmaxmark').value=cutoffmark;
$('#ctl00_ContentPlaceHolder1_lblmaxmark').html('Max-Mark is ' + cutoffmark);

}
 
 
function pageLoad() {


$('.textbox1').parent('td').hover(
function() {
// var sorted = $(this).find("input[type='text']");
//
// var pos = $(sorted).offset();
$('#TestDiv1').offset({ top: pos.top - 30, left: pos.left-30 });
$('#TestDiv1').show('slow');
},
function() {
$('#TestDiv1').hide();

});

}
 
<div style="position: relative;">
<table class="table_style" width="100%">
<tr>
<td valign="top">
<table cellspacing="1" cellpadding="1" width="100%">
<tr>
<td colspan="2" >
<asp:Label ID="lblMsg" runat="server" SkinID="LblError"></asp:Label>
</td>
</tr>
<tr>
<td width="10%">
<asp:Label ID="lblClass" runat="server"></asp:Label>
</td>
<td width="70%" >
<asp:HiddenField ID="HiddenField2" runat="server" />
<asp:HiddenField ID="HiddenField1" Visible="true" EnableViewState="true" runat="server">
</asp:HiddenField>
<asp:DropDownList ID="ddlClass" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlClass_SelectedIndexChanged"
Width="170px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="ddlClass"
ErrorMessage="*" InitialValue="0" ValidationGroup="a"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblDivision" runat="server"></asp:Label>
</td>
<td >
<asp:DropDownList ID="ddlDivision" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlDivision_SelectedIndexChanged"
Width="170px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="ddlDivision"
ErrorMessage="*" InitialValue="0" ValidationGroup="a"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Exam Term
</td>
<td >
<asp:DropDownList ID="ddlTerm" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlTerm_SelectedIndexChanged"
Width="170px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="ddlTerm"
ErrorMessage="*" InitialValue="0" ValidationGroup="a"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Subject
</td>
<td >
<asp:DropDownList ID="ddlSubject" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlSubject_SelectedIndexChanged"
Width="170px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="ddlSubject"
ErrorMessage="*" InitialValue="0" ValidationGroup="a"></asp:RequiredFieldValidator>
<asp:CheckBox ID="cbMarkSubject" runat="server" AutoPostBack="True" OnCheckedChanged="cbMarkSubject_CheckedChanged"
Text="Need mark entry for this Subject" Visible="False" />
</td>
</tr>
<tr>
<td id="tdStaff" runat="server">
Staff
</td>
<td id="tdddlStaff" runat="server" >
<asp:DropDownList ID="ddlStaff" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlStaff_SelectedIndexChanged"
Width="170px">
</asp:DropDownList>
</td>
</tr>
<tr runat="server" id="trSubDiv" visible="false">
<td colspan="2">
<asp:CheckBoxList ID="cbSubDivisions" runat="server" RepeatColumns="3" RepeatDirection="Horizontal">
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td id="tdGrid" runat="server" colspan="2">
<table width="100%">
<asp:HiddenField ID="HiddenField3" Visible="true" EnableViewState="true" runat="server">
</asp:HiddenField>
<tr id="tdGrid1" runat="server">
<td style="color: #FF0000; font-weight: bold;">
Note:- If Absent Mark 'a'
</td>
</tr>
<tr>
<td>
<asp:RadioButton ID="chkNavg" runat="server" Text="Enable Key Navigation" CssClass="enableNavigation"
Visible="false" />
</td>
</tr>
<tr>
<td>
<asp:GridView ID="lvMarkEntry" runat="server" AutoGenerateColumns="False" BorderColor="#F8F8F8"
BorderWidth="1px" OnPageIndexChanging="lvMarkEntry_PageIndexChanging" SkinID="IndicatorView"
Width="100%" OnSelectedIndexChanged="lvMarkEntry_SelectedIndexChanged" DataKeyNames="StudentID"
OnRowCreated="lvMarkEntry_RowCreated" BorderStyle="Solid" OnRowDataBound="lvMarkEntry_RowDataBound">
<Columns>
<asp:BoundField DataField="RollNo">
<HeaderStyle Font-Size="Medium" />
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="StudName">
<HeaderStyle Font-Size="Small" />
</asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<asp:DataList ID="DListMark" runat="server" BorderColor="Transparent" BorderStyle="None"
BorderWidth="0px" CellPadding="0" DataKeyField="DivTermSubAcaDetID" Width="100%"
AlternatingItemStyle-ForeColor="AliceBlue" RepeatDirection="Horizontal" HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemTemplate>
<asp:TextBox ID="txtsub" runat="server" onmouseover="storevalue(this);" Height="23px"
MaxLength="5" Width="40px"></asp:TextBox>
<asp:RegularExpressionValidator ID="ReguExpVr" runat="server" ControlToValidate="txtsub"
ErrorMessage="*" ValidationExpression="^[.]([0-9]{1,2})|([0-9]+)[.]([0-9]{1,2})$|a|[0-9]+"
ValidationGroup="a"></asp:RegularExpressionValidator>
<asp:DropDownList ID="ddlGrade" runat="server" Width="50px">
</asp:DropDownList>
</ItemTemplate>
<AlternatingItemStyle ForeColor="AliceBlue" />
</asp:DataList>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" Font-Size="Small" Width="200px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle Font-Size="Small" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle Font-Size="Small" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
<tr>
<td id="tdVerify" align="center" runat="server">
<asp:Button ID="btnVerify" runat="server" OnClick="btnVerify_Click" Text="Verified and Approved"
Visible="False" />
</td>
</tr>
<tr>
<td id="tdApprove" runat="server" align="center">
Enter Password<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox><asp:Button
ID="btnApprove" runat="server" Text="Approve" OnClick="btnApprove_Click" />
</td>
</tr>
</table>
</td>
</tr>
</table>
&nbsp;
</td>
</tr>
</table>
<div id="TestDiv1" style="background-image: url('../images/speech_bubble.png'); background-repeat: no-repeat;
height: 23px; left: 155.167px; padding: 9px 4px 7px;
position: absolute; text-align: center; width: 74px; z-index: 9998;
display: none">
<asp:Label ID="lblmaxmark" style="color: #FFFFFF !important; font-size:11px ; font-family:Arial,Verdana,Helvetica,sans-serif " runat="server" Text=""></asp:Label>
</div>
</div> 

AuthorReply
Re: populate a div on mouseover on textbox inside gridview in jq
Posted By Sinu Joseph on 07 Jan 2014  
  plzzzz help me...

SPONSORED BY

Custom Software Development
MCN is your source for developing solutions involving websites, mobile apps, cloud-computing, databases, BI, back-end services and processes and client-server applications.