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>
Related
i'm working with jquery and the animate function to do a zoom button to a div, with chrome works fine but with ie8 works to a 50 % because i do a click and does the zoom, i do another click and comes back to the original size, do another click and does the zoom again.
My div guide contains others div's so basically what i have to do is a zoom like a pdf zoom, i.e. the adobe reader zoom to a pdf.
Here is the aspx code of the buttons:
<asp:ImageButton ID="ImageButton2" ImageUrl="~/Images/zoom_in.png" OnClientClick="zoom(1); return false;" runat="server" Height="28" />
<asp:ImageButton ID="ImageButton3" ImageUrl="~/Images/zoom_out.png" OnClientClick="zoom(2); return false;" runat="server" Height="28" />
<asp:ImageButton ID="ImageButton4" ImageUrl="~/Images/zoom_reset.png" OnClientClick="zoom(0); return false;" runat="server" Height="28" />
This is the jquery code:
function zoom(type) {
_targetsize = (type == 1) ? _targetsize * 1.2 : (type == 2) ? _targetsize * 0.8 : 1;
$("#divGuide").animate({ zoom: _targetsize });
}
Thanks.
try to define the _targetsize variable outside of the function, i.e.
var _targetsize = 1;
function zoom(type) {
I have finally solved the problem with the version of jquery-1.7.2.min.js and the following line to the load of the javascript:
jQuery.fx.off = true; //Eliminating the Jquery effects it does everything all right on IE8
I need the browser to scroll my ASP.NET page to the top when the user
clicks on a server-side link or button at the bottom of the page.
<div id="box" style=" position: fixed; bottom:5px;">
<a href="#top" >Back to up<img height="40" src="../images/btnup.png" /></a>
I use this code for it:
$(document).ready(function () {
$('a[href=#top]').click(function () {
$('html, body').animate({ scrollTop: 0 }, 'slow');
return false;
});
});
I want to show this button when the scroll position is at the bottom of the page and don't want to show this when the scroll position is at the top of the page.
How to view this button when the scroll position is at the bottom of the page?
I use this code. it is useful for me.
<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>Top</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>
Add a scroll listener and manage your button visibility by checking if the main container (could be body) scrollTop is max value:
var $elem = $('#mainContainer');
var $button = $('#top');
$(window).scroll(function(){
if ($elem[0].scrollHeight - $elem.scrollTop() == $elem.outerHeight()) {
// We're at the bottom.
$button .show();
}
else
$button .hide();
});
More example : http://www.yelotofu.com/2008/10/jquery-how-to-tell-if-youre-scroll-to-bottom/
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);
});
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.
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";
}
}