Blog with mathjax seen on a cellphone - html

I'm using mathjax in my blogspot blog and it works well when seen in a computer, but formulas don't transform when seen on a cellphone. I found this other blogspot blog where its formulas can be seen on a cellphone. Why? How can I make my blog transform formulas when seen on a cellphone too?

This is happening because the Mathjax script (as seen below) is not loading in the mobile template.
<script src='//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML,http://flengyel.github.io/mathjaxconfig.js,http://sonoisa.github.io/xyjax_ext/xypic.js' type='text/javascript'>
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [
['$', '$'],
["\\(", "\\)"]
],
displayMath: [
['$$', '$$'],
["\\[", "\\]"]
],
},
"HTML-CSS": {
availableFonts: ["TeX"]
}
});
</script>
To make it work on Mobile templates, you will have to enable Custom mobile template by going into Theme > Gear Icon > Selecting Custom from the Choose mobile theme dropdown, Refer to the image below -

Related

My website based on Jekyll does not work with MathJax

My problem
So you can have a look on my problem, see my blog post in this link:
https://matheusrabetti.github.io/statistics/bayesian-introduction/
In the end of the post you can see this - "This can be represented with a beta distribution with parameters and ( \beta=219):"
Here my markdown file have the code: This can be represented with a beta distribution with parameters $$\alpha=81$$ and \( \beta=219\):
I was expecting to see the Tex formula, when using $$, on my website and it's returning a blank space.
My path until know
In my _includes folder - check my github repository here https://github.com/MatheusRabetti/matheusrabetti.github.io - I have the following code in the _scripts.html file:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
displayMath: [ ['$$','$$'], ['\\[','\\]'] ],
processEscapes: true
}
});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
This javacript code has been in the _header.html and many other files.
I'm using the interpreter:
markdown: kramdown
My _layout posts files are including the _scripts.html:
{% include _scripts.html %}
</body>
</html>
Where my page is blank, inspecting the html page I found that:
The mean is
<script type="math/tex">
\frac{\alpha}{\alpha + \beta} = \frac{81}{81+219} = 0.270
<\script>
As you can see I have little knowledge on Jekyll or Octopress and I will give more informations as the help comes, because I don't know what's the problem and what can help you.

TradingView WebChart in UWP

I'm pretty new to coding, but I would like to create a simple UWP app for my phone just to see FX charts on-the-go - sadly, there are not too much related apps for this -.
I really like TradingView's WebCharts, and they provide real-time web widgets, what would fit for the task :)
Is it possible to show these in a UWP App?
Example:
<!-- TradingView Widget BEGIN -->
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
<script type="text/javascript">
new TradingView.widget({
"width": 980,
"height": 610,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "White",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"hideideas": true,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650"
});
</script>
<!-- TradingView Widget END -->
Thank you for the answers :)
Matt
TradingView's WebCharts js lib targets Web Application. It's not 100% fit for UWP(JS) Application.
I made a demo and found that the document.write inside TradingView's JS library will crash the UWP(JS) Application.
So as a personal workaround for using TradingView in UWP. You can do the following steps:
Download the WebCharts js lib from https://d33t3vvu2t2yu5.cloudfront.net/tv.js and add the js lib to your project.(UWP doesn't support remote js reference).
Open package.appxmanifest file->Content URIs tag->add https://dwq4do82y8xi7.cloudfront.net like below:
Open the downloaded js lib and search for document.write(widgetHtml). Modify the result line like below:
/*document.write(widgetHtml)*/document.getElementById("container").innerHTML=widgetHtml
Add a Div with id="container" to html:
<body>
<div id="container"></div>
<script src="js/main.js"></script>
</body>
Now you can get the WebCharts run in UWP App.
Here is the complete Demo: TradingViewSample.

Convert html containing mathjax markups to pdf

