html5media extracted code not working - html

I'm using the java script library html5media.min.js to play mp3 file in Firefox.
my problem is that when I add the script link to my page as:
<script src = "http://api.html5media.info/1.1.5/html5media.min.js" type="text/javascript"></script>
It is working fine.
But if I get the code and save it in a local file, it is not working!!
i.e.
<script src="Scripts/html5media.min.js" type="text/javascript"></script>

Just add this code into your page after the the script tag
html5media.flowplayerSwf = "/path/to/your/flowplayer.swf";
html5media.flowplayerAudioSwf = "/path/to/your/flowplayer.audio.swf";
html5media.flowplayerControlsSwf = "/path/to/your/flowplayer.controls.swf";
You can see this

Related

Issue with relative in HTML file in a subdirectory accessing libraries from other folders

I have an issue with the path definition of the libraries and models that are used in an HTML file using WebGL. The HTML file can be found here, which is an example code for a WebGL2 book.
The HTML file itself is sitting locally in the following directory in my computer.
C:\Users\bob\Desktop\Book\ch01\ch01_04_showroom.html
The libraries and other sources are located in
C:\Users\bob\Desktop\Book
├───ch01
| └───ch01_04_showroom.html
├───ch02
└───common
├───images
│ └───cubemap
├───js
├───lib
└───models
├───audi-r8
├───bmw-i8
├───ford-mustang
├───geometries
├───lamborghini-gallardo
└───nissan-gtr
The parts of the code that I have issues with are in the following
ch01_04_showroom.html
<html>
<head>
<title>Real-Time 3D Graphics with WebGL2</title>
<link rel="shortcut icon" type="image/png" href="/common/images/favicon.png" />
<!-- libraries -->
<link rel="stylesheet" href="/common/lib/normalize.css">
<script type="text/javascript" src="/common/lib/dat.gui.js"></script>
<script type="text/javascript" src="/common/lib/gl-matrix.js"></script>
<!-- modules -->
<script type="text/javascript" src="/common/js/utils.js"></script>
<script type="text/javascript" src="/common/js/EventEmitter.js"></script>
<script type="text/javascript" src="/common/js/Camera.js"></script>
...
<script type="text/javascript">
'use strict';
// ...
function configure() {
carModelData = {
// This is the number of parts to load for this particular model
partsCount: 178,
// The path to the model (which I have issue with on my computer)
path: '/common/models/nissan-gtr/part'
};
}
...
I have issue defining the path for hrefs and srcs. Also the one in the javascript function:
path: '/common/models/nissan-gtr/part'
If I use the code as it is posted in here nothing will be displayed in my Google Chrome, just an empty page.
So, I have changed paths from
/common
to relative paths:
./../common
but still, I am not able to load the HTML correctly. I see the gridded floor with an incomplete menu but the car is not displayed yet as in the following snapshot.
It's a security, Chrome doesn't let you load local files through file:///... for security reasons.
The purpose of this security is to prevent external resources from gaining access to your system, which could allow them to modify or steal files
Solutions
The best solution is to run a little http server locally since you can follow the steps from this SO answer or this one.
Or, maybe others will bring it up so I'll mention it, you can also launching Google Chrome from the command line with the flag: --allow-file-access-from-files, but this isn't recommended since Chrome doesn't allow this behaviour to protect you.

Styling a converted Markdown file inside HTML

