I am using preloadjs for large asset loading.
I am using lots of js libraries like 60+ jquery plugins.
I just want a nice loader that displays progress of assets loading with progress bar and listing file which were loaded successfully and which were failed.
I am using simple example to display my problem.
Previously I was using new createjs.LoadQueue(true) to load content using XHR But I find XHR very slow as compared to old-fashioned tags to load scripts.
As per doc, I want to switch to load content using tag-based loading instead of XHR but I cant figure out how. Please see the code below
Objective:
How to use tag-based loading ??
Is it true that old-fashioned <script>tags will load scripts faster than preloadjs XHR
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>preloadjs </title>
<script src="https://code.createjs.com/preloadjs-0.6.2.min.js" type="text/javascript"></script>
<script id="1" type="text/javascript"></script>
<script id="2" type="text/javascript"></script>
<script id="3" type="text/javascript"></script>
<script id="4" type="text/javascript"></script>
<script id="5" type="text/javascript"></script>
</head>
<body>
<div id="progress"> </div>
<script type="text/javascript">
//
var manifest = [{
"src": "https://code.jquery.com/jquery-1.12.4.min.js",
"id": "1"
}, {
"src": "https://code.jquery.com/ui/1.11.3/jquery-ui.min.js",
"id": "2"
}, {
"src": "https://code.jquery.com/ui/1.11.3/FAIL-IT.js",
"id": "3"
}, {
"src": "https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js",
"id": "4"
}, {
"src": "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js",
"id": "5"
}];
//
var queue = new createjs.LoadQueue(false);
queue.setMaxConnections(5);
queue.maintainScriptOrder = true;
queue.on('progress', function(event) {
//fired when the overall progress changes
var value = queue.progress.toFixed(2) * 100;
document.getElementById('progress').innerHTML = value + '%';
});
queue.on('complete', function(event) {
//fired when the entire queue has been loaded
document.getElementById('progress').innerHTML = '100% - all done';
});
queue.on('error', function(event) {
console.log(event);
});
queue.loadManifest(manifest);
</script>
</body>
</html>
After viewing your post, I have done some tests and realized that, when using
createjs.LoadQueue(false);
content is loaded as tags on HEADER section, so, the following code
loader = new createjs.LoadQueue(false);
loader.loadManifest([
{ type: createjs.AbstractLoader.CSS, src: '/node_modules/material-design-icons/iconfont/material-icons.css'},
{ type: createjs.AbstractLoader.CSS, src: '/node_modules/materialize-css/dist/css/materialize.css'},
{ type: createjs.AbstractLoader.CSS, src: '/styles.css'},
{ type: createjs.AbstractLoader.JAVASCRIPT, src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' }
]);
will just create the following on
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="/node_modules/material-design-icons/iconfont/material-icons.css">
<link rel="stylesheet" type="text/css" href="/node_modules/materialize-css/dist/css/materialize.css">
<link rel="stylesheet" type="text/css" href="/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
Hope this helps with you first question.
Related
I'm new in js. So I installed node.js.
What I have: I have html file which opens a map in the browser. When user right click it should create txt file and write 'Learning how to write in a file' in it, but it doesn't.
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<script src="https://cdn.jsdelivr.net/npm/leaflet#1.5.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet#1.5.1/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_fc81479c2a8c4f18ad55baf3c9ba4285 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
</head>
<body>
<div class="folium-map" id="map_fc81479c2a8c4f18ad55baf3c9ba4285" ></div>
</body>
<script>
var map_fc81479c2a8c4f18ad55baf3c9ba4285 = L.map(
"map_fc81479c2a8c4f18ad55baf3c9ba4285",
{
center: [55.02111, 73.40751],
crs: L.CRS.EPSG3857,
zoom: 13,
zoomControl: true,
preferCanvas: false,
}
);
var tile_layer_216c8662dc00405dba72c81174fd5845 = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
).addTo(map_fc81479c2a8c4f18ad55baf3c9ba4285);
var lat, lng;
map_fc81479c2a8c4f18ad55baf3c9ba4285.addEventListener('mousemove', function(ev) {
lat = ev.latlng.lat;
lng = ev.latlng.lng;
});
document.getElementById("map_fc81479c2a8c4f18ad55baf3c9ba4285").addEventListener("contextmenu", function (event) {
// Prevent the browser's context menu from appearing
event.preventDefault();
alert(lat + ' - ' + lng);
return false; // To disable default popup.
});
// Trying to save to text file
// !!!
// !!!
// !!!
// does not work :
const fs = require('fs')
let data = "Learning how to write in a file."
fs.writeFile('Output.txt', data, (err) => {
if (err) throw err;
})
</script>
and if I open console in the browser it shows me:
85 raw : const fs = require('fs')
But if I run code which should create a file in a separate js file - it creates good.
What should I do for it to create file when user right click on a map?
Edit 1:
Added script and still does not work
<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js">
</script>
JavaScript is a browser based language for web. You cannot do anything outside the browser environment. Browsers don't give acess to the file system and other modules.
This is the issue that Node js solved. If you want to acess file system using javascript, I'll suggest to create an express web app using Node as backend allowing you to write into files and much more.
Feel free to Google Node and Express you'll get many examples online.
Hope this helps...
I am creating an O365 app and I have 2 .aspx files, when the user clicks on the O365 mail app, I want each of these pages to be loaded based on the subject of the mail.
Scenario 1: Mail subject contains '#'
result: load page1
Scenario 2: Mail subject does not contain '#'
result: load page2
I have tried having an intermediate .js file where I have written the logic,
but when I do window.location = "path_to_aspx_file",
only the html is loaded but the js files do not run.
My current implementation:
I have LandingLogic.js
(function () {
"use strict";
//The Office initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
var item = Office.cast.item.toItemRead(Office.context.mailbox.item);
var sub = item.subject;
if (sub.indexOf("some text") > -1) {
window.location = "http://localhost:51776/File1.aspx";
}
else {
window.location = "http://localhost:51776/File2.aspx";
}
});
};
})();
After a bit of fumbling around.
I am able to navigate to each of these files now, but I am not sure how to access the mail subject from File1.aspx and File2.aspx.
Did you initialize the Office context before you using Office JavaScript API to get the subject? To redirect the HTML page easily, we can include the JavaScript like below:
Home.js:
/// <reference path="../App.js" />
(function () {
"use strict";
// The Office initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
app.initialize();
RedirectHTMLPage();
});
};
function RedirectHTMLPage() {
var subject = Office.context.mailbox.item.subject;
if (subject.indexOf("#") != -1) {
window.location.href = "https://localhost:44300/page1.aspx";
} else {
window.location.href = "https://localhost:44300/page2.aspx";
}
}
})();
The HTML page for redirecting:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<link href="../../Content/Office.css" rel="stylesheet" type="text/css" />
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- To enable offline debugging using a local reference to Office.js, use: -->
<!-- <script src="../../Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
<!-- <script src="../../Scripts/Office/1/office.js" type="text/javascript"></script> -->
<link href="../App.css" rel="stylesheet" type="text/css" />
<script src="../App.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css" />
<script src="Home.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
I have tried having an intermediate .js file where I have written the logic, but when I do window.load = "path_to_aspx_file", only the html is loaded but the js files do not run.
Would you mind sharing the detail you using the “window.load”?
Fei Xue answer is correct . if you want to get subject from file2.aspx , add office.js reference and access subject same as file1.aspx inside the Office.initialize event
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
I stripped down my code to a simple page including the flog plugin and jquery files, but am still unable to get the flot graphs to render in IE 7 and 8. I may be missing something, but I am using flot 8.1(7.0 worked fine).
I cut it down to a simple page with the what I assume are the necessary scripts. Thank you for any help you can provide!
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type='text/javascript' src='js/plugins/jquery/jquery-1.9.1.min.js'></script>
<script type='text/javascript' src='js/plugins/jquery/jquery-ui-1.10.1.custom.min.js'></script>
<script type='text/javascript' src='js/plugins/jquery/jquery-migrate-1.1.1.min.js'></script>
<script type='text/javascript' src='js/plugins/other/excanvas.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.stack.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.pie.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.resize.js'></script>
</head>
<body class="smw ssDark">
<div class="header">
<div id="chart_activity" style="height:500px;" >
</div>
</div>
<script>
$("document").ready(function(){
if($("#chart_activity").length > 0){
var stuff = [], contacts = [];
for (var i = 0; i < 7; i += 1) {
stuff.push([i, parseInt(Math.random() * 30)]);
contacts.push([i, parseInt(Math.random() * 30)]);
}
$.plot($("#chart_activity"), [ { data: stuff, label: "stuff"}, { data: contacts, label: "contacts"}], {xaxis: {show: true}, yaxis: { show: true}});
}
});
</script>
</body>
</html>
Edit: Forgot to mention, I get the following error in IE console:
SCRIPT5007: Unable to get property 'fillStyle' of undefined or null reference
excanvas.js, line 230 character 5
Sorry for coming back with the answer slowly. Apparently the downloaded version of excanvas that I had, was somehow different from the one the came with Flot. Once I switched them out everything worked fine in IE 7/8.
I'm building a small application in Play and have an 'outer' template which holds all my CSS and JS imports (jQuery and my main.js file). CSS at the top, JS at the bottom with a body tag in between... pretty basic stuff:
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="#routes.Assets.at("stylesheets/foundation.css")">
<link rel="stylesheet" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
</head>
<body>
#content
</body>
<script src='#routes.Assets.at("javascripts/jquery-1.9.0.min.js")' type="text/javascript"></script>
<script src='#routes.Assets.at("javascripts/index.js")' type="text/javascript"> </script>
</html>
Which is fine.
However, I have page specific javascript functions that should run based on what the page is. So if I go to localhost:9000/test, I want a particular set of functions to run.
If I go to localhost:9000/chips, I want another set of functions to run.
I can't see a neat way of doing this, really, except checking the current page url in the script and executing functions based on that... but the routes file is already doing stuff based on the current page url - seems strange to have to do something so similar twice.
One solution is to put all my scripts at the top and then execute inline scripts in the HTML... but I hate doing things like that.
You have very nice and clear sample available in the... documentation.
Scroll to the bottom and check section: moreScripts and moreStyles equivalents, you have there ready to use samples.
I use a ViewModel approach to solve this issue.
The default ViewModel:
class DefaultPage(
implicit val request: RequestHeader,
implicit val lang: Lang) {
var title: String = null
val styles = mutable.LinkedHashMap.empty[String, Int]
val scripts = mutable.LinkedHashMap.empty[String, Int]
def title(title: String) {
this.title = title
}
def style(style: String)(implicit priority: Int = 500) {
styles.put(style, priority)
}
def script(script: String)(implicit priority: Int = 500) {
scripts.put(script.toString, priority)
}
def translate(message: String, objects: Any*) = Messages(message, objects: _*)
}
Then I have two template tags:
styles.scala.html
#(styles: scala.collection.mutable.Map[String, Int])
#for(style <- styles.toList.sortBy(_._2)) {
<link rel="stylesheet" href="#routes.Assets.at(style._1)" />
}
scripts.scala.html
#(scripts: scala.collection.mutable.Map[String, Int])
#for(script <- scripts.toList.sortBy(_._2)) {
<script async="true" src="#routes.Assets.at(script._1)"></script>
}
My main template:
main.scala.html
#(page: util.view.models.DefaultPage)(content: Html)
#import tags.scripts
#import tags.styles
#page.style("css/vendor/normalize.min.css")(1)
#page.style("css/vendor/formalize.min.css")(1)
#page.style("css/sprites.min.css")(1)
#page.style("css/main.min.css")(1)
#page.style("css/quirks.min.css")(1000)
#page.script("js/vendor/jquery-1.9.1.min.js")(1)
#page.script("js/vendor/jquery.formalize.min.js")(1)
#page.script("js/plugins.min.js")(1)
#page.script("js/main.min.js")(1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#page.title</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
#styles(page.styles)
<script src="#routes.Assets.at("js/vendor/modernizr-2.6.2.min.js")"></script>
</head>
<body class="#page.lang.code #page.lang.language #page.lang.country">
#content
#scripts(page.scripts)
</body>
And a sub template:
#(page: util.view.models.ContactUsPage)
#page.title(page.translate("contact.us.title"))
#page.style("css/contact-us.min.css")
#page.script("js/vendor/jquery.expandable-1.1.4.js")
#page.script("js/contact-us.min.js")
#main(page) {
}
You can pass your javascript which is specific to a page as template parameter link
I am trying to accomplish simple tasks with dojo's new AMD feature, and I don't get an error on the screen neither the result is being displayed....
I wanted to rewrite the first programmatic example dijit.Tree mentioned in the dojo reference guide:
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.ready(function(){
var store = new dojo.data.ItemFileReadStore({
url: "{{dataUrl}}/dijit/tests/_data/countries.json"
});
var treeModel = new dijit.tree.ForestStoreModel({
store: store,
query: {"type": "continent"},
rootId: "root",
rootLabel: "Continents",
childrenAttrs: ["children"]
});
new dijit.Tree({
model: treeModel
}, "treeOne");
});
</script>
to the AMD version:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" href="js/dojo/dijit/themes/claro/claro.css" />
<script src="js/dojo/dojo/dojo.js" data-dojo-config="async: true"></script>
<script language="JavaScript">
var param = new Array(null,["dojo/dom","dijit/tree","dojo/data/ItemFileReadStore","dijit/tree/ForestStoreModel","dojo/domReady!"]);
require(param[1],function(dom,dtree,ifrs,fsm)
{
var store = new ifrs({url: "js/countries.json"});
var treeModel = new fsm({store: store,query: {"type": "continent"},rootId: "root",rootLabel: "Continents",childrenAttrs: ["children"]});
new dtree({model:treeModel},"treeOne");
});
</script>
</head>
<body class="claro">
<div id="treeOne">
</div>
</body>
</html>
Firebug doesn't whow me an runtime error, or doesn't tell me that something is missing. The page just stays empty. What did I make wrong?!
The main problem is how you build the param array and only use the first value in the array.
Also, dojo.ready is not the same as dojo/domReady!
require(["dojo/dom", "dijit/tree", "dojo/data/ItemFileReadStore",
"dijit/tree/ForestStoreModel", "dojo/ready"],
function(dom, dtree, ifrs, fsm, ready) {
ready(function() {
...
});
});