I am using slayeroffice's custom alert box, slayeroffice(period)com/code/custom_alert/. (Can't post more than two links) On my browser it shows up like this. The alert box is the blue one in the middle of the screen.
http://i.stack.imgur.com/u1TEz.png
On my local it shows up like this, I highlighted the alert box. I wish i could image link this.
It works on the same version version of browser but one of them is on local.
http://i.stack.imgur.com/0xehV.png
What am I doing wrong?
Here's my code integrated with slayeroffice's code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Test1.aspx.cs" Inherits="Test1" %>
<%# Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!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>Untitled Page</title>
</head>
<body>
<script type="text/javascript">
function showPopUp(){
setTimeout(function() {alert("Warning");}, 5000);
}
function delayer(){
showPopUp();
}
// constants to define the title of the alert and button text.
var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";
// over-ride the alert method only if this a newer browser.
// Older browser will see standard alerts
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt); //overrides alert method
}
}
function createCustomAlert(txt) {
// shortcut reference to the document object
d = document;
// if the modalContainer object already exists in the DOM, bail out.
if(d.getElementById("modalContainer")) return;
// create the modalContainer div as a child of the BODY element
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
// make sure its as tall as it needs to be to overlay all the content on the page
mObj.style.height = document.documentElement.scrollHeight + "px";
// create the DIV that will be the alert
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
if(false) alertObj.style.top = document.documentElement.scrollTop + "px";
// center the alert box
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
// create an H1 element as the title bar
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
// create a paragraph element to contain the txt argument
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;
// create an anchor element to use as the confirmation button.
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
// set up the onclick event to remove the alert when the anchor is clicked
btn.onclick = function() { removeCustomAlert();return false; }
}
// removes the custom alert from the DOM
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
</script>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="delayer();return false;" />
</form>
</body>
</html>
You are missing the styles:
<style type="text/css">
#modalContainer {
background-color:transparent;
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:10000;
background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}
#alertBox {
position:relative;
width:300px;
min-height:100px;
margin-top:50px;
border:2px solid #000;
background-color:#F2F5F6;
background-image:url(alert.png);
background-repeat:no-repeat;
background-position:20px 30px;
}
#modalContainer > #alertBox {
position:fixed;
}
#alertBox h1 {
margin:0;
font:bold 0.9em verdana,arial;
background-color:#78919B;
color:#FFF;
border-bottom:1px solid #000;
padding:2px 0 2px 5px;
}
#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
}
#alertBox #closeBtn {
display:block;
position:relative;
margin:5px auto;
padding:3px;
border:2px solid #000;
width:70px;
font:0.7em verdana,arial;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#78919B;
text-decoration:none;
}
</style>
Related
I have the following HTML code that is being displayed in a WebBrowser control:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Welcome</title>
<style type="text/css">
/*<![CDATA[*/
body {
font: 8pt Verdana;
background: ThreeDFace;
}
#appname {
line-height: 1;
}
#appname h1 {
margin: 0;
font: bold 10pt Verdana;
}
#appname p {
margin: 0;
}
#actions_list {
list-style-type: none;
padding: 0;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var ACTION_NEWPROJECT = 0x0001;
var ACTION_NEWFILE = 0x0002;
var ACTION_OPENPROJECT = 0x0003;
var ACTION_OPENFILE = 0x0004;
//]]>
</script>
</head>
<body>
<div id="appname">
<h1>Application</h1>
<p>Slogan</p>
</div>
<div id="actions">
<ul id="actions_list">
<li>New project</li>
<li>New file</li>
<li>Open project</li>
<li>Open file</li>
</ul>
</div>
<div id="recentfiles">
<p>Recent files:</p>
<ul id="recentfiles_list"></ul>
</div>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
var recentFiles = window.external.GetRecentFiles();
var recentFilesDOMContainer = document.getElementById("recentfiles_list");
for (var i = 0; i < recentFiles.length; i++) {
var index = 0+i;
var fileDOMParent = window.document.createElement("li");
var fileDOMElement = window.document.createElement("a");
fileDOMElement.href = "#";
fileDOMElement.onclick = function() {
window.external.OpenRecentFile(index);
return false;
};
fileDOMElement.innerText = recentFiles[i];
fileDOMParent.appendChild(fileDOMElement);
recentFilesDOMContainer.appendChild(fileDOMParent);
}
};
//]]>
</script>
</body>
</html>
To communicate with the application I am using the WebBrowser.ObjectForScripting property so I can access a class with functions via window.external. That is also working perfectly.
But when I try to open the page below I get the following error:
Script Error
Line: 61
Char: 25
Error: Function expected
Code 0
Why is this happening? It seems to occur at the for loop.
the only thing I can think of is that recentFiles does not have an array in it. Did you try opening the developer console and typing in recentFiles to see what it contains? :)
I am trying to print one gridview . For that I gave a button and on button click I call javascript for printing tha grid.
function doPrint() {
var prtContent = document.getElementById('<%= grdHistoricalData.ClientID %>');
prtContent.border = 0; //set no border here
var WinPrint = window.open('', '', 'left=50,top=100,border=1px,width=1000,textAlign=center,height=1000,toolbar=0,scrollbars=1,status=0,resizable=1');
WinPrint.document.write(prtContent.outerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
This code is working fine but only thing is that print preview of gridview data is displaying left align.Normally Girdview Data is showing center align but when we print data shows in left align.
Gridview normal appearance
Print Preview of Gridview
Please help to do center align in print preview of Gridview.
There are several solutions I use in different circumstances.
1) external file. Load a small file to a iframe and call for data from parent.
<!--print.html -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Printer version</title>
<script type="text/javascript">
window.onload = function () {
var a = this.parent.getContent();
document.body.innerHTML = a;
}
function printMe() {
window.print();
}
</script>
<link href="/Styles/print.css" media="print" rel="stylesheet" />
</head>
<body>
</body>
</html>
Parent document.
<div id="divPrint" style="display:none;">
<div class="popup">
<div style="overflow:hidden;">Printer Version
<div style="float:right;">
<input type="button" ID="btnPrnClose" value="X" onclick="return closePrint()" />
</div>
</div>
<iframe id="frPrint" style="width:100%;"></iframe>
</div>
</div>
</div>
<script type="text/javascript">
function getContent() {
return '<div>' +
'<div class="right no-print" onclick="printMe();" style="cursor: pointer;" title="Print"> \
<img alt="Print" src="/images/printer.png" /></div>' + document.getElementById('gvOuterContainer').innerHTML+ '</div>';
}
function closePrint() {
document.getElementById('divPrint').style.display = 'none';
}
function PrintMessage() {
document.getElementById('divPrint').style.display = '';
document.getElementById('frPrint').src = "print.html?a=" + Math.random();//force no-cache
return false;
}
</script>
2) Print from the page.
<style type="text/css" media="print">
*
{
border: none!important;
}
.noprint,.popup
{
display: none!important;
}
#scrollContainer
{
width: auto!important;
}
.pop-show
{
display: table!important;
left: 0;
margin-left: 0;
top: 0;
width: 100%!important;
z-index: 100;
}
/* and so on */
</style>
Details may differ.
Finally got answer , I need to set gridview property that resolve this issue
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
I am intending to show a Div with loading image during page post-backs to inform the user about a runing operation. I am using a simple javascript function that shows the div, when I call this JavaScript from an html input button (without postback), the div is appearing normally. But when I use it with a post-back button, (by setting its OnClientClick property), the div is appearing, but without the image unloaded (showing as a box with unloaded image). I am not able to figure where the problem is, I even tried adding the image as a hidden html control so that it is preloaded before the post-back, but with no prevail. Here is my aspx code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function PleaseWait(message) {
message = message ? message : PleaseWaitDefaultMessage;
var dsoctop = document.all ? window.document.body.scrollTop : window.pageYOffset;
var el = document.getElementById("PleaseWaitDiv");
el.style.top = (dsoctop + 100) + "px";
el.style.left = "0px";
el.innerHTML = "<div style='background-color:white;border: solid 0px black; width:100%;'><img src='" + WebSiteBaseURL + "Images/bigrotation2.gif' /><h3>" + message + "</h3></div>";
el.style.display = "";
}
</script>
<asp:Literal ID="InitLiteral" runat="server" EnableViewState="false"><script>var PleaseWaitDefaultMessage = "{0}"; var WebSiteBaseURL = "{1}"; </script>
</asp:Literal>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="PleaseWaitDiv" style="width: 100%; position: absolute; top: 0px; display: none;
text-align: center; z-index: 2; max-width: 1024px; min-width: 600px; height: 260px;
overflow: hidden; background: #fff; margin: 0 auto; left: 0; right: 0;">
</div>
<asp:Button ID="btnTestPleaseWait" runat="server" OnClientClick="PleaseWait();"
Text="Test Please wait with postback" onclick="btnTestPleaseWait_Click"
/>
<input type="button" onclick="PleaseWait();" value="Test Please wait no postback" />
</div>
</form>
</body>
</html>
and here is my code behind:
protected void Page_Load(object sender, EventArgs e)
{
InitLiteral.Text = string.Format(InitLiteral.Text, "Please Wait.....", Page.ResolveClientUrl("~/"));
}
protected void btnTestPleaseWait_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
I had same problem. I solved it by loading same image in another img tag with style="dispaly:none" attribute. (Don't do visible="false")
Img tag with display:none forces browser to load image when page is loaded.
I think the problem occurs because POST request gets sent before loading div comes into existence, therefore the GET request for IMG is sent immediately AFTER POST request is sent, and because server is busy processing POST request it takes time to respond because of which browser fails to display the image.
Hope this helps!
I've an aspx page and that page has a table like below
<table id="tbl1" runat="server">
<tr>
<td>
Hello world
</td>
</tr>
</table>
Now I want to get the position of the table (x,y coordinates) from code behind (C#).
Is there any way to get it?
Try this
ASPX:
<%# 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 runat="server">
<title>Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function getPosition(elmID) {
var elmPosition = $("#"+elmID).position();
$("#<%= hdnPosition.ClientID%>").val(elmPosition.left + "," + elmPosition.top);
}
$(document).ready(function () {
$("#<%= btnGetPosition.ClientID %>").click(function () {
getPosition("tbl1");
});
});
</script>
</head>
<body>
<form id="frmMain" runat="server">
<table id="tbl1" runat="server">
<tr>
<td>
Hello world
</td>
</tr>
</table>
<asp:HiddenField ID="hdnPosition" runat="server" />
<asp:Button ID="btnGetPosition" runat="server" Text="Get position"
onclick="btnGetPosition_Click"/>
</form>
</body>
</html>
Codebehind:
protected void btnGetPosition_Click(object sender, EventArgs e)
{
string position = hdnPosition.Value;
}
You can achieve this with many ways
add a placeholder and put your table at runtime:-
<asp:placeholder id="PlaceHolder1" runat="server" xmlns:asp="#unknown">
</asp:placeholder>
set CSS at runtime
style1
{
position:absolute;
left:100px; //Example
top:150px; //Example
}
in CS code, use
Table.CssClass = "style1";
You can use Control.Style Property to set style of a control:
Table tbl = new Table();
tbl.Style[HtmlTextWriterStyle.Position] = "Absolute";
tbl.Style[HtmlTextWriterStyle.Top] = "10px";
If you want it in complete JavaScript. For example:
<!DOCTYPE html>
<head>
<title>Overlapping tables</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
table.first
{
position: absolute;
margin: 0;
padding: 0;
color: #000000;
background-color: #ff0000;
text-align: center;
}
table.second
{
margin: 0;
padding: 0;
position: relative;
text-align: center;
color: #00ff00;
background-color: transparent;
}
</style>
<script type="text/javascript"><!--
onload = setPos;
function setPos ()
{
var table_1 = new namedTable ('first_table');
var table_2 = new namedTable ('second_table');
table_2.style.top = table_1.style.top - 1;
table_2.style.left = table_1.style.left - 1;
}
function namedTable(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
//--></script>
</head>
<body>
<table class="first" id="first_table">
<tr>
<td>
<h1>TABLE</h1>
</td>
</tr>
</table>
<table class="second" id="second_table">
<tr>
<td>
<h1>TABLE</h1>
</td>
</tr>
</table>
</body>
</html>
Notes:
1) The document still validates (both CSS and HTML) at w3.org.
2) It is tested in Mozilla and Internet Explorer.
3) By force of habit I use the doc-type xhtml1-strict.dtd, but you should
not use this doctype when publishing for Mozilla. Use HTML
transitional instead - or simply put in no header (which will let the
browsers run in Quirk mode, and be more lenient towards scripting
errors).
4)
If you further want to study this topic, here is a link to the most
precise and lightweight Javascript Positioning techniques I know of:
http://www.quirksmode.org/
Good luck!
If you make a WinForms app and add a WebBrowser control and navigate to this page:
http://www.llrx.com/features/deepweb2010.htm
The application will stop responding. IE, Chrome and Mozilla won't. Any idea of "what am I doing wrong"?
The lines of CSS below are freaking it out:
/* MSIE PC */
#logo a { background-image: expression(this.runtimeStyle.backgroundImage = "none", this.innerHTML = '<img src="http://www.llrx.com/themes/llrx/images/logo.gif" border="0" alt="' + this.innerHTML + '">'); }
#tagline a { background-image: expression(this.runtimeStyle.backgroundImage = "none", this.innerHTML = '<img src="http://www.llrx.com/themes/llrx/images/h2.gif" border="0" alt="' + this.innerHTML + '">'); }
You're assigning a node's innerHTML to an image's ALT attribute but the innerHTML contains unescaped HTML so you end creating some very funky HTML like:
<img alt="<img alt="<img alt="<img alt="
A screenshot might show better:
He's right.
WebBrowser wb = new WebBrowser();
wb.Parent = this;
wb.Visible = true;
wb.Navigate("C:\Test.html");
With the smallest form of the html:
<!DOCTYPE html>
<html>
<head>
<base href="http://www.llrx.com/" />
<style type="text/css" media="all">#import "/themes/llrx/style.css"; #beta2fix a:hover {color: #000;}</style>
</head>
<body>
<div>
<h1 id="logo">Test</h1>
</div>
</body>
</html>
Be damned if i know why (yet).