I have a website written in C# / ASP.NET. I try to add loading/waiting window while that page is loading. How can I do that in Asp.net? Thanks..
I solved it with DOJO. I used dijit.dialog. Here is a part of my code:
<head>
<!-- api's (you can use also google apis: https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js) -->
<link href="<%=Url.Content("~/Scripts/dojo/dijit/themes/tundra/tundra.css")%>" rel="stylesheet"
type="text/css" media="screen" />
<link href="<%=Url.Content("~/Scripts/dojo/dojo/resources/dojo.css")%>" rel="stylesheet"
type="text/css" media="screen" />
<script djconfig="parseOnLoad: true" type="text/javascript" src="<%=Url.Content("~/Scripts/dojo/dojo/dojo.js")%>"> </script>
</head>
<script type="text/javascript">
dojo.require("dijit.Dialog");
dojo.require("dijit.layout.ContentPane");
// This is the function to show the spinning whell (or something else to demonstrate the loading progress)
function wheelShow() {
var dialog = new dijit.Dialog({ title: "Loading...", id: "wheel" });
dialog.setContent("<img style='height: 55px; width: 55px; text-align:center' src='../../Content/images/loader.gif' />");
dialog.show();
// hiding of close button in dialog
dojo.query("#wheel .dijitDialogCloseIcon").forEach(function(node, index, arr) {
node.style.visibility = "hidden";
});
}
</script>
<body class="tundra">
<!-- after the page will be completly loaded - hide the wheel -->
<div id="delayedContent" onload="dijit.byId('wheel').hide()">
<!-- your page content here... -->
</div>
</body>
I found something like that. It seems easy and practical to use :
http://www.codeproject.com/Articles/42344/AJAX-Enabled-MessageBox
Thanks for your answer by the way.
Related
I am trying to call the callback on zoom in and zoom out images but the function is not called, please help
$('.materialboxed').materialbox({
onOpenStart: function(){
imgZoomIn()
},
onOpenEnd: function(){
imgZoomOut()
}
});
Do you want something like this?
$('.materialboxed').materialbox();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<img class="materialboxed" width="650" src="https://www.jqueryscript.net/images/Universal-Placeholder-Text-Lorem-Ipsum-Generator-getlorem.jpg">
Run the code snipped to check.
The following wasn't working for me, so I had to update my materialize references to this, actually I just added with the local materizalize.min files link I had:
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
And then, only initialize like this (for jquery):
$('.materialboxed').materialbox({
inDuration:275,
outDuration:200,
onOpenStart: function() {console.log("onOpenStart");},
onOpenEnd: function() {console.log("onOpenEnd");},
onCloseStart: function() {console.log("onCloseStart");},
onCloseEnd: function() {console.log("onCloseEnd");}
});
I want to load the content of a Wordpress post into a Bootstrap modal. For performance reasons, I want to load it when the modal opens.
I found this in Bootstrap documentation (I'm using Bootstrap v.3.3.7)
<a data-toggle="modal" href="/wp-json/wp/v2/POST_TYPE/POST_ID" data-target="#modal">Click me</a>
How I can do to load only the content ?
Below given snippet will show you how can you do something that you want without having to do anything extra and also by not even writing conventional bootstrap modal code.
For further reference you can also visit this link. It will show you how you can create modal dynamically with minimum efforts.
function show_on_click() {
BootstrapDialog.show({
title: "Modal Title Goes Here.",
message: '<div id="simple-div" style="overflow-x : auto"></div>',
onshown: function() {
$.ajax({
url: 'http://api.fixer.io/latest?base=INR',
cache: false,
type: 'GET',
async: false,
success: function(data) {
$('#simple-div').append(JSON.stringify(data));
}
});
},
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
Click me
I face a problem when i try to use jqm in my website. A message of 'loading' appears on the bottom of my site. I figured out that it happens since I don't add jqm css. When I add the jqm css everything changes (color layout ect.). How is it possible to remove 'loading' message or add css without conflicts with the main css of my site?
<head>
<link href="css/site.css" rel="stylesheet" />
<!--<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" /> -->
<!-- disable loading msg -->
<script>
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script src="scripts/jquery.mobile-1.3.2.min.js"></script>
</head>
I add script in my code. Nothing seems to happen! My problem solved only when i uncomment jqm css code, but then i got many conflicts with the site.css which i dont know how to solve.
To disable jQuery Mobile loading message, you need to override global settings once mobileinit triggers. The code should be placed in head after loading jQuery and before loading jQuery Mobile libraries.
<head>
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.loadingMessage = false;
});
</script>
<script src="jquery-mobile.js"></script>
</head>
I want to print a web page using JavaScript. But I do not want to open the page as a popup windows. How can I print directly a web page like 'mypage.aspx' using JavaScript window.print method without opening it as a popup window?
Also the condition is 'I don't want to use any ActiveX for this'
Here is what I want to try:
var printWindow, printData; printWindow = window.open("", "printVersion", "menubar,scrollbars,width=640,height=480,top=0,left=0");
printData=document.getElementById("lblReport").innerHTML; printWindow.document.write(printData);
printWindow.document.close();
printWindow.print();
The simpliest solution is to load the content of that mypage.aspx to an iframe then on iframes onload event call the window.print.
<button onclick="printPage()">print</button>
<div id="printerDiv" style="display:none"></div>
<script>
function printPage()
{
var div = document.getElementById("printerDiv");
div.innerHTML = '<iframe src="mypage.aspx" onload="this.contentWindow.print();"></iframe>';
}
</script>
<html>
<head>
<title>Print</title>
<link rel="stylesheet" type="text/css" media="all" href="all.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<p>I get printed</p>
<form>
<input type="button" onclick="window.print()" value="Print" />
</form>
</body>
</html>
Make sure all.css is on top and print.css at the bottom, it should work.
Not sure if it works, but you may try to create invisible iframe, load page2.aspx in it and then print it.
Um. Just use window.print(); directly on the page. By itself it does not open a new window (apart from the print properties window to set printing options).
You could just use a CSS print style sheet and avoid using javascript altogether -all the user has to do them is print the page. e.g.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
I'm building a website using Flex, Codeigniter, and I use swfobject to embed the swf.
This will not work if I access the website using Codeigniter's index.php file.
This is the ouput source:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://localhost/Pixelatte-debug/"/>
<link rel="stylesheet" type="text/css" href="history/history.css" />
<title>${title}</title>
<script src="AC_OETags.js" language="javascript"></script>
<script src="history/history.js" language="javascript"></script>
<style>
body { margin: 0px; overflow:hidden; background:url('swirlsbg.png') }
</style>
</head>
<body scroll="no">
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashVars = {};
var params = { play: "true",
loop: "false",
quality: "high",
wmode: "transparent",
allowscriptaccess: "sameDomain" };
var attributes = { id: "${application}" };
swfobject.embedSWF( "${swf}.swf",
"divContent",
"100%", "100%",
"9.0.0",
"expressInstall.swf",
flashVars,
params,
attributes );
</script>
<div id="divContent">
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a></p>
</div>
</body>
</html>
My guess is that swfobject.js is not detected by codeigniter..
What is the result? (The replacement text, or a broken object tag...?)
Is swfobject.js loaded properly?
Is your SWF file's path correct?
What is your final HTML output?
Maybe one of the details will solve your problem.
CodeIgniter won't be your issue here. You should use a tool like Firebug (a firefox plugin) to confirm your assets are actually being found.
Codeignitor won't know about your JS, your browser will. If the JS isn't running there is either a fault in the JS code, or it isn't found by your browser.