CodeMirror HTML mode not working - javascript

I'm trying to style code samples with CodeMirror, but it works partially - it applies the selected theme to the textarea but the syntax is not highlighted.
There is my page:
<textarea id="template-html" name="code" class="CodeMirror">
<!DOCTYPE html>
<foobar>
<blah>Enter your xml here and press the button below to display it as highlighted by the CodeMirror XML mode</blah>
<tag2 foo="2" bar="bar" />
</foobar>
</textarea>
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/codemirror.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/ambiance.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/solarized.css">
<script type="text/javascript" src="/site.com/js/libs/codemirror/codemirror.js"></script>
<script type="text/javascript" src="/site.com/js/libs/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript">
var config, editor;
config = {
lineNumbers: true,
mode: "text/html",
theme: "ambiance",
indentWithTabs: false,
readOnly: true
};
editor = CodeMirror.fromTextArea(document.getElementById("template-html"), config);
function selectTheme() {
editor.setOption("theme", "solarized dark");
}
setTimeout(selectTheme, 5000);
</script>
Here is an image of the result. It seems to work but without the syntax highlighting (image top), I've also tried without my CSS, but the result is the same (image bottom):
The problem is with mode: "text/html" which seems to be not working properly, if I use mode: "javascript" it colorizes the tags by the JavaScript syntax rules. How can I fix this?

CodeMirror parses HTML using the XML mode. To use it, the appropriate script must be included, same as with any other mode.
Add its dependency in your markup:
<script type="text/javascript"
src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>
and set the mode to xml:
config = {
mode : "xml",
// ...
};
In addition, you may want to configure the parser to allow for non well-formed XML. You can do so by switching the htmlMode flag on:
config = {
mode : "xml",
htmlMode: true,
// ...
};
See the XML/HTML mode demo for a live example.

Just in case if my experience can be helpful to someone.
I did following mistake:
<script src="lib/codemirror.js"></script>
<script type="text/javascript">
const editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
mode: "css",
lineNumbers: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
lint: true
});
</script>
<script src="addons/lint/lint.js"></script>
<script src="addons/lint/css-lint.js"></script>
<script src="addons/fold/brace-fold.js"></script>
<script src="addons/fold/foldcode.js"></script>
<script src="addons/fold/foldgutter.js"></script>
<script src="addons/fold/indent-fold.js"></script>
<script src="addons/fold/markdown-fold.js"></script>
<script src="mode/css.js"></script>
<script src="//unpkg.com/csslint#1.0.5/dist/csslint.js"></script>
This is wrong: I called first codemirror.js - main file, then initialized Editor and later called its assets. In this case it didn't work and it took time for me to find the issue (I was doing it in WordPress so I just made my script depend on codemirror.js only).

<script>
window.onload = function() {
var editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
mode: "text/css",
lineNumbers: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
lint: true
});
}
</script>

Related

How to implement VAST-ad using MediaElementJS and Youtube?

I try to implement VAST-ad, but it doesn't work. My code doesn't show VAST ad before playing video
Here is my code:
var player = new MediaElementPlayer('#id', {
playsInline: true,
vastAdTagUrl: 'url',
vastEnableSkip: true,
vastSkipSeconds: 3,
features: ['vast'],
vastAdsType: 'vast',
success: function(media, node, playerElement) {
}
});
Here is links:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="mediaelement-and-player.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/ads/ads.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/ads/ads.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/ads-vast-vpaid/ads-vast-vpaid.js"></script>
I have this error in Console:
Uncaught TypeError: Cannot set property 'mejs.ad-skip' of undefined
at Object.1 (ads.js:14)
Late Answer:
What is the exact url in your code vastAdTagUrl: 'url'?
It needs to be xml. For the sample of xml, you can go to: https://github.com/InteractiveAdvertisingBureau/VAST_Samples/blob/master/VAST%203.0%20Samples/Video_Clicks_and_click_tracking-Inline-test.xml
Also, for the features, need to have ads too:
features: ['vast','ads'],