I have an HTML page with a script to auto-convert a Markdown file. The file is embedded between <zero-md></zero-md>, and does get converted successfully. Now the converted text has to be formatted by my custom stylesheet. As instructed by the script provider, I inserted a snippet that modifies the script's constructor to reference my CSS (to override the default theme). It fails to format the text. Here's my code:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
</head>
<body>
<zero-md src="content.md"></zero-md>
</body>
This is equivalent to:
<head>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#2/dist/zero-md.min.js"></script>
</head>
<body>
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
</body>
Neither works for me.
The path to the css file is correct. Replacing <template><link rel="stylesheet" href="style.css"></template> with <template><style>...</style></template> (i.e. inserting the css code itself into <zero-md></zero-md>) does work, it does the formatting, but I want it to be an external file.
I'm previewing it with Visual Studio, opening the page in Chrome through a port. (Incidentally, when I open the page directly from the browser or drag-drop the HTML onto the browser instead of using VS's preview function, the conversion script fails, it doesn't display the text content of the Markdown file, for whatever reason.)
Any suggestion?
A bit late, but first things first - ZeroMdConfig should be defined before importing the module:
<head>
<script>
window.ZeroMdConfig = {
cssUrls: [
'style.css'
]
}
</script>
<script type="module" src=".../zero-md.min.js"></script>
</head>
You're right that the gist above is semantically equivalent to the one below:
<zero-md src="content.md">
<template>
<link rel="stylesheet" href="style.css">
</template>
</zero-md>
Second thing - if you're using an external stylesheet, that file must be hosted. All modern browsers won't allow a .html file to access the local filesystem for security reasons. So if you're dragging the the .html file into the browser window to open it, I'm quite certain it wouldn't work.
However, when you're previewing it from VSCode, internally VSCode actually launches a HTTP server that serves these files to you - this probably explains why your preview works.
Not sure how else I can help though - perhaps if you can explain your use-case in detail, I (or others) can give some suggestions.

Google Maps loading files twice

I have really strange problem with Google Maps. Before closing body tag i'm putting this line:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY_IS_HERE&sensor=false"></script>
And when I'm trying to load the page I get such error:
Uncaught TypeError: Object #<Object> has no method 'Load'
I investigated a little bit, and I know that the problem is connected with loading google maps files twice. I previewed the file and google maps appends two libraries:
<script src="https://maps.gstatic.com/intl/pl_pl/mapfiles/api-3/15/11/main.js" type="text/javascript"></script>
and
<script src="https://maps.gstatic.com/intl/en_us/mapfiles/api-3/15/11/main.js" type="text/javascript"></script>
It's loaded dynamicaly. I think that the problem is with two languages: pl_pl and en_us. But why is it happening? Do You have any ideas how to solve this weird issue ? :D
Remove this script from the source:
<script src="https://maps.gstatic.com/intl/en_us/mapfiles/api-3/15/11/main.js" type="text/javascript"></script>
It will be loaded automatically by https://maps.googleapis.com/maps/api/js?key=API_KEY_IS_HERE&sensor=false

MathJax not working if loaded from local js file or if the source code is included

I am testing the MathJax javascript library in a local HTML file. It works and correctly renders math formulas if I include:
script type='text/javascript' src='http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'
in the HTML file, but it doesn't work if I include instead:
script type="text/javascript" src="/path_to/mathjax.js"
or even if I put the entire javascript source code.
What is the reason? I need to load mathjax.js from local js file into a local HTML file, so the first way doesn't help me.
(EDIT- I see an error: failed to load /extensions/MathZoom.js)
I had to load the entire MathJax distribution (17 Mb zip file), expand it and put the right configuration string in the HTML file. The final form is:
script type='text/javascript' src='/path_to/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML,local/local'
This may occur due to two reasons
1.You may have not extracted the entire zip folder, so first do that.
Still you are getting the error look into second reason.
2.You are not referring to the file correctly.
eg:
<script type ="text/javascript" src="pathto\mathjax.js">
You have typed an incorrect filename. Correct name of file is MathJax.js.Given below is the correct way.
<script type ="text/javascript" src="pathto\MathJax.js">
MathJax.js is the name of the file in the extracted folder(unless modified)
If all of this is not working,then link to the script in this way:
<script type="text/javascript" src="Pathto\MathJax.js?config=TeX-AMS-MML_HTMLorMML">
The reason that your script is not working is you are not including:
'?config=TeX-AMS-MML_HTMLorMML'

CKEditor : How to load the my own javascript file

I am using CKEditor in my web app and new to it. It seems my js file isn't downloading with CKEditor, how to include external js files in CKEditor ?
Configuration related js needs to be in config.js
All plugin related files go in the plugins plugins/[plugin_name]/plugin.js
You'll need to add them to the config using extraPlugins config.extraPlugins: 'plugin',
If you want to do something else you can just load another .js
for example:
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="customcode.js"></script></code>
in customcode.js you can put your eventhandling and overrides
CKEDITOR.on( 'instanceReady', function( ev )
{
alert("CKEditor is loaded");
});