Develop Reference

how to enlarge image in grid view when mouse over?

I would like to enlarge an image in a grid view while mouse over. But in the script it is not allowed to to write onmouse, onclick or anything. Can uou help?
My script:
<ItemTemplate>
<asp:Image ID="img" runat="server" ImageUrl='<%#Eval("IMAGE")%>' Height="50" Width="50" Style="cursor:pointer" />
</ItemTemplate>
<EditItemTemplate>
<asp:Image ID="img" runat="server" ImageUrl='<%#Eval("IMAGE")%>' Height="50" Width="50" />
</EditItemTemplate>
</asp:TemplateField>

Java Script Code
<script type="text/javascript">
$(".pic").live("mousemove", function (e) {
var dv = $("#popup");
if (dv.length == 0) {
var src = $(this)[0].src;
var dv = $("<div />").css({ height: 250, width: 250, position: "absolute" });
var img = $("<img />").css({ height: 250, width: 250 }).attr("src", src);
dv.append(img);
dv.attr("id", "popup");
$("body").append(dv);
}
dv.css({ left: e.pageX, top: e.pageY });
});
$(".pic").live("mouseout", function () {
$("#popup").remove();
});
</script>
Using the Java Script code
<asp:Image ID="img" ImageUrl='<%#"http://gpssurvey.nsps.co.in"+(Eval("IMAGE"))%>' runat="server" Width="40px" Height="50px" CssClass="pic zoom" />

Onmouseover is a javascript event. You need just to add "onmouseover" attribute to the desired asp:Image, put a javascript method there, and this method should put a reference to a large image to some hidden div, and make that div visible.