I have come across a tool called princexml that can convert html+css into pdf beautifully (see this video). With this it's even possible to write a PhD thesis using entirely html+css and get a nice pdf output in the end. But it seems it does not handle mathjax well. I guess this is because the mathjax part much be rendered in a browser first.
So I have a simple html file like this:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test math</title>
<style type="text/css">
</style>
<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>
MathJax.Hub.Config({
HTML: ["input/TeX","output/HTML-CSS"],
TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
equationNumbers: { autoNumber: "AMS" } },
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true },
"HTML-CSS": { availableFonts: ["TeX"],
linebreaks: { automatic: true } }
});
</script>
</head>
<body>
$x^2 + y^2 = 1$
</body>
</html>
After conversion using princexml:
prince --javascript x.html -o x.pdf
the equation is rendered verbatim in the pdf.
Is there a way to make this work?
This is because princexml doesn't yet support setTimeout method which Mathjax uses for its asynchronous functions. There are two workarounds:
Render your html in the browser such as Chrome first. Get the entire document (not the source but actual rendered document) saved into html file and then use it as input to prince. You can get entire rendered document from browser javascript console.
Second method is to use a headless browser like phantomjs. See also
https://web.archive.org/web/20150503191319/http://www.lelesys.com/en/media/technology/phantomjs-as-screen-capture-to-generate-image-pdf-files.html

Google Chrome extensions's content CSS won't apply until dev. console is opened and closed

Wierd.
This is part of my manifest:
"permissions" : [
"http://site.com/"
,"http://site.com/*"
,"http://www.site.com/*"
,"http://www.site.com/"
]
,"web_accessible_resources": [
"css/tweaks.css"
]
,"content_scripts" : [{
"matches" : [
"http://*.site.com/",
"http://*.site.com/*",
"http://site.com/*",
"http://www.site.com/*"
],
"css" : [
"css/tweaks.css"
],
"js" : [
"js/jquery162.js",
"js/tweaks.js"
]
,"run_at": "document_end"
}]
Here's tweaks.css:
*{
color: red !important;
font-weight: bold;
}
And finally the background.html (which is not important here)
<html>
<head>
<title></title>
<script src="js/jquery162.js"></script>
<script src="js/js_extend/extend.js"></script>
<!--<script src="js/main.js"></script>-->
</head>
<body>
</body>
</html>
And, when i reload an extension (unpacked), then reload page, which must be customized by injected CSS, I see nothing. When I open developer console in google.chrome I can't see any custom styles applied to any element. After that I'm closing the console and SUDDENLY see all text gone red and bold, open the console and, guess what, see the "user stylesheet" with my injected rules.
I can't understand what's wrong. Before google had changed their manifest to version 2 i had one middle-sized extension with A LOT OF content CSS, which was working perfectly, now I can't inject even *{color:red} rule. Please, help me.
Chrome is 24.0.1312.14 beta-m
UPDATE: tweaks.js is empty
UPDATE: tested with 24.0.1312.14 m - same sh...
MORE UPDATE: Fixed it in some way. But i'm not fully confident about it.
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var isSite = ( tab.url && tab.url.indexOf('site.com') >= 0);
if ( isSite ){
chrome.tabs.executeScript(tabId, {
file: Paths.add_element //filepath
});
chrome.tabs.insertCSS(tabId, {
file: Paths.my_css_path //filepath
});
}
});
The trick is that you need to do it after all site.com rules applied.
It's a known bug in Chrome: See http://crbug.com/154905 and http://crbug.com/158012

Simple javascript slider issue w/ html

I am trying to figure out why this simple code isn't working. I'm implementing this:
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [750, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/images/allimages/vdance750x500.png", "", "", "Caption"],
["/images/allimages/vpoca750x500.png", "", "", ""],
["/images/allimages/vhat750x500.png", "", "", "" ],
["/images/allimages/vdance750x500.png", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
<title>Vanadia's Site</title>
</head>
<body>
<div id="fadeshow1"></div>
<br />
</body>
</html>
I am new to coding and wondering if there is a syntax error... all the images are in the right spot. I dont understand why this isn't working!
Any help would be appreciated.
Where is your doc type and opening html and head tags? Maybe you just didn't include them here, but make sure they aren't missing from your document. Aside from that, check your browser's JavaScript console to see if you're throwing an error. If you are, please post it for all to see.
I copied your code and changed the image paths (demo: jsfiddle.net/hJKMy/).
It is likely that your image paths are incorrect.