I'm trying to use a plugin called mark.js (https://markjs.io/). From my perspective I'm doing everything they say to, but the Chrome console keeps returning the error:
My html code is as follows:
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.0/mark.min.js"></script>
<script src="highlighter.js"></script>
</head>
<body>
<p>hello i am rob</p>
</body>
</html>
My javascript code, in a file called "highlighter.js", is as follows:
var context = document.querySelector(".context");
var instance = new Mark(context);
instance.mark("rob");
A screenshot from the plugin website:
I don't know what I'm doing wrong. Thanks for the help!
You have to have a class name of .context in order for it to recognise that as the context.
var context = document.querySelector(".context"); // <p> tag class name
var instance = new Mark(context);
instance.mark("rob");
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.0/mark.min.js"></script>
<!-- notice the class="context" on the paragraph tag -->
<p class="context">hello i am rob</p>
https://jsfiddle.net/e6yzpton/
To mark the entire document you could do something like this:
var context = document.querySelector("body");
var instance = new Mark(context);
var paragraph = document.getElementsByTagName("p")[0].innerHTML;
instance.mark(paragraph);
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.0/mark.min.js"></script>
<body>
<p>and it was all yellow</p>
</body>
https://jsfiddle.net/e6yzpton/2/
I got this code from the GitHub:
<script src="path/to/jSignature.min.js"></script>
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
<div id="signature"></div>
But it doesn't pull anything up on the actual webpage. I would think there is more code required but I don't know where to start.
Here is a minimal working example
<!DOCTYPE html>
<html lang="en">
<head>
<lang>
<title>Minimal working jSignature Example</title>
<meta charset="UTF-8">
<!-- Files from the origin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://willowsystems.github.io/jSignature/js/libs/jSignature.min.js"></script>
<head>
<script>
$(document).ready(function() {
// Initialize jSignature
$("#signature").jSignature();
})
// ripped from the description at their the Github page
function getBase64Sig(){
// get the element where the signature have been put
var $sigdiv = $("#signature");
// get a base64 URL for a SVG picture
var data = $sigdiv.jSignature("getData", "svgbase64");
// build the image...
var i = new Image();
i.src = "data:" + data[0] + "," + data[1];
// and put it somewhere where the sun shines brightly upon it.
$(i).appendTo($("#output"));
}
</script>
<body>
Put your signature here:
<div id="signature"></div>
<button onclick="getBase64Sig()">Get Base64</button>
<div id="output"></div>
</body>
</html>
I hope you can go on from here.
It is really as simple as they describe it to be, only their description of the actual example is a bit lacking for beginners.
Do I need to place the files in a local-server or any server to get the results?
index.html:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta char-set = "UTF-8">
<title>AngularJS | Passing Data between Different Scopes</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src = "controller.js"></script>
</head>
<body ng-app = "mainApp">
<div ng-controller = "app">
<li ng-repeat = "i in myRange">
{{i}} <br/>
</li>
</div>
</body>
</html>
controller.js:
var app = angular.module('mainApp', []);
app.controller('app', function($scope) {
var range = 10;
var myRange = [];
for (i = 0; i<range; i++)
{
myRange.push(i);
}
$scope.myRange = myRange;
});
When i'm running using localhost it gets the result i wanted. But when I run it without using any server or local-server it shows only the html page, not returning data from controller.js file. As i know this must work without using of any local-server. what's the wrong here?
Edit:
When i run the html file without using local-server the output is as follows.
As #csharpfolk suggested, the problem is with loading angular.js library use 'https://' instead of '//'. If you use '//' browser will try to load using 'file://' protocol.
So I want to use angularJS to get data from a server and plot the data using Plotly. I am running a server in the background. The HTML I am using is shown below. I think it is pretty straight forward.
<!DOCTYPE html>
<html>
<head>
<title>Testign Plotly</title>
<script type="text/javascript" src='plotly.min.js'></script>
<script type="text/javascript" src='jquery.min.js'></script>
<script type="text/javascript" src='angular.min.js'></script>
<script type="text/javascript" src='plotApp.js'></script>
</head>
<body ng-app='myApp'>
<div id="graph" style="width:600px;height:250px;"></div>
<script type="text/javascript" ng-controller='plotXY'>
// var data = [{
// x:[1,2,3,4],
// y:[5,3,6,12],
// }];
Plotly.plot( $('#graph')[0], {{data}} , {margin: {t:0}});
</script>
<hr><div ng-controller='plotXY'>{{data}}</div>
</body>
</html>
I have the angularJS script plotApp.js as shown below, also very simple ...
var app = angular.module('myApp', []);
app.controller('plotXY', function($scope, $http){
$scope.data = {};
$scope.refresh = function(){
$http.get('http://localhost:8080/data').success(function(data){
$scope.data = {};
for(k in data){$scope.data[k] = data[k].map(Number);}
$scope.data = [$scope.data];
});
};
$scope.refresh();
});
Now, The compiled HTML for this (saved from the browser) is shown below ...
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<title>Testign Plotly</title>
<script type="text/javascript" src="Testign%20Plotly_files/plotly.js"></script><style></style>
<script type="text/javascript" src="Testign%20Plotly_files/jquery.js"></script>
<script type="text/javascript" src="Testign%20Plotly_files/angular.js"></script>
<script type="text/javascript" src="Testign%20Plotly_files/plotApp.js"></script>
</head>
<body class="ng-scope" ng-app="myApp">
<div id="graph" style="width:600px;height:250px;"></div>
<script class="ng-scope" type="text/javascript" ng-controller="plotXY">
// var data = [{
// x:[1,2,3,4],
// y:[5,3,6,12],
// }];
Plotly.plot( $('#graph')[0], {{data}} , {margin: {t:0}});
</script>
<hr><div class="ng-scope ng-binding" ng-controller="plotXY">[{"y":[1.26642e-14,2.8044e-14,6.1484e-14,1.33457e-13],"x":[-10,-9,-8,-7]}]</div>
</body></html>
As you can tell, the portion within the div gets updates with the right data. However, that within the script doesn't!
Just so you know, If I use the data variable (the one that is commented out), I am able to see the plot. So Plotly is working.
I want the client to pull data from the server and have plotly display it. I can do it if I create the entire page from the server and send it over. However, I think that this way is much better. However, for some reason, I dont seem to be able to connect the data source in Plotly, to that in angularJS. I would really appreciate some help ...
The Plotly-method of updating the data seems to be through Plotly.restyle():
var update = {x: [[0,1,2], y: [[5,2,4]]};
Plotly.restyle(graphDiv, update, 0);
Just make sure that you use double arrays when you want to update an array. Plotly supports updating multiple traces at once via arrays, so [[0,1,2],[1,3,4]] would update two traces
I'm trying to use Knockout js in a simple web application.
Here's my dummy javascript code:
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
But when I run the index.html, the debug console says "ko.applyBindings is not a function"!
Help!
Thanks
You have not included the link to the knockout.js library in your source code or the link is wrong. Fix this and it will work.
<script src="/scripts/knockout-2.0.0.js" type="text/javascript"></script>
Where the /scripts directory is the location on the server where knockoutjs resides.
EDIT
Here is an example of your code that works.
<html>
<head>
<script src="knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
</script>
</body>
</html>