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
Related
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
I have created excel add-in using office.js. In my add-in, I need to open an existing workbook in my current workbook. I looked into Office.js api’s docs and found that I can achieve my requirement using “addFromBase64” function. They also noted that this function currently only for Public preview and we have to use other cdn for the same. I have written my code considering this point, but when running the code, existing worksheet not being added in my current workbook (nothing is happening) and I am not getting any error.
I am using this add-in on my Excel 2019 (64 bit) for Windows.
This is my code that I have written. Please let me know I am doing anything wrong and please guide me to resolved the same.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Excel Add-In with Commands Sample</title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/FabricUI/MessageBanner.js" type="text/javascript"></script>
<!--<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>-->
<!--To use addFromBase64 function for opening existing workbook in current instance-->
<script src="https://appsforoffice.microsoft.com/lib/beta/hosted/office.js" type="text/javascript"></script>
<!-- To enable offline debugging using a local reference to Office.js, use: -->
<!-- <script src="Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
<!-- <script src="Scripts/Office/1/office.js" type="text/javascript"></script> -->
<link href="Home.css" rel="stylesheet" type="text/css" />
<script src="Home.js" type="text/javascript"></script>
<!-- For the Office UI Fabric, go to https://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">
<!-- To enable the offline use of Office UI Fabric, use: -->
<!-- link rel="stylesheet" href="Content/fabric.min.css" -->
<!-- link rel="stylesheet" href="Content/fabric.components.min.css" -->
<script>
function insertWorkbook() {
try {
var myFile = document.getElementById("file");
var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
Excel.run(function (context) {
var startIndex = e.target.result.indexOf("base64,");
var mybase64 = e.target.result.substr(startIndex + 7, e.target.result.length);
var sheets = context.workbook.worksheets;
sheets.addFromBase64(
mybase64,
null, // get all the worksheets
Excel.WorksheetPositionType.after, // insert them after the worksheet specified by the next parameter
sheets.getActiveWorksheet()// insert them after the active worksheet
);
return context.sync();
});
};
})(myFile.files[0]);
reader.readAsDataURL(myFile.files[0]);
}
catch (err) {
var e = err;
}
// app.showNotification(document.getElementById(" bro").file);
}
</script>
</head>
<body>
<div id="content-main">
Select existing workbook
</div>
<div>
<input type="file" id="file" onchange="insertWorkbook()" />
</div>
</body>
</html>
Yes, addFromBase64 API has a beta preview version for Win32 and Mac. Due to our release criteria, this API is not able to release, because Excel online doesn't support insert sheets from external workbook. Now we are investigating the options to support Excel online in addFromBase64 API.
We would like to confirm with you some questions
Do you need to support Excel Online?
What kind of content type do you want to support by addFromBase64 API? it would be great if you could share us a sample workbook, we would like to investigate whether we can unblock your scenario or not.
BTW, I have tried your code it works fine in my end.
This is the gist I created from your code. can you have a try on your side? please let me if there is any issue or not.
https://gist.github.com/lumine2008/39513788f189169a9cf7c15220f94077
i used mathjax in HTML page , it works. but a problem related to fontsize exist.
<html>
<head>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<title> mathsjax</title>
</head>
<body>
\(x={72^2-{\sqrt{53^2}}\over 25}\)
$$x={72^2-{\sqrt{53^2}}\over 25}$$
</body>
</html>
why in the first syntax[(x={72^2-{\sqrt{53^2}}\over 25})] , fontsize is very small. and what to do to increase its size.
In addition, what is the difference between the two syntax's
\(x={72^2-{\sqrt{53^2}}\over 25}\) .........1
$$x={72^2-{\sqrt{53^2}}\over 25}$$ .........2
You should use \( for inline math, and \[ as equivalent of $$.
<html>
<head>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<title> mathsjax</title>
</head>
<body>
This is part of the line: \(x={72^2-{\sqrt{53^2}}\over 25}\). Those are not:
\[x={72^2-{\sqrt{53^2}}\over 25}\]
$$x={72^2-{\sqrt{53^2}}\over 25}$$
</body>
</html>
EDIT
If it isn't enough you can also add \large or \huge.
In his comments OP says he is using HTML ckeditor, I suppose with the Mathematical Formulas widget. You can locate the demo of that widget in page linked and modify its source adding the following code:
<p><span class="math-tex">\( x={72^2-{\sqrt{53^2}}\over 25}\)</span></p>
<p><span class="math-tex">\[ x={72^2-{\sqrt{53^2}}\over 25}\]</span></p>
<p><span class="math-tex">\[ \large { x={72^2-{\sqrt{53^2}}\over 25} } \]</span></p>
<p><span class="math-tex">\[ \huge { x={72^2-{\sqrt{53^2}}\over 25} } \]</span></p>
This should be the result:
You can use {\displaystyle{...}} to force an expression or subexpression to use the sizes and spacing that would be used for a displayed equation. For fractions in particular, if you have the AMSmath extension loaded, you can use \dfrac{}{} in place of \frac{}{} to get a fraction in display style.
I just use Phaser and saw some example code like below. In the Rox.Boot.prototype function, the .load, .physics, etc, are all in game(Phaser.Game). How does this inheritance happen?
Rox = {
score: 0,
music: null,
orientated: false
};
Rox.Boot = function (game) {
};
Rox.Boot.prototype = {
preload: function () {
this.load.image('preloaderBar', 'images/preload.png');
},
create: function () {
this.physics.startSystem(Phaser.Physics.ARCADE);
this.input.maxPointers = 1;
this.state.start('Preloader');
},
};
To use Phaser, you have to have a phaser.min.js or phaser.js file which you can get here. I use the phaser.min.js file instead of the phaser.js file because I don't need the extra features that the phaser.js file has (debugging); phaser.min.js will have all the same methods, classes, properties, etc as phaser.js.
They tell you to download the whole GitHub repo, but really you just need the Phaser JS file.
After you add the phaser.min.js file to your project, make sure it's the first script you call in the head of your HTML file; you should be able to use Phaser in the following JS files after that.
Here is what my index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FILL_IN_GAME_NAME_HERE</title>
<script src="phaser.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Main.css">
<script src="Boot.js" type="text/javascript"></script>
<script src="Preloader.js" type="text/javascript"></script>
<script src="Menu.js" type="text/javascript"></script>
<script src="Game.js" type="text/javascript"></script>
<script src="GameOver.js" type="text/javascript"></script>
<script src="HighScores.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game', false, false);
game.state.add('Boot', Game.Boot);
game.state.add('Preloader', Game.Preloader);
game.state.add('Menu', Game.Menu);
game.state.add('Game', Game.Game);
game.state.add('GameOver', Game.GameOver);
game.state.add('HighScores', Game.HighScores);
game.state.start('Boot');
</script>
</body>
</html>
I'm having some trouble figuring our why express is attaching every javascript file in my bower modules instead of just the ones I specify in the assets.json file. I get the feeling it's a daft mistake somewhere, I just don't understand where!
My assets file looks like so:
{
"css": {
"public/build/css/dist.min.css": [
"public/lib/angular-snap/angular-snap.min.css",
"public/lib/animate.css/animate.min.css",
"public/lib/bootstrap/dist/css/bootstrap.min.css",
"public/lib/font-awesome/css/font-awesome.min.css",
"public/lib/angular-toggle-switch/angular-toggle-switch.css",
"public/lib/intro.js/minified/introjs.min.css",
"public/lib/ng-table/ng-table.css",
"public/lib/leaflet-dist/leaflet.css",
"public/lib/leaflet.markerclusterer/dist/MarkerCluster.css",
"public/lib/leaflet.markerclusterer/dist/MarkerCluster.Default.css",
"public/css/common.css"
]
},
"js": {
"public/build/js/dist.min.js": [
"public/lib/angular/angular.min.js",
"public/lib/angular-bootstrap/ui-bootstrap.js",
"public/lib/angular-bootstrap/ui-bootstrap-tpls.js",
"public/lib/angular-cookies/angular-cookies.js",
"public/lib/angular-leaflet-directive/dist/angular-leaflet-directive.js",
"public/lib/angular-resource/angular-resource.js",
"public/lib/angular-route/angular-route.js",
"public/lib/angular-sanitize/angular-sanitize.js",
"public/lib/angular-snap/angular-snap.min.js",
"public/lib/angular-toggle-switch/angular-toggle-switch.js",
"public/lib/angular-ui-utils/ui-utils.min.js",
"public/lib/d3/d3.min.js",
"public/lib/highcharts-ng/dist/highcharts-ng.min.js",
"public/lib/intro.js/minified/intro.min.js",
"public/lib/leaflet-dist/leaflet.js",
"public/lib/leaflet-plugins/layer/tile/Google.js",
"public/lib/leaflet.markerclusterer/dist/leaflet.markercluster.js",
"public/lib/modernizr/modernizr.js",
"public/lib/momentjs/min/moment.min.js",
"public/lib/ng-table/ng-table.js",
"public/lib/snapjs/snap.min.js",
"public/lib/typeahead.js/dist/typeahead.bundle.min.js",
"public/lib/underscore/underscore-min.js",
"public/lib/underscore.string/dist/underscore.string.min.js",
"public/*/*.js",
"public/*/*/*.js"
]
}
}
I create an assets variable in express.js here:
// Import your asset file
var assets = require('./assets.json');
assetmanager.init({
js: assets.js,
css: assets.css,
debug: (process.env.NODE_ENV !== 'production'),
webroot: 'public'
});
And finally add these to my view using an each loop in my jade template
- each file in assets.js
script(type='text/javascript' src=file)
What I'm expecting to happen is that all the scripts I've listed in assets.json be added to my template. Instead it seems to include all .js files under public/lib - which as you can imagine causes some unusual results.
A sample of which is here
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="/lib/animate.css/Gruntfile.js"></script>
<script type="text/javascript" src="/lib/d3/d3.js"></script>
<script type="text/javascript" src="/lib/d3/d3.min.js"></script>
<script type="text/javascript" src="/lib/highcharts-ng/Gruntfile.js"></script>
<script type="text/javascript" src="/lib/highcharts-ng/karma.conf.js"></script>
<script type="text/javascript" src="/lib/intro.js/intro.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery-migrate.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="/lib/jquery/jquery.min.js"></script>
Turns out it was a daft mistake. The last two rules in my assets file included the lib folder because of the asterisks.