I am very new to javascript and docsify. I have the following scripts that work fine on a simple html page, but when I use docsify to generate them as a page only one of the script shows the graph. This is true for bunch of different pages I generated with several graphs using vegaEmbed.
<div id="script_1"></div>
<script type="text/javascript">
var spec = "https://raw.githubusercontent.com/gunrock/io/master/plots/gunrock_primitives_tc_avg_process_time.json";
vegaEmbed('#script_1', spec).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
</script>
<div id="script_2"></div>
<script type="text/javascript">
var spec = "https://raw.githubusercontent.com/gunrock/io/master/plots/gunrock_primitives_tc_edges.json";
vegaEmbed('#script_2', spec).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
</script>
You can find the page here: https://gunrock.github.io/docs/#/analysis/results_tc
I am including the following:
<!-- Vega and Vega-Lite Includes -->
<script src="https://cdn.jsdelivr.net/npm/vega#5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6"></script>
Per the documentation, only the first script tag is executed: https://docsify.js.org/#/configuration?id=executescript
Related
documentation aint too clear on how to style custom CAF receiver(if at all possible). even when adding styling to head, styling is not applied. in chrome inspector, it is clear the styling is never applied.
const context = cast.framework.CastReceiverContext.getInstance()
const playerManager = context.getPlayerManager();
// unrelated code
// end
/***
* start player
* */
context.start()
body {
--playback-logo-image: url('res/logo.png');
}
cast-media-player {
--theme-hue: 180;
--progress-color: rgb(255, 255, 255);
--splash-image: url('res/background-2.png');
--splash-size: cover;
}
<html>
<head>
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
<link rel="stylesheet" href="css/receiver.css" media="screen" />
</head>
<body>
<cast-media-player id="player"></cast-media-player>
<script type="text/javascript"
src="js/receiver.js">
</script>
</body>
</html>
I am still new at this so someone please correct me if I am wrong.
I think the "styling" is used when modifying the basic receiver that is available. If you are creating a custom receiver you must do so from scratch.
Since you are using the cast-media-player element I feel like you are looking to customize the ui appearance of the basic receiver.
It appears (from looking at the documentation) that you are missing this code in the js file.
from: https://developers.google.com/cast/docs/caf_receiver/customize_ui
// Update style using javascript
let playerElement = document.getElementsByTagName("cast-media-player")[0];
playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');
Edit: Sorry after looking back at it that is for changing the style using Javascript as apposed to CSS.
The question: How get the unobtrusiv validation of a german date running in MVC?
Because I can't find a running example of using globalize 1.x with MVC 5 to validate a german date I needed two days to get it running.
The problems are the order of the js-files, getting the cldr-data and putting it all together in an way it can be reused.
In the answer I will show my current solution.
In this zip-file (https://www.dropbox.com/sh/75dx6alck7itwia/AABFkcgOQVc1bUXFE_jYfR_da?dl=0) you find all files you need.
It includes
an short todo.txt (de and en)
the cldr-data (jsons) in sub-directories
a custom HTML-Helper-class wich writes the needed HTML/js-Scripts to the view.
It seems, that rendering by the helper not allways works. So if there are problems with that, copy the code to every (edit / new) view.
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/cldr.js"></script>
<script src="~/Scripts/cldr/event.js"></script>
<script src="~/Scripts/cldr/supplemental.js"></script>
<script src="~/Scripts/cldr/unresolved.js"></script>
<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize/currency.js"></script>
<script src="~/Scripts/globalize/number.js"></script>
<script src="~/Scripts/globalize/date.js"></script>
<script src="~/Scripts/globalize/plural.js"></script>
<script src="~/Scripts/globalize/relative-time.js"></script>
<script src="~/Scripts/globalize/unit.js"></script>
<script src="~/Scripts/jquery.validate.globalize.js"></script>
<script>
$(document).ready(function () {
// Use $.getJSON instead of $.get if your server is not configured to return the
// right MIME type for .json files.
$.when(
$.get("/Scripts/cldr/main/de/ca-gregorian.json"),
$.get("/Scripts/cldr/main/de/numbers.json"),
$.get("/Scripts/cldr/supplemental/likelySubtags.json"),
$.get("/Scripts/cldr/supplemental/timeData.json"),
$.get("/Scripts/cldr/supplemental/weekData.json")
).then(function () {
// Normalize $.get results, we only need the JSON, not the request statuses.
return [].slice.apply(arguments, [0]).map(function (result) {
return result[0];
});
}).then(Globalize.load)
.then(function () {
Globalize.locale("de-DE");
});
});
</script>
I hope it helps.
This solution based on the answer to MVC 5 - can not get globalisation running.
If you want to use a bündle, see MVC 5, globalize, validate german date: How to bundle the js-scripts?
<script src="js/jquery-2.1.1.js"></script>
<script src="notify/js/notify.js"></script>
<script src="notify/js/notify-bootstrap.js"></script>
<form>
<div id="userInfoDiv" name="userInfoDiv" style="padding-top:100px;padding-left:100px;">
<span class="box pos-demo">Notifyjs position div</span>
</div>
</form>
<script type="text/javascript">
$(".pos-demo").notify(
"Welcome Guest",
{ position:"right" }
);
$.notify("This notofication is working ","success");
</script>
Note : The notification is not displayed.Where as $,notify("") without position is working fine.
I have the same problem. Though I cannot confirm this the cause I think its because at the time of the notification, the elements do not actually exist in the DOM (the web page), so there is nothing for the element to tie to. It fails silently, I used the Google developer tools and could see no error being generated.
My solution. If you create a function and call in body.onload the element appears. e.g
<body onload="notifyme();">
And then somewhere in the page (at the bottom perhaps)
<script>
function notifyme() {
var s = "Hello";
$("#myelem").notify(s);
}
</script>
I know this works a I have just tried it. Works every time, every page.
I am using following code to create a html element in the page body with using YUI.
This code doesn't produce any error.
The issue is, the paragraph element is not created in the html page.
<html>
<head>
<title>YUI Test</title>
<meta charset="UTF-8">
<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>
<script>
// Create a YUI sandbox on your page.
YUI().use('node', function(Y) {
// Create DOM nodes.
var contentNode = Y.Node.create('<p>');
contentNode.setHTML('This is a para created by YUI...');
});
</script>
</head>
<body>
<h1>Page body section...</h1>
</body>
</html>
The node is created, but it is also detached from the DOM. You have to attach it to the DOM by using either
Y.one('body').append(contentNode);
or
contentNode.appendTo(Y.one('body'));
or
Y.one('nav.main-navigation').insert(contentNode, 'before');
or any of the other methods for manipulating dom in YUI.
I am new to YUI. Just trying to get a most basic functioning example working on my site.
Here is the code:
<button id="mytest">test</button>
<script type="text/javascript">
var helloWorld = function(e) {
alert("Hello World!");
}
</script>
<script type="text/javascript">
alert('xx');
YAHOO.util.Event.addListener("mytest", "click", helloWorld);
alert('x2');
</script>
The xx alert shows, but the x2 alert never does. And, clicking on the button does not fire the HelloWorld function.
I have the necessary include files:
<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/progressbar/assets/skins/sam/progressbar.css">
<!-- Dependency source file -->
<script src = "http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom.event.js" ></script>
<script src = "http://yui.yahooapis.com/2.8.1/build/element/element-min.js" ></script>
<!-- Optional dependency source file -->
<script src="http://yui.yahooapis.com/2.8.1/build/animation/animation-min.js" type="text/javascript"></script>
<!-- ProgressBar source file -->
<script src = "http://yui.yahooapis.com/2.8.1/build/progressbar/progressbar-min.js" ></script>
you should be sure the js files are included on you html files,the code your write is write!
Believe I found it. Or at least I was able to find other examples which worked. But in my case I believe the problem is the js files I was referencing in fact did not exist. Namely this file:
http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom.event.js
sure, it is yahoo dash dom DASH event, not yahoo dash dom DOT event