After compiling the entire asp.net project, when the first time the default.aspx page loads, asp.net compiles the pages into Temporary Asp.Net directory. This takes a long time during which I want to show a loading gif to the user.
Using a javascript on the default.aspx does not work as the page is practically not constructed yet. To get around this I created another page, say startup.html, that loads the splash and loads the default.aspx using windows.location.replace function.
This works but seems kludgy, Is there a better way of doing this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.load {
width: 100%;
height: 100%;
position: fixed;
z-index: 9999;
background: url("images/loading.gif") no-repeat center center rgba(0,0,0,0.25);
}
</style>
<script type="text/javascript" async>
setTimeout(function () {
window.location.replace("default.aspx");
}, 100);
</script>
</head>
<body>
<div class="load" />
</body>
</html>
Related
So this is another question regarding valid rendering google maps in WinForms WebControl.
There are two solutions to the problem, one of them is to add specific registry keys (See this article) and another one is to use <meta http-equiv="X-UA-Compatible" content="IE=edge"> (if you own the HTML of the displayed page) (See this article).
Since we host our google-maps html and scripts files on our own servers, we can modify the html file. So we have tried however this causes WebControl to not render html file at all (gray space is displayed). On the other hand the IE works fine.
The workstation we test on has installed IE 11.
Below is our html file. Did we do something wrong? Anyone encountered similar behaviour? How to solve this?
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex" />
<title>Mapa</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.22&libraries=geometry&sensor=false"></script>
<!-- multiple javascript files -->
<script type="text/javascript">
var map;
var panorama;
function initialize() {
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(0.0, 0.0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
panorama = map.getStreetView();
/* some init functions */
}
</script>
</head>
<body style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
Sorry for <!-- multiple javascript files --> and /* some init functions */ but I had to cut these parts out. These are only <script type="text/javascript" src="..."></script> lines and 2 function calls in second one. If those 2 parts are really important and will lead to solve the problem I can try to post them.. somehow.
Mind that whatever we use in content="IE=edge" part, edge, or any other version number the result is the same.
Below is the screen of the WebControl when we use the X-UA-Compatible.
(Obiviously the red text is made in snipping tool ;))
I work with the team which created another browser component – DotNetBrowser.
I think this component will be helpful for your case since it is based on the Chromium engine and should render the Google Maps without any issues.
I'm having an issue trying to use Telerik REST services and their HTML5 Report Viewer.
Here's my scenario:
I have a C# console application which is hosting the REST services API. I have set this project up as per Telerik's article: How To: Self Host Telerik Reporting REST Web API. This seems to be working without issue. I am able to go to http://localhost:8080/api/reports/formats and I get the expected results, which suggests to me the REST server is available and is processing requetss.
I then set up a separate project to run the report viewer. This is a C# Windows forms application, which has a WebBrowser element pointing to the URL of my report viewer HTML file. The Report Viewer HTML file is the default generated file when you create a new Telerik HTML 5 Report Viewer in Visual Studio - it builds all of the necessary pieces for you. Here is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Telerik HTML5 Report Viewer</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.blueopal.min.css" rel="stylesheet" />
<!--kendo.all.min.js can be used as well instead of kendo.web.min.js and kendo.mobile.min.js-->
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.web.min.js"></script>
<!--kendo.mobile.min.js - optional, if gestures/touch support is required-->
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.mobile.min.js"></script>
<link href="ReportViewer/styles/telerikReportViewer-9.0.15.324.css" rel="stylesheet" />
<script src="ReportViewer/js/telerikReportViewer-9.0.15.324.min.js"></script>
<style>
#reportViewer1 {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
overflow: hidden;
font-family: Verdana, Arial;
}
</style>
</head>
<body>
<div id="reportViewer1">
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#reportViewer1")
.telerik_ReportViewer({
serviceUrl: "http://localhost:8080/api/reports/",
templateUrl: "ReportViewer/templates/telerikReportViewerTemplate-9.0.15.324.html",
//ReportSource - report description
reportSource: {
report: "Reports/SampleReport.trdx",
parameters: {
Date: new Date(),
}
},
viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
scale: 1.0,
ready: function () {
//this.refreshReport();
},
});
});
</script>
</body>
</html>
When I run this appliaction, the web browser loads the page, but then displays " Error loading the report viewer's templates." I've tried putting the templates on the server side of things, but I can't seem to figure out what I'm doing wrong.
If anybody has any suggestions as to what I could try to resolve this error, I would very much appreciate it! I am using Telerik 2015 Q1.
Thanks!
I have found my problem. Turns out it was a cross-origin problem. I ended up taking my required templates and scripts and such, and hosting them on a simple IIS page on the server, and reference them using an absolute URL. That has gotten me around the issue I was having.
I have noticed a difference between how IE 11 renders this page and the WebBrowser control renders this page. WebBrowser's emulation mode matches that of IE11, so that is not the issue. Could this be a defect?
This is how I am setting the WebBrowser object in C#:
browser.Dock = DockStyle.Fill;
browser.ScrollBarsEnabled = false;
browser.DocumentText = /* I am setting the html here */;
If you run this in WebBrowser, you will not see the second line, yet it works perfectly in IE11.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>WebBrowser Rendering Issue</title>
<style>
#main-div {
position: relative;
height: 100%;
overflow: hidden;
}
.child-div {
position: absolute;
}
</style>
</head>
<body>
You will only see this line rendered in WebBrowser.
<div id='main-div'>
<div class='child-div'>
You will also see this line when ran in IE or Chrome.
</div>
</div>
<script>alert("Document Mode: " + document.documentMode);</script>
</body>
</html>
I created jquery popup dialog and asp.net dropdownlist control in my aspx page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" ></script>
<script src="//code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function () {
$('#div_popup').dialog({
resizable: true,
height: 300,
width: 300,
position: 'center',
zIndex: 10000
});
});
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" type="text/css" />
<style type="text/css" >
#div_dropdownlist
{
margin-left : 50%;
margin-top : 50%;
z-index: -1;
}
#div_popup
{}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div_dropdownlist">
<asp:DropDownList runat="server" ID="ddlList" Width="200px"></asp:DropDownList>
</div>
<div id="div_popup">
My test Popup
</div>
</form>
</body>
</html>
My purpose is to show jquery dialog popup over every other controls when you drag it over other controls.
Everything work well in every browsers but IE6.
I tried css zIndex. But it has no effect in IE6.
So, please let me know how I can make it correct in IE6.
Updated
I changed my div popup style to
#div_popup
{
z-index: 10000;
}
and I had changed my jquery dialog css style to
$('#div_popup').dialog({
...
zIndex: 10000
});
But in IE6, that jquery popup cannot display over asp.net dropdown list box when I drage over that control.
For your reference , here is my_source_code.
As mentioned in http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
There is an ie bug and the select boxes shows on top.
I would hide the select box as suggested or use an shim for ie6.
I'm developing a mapping application (VS2008 C#) and have my map window (Esri ADF MapControl) displayed within my main aspx.
I'm now compiling a print template with another aspx page which will display and print the current map from the main aspx.
Normally I'd use a Frame tag to dispay the main aspx in my print template however I'm just interested in copying over the map DIV.
You can try do it using jquery:
<!DOCTYPE html>
<html>
<head>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>Footer navigation:</b>
<div id="mydiv"></div>
<script>
$("#mydiv").load("mypage.html");
</script>
</body>
</html>
Source: http://api.jquery.com/load/