Using HTML and MathJax to render dynamic equations - html

So I am trying to make a binomial squared using code for a massive program I was attempting to get help with earlier. Since the code for the other program is huge I made a sub program to demonstrate what I am having issues with
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MathJax example</title>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async>
</script>
</head>
<body>
<p id="This_Is_What_I_Want"> $$ (a-b)^2 $$</p>
<p id="First_Input"> <input id="Value_A"></p>
<p id="Second_Input"> <input id="Value_B"></p>
<p id="Output"></p>
<p id="Activate"><button onclick="RUN()">Test This out</button></p>
<script>
function RUN() {
var a = document.getElementById("Value_A").value
var b = document.getElementById("Value_B").value
document.getElementById("Output").innerHTML = "$$(" + a + "-" + b + ")^2$$"
}
</script>
</body>
It runs in a browser just fine, but I cannot get the mathjax lib to work correctly after outputting the new equation


I needed to add in a piece of code that was missing
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MathJax example</title>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML" async>
</script>
</head>
<body>
<p id="This_Is_What_I_Want"> $$ (a-b)^2 $$</p>
<p id="First_Input"> <input id="Value_A"></p>
<p id="Second_Input"> <input id="Value_B"></p>
<p id="Output"></p>
<p id="Activate"><button onclick="RUN()">Test This out</button></p>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML,http://myserver.com/MathJax/config/local/local.js">
function RUN() {
var a = document.getElementById("Value_A").value
var b = document.getElementById("Value_B").value
document.getElementById("Output").innerHTML = "$$ (" + a + "-" + b + ")^2 $$";
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
</script>
</body>
Took a while to find it, but I found it. Hopes this helps someone in the future it is the Mathjax piece of code you need

Related

MathJax: How to make math copyable?

I am using MathJax to display some equations in an HTML document. What I want to do is explained in the following snippet:
<!DOCTYPE html>
<html>
<head>
<title>Math in HTML</title>
<meta charset="utf-8">
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
</head>
<body>
<h1>Mathematic equations</h1>
<p>I cannot select this equation:
$$\intop_0^1f(x)dx=\pi$$
nor this one $x^2 + 3x - 2 = \zeta$.
</p>
<p>I would like that when someone copy-pastes the previous paragraph he/she would get:
<code>I cannot select this equation:
$$\intop_0^1f(x)dx=\pi$$
nor this one $x^2 + 3x - 2 = \zeta$.</code>
</body>
</html>
Basically I would like to make the math selectable and when copied into the clipboard to get the Latex code. Is this possible?

Browser show blank page while using reactjs

Hi I am new in reactjs when i am running server.js file from terminal it show blank page on browser. The code of index.html file is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/babel-
core/5.8.23/browser.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-
dom.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('app')
);
</script>
</body>
</html>
Thanks in advance.

This is a working example.
In your code, the wrong part is the CDN link to babel-core. You may always check your console when working with JS (on Google Chrome: Ctrl + shift + J on Windows, Cmd + Opt + J on IOS).
On the other hand, I thought this was a good opportunity to also introduce components (see ).
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<div id="hello"></div>
<script src="https://unpkg.com/react#15.0.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.0.0/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel">
var Greeting = React.createClass({
render: function() {
return (
<p>Hello World</p>
)
}
});
ReactDOM.render(
<Greeting/>,
document.getElementById('hello')
);
</script>
</body>
</html>

HTML Source code iterpretation

i dont quite understand how this webpage displays it's data as the source code simply shows it's google tag code.
where does the code for the page layout come from?
http://www.trademe.co.nz/property/insights/address/Auckland/Orakei/Tautari-Street/42/60e6b7b1-d472-4fe2-bab1-7b8a9c18e641
<!DOCTYPE html>
<html>
<head ng-controller="headController as ctrl">
<base href="/">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0,height=device-height"/>
<meta name="description" content="Search over 1.5 million New Zealand properties and discover free estimated market values, sold prices, rateable valuations and more." />
<meta name="apple-itunes-app" content="app-id=550943614, affiliate-data=1010lc5k"/>
<title>House sold prices & property information | Trade Me Property Insights</title>
<link rel="stylesheet" href="/property/insights/css/app.css?v=Xq_vVMQyeqWVriJqrsx95fOd3kQR4nYrrMxb8sLFsl4" />
<!-- Google Tag Manager TODO add key in iFrame for production-->
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-WP683K>" height="0" width="0" style="display: none; visibility: hidden"></iframe>
</noscript>
<script>
var testRegEx = /test[1-9][a-z]/i;
var containerId = 'GTM-KMC2M2';
if (/test[1-9][a-z]/i.test(window.location.origin)) containerId = 'GTM-WP683K';
if (/.dev.trademe.co.nz/i.test(window.location.origin)) containerId = 'GTM-53CZK6';
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push(
{ 'gtm.start': new Date().getTime(), event: 'gtm.js' }
);
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'//www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', containerId);
</script>
<link href="/property/insights/styles.0f79228bbfea7a89f25f.bundle.css?v=qL0UK5rKQQTni727hQPz_P9WxK7qhDCkpkC3fzJ_Kuk" rel="stylesheet" /></head>
<body>
<input id="HostingEnvironment" name="HostingEnvironment" type="hidden" value="Production" />
<app>
<div class="loading-container">
<img src="/property/insights/images/loader.svg" />
<div class="loading-text">Just a moment...</div>
</div>
</app>
<script type="text/javascript" src="/property/insights/inline.9119e57f92f5676e8860.bundle.js?v=Ef2IUZ--xAfHSZwkaFyNspZ7PkjVfBAh8gQYGNLYbKc"></script><script type="text/javascript" src="/property/insights/polyfills.6292e3ee5e1ea889726b.bundle.js?v=ryy3leF6QDbqOPfS7dyHC0QD_QKX5vjwiNit2pfnyAU"></script><script type="text/javascript" src="/property/insights/vendor.d418eda2f891d23557f3.bundle.js?v=t7foCzMb9MYsSguXz23JEwECvn_9RDoKaJIfSpijuAs"></script><script type="text/javascript" src="/property/insights/main.54e60317a2b1ac8487cb.bundle.js?v=wqYIDaveFz1-mbQA_o01prc5-eoXnyOH9x83fK2gSFw"></script></body>
</html>