n c# its not easily available. you need to use jQuery for that. Jquery in same like javascript .
Plugins are provided to magnify image.
You can use jQuery magnifire plugin.
Here is the code
In html -
<div class="magnify">
<!-- This is the magnifying glass which will contain the original/large version -->
<div class="large"></div>
<asp:Image ID="img" runat="server" ImageUrl='<%#Eval("IMAGE")%>' class="small" Height="50" Width="50" Style="cursor:pointer" />
jQuery -
$(document).ready(function(){
var native_width = 0;
var native_height = 0;
//Now the mousemove function
$(".magnify").mousemove(function(e){
//When the user hovers on the image, the script will first calculate
//the native dimensions if they don't exist. Only after the native dimensions
//are available, the script will show the zoomed version.
if(!native_width && !native_height)
{
//This will create a new image object with the same image as that in .small
//We cannot directly get the dimensions from .small because of the
//width specified to 200px in the html. To get the actual dimensions we have
//created this image object.
var image_object = new Image();
image_object.src = $(".small").attr("src");
//This code is wrapped in the .load function which is important.
//width and height of the object would return 0 if accessed before
//the image gets loaded.
native_width = image_object.width;
native_height = image_object.height;
}
else
{
//x/y coordinates of the mouse
//This is the position of .magnify with respect to the document.
var magnify_offset = $(this).offset();
//We will deduct the positions of .magnify from the mouse positions with
//respect to the document to get the mouse positions with respect to the
//container(.magnify)
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;
//Finally the code to fade out the glass if the mouse is outside the container
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(".large").fadeIn(100);
}
else
{
$(".large").fadeOut(100);
}
if($(".large").is(":visible"))
{
//The background position of .large will be changed according to the position
//of the mouse over the .small image. So we will get the ratio of the pixel
//under the mouse pointer with respect to the image and use that to position the
//large image inside the magnifying glass
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
//Time to move the magnifying glass with the mouse
var px = mx - $(".large").width()/2;
var py = my - $(".large").height()/2;
//Now the glass moves with the mouse
//The logic is to deduct half of the glass's width and height from the
//mouse coordinates to place it with its center at the mouse coordinates
//If you hover on the image now, you should see the magnifying glass in action
$(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})

Here I find a new way to enlarge the image in Grid Using Css
Css
.zoom {
transition: transform .2s;
width: 300px;
height: 300px;
}
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(5.1);
}
</style>
Asp Tag
<asp:Image ID="img" ImageUrl="~/Images/DDED.png" runat="server" Width="40px" Height="40px" CssClass="zoom"></asp:Image>

asp.net textbox - update label onkeyup

I'm generating some labels, textboxes and so on from my codebehind, and i need to update a label when a key is pressed in the textbox, i've been looking at this: How do I make a Textbox Postback on KeyUp?
And tried to convert it to be dynamic - but i can't get this to work.
This is in my asp.net/html code:
the header:
<script type="text/javascript">
function RefreshUpdatePanel(id) {
__doPostBack(id, '');
};
</script>
the body:
<div style="width:800px; margin:0 auto;">
<asp:Panel ID="testpanel" runat="server"></asp:Panel>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="update" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlProdKits" runat="server"></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
and my codebehind:
TextBox txtQuantity = new TextBox() { Width = 30, Text = "0", MaxLength = 4, ID = prod.Number };
txtQuantity.Style["text-align"] = "right";
txtQuantity.TextChanged += delegate(object o, EventArgs e) { lblPriceTotal.Text = "new text!"; };
txtQuantity.Attributes.Add("onkeyup", string.Format("RefreshUpdatePanel(ContentPlaceHolder1_{0});", txtQuantity.ClientID));
AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
trigger.ControlID = txtQuantity.ClientID;
update.Triggers.Add(trigger);
and then i add the textbox to the first panel:
testpanel.Controls.Add(txtQuantity);
the label is added to the panel inside the update panel:
pnlProdKits.Controls.Add(priceTotal);

As discussed,
You can try the following script,
<script type="text/javascript">
function RefreshUpdatePanel(){
//Find all textboxes which you want to get the values by their `ClientID` property. Like,
var a = $('#' + '<%= txtQuantity.ClientID %>').val();
var b = $('#' + '<%= txtQuantity2.ClientID %>').val();
//Since the value will be in string, you need to convert it to numeric for mathematical operations
var sum = parseFloat(a) + parseFloat(b);
//Then find the label and assign the result
$('#'+'<%= Label1.ClientID %>').val(sum.toFixed(2));
}
</script>
Rest of the code for adding onkeyup/onkeydown will be same.
You can try just adding alert(1); in the function to check if it hits it or not.

How to get cell ID of ASP.NET GridView in jQuery on right Click?

I have a GridView in my Application. I need to provide user some functionality to edit some cells or delete rows. I need to show context menu when user right clicks on some cell. When user click "Edit" I need to show some help Info and put this cell in Edit mode and set focus on It. Here is my Code:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$("#myMenu").hide();
$("#helpRow").hide();
$("table[id$='gvListOfMatters'] > tbody > tr > td").bind('contextmenu', function (e) {
$("#myMenu").hide();
e.preventDefault();
$(this).css("cursor", "pointer");
iColIndex = $(this).closest("tr td").prevAll("tr td").length;
iRowIndex = $(this).closest("tr").prevAll("tr").length;
rowid = $(this).parent().children()[0].innerHTML;
if (!isNaN(rowid)) {
//call context menu here
$("#myMenu").css({
top: e.pageY + "px",
left: e.pageX + "px",
position: 'absolute'
});
$("#myMenu").show(100);
}
});
});
//hide when left mouse is clicked
$(document).bind('click', function (e) {
$("#myMenu").hide(100);
});
var rowid = 0;
function fnEdit() {
var lnkEdit = document.getElementById('<%=lnkEdit.ClientID %>');
var hiddenField = document.getElementById('<%=fldRowID.ClientID %>');
hiddenField.value = rowid;
lnkEdit.click();
};
function fnDelete() {
var lnkDelete = document.getElementById('<%=lnkDelete.ClientID %>');
var hiddenField = document.getElementById('<%=fldRowID.ClientID %>');
hiddenField.value = rowid;
lnkDelete.click();
};
</script>
<div id="helpRow">
</div>
<asp:GridView ID="gvHelpRow" runat="server" AutoGenerateColumns="true" CssClass="helpRow" ShowHeader="false" Visible="false"></asp:GridView>
<br />
<div id="SourceGrid" class="table responsive">
<asp:GridView ID="gvListOfMatters" runat="server"
SOME Tamplate COLUMNS…
</asp:GridView>
</div>
<asp:LinkButton ID="lnkEdit" runat="server" Style="display: none" OnClick="lnkEdit_Click" />
<asp:LinkButton ID="lnkDelete" runat="server" Style="display: none" OnClick="lnkDelete_Click" />
<asp:HiddenField ID="fldRowID" runat="server" />
<%--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ContextMenu↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓--%>
<div id="myMenu" class="contextMenu">
<table style='width: 100%;'>
<tr>
<td onclick="fnEdit();">- Edit
</td>
</tr>
<tr>
<td onclick="fnDelete();">- Delete
</td>
</tr>
</table>
</div>
<%--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ContextMenu↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑--%>
</asp:Content>
First question is how to get ID of selected cell? I mentioned place where is the problem in my code.
I have event handlers for edit.click() and delete.click() in code-behind. In edit.click() I'm binding a data source to a helpRow GridView.
My second Question is how to show this HelpRow GridView right under the row that was clicked? I can't find the way how to set right position for this grid... I know that it should be absolute position and X and Y position...
So the whole Idea:
User right clicks on some cell. I need to show context menu ("Edit" and "Delete") and at this moment store rowID and cellID (rowid i got, but cellid is the problem...). When user clicks edit, I need to bind some data (it's stores in Session) based on rowid to helpRow Grid View. Then I need to show this helRow right under selected row (Position: absolute and ... HOW TO GET RIGHT POSITION???) and make selected cell in edit mode and set focus to this cell.

I found my own way!
First of all I bind function to the td instead of tr
$("table[id$='gvListOfMatters'] > tbody > tr > td").bind('contextmenu', function (e) {
$("#myMenu").hide();
e.preventDefault();
$(this).css("cursor", "pointer");
iColIndex = $(this).closest("tr td").prevAll("tr td").length;
iRowIndex = $(this).closest("tr").prevAll("tr").length;
rowid = $(this).parent().children()[0].innerHTML;
if (!isNaN(rowid)) {
//call context menu here
$("#myMenu").css({
top: e.pageY + "px",
left: e.pageX + "px",
position: 'absolute'
});
$("#myMenu").show(100);
}
});
Now I can get rowID, cellID, and all text inside every cell in this row.
I will update my original question with the latest update

ASP button ID not being find "findbyelementID" in JavaScript

Trying to find Id of a ASP.Net control in JavaScript but it says ID not found, I looked at different other related question but they are all in a ASP form or alike, however here I am using DIV tags, and its giving me error on page,
Code :
<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
<div id="divConfMessage" style="BORDER-RIGHT:black thin solid; BORDER-TOP:black thin solid; DISPLAY:none; Z-INDEX:200; BORDER-LEFT:black thin solid; BORDER-BOTTOM:black thin solid; background-color:white;">
<br />
<br />
<div style="BACKGROUND-COLOR: white;TEXT-ALIGN: center" id="confirmText"></div>
<div style="Z-INDEX: 105;HEIGHT: 22%;BACKGROUND-COLOR: white;TEXT-ALIGN: center"></div>
<div style="Z-INDEX: 105;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
<asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
<asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button>
</div>
</div>
<script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
<script type="text/javascript" language="JavaScript" src="CustomDialog.js"></script>
<script type="text/javascript" language="JavaScript">
function ShowMessage()
{
DisplayConfirmMessage('Do you really want to delete this decision?',480,120);
document.getElementById('<%=btnConfOK.ClientID%>').focus();
//SetDefaultButton('btnConfOK');
return false;
}
</script>
<asp:Button ID="btDelete" runat="server" CausesValidation="False" CssClass="gradientbutton"
UseSubmitBehavior="False"
OnClientClick="this.disabled=true;this.value='Please Wait...';ShowMessage();"
Text="Delete" Width="200px" />
EDIT:
I made the changes and the Dialog box comes up and disappears then :|, I think I need to add the control to DOM but got no clue how i gonna do that in this context :|
here's the tutorial link i followed
Dialog box tutorial
js script
var divWidth = '';
var divHeight = '';
var txtFirstButton = 'OK';
var txtSecondButton = 'Cancel'
function DisplayConfirmMessage(msg,width,height)
{
// Set default dialogbox width if null
if(width == null)
divWidth = 180
else
divWidth = width;
// Set default dialogBox height if null
if(height == null)
divHeight = 90
else
divHeight = height;
// Ge the dialogbox object
var divLayer = document.getElementById('divConfMessage');
// Set dialogbox height and width
SetHeightWidth(divLayer)
// Set dialogbox top and left
SetTopLeft(divLayer);
// Show the div layer
divLayer.style.display = 'block';
// Change the location and reset the width and height if window is resized
window.onresize = function() { if(divLayer.style.display == 'block'){ SetTopLeft(divLayer); SetHeightWidth(divLayer)}}
// Set the dialogbox display message
document.getElementById('confirmText').innerHTML = msg;
}
function SetTopLeft(divLayer)
{
// Get the dialogbox height
var divHeightPer = divLayer.style.height.split('px')[0];
// Set the top variable
var top = (parseInt(document.body.offsetHeight)/ 2) - (divHeightPer/2)
// Get the dialog box width
var divWidthPix = divLayer.style.width.split('px')[0];
// Get the left variable
var left = (parseInt(document.body.offsetWidth)/2) - (parseInt(divWidthPix)/2);
// set the dialogbox position to abosulute
divLayer.style.position = 'absolute';
// Set the div top to the height
divLayer.style.top = top
// Set the div Left to the height
divLayer.style.left = left;
}
function SetHeightWidth(divLayer)
{
// Set the dialogbox width
divLayer.style.width = divWidth + 'px';
// Set the dialogbox Height
divLayer.style.height = divHeight + 'px'
}
function SetDefaultButton(defaultButton)
{
// Set the focus on the Cancel button
document.getElementById(defaultButton).focus();
}
If I remove "UseSubmitBehavior="False", It works fine, except when I click on Yes, it doesn't closes the Dialog box

getElementById takes a string, so you need to quote the id, like this:
document.getElementById('<%=btnConfOK.ClientID%>').focus();

You have to put the output in quotes:
document.getElementById(<%=btnConfOK.ClientID%>)
should be
document.getElementById("<%=btnConfOK.ClientID%>")

You missing the syntax document.getElementById("<%=btnConfOK.ClientID%>").focus();
Read more about document.getElementById
Edit
function ShowMessage()
{
DisplayConfirmMessage('Do you really want to delete this decision?',480,120);
document.getElementById("<%=btnConfOK.ClientID%>").focus();
//SetDefaultButton('btnConfOK');
return false;
}
If your delete button doing the post-back, use event.preventDefault on delete button click.

How to set the down to the vertical scroll bar in div tag using asp.net timer control when page is refreshing

I am developing a chat application using asp.net, in that application using div tag with in div tag add the asp.net Literal message box and one timer control , now my problem is when the page will refresh or click the button (any time) the div scrollbar is always top but I would like it to stay at the bottom, how to adjust my code?
<div id="divMessages" style="background-color: White; border-color:Black;border-width:1px;border-style:solid;height:300px;width:592px;overflow-y:scroll; font-size: 11px; padding: 4px 4px 4px 4px;" onresize="SetScrollPosition()">
<asp:Literal Id="litMessages" runat="server" />
</div>
<asp:TextBox Id="txtMessage" onkeyup="ReplaceChars()" onfocus="SetToEnd(this)" runat="server" MaxLength="100" Width="500px" ClientIDMode="Static" />
<asp:Button Id="btnSend" runat="server" Text="Send" OnClientClick="SetScrollPosition()" OnClick="BtnSend_Click" ClientIDMode="Static"/>
and javascript function is
function SetScrollPosition()
{
var div = document.getElementById('divMessages');
div.scrollIntoView(false);
//(or)
div.scrollTop = 10000;
//(both are checking)
}
please give me any suggestion about that
I checked this example it is working with out update panel but i have update panel and timer control also, i need to using those controls to maintain the div scroll bar in bottom please give me any suggestion ................

Check this code See this Example
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"
ScriptMode="Release" />
<script type="text/javascript">
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
function BeginRequestHandler(sender, args) {
if ($get('<%=divMessages.ClientID%>') != null) {
xPos = $get('<%=divMessages.ClientID%>').scrollLeft;
yPos = $get('<%=divMessages.ClientID%>').scrollTop;
}
}
function EndRequestHandler(sender, args) {
if ($get('<%=divMessages.ClientID%>') != null) {
xPos = $get('<%=divMessages.ClientID%>').scrollLeft = xPos;
yPos = $get('<%=divMessages.ClientID%>').scrollTop = yPos;
}
}
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
</script>

i may have a simple solution,but i not sure whether is you want.
in traditional,we can set an anchor for the url and let page scroll to special location when access this page.similar to this : http://www.example.com/#message.
so,you can write a little of js to control this anchor.
<div id="divMessages" onresize="SetScrollPosition()">
<asp:Literal Id="litMessages" runat="server" />
</div>
<div id="msg-local" />//add new element is to auto scroll to here.
function SetScrollPosition()
{
......
//set the url with anchor
window.location.hash = "go-msg-local";
//set this value can disable browser auto scroll
}
//then page load event
function page_load {
if (window.location.hash) {
window.location.hash = "msg-local";
}
}