Why does a BokehJS example fail in the browser?

I'm trying to figure out if BokehJS can meet my plotting needs for a minor dev project. When I try to copy the last example found on https://docs.bokeh.org/en/latest/docs/user_guide/bokehjs.html it fails with this backtrace in Chrome:
Uncaught TypeError: Cannot read property 'classList' of null
at c (bokeh-1.3.4.min.js:31)
at Object.n.add_document_standalone (bokeh-1.3.4.min.js:31)
at Object.t.show (bokeh-api-1.3.4.min.js:31)
at bokeh.html:58
The example is copied verbatim into a file, bokeh.html, and opened directly in the browser. bokeh.html:58 is the line
Bokeh.Plotting.show(plot);
The example is supposed to be a complete standalone html file so I must be missing something obvious here. My copy of the example can be found here https://pastebin.com/VizzJbH4
Any hints are greatly appreciated.
Move script tag with code at the end instead of head tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Complete Example</title>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.1.1.min.js" integrity="sha384-kLr4fYcqcSpbuI95brIH3vnnYCquzzSxHPU6XGQCIkQRGJwhg0StNbj1eegrHs12" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.1.1.min.js" integrity="sha384-xIGPmVtaOm+z0BqfSOMn4lOR6ciex448GIKG4eE61LsAvmGj48XcMQZtKcE/UXZe" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.1.1.min.js" integrity="sha384-Dc9u1wF/0zApGIWoBbH77iWEHtdmkuYWG839Uzmv8y8yBLXebjO9ZnERsde5Ln/P" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.1.1.min.js" integrity="sha384-cT9JaBz7GiRXdENrJLZNSC6eMNF3nh3fa5fTF51Svp+ukxPdwcU5kGXGPBgDCa2j" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.1.1.min.js" integrity="sha384-i2RsfqLVG6PTrWCD55m8pYN9N2XZRkYVASzqjzp79o0OpPmcp+APyuwCfItW7Kn2" crossorigin="anonymous"></script>
<script>
//The order of CSS and JS imports above is important.
</script>
</head>
<body>
</body>
<script>
// create a data source to hold data
var source = new Bokeh.ColumnDataSource({
data: { x: [], y: [] }
});
// make a plot with some tools
var plot = Bokeh.Plotting.figure({
title:'Example of Random data',
tools: "pan,wheel_zoom,box_zoom,reset,save",
height: 300,
width: 300
});
// add a line with data from the source
plot.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2
});
// show the plot, appending it to the end of the current section
Bokeh.Plotting.show(plot);
function addPoint() {
// add data --- all fields must be the same length.
source.data.x.push(Math.random())
source.data.y.push(Math.random())
// notify the DataSource of "in-place" changes
source.change.emit()
}
var addDataButton = document.createElement("Button");
addDataButton.appendChild(document.createTextNode("Add Some Data!!!"));
document.currentScript.parentElement.appendChild(addDataButton);
addDataButton.addEventListener("click", addPoint);
addPoint();
addPoint();
</script>
</html>

jqPlot : $.jqPlot is not a function error