There is a bunch of script tags at the end of the page - these are all likely the scripts that load the application - layout and all.

Google fonts' Multi-name icon on cordova renders two different icons

I am converting a web application into a working hybrid mobile app through cordova. I'm using Google's material icons set and each multi-name icon (i.e. photo_camera) is translated in two different icons. This weird problem only occurs on cordova.
The Code:
Result:
Any idea?

i think your calling it wrongly.....when i try with your code i got proper icon like below
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<p>first</p>
<i class="material-icons ">photo_camera</i>
<p>second</p>
<i class="material-icons ">photocamera</i>
</body>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
</script>
</html>
In second case i tried in many ways by missing something in that photo_camera then i got as you mentioned everytime

HTML validation generates error

I am using google fonts and it generates following error for below link
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic|Roboto+Condensed|Source+Sans+Pro|Droid+Serif|Open+Sans+Condensed|Oswald|Molengo|PT Sans|Droid Sans')" rel="stylesheet" />
ERROR MESSAGE
Line 35, Column 289: Bad value for attribute href on element link: Illegal character in query: not a URL code point.
…if|Open+Sans+Condensed|Oswald|Molengo|PT Sans|Droid Sans')" rel="stylesheet" />
Syntax of URL:
Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20.
SAMPLE HTML
<html>
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic|Roboto+Condensed|Source+Sans+Pro|Droid+Serif|Open+Sans+Condensed|Oswald|Molengo|PT+Sans|Droid+Sans')" rel="stylesheet" />
</head>
<body>
</body>
</html>
UPDATE
This generates error
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto%20Condensed|Source%20Sans%20Pro" />
This Works
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto%20Condensed" />
When i add | to add multiple fonts it generates error so should i use multiple <link> tag to add fonts or ?
Confused about this is as below links is generate by on Google fonts font use on website
https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans|Roboto:400,700,400italic|Roboto+Condensed:400,300|Lato

Your example code working with JAVASCRIPT NOTATION
LINK and IMPORT may not help to eliminate the VALIDATION error - so please try with JAVASCRIPT notation it works well without any error.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8" />
<script type="text/javascript">
WebFontConfig = {google: { families: [ Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic|Roboto+Condensed|Source+Sans+Pro|Droid+Serif|Open+Sans+Condensed|Oswald|Molengo|PT+Sans|Droid+Sans ] }};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
</head>
<body>
</body>
</html>
You will need to substiture & sign with &
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
</head>
<body>
</body>
</html>
You may please use JAVASCRIPT notation for including the fonts from google
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Open+Sans::cyrillic-ext,latin,greek-ext,greek,vietnamese,latin-ext,cyrillic' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
</head>
<body>
</body>
</html>
Few more suggestions
Always include doctype at the top of HTML page
Try the IMPORT and JAVASCRIPT alternatives to include the fonts.
Please use your own google font - to avoid typos I tried with new fonts from google.

The character | is not allowed in the query component (nor anywhere else in a URI). It would have to be percent-encoded with %7C.
So
http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic|Roboto+Condensed|Source+Sans+Pro|Droid+Serif|Open+Sans+Condensed|Oswald|Molengo|PT+Sans|Droid+Sans')
should be this URI instead
http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic%7CMontserrat:700%7CMerriweather:400italic%7CRoboto+Condensed%7CSource+Sans+Pro%7CDroid+Serif%7COpen+Sans+Condensed%7COswald%7CMolengo%7CPT+Sans%7CDroid+Sans')

There is a space in the string near the end
PT Sans|Droid Sans')"
should be escaped as:
PT%20Sans|Droid%20Sans')"