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>

Dropdownlist losing values on button submit

I have an aspx page.
THE DROPDOWN'S SELECTED VALUE IS LOST.
When i click search, i can perform a server side event and return to the page with everything working fine. When i press update, sadly, my combo boxes lose their values. I have enbabledViewState to true for master page, and current page and even on all of the controls. Any ideas how i could begin to approach this? The values are gone by the time we reach page_load event. There are no other life cycle events.
Page_Load()
{
if(!PostBack)
{
//Populate a dropdown.
This is where the dropdown is safely populated.
}
}
btnClickSearch()
{
}
btnClickUpdate()
{
}
The two buttons on the page.
NOT WORKING
<asp:Button id="btnUpdate" class="fg-button ui-state-default ui-corner-all" runat="server" Text="Update" onclick="btnClick_Update" onclientclick="return updateNotes();" style="width:auto;"/>
WORKING
<asp:Button id="A2" runat="server" onclick="btnClick_Submit" OnClientClick="return searchNotes();" class="fg-button ui-state-default ui-corner-all" style="float: left; margin-left: 20px; width:auto;" Text="Search"></asp:Button>
The onclient click event for both buttons calls blockUI and returns true. Any idea why these would be different in behaviour?
Also, none of the dropdown items have duplicate values.

Maybe you can try to set a session for selected one after pressing update button:
btnClickUpdate()
{
Session["DDLValue"] = dropdownlist.SelectedValue;
}
On page load, get the session and set it to drop down list if it is not NULL:
if(Session["DDLValue"] != null)
{
dropdownlist.SelectedValue = Session["DDLValue"].ToString();
}
Following links would help: Set selected value for drop down list

I have two controls.
Button1 and button2. Button 1 works fine. Button 2 does call it's server side event, but when this occurs we get a CKEditor dissasembly.
I have a jquery UI dialog containing the CKEditor and an asp button. When this button it clicked all of the values are lost on the server side and the disassembly is shown.
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/custom/dialog-patch.js"></script>
<span style="width: 500px; height: 100%">
<CKEditor:CkEditorControl id="CKEditor1" runat="server" AutoPostBack="false">
</CKEditor:CkEditorControl>
</span>
Definition
$(function() {
// to load editor
CKEDITOR.on('dialogDefinition', function(ev) {
// Take the dialog name and its definition from the event
// data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the "Link" dialog).
if (dialogName == 'link') {
// remove contents
dialogDefinition.removeContents('target');
dialogDefinition.removeContents('upload');
dialogDefinition.removeContents('advanced');
// Get a reference to the "Link Info" tab.
var infoTab = dialogDefinition.getContents('info');
// Remove the "Link Type" combo and the "Browser
// Server" button from the "info" tab.
infoTab.remove('linkType');
infoTab.remove('browse');
}
else if (dialogName == 'table') {
// Get a reference to the default tab.
var infoTab = dialogDefinition.getContents('info');
infoTab.remove('selHeaders');
infoTab.remove('txtHeight');
infoTab.remove('txtCellSpace');
infoTab.remove('txtCellPad');
infoTab.remove('txtCaption');
infoTab.remove('txtSummary');
infoTab.remove('cmbAlign');
}
});
});
Function to open the dialog containing the CKEditor.
function EditDialog(element,supplier,codeId,name, category,categoryCode, noteId,templateText) {
var numberOfNotes = $(element).parent().children('.text').length;
var noteBody = "";
if (numberOfNotes == 1) {
noteBody = $(element).parent().children('.text').html();
}
if (noteBody == "") {
noteBody = templateText;
}
$('#<%=esupplier.ClientID %>').val(supplier);
$('#<%=ename.ClientID %>').val(name);
$('#<%=enotecategory.ClientID %>').val(category);
$('#<%=hfCategoryCode.ClientID %>').val(categoryCode);
$('#<%=hfNoteID.ClientID %>').val(noteId);
$('#<%=hfIdCode.ClientID %>').val(codeId);
var dialogeditcontainer = $('#editdialog').dialog('open');
dialogeditcontainer.parent().appendTo(jQuery('form:first'));
CKEDITOR.instances[$('#editorName').val()].setData(noteBody);
return false;
}
Definition
$(function() {
// to load editor
CKEDITOR.on('dialogDefinition', function(ev) {
// Take the dialog name and its definition from the event
// data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the "Link" dialog).
if (dialogName == 'link') {
// remove contents
dialogDefinition.removeContents('target');
dialogDefinition.removeContents('upload');
dialogDefinition.removeContents('advanced');
// Get a reference to the "Link Info" tab.
var infoTab = dialogDefinition.getContents('info');
// Remove the "Link Type" combo and the "Browser
// Server" button from the "info" tab.
infoTab.remove('linkType');
infoTab.remove('browse');
}
else if (dialogName == 'table') {
// Get a reference to the default tab.
var infoTab = dialogDefinition.getContents('info');
infoTab.remove('selHeaders');
infoTab.remove('txtHeight');
infoTab.remove('txtCellSpace');
infoTab.remove('txtCellPad');
infoTab.remove('txtCaption');
infoTab.remove('txtSummary');
infoTab.remove('cmbAlign');
}
});
});
Finally the two aspx buttons. The first one works, the second one does not. The second button is located in a dialog with the ckeditor.
THIS ONE WORKS.
<asp:Button id="A2" runat="server" onclick="btnClick_Submit" OnClientClick="return searchNotes();" class="fg-button ui-state-default ui-corner-all" style="float: left; margin-left: 20px; width:auto;" Text="Search"></asp:Button>
THIS ONE DOES NOT
<asp:Button id="btnUpdate" runat="server" onclick="btnClick_Update" onclientclick="return updateNotes();" style="width:auto;" Text="Update" class="fg-button ui-state-default ui-corner-all" />
Both of the onclientclick events call BlockUI return true.

