I'm trying to implement this example in order to become familiar with Alchemy.js. http://graphalchemist.github.io/Alchemy/#/examples how can I fix this to make it work?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Alchemy</title>
<link rel="stylesheet" href="bower_components/alchemy.min.css"/>
</head>
<body>
<div class="alchemy" id="alchemy"></div>
<script src="bower_components/alchemy.min.js"></script>
<script type="text/javascript">
alchemy.begin({dataSource: "charlize.json"});
</script>
</body>
</html>
Probably you are using the wrong library, try with this:
(Can you try including the vendor script first and then the alchmey script.)
<script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/scripts/vendor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.js"></script>
Related
I'm creating an express app and my CSS code stops working whenever i add an ":ID" parameter to the URL. I know it's a filepath issue because bootstrap still comes in fine, but on the page with the ID parameter it shows this: "Refused to apply style from 'https://XXXXXX.c9users.io/unapproved/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
main.css is in my /public folder, but it looks like it's looking in a folder titled "unapproved".
I've tried changing the routing order, i've tried changing my app.use(express.static(__dirname)) code.
here's my app.get:
app.get("/unapproved/:id/", function(req, res){
var invoiceID = mongoose.mongo.ObjectId(req.params.id);
InvoiceObj.findById(invoiceID,function(err,foundInvoice){
if(err){
console.log(err);
}else{
res.render("invoiceScreen",{invoice:foundInvoice});
}
});
here's my html:
<% include partials/header %>
<h1><image src="<%= invoice.imageUrl %>"</h1>
<% include partials/footer %>
here's my header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Invoice system</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src='https://code.jquery.com/jquery-2.1.4.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
I think change to css path absolute path will solve your problem
<link rel="stylesheet" href="/main.css">
In this kind of situation, it's better to use virtual path for your static files because relative path doens't work very well; like:
Assuming folder structure:
app.js
public
| +-- main.css
app.use('/static', express.static(__dirname + "/public"))
And in you html, make path absolute
<link rel="stylesheet" href="/static/main.css">
instead of using ./ or ../ before your assest(images / css / js ) for example.
./css/style.css or css/bootstrap.css ../images/example.png
you can use / for example
/css/style.css or /css/bootraps.css /images/example.png
/ will tell your app to look from root dir.
Here is a lot of questions and answers how to make assets concatination or replacement in template. Use grunt-concat to merge files, use gulp-html-replace to replace in templates. And i can`t understand how to connect them with each other.
So given template, friends.tpl with special set of css files:
!DOCTYPE html>
<html>
<head>
<!-- build:css friends.min.css -->
<link rel="stylesheet" href="css/component1/style.css">
...
<link rel="stylesheet" href="css/componentN/style.css">
<!-- /build -->
</head>
<body/>
The desired result
!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/friends.min.css">
</head>
<body/>
And created friends.min.css file with concatenated files above.
How to achieve this - concat based on template data
Use gulp-htmlbuild,it does what you want.
gulp.task('build', function () {
gulp.src(['./index.html'])
.pipe(htmlbuild({
// build js with preprocessor
js: htmlbuild.preprocess.js(function (block) {
// read paths from the [block] stream and build them
// ...
// then write the build result path to it
block.write('buildresult.js');
block.end();
})
}))
.pipe(gulp.dest('./build'));
});
gulp build will take index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- htmlbuild:js -->
<script src="js/script1.js"></script>
<script src="js/script2.js"></script>
<!-- endbuild -->
</body>
</html>
And turn it into:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="buildresult.js"></script>
</body>
</html>
https://www.npmjs.com/package/gulp-htmlbuild
below is part of my head section in HTML. i found that the content of my page always load before the jquery.css such that the layout is so plain and return to the desired layout after 0.5 second loading time. What should I modify the code in order to avoid the plain content? is it related to the deviceready? in before, href is to the hyperlink, after that, i change it to a local file. i surprised that even a local file, it use 0.5 second to load it, instead of loading it instantly.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", showConfirm, false);
}
</head>
Try moving the line that loads Cordova-2.3.0.js below the lines that load your CSS. So something like:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", showConfirm, false);
}
</head>
It works after i change jquery mobile and jquery to latest version............
I ask this because I don't know why in IE9 my site looks like this:
And another broswers display correctly:
I was assuming it was due to poor position in the header files but not exactly this happening and that's the last part of my project, it looks good in IE9.
General structure of my index.php
<!DOCTYPE html>
<html lang="es">
<head>
<?php include 'configHead.php' ?>
<title>Panel de Servicio</title>
</head>
<body>
.......
</body>
configHead.php
<meta charset="utf-8">
<link rel="shortcut icon" href="media/favicon.png" />
<script src="js/prefixfree.min.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="css/jquery-ui-1.9.2.custom.css" type="text/css"/>
<link rel="stylesheet" href="css/jquery.dataTables.css" type="text/css"/>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
<script src="js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
Anyone have any idea why this happens?
You cannot have any comments or any text above your <!DOCTYPE html> ... remove the comment on top and your site will work fine in IE .. Its currently triggering your page to go into quirks mode (which is roughly equivalent to IE5) .. as far as IE is concerned you have no doctype.
Right now you have this comment:
<!--Aplicación: Sistema de tickets y pólizas.
Cliente: MA Consulting.
Desarrollador: XXX XXX XXX
Twitter: #_xxx
Email: xxx#gmail.com
Fecha: Julio/2012 - Febrero/2013
-->
<!DOCTYPE html>
Before your doctype .. move that comment after <!DOCTYPE html>
I copy the codes from Google Earth API Developer's Guide,deployed in eclipse's Dynamic Web Project,just like below.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var ge;
google.load("earth","1");
function init(){
google.earth.createInstance('map3d',initCB,failureCB);
}
function initCB(instance){
ge=instance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
}
function failureCB(errorCode){
alert("failure");
}
google.setOnloadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="height:400px;width:600px;border:1px solid red"></div>
</body>
The website shows red frame but the earth does't exist,what wrong with with my code,thanks!!
You have a spelling error in
google.setOnloadCallback(init);
Should be:
google.setOnLoadCallback(init);