Image flashing on mouse over - c#
I have an image from a map and I have several other images from few regions (which are blue) on the image map. The other images represent the blue regions that should show on mouse over. But I have a problem. When I put the mouse over the regions on the image map, they start flashing. For example, I want to activate the blue region WITHOUT THE FLASHING onmouseover and onmousemove when I hover over the specific region. I'll put a .gif picture(the cursor is not showing) to show what I'm having problem with when i get the mouse cursor over the image and I'll post the code also to see if there's anything missing or has to be changed.
Picture:blue regions flashing onmouseover
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%--<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />--%>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<%--<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%>
</head>
<body id="uiBody" class="regions" dir="ltr">
<form id="form2" runat="server">
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<div class="world_map_container">
<img src="Sliki/maptransparent.gif" usemap="#the_world_map" id="transparent_map" />
<map name="the_world_map" id="the_world_map">
<area shape="poly" coords="167,335,168,321,166,318,161,313,156,308,148,308,146,304,143,302,137,301,136,293,133,283,130,277,127,273,127,270,129,266,133,261,133,253,132,248,128,242,124,240,121,240,118,243,114,248,108,254,100,258,94,261,92,261,91,268,87,274,83,279,81,281,81,286,81,291,81,295,75,298,69,304,67,308,66,316,69,318,79,319,86,319,88,321,91,324,94,326,100,325,102,322,103,317,100,315,95,314,88,312,85,308,87,303,90,300,94,297,98,294,104,293,109,293,113,295,119,303,124,311,127,318,130,327,131,335,132,338,135,336,140,332,144,331,148,331,151,333,155,336,162,336,167,335" href="Default2.aspx" id="area_resen" alt="Resen" />
<area shape="poly" coords="171,45,167,47,161,47,162,50,167,50,167,53,164,55,157,64,161,68,169,88,172,89,175,102,175,105,179,105,180,109,187,116,187,118,202,121,202,124,212,124,216,121,216,116,245,116,253,113,255,110,254,104,253,103,259,103,265,104,269,105,272,103,272,95,274,90,277,87,282,86,285,84,287,78,288,76,280,75,274,74,270,72,265,67,263,63,257,63,254,60,251,57,250,56,247,57,241,56,237,55,234,52,229,49,227,44,227,38,231,35,233,33,231,31,226,29,225,28,225,21,220,20,216,22,213,24,212,26,210,28,207,28,205,26,202,26,200,28,199,31,196,33,192,39,188,43,189,45,189,47,185,50,179,52,175,52,172,50,171,47,171,45" href="Default2.aspx" id="area_skopje" alt="Skopje" />
<area shape="poly" coords="397,47,388,47,383,56,384,61,384,66,382,70,379,71,375,71,375,76,373,82,372,88,372,94,377,96,389,109,408,109,409,98,405,92,409,89,406,80,412,80,421,77,424,74,423,68,429,66,425,63,415,53,398,53,397,47" href="Default2.aspx" id="area_kocani" alt="Kocani" />
</map>
<ul>
<li id="resen" style="">resen</li>
<li id="skopje">skopje</li>
<li id="kocani">kocani</li>
</ul>
</div>
<script type="text/javascript">
$('.world_map_container area').each(function () {
// Assigning an action to the mouseover event
$(this).mouseover(function (e) {
var country_id = $(this).attr('id').replace('area_', '');
$('#' + country_id).css('display', 'block');
});
// Assigning an action to the mouseout event
$(this).mouseout(function (e) {
var country_id = $(this).attr('id').replace('area_', '');
$('#' + country_id).css('display', 'none');
});
});
</script>
<style type="text/css">
div.world_map_container #transparent_map {
position: absolute;
z-index: 20;
width: 530px;
height: 380px;
border: none;
}
div.world_map_container {
margin-right:15px;
width:530px;
height:380px;
position:absolute;
padding-right:0px !important;
}
div.world_map_container ul li {
display: none;
position: absolute;
text-indent: -9999px;
z-index: 30;
}
#resen {
background: url("Sliki/resen.gif") no-repeat scroll 0 0 transparent;
height: 380px;
right: 0;
top: 0px;
width: 530px;
}
#skopje {
background: url("Sliki/skopje.gif") no-repeat scroll 0 0 transparent;
height: 380px;
right: 0;
top: 0px;
width: 530px;
}
#kocani {
background: url("Sliki/kocani.gif") no-repeat scroll 0 0 transparent;
height: 380px;
right: 0;
top: 0px;
width: 530px;
}
</style>
</asp:PlaceHolder>
</form>
</body>
</html>
On your hover images, add the usemap to use the same map. That way they won't trigger a mouseout event when they are displayed.
See this fiddle: http://jsfiddle.net/NPFWm/4/
<img src="https://www.google.com/images/srpr/logo4w.png" usemap="#theMap_map" />
<map id="theMap_map" name="theMap_map">
<area shape="poly" coords="1,1,1,50,50,50,50,1,1,1" id="area1" style="background: #FF0000;" href="#" />
</map>
<img src="https://www.google.com/images/srpr/logo4w.png" id="hover" usemap="#theMap_map" />
Related
Gridview with drag and drop. Get new order of data
I'm going through a sample using drag and drop of a grid view where you can re-order the data. I'm trying to find out once the user has re-ordered the grid view how they like it how can I get the data in the first column in the order that they have changed it to. I've tried adding a bit of code to the button event to get this but it only gets the original order and not that of what the user changed it to.
ASPX Page: -
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script type="text/javascript">
$(function () {
$(".drag_drop_grid").sortable({
items: 'tr:not(tr:first-child)',
cursor: 'crosshair',
connectWith: '.drag_drop_grid',
axis: 'y',
dropOnEmpty: true,
receive: function (e, ui) {
$(this).find("tbody").append(ui.item);
}
});
$("[id*=gvDest] tr:not(tr:first-child)").remove();
});
</script>
<style type="text/css">
.GridSrc td
{
background-color: #A1DCF2;
color: black;
font-size: 10pt;
font-family:Arial;
line-height: 200%;
cursor: pointer;
width:100px
}
.GridSrc th
{
background-color: #3AC0F2;
color: White;
font-family:Arial;
font-size: 10pt;
line-height: 200%;
width:100px;
}
.GridDest td
{
background-color: #eee !important;
color: black;
font-family:Arial;
font-size: 10pt;
line-height: 200%;
cursor: pointer;
width:100px
}
.GridDest th
{
background-color: #6C6C6C !important;
color: White;
font-family:Arial;
font-size: 10pt;
line-height: 200%;
width:100px
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="gvSource" runat="server" CssClass="drag_drop_grid GridSrc" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Item" HeaderText="Item"/>
<asp:BoundField DataField="Price" HeaderText="Price"/>
</Columns>
</asp:GridView>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</form>
</body>
</html>
ASPX.CS Page: -
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
dt.Rows.Add("Shirt", 450);
dt.Rows.Add("Jeans", 3200);
dt.Rows.Add("Trousers", 1900);
dt.Rows.Add("Tie", 185);
dt.Rows.Add("Cap", 100);
dt.Rows.Add("Hat", 120);
dt.Rows.Add("Scarf", 290);
dt.Rows.Add("Belt", 150);
gvSource.UseAccessibleHeader = true;
gvSource.DataSource = dt;
gvSource.DataBind();
dt.Rows.Clear();
dt.Rows.Add();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
foreach (GridViewRow row in gvSource.Rows)
{
Response.Write(row.Cells[0].Text.ToString());
}
}
}
You can use jquery 'tableDnD' plugin along with asp.net listview OR repeater.
Like this:
ASP.NET
<asp:Repeater>
<ItemTemplate>
<tr id='<%# Eval("ItemID") %>'>
<!-- Assign the unique key as the id of the row. -->
...
</tr>
</ItemTemplate>
</asp:Repeater>
JQuery
$(document).ready(function () {
$("#tbl").tableDnD({
onDrop: function (table, row) {
var RowIDs = '';
$('#tbl tr').each(function () {
RowIDs += $(this).attr('id') + ",";
});
$('#<%= hdnIDs.ClientID %>').val(RowIDs);
// Save the resulting sequence in a hidden field.
$('#<%= btnSaveOrder.ClientID %>').click();
// Postback the page and process the new sequence on server side.
},
onDragClass: "myDragClass",
});
});
JavaScript not returning value to original window (ASP.NET 4.5 in Visual Studio 2012)
I have an asp.net 4.5 app using this as the base. I'm trying to find the bug in my code as it doesn't return the value from my modalpopup back to my 'TextBox1' on my default page.
I have a default.aspx page with the following:
<asp:TextBox ID="TextBox1" runat="server" />
<asp:Button ID="btnSelectFolder" runat="server" Text="Select Folder" OnClientClick="showDirectory();"/>
The default.aspx references my Site.Master page with the following JavaScript
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
<script type="text/javascript">
function showDirectory() {
document.all.TextBox1.value = window.showModalDialog("browseDirectory.aspx",
'jain',
"dialogHeight: 560px; dialogWidth:360px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: No;");
return false;
}
</script>
</head>
On my modalPopup (BrowseDirectory.aspx) I have the following JavaScript (SelectAndClose() function) that should return the contents of the _browseTextBox to my original Default.aspx page , but it returns a null error ( I included the entire header section):
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="BrowseDirectory.aspx.cs" Inherits="DirectoryBrowsin.BrowseDirectory" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Borwse Directory</title>
<style>
.errorMsg{FONT-SIZE: 8.25pt; COLOR: red; FONT-FAMILY: Verdana, Arial; TEXT-DECORATION: none }
.hilite { BACKGROUND-COLOR: #dfe5ff }
.nohilite { BACKGROUND-COLOR: #ffffff }
.text { FONT-SIZE: 8.25pt; COLOR: black; FONT-FAMILY: Verdana, Arial; TEXT-DECORATION: none }
.tableOutlineWt { BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #666666 1px solid; MARGIN-TOP: 0px; OVERFLOW: auto; BORDER-LEFT: #333333 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #cccccc 1px solid }
</style>
<script type="text/javascript">
function SelectAndClose()
{
txtValue = document.getElementById('_browseTextBox');
window.returnValue = txtValue.value;
window.close();
return false;
}
</script>
</head>
window.shoModalDialog is not implemented the same in all browsers. It first appeared in one of the earlier Internet Explorer browsers. Take a look at this SO answer on this topic: https://stackoverflow.com/a/10234548/2488939
Display loading progress image when Page Loads (not submit event)
I need to display loading GIF image while page is loading or during postbacks using jQuery and JavaScript for long running tasks or processes which require significant amount of time to execute.
I tried this solution, I don't have error but the loading not show.
My code below.
I would greatly appreciate any help you can give me in working this problem.
.cs
protected void Page_Load(object sender, EventArgs e)
{
string script = "$(document).ready(function ());";
ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
System.Threading.Thread.Sleep(5000);
ExportToXLSFunction();
}
.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="getData.aspx.cs" Inherits="getData"
EnableEventValidation="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="/jquery/js/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
ShowProgress();
</script>
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="/images/wait01.gif" alt="" />
</div>
</form>
</body>
</html>
use ajaxStart() and ajaxStop()
/**on ajaxStart when process start it comes in this event**/
$( document ).ajaxStart(function() {
$( ".loading" ).show();
});
/**on ajaxStop when process stop it comes in this event**/
$( document ).ajaxStop(function() {
$( ".loading" ).hide();
});
Have a look at the fiddler
http://jsfiddle.net/VpDUG/4952/
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://sampsonresume.com/labs/pIkfp.gif')
50% 50%
no-repeat;
}
here is the nice explanation..you will love it.
How can I create a "Please Wait, Loading..." animation using jQuery?
I tried it, its working super.
Thanks to #Jonathan Sampson
Some tweak for basic submit or ASP.NET post back.
function doModal(callback) {
jQuery("body").addClass("loading");
window.setTimeout(callback, 100);
}
jQuery(document).ready(function () {
// Override __doPostBack()
if (typeof(__doPostBack) != "undefined") {
var dp = __doPostBack;
__doPostBack = function () {
var args = arguments;
doModal(function () {
dp.apply(dp, args);
});
};
}
jQuery('input[type="submit"]').click(function (ev) {
doModal(function () { });
});
});
The callback is not really needed, sorry :)
How I get a div opacity effect if I have a mouseover
I have a ASP.NET Application and I want a effect with divs. If I make a mouseover about a div a Want that this opacity is 0.9 and if I make a mousedown I want a opacity of 0.6. I use two divs. The one div is in the other div and in this I use Controls.
if My Mouse is not in the div:
If My Mouse is in the div:
My Code:
<asp:Content ID="Content2" ContentPlaceHolderID="lw_content" runat="server">
<div class="createuser">
<div class="create_box">
<div class="newUser">
Benutzer Anlegen <br/>
<br/>
<table>
...
</table>
<br/>
<asp:Button ID="btnAnlegen" runat="server" Text="Benutzer anlegen"
onclick="btnAnlegen_Click" />
</div>
</div>
</div>
</asp:Content>
My CSS:
div.createuser {
background-image: url(../images/bg_createuser.jpg);
filter:alpha(opacity=50);
width: 1000px;
height: 450px;
z-index: n;
}
div.create_box {
width:400px;
height:350px;
margin:30px 100px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.newUser {
margin:30px 40px;
font-weight:bold;
color:#000000;
font-size: small;opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
I have in my div.createuser a image as Background with opacity 0.7
Try this, hope it helps
div.newUser {
filter:alpha(opacity=50);
opacity: 0.5;
}
div.newUser:hover {
filter:alpha(opacity=90);
opacity: 0.5;
}
You can do it by using the opacity in background rgba color. it works at all browsers: i used black background to notice the opacity in your example. Also use this meta tag so it works at IE
<meta http-equiv="X-UA-Compatible" content="IE=9" />
div.newUser{
background:rgba(0,0,0,0.5);
}
div.newUser:hover{
background:rgba(0,0,0,0.9);
}
or you can do it with opacity like that:
div.newUser{
opacity: 0.5;
}
div.newUser:hover{
opacity:0.9;
}
image in div via codebehind
I'm trying to achieve setting my image inside my div id =test this has became extremely problematic:
cn.Open();
using (OdbcCommand cmd = new OdbcCommand("SELECT Wallpostings FROM WallPosting WHERE UserID=" + userId + " ORDER BY idWallPosting DESC", cn))
{
using (OdbcDataReader reader = cmd.ExecuteReader())
{
var divHtml = new System.Text.StringBuilder();
while (reader.Read())
{
Image img = new Image();
img.ImageUrl = "~/userdata/2/uploadedimage/batman-for-facebook.jpg";
divHtml.Append("<div id=test>");
divHtml.Append(img + String.Format("{0}", reader.GetString(0)));
// how can I append an img inside my div id=test?
// the image must stay at the start of the div id=test + the contents(text) from my database (in that order)
divHtml.Append("</div>");
}
test1.InnerHtml = divHtml.ToString();
}
}
}
}
css:
* { padding: 0; margin: 0; outline: 0; }
body {
font-size: 12px;
line-height: 1.2;
font-family: Arial, "Trebuchet MS", sans-serif;
color: #a0a0a0;
background: url(images/bg.gif) repeat 0 0;
text-align: left;
}
div#test1 {
}
div#test
{
width:90%;
z-index:1;
padding:27.5px;
border-top: thin solid #736F6E;
border-bottom: thin solid #736F6E;
color:#ffffff;
margin:0 auto;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
}
Asp html:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="css/style.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<p>
<asp:TextBox ID="TextBox1" name="TextBox1" runat="server" Rows="3"
Height="47px" Width="638px"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Post Message" Width="98px"
onclick="Button1_Click" />
</p>
<p>
</p>
<div id="test1" runat="server" />
// contents from my code go inside this div as div id=test
</asp:Content>
Firebug output:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1"><div id="test">System.Web.UI.WebControls.Imageweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div><div id="test">System.Web.UI.WebControls.Imagehello</div><div id="test">System.Web.UI.WebControls.Imagestill trying</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imageback to front on comments</div><div id="test">System.Web.UI.WebControls.Imagelets try this again</div><div id="test">System.Web.UI.WebControls.Imagehair marry went up the hill</div><div id="test">System.Web.UI.WebControls.Imagewedfwedwe</div><div id="test">System.Web.UI.WebControls.Imagewedfwedwe</div><div id="test">System.Web.UI.WebControls.Imagekjgfkjh</div><div id="test">System.Web.UI.WebControls.Imageanother comment</div><div id="test">System.Web.UI.WebControls.Imagebla bla hope this works</div></div>
I know the reason why my code outputs the actual text of the web ui controls, I have had in another post code that actually gets the image up but it adds the image onto the "END" of the test div so rather than it look like this:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1">
<div id="test"><img src=blabla></img> the text goes after the image </div>
It looks like this:
<div id="ctl00_ContentPlaceHolder1_ContentPlaceHolder2_test1">
<div id="test"> text comes before image </div>
<img src=blabla></img>
<div id="test">hello</div>
<img src=blabla></img>
Which isn't what I want, the code I've added although I know the reasons why it outputs the web controls text is just a demonstration of "how" I'm trying to get it to work.
divTest.Append on img THEN text;
Of course I cant append I would have to use controls.add but I still couldn't get it to work.
Previous post is here so you can see some images and some ideas:
My code below gives me a problem, the image comes after the text
Image is a web control. You can't stick it in a StringBuilder.