I need to create charts on a website.
In my HTML code i have created a div with an ID.
This is my HTML code :
<script src="/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/jquery.jqplot.min.css" />
<script language="javascript" type="text/javascript" src="/js/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="/js/graph.js"></script>
<body>
<div id="graph" style="height:400px;width:300px;></div> //i want to have my chart here
</body>
In the js code i have only wrote an exemple from the official website of jqPlot :
$(document).ready(function() {
var chart_data = [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]];
var chart_opt = {
title:'Graph',
axes:{yaxis:{min:-10, max:240}},
series:[{color:'#5FAB78'}]
};
$.jqplot('graph', chart_data, chart_opt);
});
So my problem is that i have an error on the browser's console : $.jqplot is not a function
Any idea ?
You are getting this error because you have the jqplot inside the $(document).ready(function(). Try something like this.
$(document).ready(function(){
GetChart();
});
function GetChart(){
var chart_data = [[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]];
$('#graph').jqplot([chart_data], {
title:'Default Bar Chart',
seriesDefaults:{
renderer:$.jqplot.BarRenderer
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
}
Here is a working example - https://jsfiddle.net/xrnfqax3/
For this example to work, you will need to add the following references to your project-
jquery.min.js
jquery.jqplot.js
jquery.jqplot.css
jqplot.barRenderer.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.js
jqplot.categoryAxisRenderer.min.js
Make sure that jquery-*.js order is before jqPlot.js.
and use language="javascript" type="text/javascript" on all scripts tag.
Best Regards

How to set Arcgis Javascript dojoConfig relative path of packages

I am using Arcgis Javascript API. API is built on dojo toolkit. So I need to use dojo features in API. I am preparing dojo config file as following.
var pathRegex = new RegExp("/\/[^\/]+$/");
var locationPath = location.pathname.replace(pathRegex, '');
var dojoConfig = {
async: true,
parseOnLoad: false,
baseUrl:"js/",
packages: [
{
name: "application",
location: locationPath + '/js/application'
}]
};
I created a bootstrapper.js like following.
require(["application/main", "dojo/domReady!"], function (application) {
console.log("bootstrapper is running");
application.Run();
})
And index.html file is like this.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Arcgis Javacsript API Samples</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
</head>
<body class="claro">
<div id="map"></div>
<script src="//js.arcgis.com/3.6/"></script>
<script src="js/application/djConfig.js"></script>
<script src="js/application/bootstrapper.js"></script>
</body>
</html>
My application is hosted on IIS and has addres like this htp://domain/Demo/Sample1/index.html
when I run application, this code giving error like following.
"NetworkError: 404 Not Found - http://js.arcgis.com/3.6/js/dojo/application/main.js"
If I set bootstrapper.js file as following, problem is solwing.
require(["js/application/main.js", "dojo/domReady!"], function (application) {
console.log("bootstrapper is running");
application.Run();
})
Try to change your script order in index.html file. Your config settings should load before CDN.
<div id="map"></div>
<script src="js/application/djConfig.js"></script>
<script src="//js.arcgis.com/3.6/"></script>
<script src="js/application/bootstrapper.js"></script>
</body>

javascript: Getting "DOM Exception 9" while creating custom event

I'm using PhoneGap to develop an android app. in the index.html I load a js file like this:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles/style.css" />
<link rel="stylesheet" href="styles/loading.css" />
<script src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/cordova-2.5.0.js"></script>
<script type="text/javascript" src="scripts/readImages.js"></script>
<script type="text/javascript">
function onReadImage(event) {
//do something
}
document.addEventListener("onReadImage", onReadImage, false);
</script>
</head>
<body>
<!--
.....
-->
</body>
</html>
readImages.js
// Some codes
window.readImageEvent= document.createEvent("readImageEvent"); // line 4
readImageEvent.initEvent("onWeddingCakesRead", true, true);
//Some functions
readImageEvent.images = data;
document.dispatchEvent(readImageEvent);
but when I check LogCat, I see this error:
Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9 at file:///android_asset/www/scripts/readImages.js: 4
Any ideas?
finally I found out the problem.
I changed the below code:
window.readImageEvent= document.createEvent("readImageEvent");
to:
window.readImageEvent= document.createEvent("Event");
Because "readImageEvent" is not a proper event type. This link could be so useful
about this issue.
According to developer.mozilla.org
The createEvent method is deprecated.
I guess, you can try something like this:
var readImageEvent = new CustomEvent(
"onReadImage",
{
detail: {
images: data
},
bubbles: true,
cancelable: true
}
);
document.dispatchEvent(readImageEvent);
More information about usage, compatibility, etc can be found HERE

Categories

Resources