Try populating if it is a postback as well..
if(!Page.IsPostBack || Page.IsPostBack)
{
//Populate a dropdown.
This is where the dropdown is safely populated.
}
Reference... Page.IsPostBack Property

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

getting value of hiddenfield using javascript from listview

Script:
$(document).ready(function() {
//Change these values to style your modal popup
var align = 'center'; //Valid values; left, right, center
var top = 100; //Use an integer (in pixels)
var width = 500; //Use an integer (in pixels)
var padding = 10; //Use an integer (in pixels)
var backgroundColor = '#FFFFFF'; //Use any hex code
var source = 'AttractionDetails.aspx?AttractionID= **HOW_DO_I_GET_THE_VALUE_FROM_HIDDEN_FIELD** '; //Refer to any page on your server, external pages are not valid e.g. http://www.google.co.uk
var borderColor = '#333333'; //Use any hex code
var borderWeight = 4; //Use an integer (in pixels)
var borderRadius = 5; //Use an integer (in pixels)
var fadeOutTime = 300; //Use any integer, 0 = no fade
var disableColor = '#666666'; //Use any hex code
var disableOpacity = 40; //Valid range 0-100
var loadingImage = 'lib/release-0.0.1/loading.gif'; //Use relative path from this page
//This method initialises the modal popup
$(".modal").click(function() {
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
});
//This method hides the popup when the escape key is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
});
LISTVIEW:
<ItemTemplate>
<td id="Td6" runat="server" style="background-color: #FFFFFF; color: #000000; width: 120px;">
<asp:Label ID="AttractionNameLabel" runat="server" Text='<%# Eval("AttractionName") %>' />
<br />
<a class="modal" href="javascript:void(0);"> Modal Pop Up </a>
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("AttractionID") %>' />
</td>
</ItemTemplate>
All i want is to get the HiddenField value of the item being clicked [on clicking on the hyperlink "Modal Pop Up" ] using javascript.
Thanks in advance.

You can do it without using hidden field. Add data attribute and set it with AttractionID. Using hidden field for holding and passing value is not required by this method.
<a class="modal" href="javascript:void(0);" data-AttractionID='<%# Eval("AttractionID") %>'> Modal Pop Up </a>
Get the attractionID assigned to anchor tag
$(".modal").click(function() {
valueofAttractionID = $(this).data('AttractionID');
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
});

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";
}
}