Show another image onmouseover in javascript - c#
I am having a problem with my javascript in Visual Studio. What I want to do is when i hover over the region of the country, like on this site www.pazar3.mk, a new image from that region should appear (which is transparent) with new color. I am going to post the code that I have. It doesn't return errors, but it doesn't work either. It just takes me to another .aspx site when I click on the region and it doesn't show the other image with the new color. Here's the code that I have, so please, can you tell me what I'm missing or should I change something with my code?
<%# 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>
<style type="text/css">
.auto-style1 {
width: 530px;
height: 380px;
z-index: 1;
left: 10px;
top: 399px;
position: absolute;
}
.auto-style2 {
width: 530px;
height: 380px;
}
</style>
<script type="text/javascript">
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i = 0; i < changeImages.arguments.length; i += 2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i + 1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
img1 = newImage("Sliki/1.gif");
img2 = newImage("Sliki/2.gif");
img12 = newImage("Sliki/12.gif");
img23 = newImage("Sliki/23.gif");
preloadFlag = true;
}
}
</script>
</head>
<body onload="preloadImages();" >
<form id="form1" runat="server">
<div style="height: 386px; width: 906px">
<img src="Sliki/map (1).jpg" width="530" height="380" id="map"
usemap="#m_map" alt="" /><map name="m_map" id="m_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" title="Resen" alt="Resen" onmouseover="changeImages('map', 'Sliki/23.gif'); return true;"
onmouseout="changeImages('map', 'Sliki/map(1).jpg'); return true;" onmousedown="changeImages('map', 'Sliki/23.gif'); return true;"
onmouseup="changeImages('map', 'Sliki/23.gif'); return true;" />
</map>
</div>
</form>
Related
How to solve InnerText error 'Cannot get inner content of because the contents are not literal'
In my project there is a print button . after clicking that button I want to open a popup but it's not loading
<table class="inputForm">
<tfoot>
<tr>
<td align="right">
<asp:Button ID="btnPrint" OnClick="btnPrint_Click" Text="Printuiuiuiui" CssClass="button" runat="server" Visible="true" />
</td>
</tr>
</tfoot>
</table>
Page.ClientScript.RegisterStartupScript(typeof(Page), "s1", "<script FOR=window EVENT=onload>openViewer('" + (int)ABCDEF.enReportName.PortfolioPrint + "');</script>");
Now when I debugged Page.ClientScript throws error in Header
Header = {InnerText = {"Cannot get inner content of ctl00 because the contents are not literal."}}
openViewer is a function that shows popup
function openViewer(reportName) {
sPath = "/ADDCD/Popups/ifggfjfj.aspx?Viewer.aspx?ReportName=" + reportName;
if (navigator.userAgent.indexOf("Chrome") != -1) {
return window.open(sPath, self, "dialogHeight: 374px; dialogWidth: 430px; status: no; resizable: no; center: yes;");
}
else if (navigator.userAgent.indexOf("Firefox") != -1) {
return window.open(sPath, self, "dialogHeight: 374px; dialogWidth: 430px; status: no; resizable: no; center: yes;");
}
else if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) { //IF IE > 10
return window.showModalDialog(sPath, self, "dialogHeight: 374px; dialogWidth: 430px; status: no; resizable: no; center: yes;");
}
}
ifggfjfj.aspx
<%# Page Language="C#" MasterPageFile="~/Page.master" AutoEventWireup="true" Inherits="Popups_i" CodeBehind="ifggfjfj.aspx.cs" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Literal id="lDoctype" runat="server"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></asp:Literal>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>ABCDEF</title>
<script language="javascript" type="text/javascript" src="/apps/xyzdfg/Script.js"></script>
</head>
<body>
<div style="position:absolute;width:100%;height:100%;overflow:hidden;">
<iframe frameborder="0" src="<% Response.Write(Server.UrlDecode(Request.QueryString.ToString())); %>" style="width: 100%; height: 100%; ">
</iframe>
</div>
</body>
</html>
</asp:Content>
Viewer.aspx
<%# Register Assembly="XSAWERTYU" TagPrefix="dica" Namespace="ashgsb.fjgdjgj.kfhgkhg.xcvbmvbmx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Report</title>
<link rel="stylesheet" type="text/css" href="../shfhf/dfdfdfdf/css/default.css"/>
<script type="text/javascript">
function Init()
{
theForm.document.all.ctl00_ContentPlaceHolder1_viewer.style.width = "100%";
theForm.document.all.ctl00_ContentPlaceHolder1_viewer.style.height = "100%";
}
</script>
</head>
<body>Report content is written in this area </body>
</html>
</asp:Content>
Now I closed tag in ifggfjfj.aspx but it's not working. So what am I doing wrong? Anybody can tell me? I don't understand this error at all. Please help
EDIT:
Now I get an error like error CS0103: The name or method openViewer does not exist in the current context in this line
Page.ClientScript.RegisterStartupScript(typeof(Page), "s1", "<script FOR=window EVENT=onload>openViewer('" + (int)ABCDEF.enReportName.PortfolioPrint + "');</script>");
Saving Clipboard PrintScreen to Image File in C#
I am trying to use Visual Studio C# to printscreen, then save the screen capture to a file.
Currently, I am having problems reading from the clipboard.
I have tried using both of the following lines to save a screen capture to the clipboard:
SendKeys.SendWait("+{PRTSC}");
SendKeys.SendWait("{PRTSC}");
However, when I try to save the image using the following lines, I get a Null Reference Exception.
How to do resolve this?
My code below
markup code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>Welcome to ASP.NET!
</h2>
1. Copy image data into clipboard or press Print Screen
<br />
2. Press Ctrl+V (page/iframe must be focused):
<br />
<br />
<canvas style="border: 1px solid grey;" id="cc" width="200" height="200">
<script type="text/javascript">
var canvas = document.getElementById("cc");
var ctx = canvas.getContext("2d");
//=== Clipboard ===============================
window.addEventListener("paste", pasteHandler); //chrome
//handler
function pasteHandler(e) {
if (e.clipboardData == false) return false; //empty
var items = e.clipboardData.items;
if (items == undefined) return false;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") == -1) continue; //not image
var blob = items[i].getAsFile();
var URLObj = window.URL || window.webkitURL;
var source = URLObj.createObjectURL(blob);
paste_createImage(source);
}
}
//draw pasted object
function paste_createImage(source) {
var pastedImage = new Image();
pastedImage.onload = function () {
ctx.drawImage(pastedImage, 0, 0);
}
pastedImage.src = source;
}
</script>
</canvas>
<br />
</div>
<div>
<asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="Go" />
</div>
</form>
</body>
</html>
code-behind
protected void btn_Click(object sender, EventArgs e)
{
var path = new[] { #"C:\Users\A\source\repos\CopyPaste\public",
#"C:\Users\A\source\repos\CopyPaste\public" }.First(p => Directory.Exists(p));
var prefix = "css-social-media-icon-list";
var fileName = Enumerable.Range(1, 100)
.Select(n => Path.Combine(path, $"{prefix}-{n}.png"))
.First(p => !File.Exists(p));
Clipboard.GetImage().Save(fileName, ImageFormat.Png);
Clipboard.SetText($"})");
}
I hope this helping... following this example
How to solve BotChat.App Uncaught ReferenceError?
I m trying to use some code which i find in Embedding a bot on a website .
I know it have been some updates, my question is if BotChat.App is avaible to use.
Because i use the BotChat.App and gave me this error Uncaught ReferenceError: BotChat is not defined.
I try to change it to window.WebChat.renderWebChat and it works but gave me the error in this line document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
#mychat {
margin: 10px;
position: fixed;
bottom: 30px;
right: 10px;
z-index: 1000000;
}
</style>
</head>
<body>
<div id="container">
<h1>Hello World</h1>
<!--other page contents-->
<img id="mychat" src="https://i.stack.imgur.com/RD7i4.png" style="float:right" />
</div>
</body>
</html>
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
BotChat.App({
directLine: { secret: 'myAppSecret' },
}, document.getElementById("botDiv"));
document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#chatbotheader')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = "0px";
document.getElementById("mychat").style.display = "block";
};
});
document.getElementById("mychat").addEventListener("click", function (e) {
document.getElementById("botDiv").style.height = '500px';
e.target.style.display = "none";
})
}());
</script>
Uncaught ReferenceError: BotChat is not defined html:31
As the error suggests this is due to the fact that , though you utilize BotChat.App, you haven't got a reference to BotChat. Try importing <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script> within the header section.
Double-clicking on a form in Visual Studio 2013 view inserts a script in my html page instead of inserting an event handler in the c# page
Please I need help. Below is what is injected in my code when I double click my submit button on the design page.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Tutorial.WebForm1" %>
<!DOCTYPE html>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 115%;
height: 415px;
}
.auto-style2 {
width: 541px;
text-align: right;
}
.auto-style3 {
height: 73px;
}
.auto-style4 {
height: 44px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table class="auto-style1">
How to fire JavaScript Event after UpdateProgress is disposed on ASP.NET c#?
I have a webform where I have a javascript function that evaluates whether or not it should display a div...
here's the function...
function viewCalendars()
{
if (document.getElementById('ddlDates').value == '5')
{
document.getElementById('divSpecificDates').style.display = 'inline';
}
else
{
document.getElementById('divSpecificDates').style.display = 'none';
}
return;
}
I also added this to my form
<body onload="viewCalendars();">
//Everything
</body>
So even if there was a postback, it will show the div if the dropdownlist has an specific value selected.
However, I recently added both an updatepanel and an updateprogress... and now I think that the will not work anymore since a postback will not occur.
Here's what I have now...
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Consumptions.aspx.cs" Inherits="Station.Consumptions" %>
<%# Register TagPrefix="ew" Namespace="eWorld.UI" Assembly="eWorld.UI, Version=1.9.0.0, Culture=neutral, PublicKeyToken=24d65337282035f2" %>
<!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>
Lista De Consumos
</title>
<link href="css/Style.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
#blur
{
width: 100%;
background-color: black;
moz-opacity: 0.5;
khtml-opacity: .5;
opacity: .5;
filter: alpha(opacity=50);
z-index: 120;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#progress
{
border: black 1px solid;
padding: 5px;
z-index: 100;
width: 250px;
position: absolute;
background-color: #fff;
-moz-opacity: 0.75;
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
text-align: center;
}
</style>
<script type="text/javascript">
function viewCalendars()
{
if (document.getElementById('ddlDates').value == '5')
{
document.getElementById('divSpecificDates').style.display = 'inline';
}
else
{
document.getElementById('divSpecificDates').style.display = 'none';
}
return;
}
</script>
</head>
<body onload="viewCalendars();">
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div id="blur">
</div>
<div id="progress">
<asp:Image ID="imgLoading" GenerateEmptyAlternateText="true" runat="server" ImageUrl="~/images/loading.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlDates" CssClass="tbox" runat="server">
</asp:DropDownList>
<div runat="server" id="divSpecificDates" style="display: none; width: 100%; z-index: 1000;">
</div>
<asp:Button Text="Filtrar" CssClass="btn" runat="server" ID="btnFilter" onclick="btnFilter_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnFilter" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
So, I noticed that after you click the btnFilter button, it's function will be triggered, while the updateprogress is visible, but after it disappears (and the btnFilter function is completed) divSpecificDates is not visible when it should be visible. I suppose that I have to call viewCalendars() after everything is done...
How and where do I have to call for this function??
UPDATE:
I just got rid of the updateprogress... and it's still not working, so I guess the problem is not there... probably it's on the updatepanel
When the UpdatePanel is updated, the DOM is change, and you need to re-run the initialization's that you do when you load a page. This are done with javascript function that asp.net includes when you add the UpdatePanel. So remove the onload from the body and use the pageLoad.
So remove the onload from this line
<body onload="viewCalendars();">
and add this script
<script>
function pageLoad() {
viewCalendars();
}
</script>
Similar how to keep javascripts after UpdatePanel partial postback
Reference : Ajax Client Side Life Cycle Events