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 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 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.