I'm using MathJax in Anki to make notes. When I use "Cloze" note type and put some MathJax in cloze deletion, the lines are suddenly broken, but outside cloze deletion MathJax renders as expected. Here is an example 1.
My front template:
{{cloze:Text}}
<script type="text/x-mathjax-config">
MathJax.Hub.processSectionDelay = 0;
MathJax.Hub.Config({
messageStyle: 'none',
showProcessingMessages: false,
tex2jax: {
inlineMath: [['$', '$']],
displayMath: [['$$', '$$']],
processEscapes: true
},
SVG: {
scale: (!!navigator.userAgent.match(/(mac)|(mobile)/i) ? 100 : 180)
}
});
</script>
<script type="text/javascript">
(function() {
if (window.MathJax != null) {
var card = document.querySelector('.card');
MathJax.Hub.Queue(['Typeset', MathJax.Hub, card]);
return;
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG';
document.body.appendChild(script);
})();
</script>
And styling:
.card {
font-family: calibri;
font-size: 20px;
text-align: center;
color: black;
background-color: lightgray;
}
.cloze {
font-weight: bold;
color: blue;
}
How to fix this problem?
If you are using a WebKit-based browser (e.g., Safari or Chrome), then recent changes in WebKit may be the cause of your issue. The way MathJax checked for the available width for the math now causes unwanted line breaks in WebKit. (See this issue in the MathJax issue tracker.)
This was fixed in version 2.7.5, so you should upgrade to that. You are currently using 2.7.1, so changing
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_SVG';
to
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_SVG';
will do it. Changing it to
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_SVG';
will make sure you have the most current (2.x) version automatically (i.e., even though you are calling from 2.7.5, if there is an update to 2.7.6, you will be switched to that automatically).
Related
I use loadURL to load the web, I want to make some changes. Is there a way to inject a css snippet once the page is rendered?
There are extensions for chrome that do what I want (like UserCSS), but I understand that they can't be used inside an Electron App.
After your page has completed loading...
Here is an example of adding CSS:
// When document has loaded, initialize
document.onreadystatechange = (event) => {
if (document.readyState == "complete") {
// Document has finished loading here
var styles = `img#license {
animation: none;
animation-iteration-count: 1;
animation-fill-mode: forwards;
position: absolute;
z-index: 3;
width: 375px;
top: 204px;
left: 112px;
visibility: hidden;
}`
var styleSheet = document.createElement("style");
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
}
};
I use the above to display a unlicensed image over my Electron app from the preload.js script, as it has access to the document element.
Edit the CSS to your needs.
I'm trying to use the Cytoscape cola layout to render a graph that should apply a force directed layout while using it (so when dragging nodes around, they should act as if there is some gravity involved).
Relevant libraries:
https://github.com/cytoscape/cytoscape.js
https://github.com/tgdwyer/WebCola
https://github.com/cytoscape/cytoscape.js-cola
My first problem is that adding nodes to the graph via add(node) doesn't include them in the cola layout algorithm. The only way I found around that is to destroy the layout, re-initialize it and start it again. But this causes the nodes to jump in some cases.
I assumed that this was due to the fact that I completely destroyed the old layout but when setting up a minimal example, I realized that even just calling layout.stop() and layout.run() leads to nodes being repositioned.
In the following example, there is only one node. Moving the node via drag and drop, then pressing the "stop" button and then the "start" button causes the node to jump back to its initial position:
document.addEventListener('DOMContentLoaded', function(){
// Register cola layout
cytoscapeCola(cytoscape);
var nodes = [{ data: { id: 1, name: 1 } }]
var edges = [];
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node[name]',
style: {
'content': 'data(name)'
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle'
}
},
],
elements: {
nodes: nodes,
edges: edges
}
});
var layout = cy.layout({
name: 'cola',
infinite: true,
fit: false,
});
layout.run();
document.querySelector('#start').addEventListener('click', function() {
layout.run();
});
document.querySelector('#stop').addEventListener('click', function() {
layout.stop();
});
document.querySelector('#add-node').addEventListener('click', function() {
var id = Math.random();
cy.add({ group: 'nodes', data: { id: id, name: id } });
cy.add({ group: 'edges', data: { source: id, target: _.head(nodes).data.id } });
layout.stop();
layout.destroy();
layout = cy.layout({
name: 'cola',
infinite: true,
fit: false,
});
layout.run();
});
});
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px;
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
#buttons {
position: absolute;
right: 0;
bottom: 0;
z-index: 99999;
}
<!DOCTYPE>
<html>
<head>
<title>cytoscape-edgehandles.js demo for infinite layout</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/webcola/WebCola/cola.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-cola#2.4.0/cytoscape-cola.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>
<script src="cytoscape-edgehandles.js"></script>
</head>
<body>
<h1>cytoscape-edgehandles demo with an infinite layout</h1>
<div id="cy"></div>
<div id="buttons">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="add-node">Add Node</button>
</div>
</body>
</html>
Is this a bug or am I doing something wrong? Does anyone know how to stop and restart the layout without the nodes changing their position?
Thanks a lot,
Jesse
Okay actually you were very close #Stephan.
The problem was that WebCola centers the nodes when calling start by default:
https://github.com/tgdwyer/WebCola/blob/78a24fc0dbf0b4eb4a12386db9c09b087633267d/src/layout.ts#L504
The cytoscape wrapper for WebCola does not currently support this option, so I forked it and added the option myself:
https://github.com/deje1011/cytoscape.js-cola/commit/f357b97aba900327e12f97b1530c4df624ff9d61
I'll open a pull request at some point.
Now you can smoothly restart the layout like this:
layout.stop();
layout.destroy(); // cleanup event listeners
layout = graph.layout({ name: 'cola', infinite: true, fit: false, centerGraph: false });
layout.run()
This way, the nodes keep their position 🎉
Working on a little self project and having some trouble getting text placed on top of my background video.
At present, the code is sitting as follows:
<div class="video_container">
<div class="contentContainer">
<div class="skipButton">
<h1>Skip</h1>
</div>
<video id="tgVideo" autoplay loop>
<source src="videos/bgvidm4v.m4v" preload="none">
</video>
</div>
</div>
I am making the video full screen and keep this way when displaying on different size monitors by using the following JS
$(document).ready(function () {
var vid = $('video');
var vid_w_orig = 1280;
var vid_h_orig = 720;
// re-scale image when window resizes
$(window).resize(function () {
//Get the parent element size
var container_w = vid.parent().width();
var container_h = vid.parent().height();
//Use largest scale factor of horizontal/vertical
var scale_w = container_w / vid_w_orig;
var scale_h = container_h / vid_h_orig;
var scale = scale_w > scale_h ? scale_w : scale_h;
//Scale the video to fit any size screen
vid.width(scale * vid_w_orig);
vid.height(scale * vid_h_orig);
});
//Trigger re-scale of the video on pageload
$(window).trigger('resize');
});
This combination is working flawlessly for me so far. Only issue is getting the video to run on Android/iOS, but I think that's a limitation of the device.
What I am in need of is adding a piece of text for now that a user can click on to bring them away from the video. I am adding the href to the button after I get the text to display on top of the video.
I have found some tutorials online and have tried the below
.video_container .contentContainer {
position: absolute;
width: 100%;
height:100%;
background:#000;
opacity:0.5;
z-index:999;
}
.video_container .contentContainer .skipButton {
width:100%;
text-align:center;
}
.video_container .contentContainer .skipButton h1 {
color:#FFF;
text-transform:uppercase;
}
This is working for the most part, where I can see the text for a split second before it disappears behind the video.
Anyone have any tips for me?
Cheers!
You are setting the whole container to z-index: 999, this element .contentContainer contains also the video element. So I would put z-index only on the text containers alone with non-static position in order z-index to take effect.
.video_container .contentContainer {
position: absolute;
width: 100%;
height:100%;
background:#000;
opacity:0.5;
z-index:999; // not needed
}
.video_container .contentContainer .skipButton {
width:100%;
text-align:center;
position: relative;
z-index: 1000;
}
.video_container .contentContainer .skipButton h1 {
color:#FFF;
text-transform:uppercase;
position: relative;
z-index: 1000;
}
Goal:
When the width and height of the window are both small, the div should be the same size as the window;
When the width of the window is too big (>max-width), the div should keep its width as max-width, and be horizontally centered.
When the height of the window is too big (>max-height), the div should keep its height as max-height, and be vertically centered.
The example below has achieved everything, except for the last point.
How to center this div vertically in the window? I.e., I want the red areas to behave like the green ones, but just vertically instead of horizontally.
(This design is intended for a responsive design for mobile devices' screens. No JS involvement if possible.)
<!doctype html>
<html>
<head>
<style>
body,html{
height:100%;
margin:0px;
background:green;
}
#t1{
position:relative;
height:100%;
max-width:640px;
margin:0 auto;
background-color:red;
}
#t1-1{
position:absolute;
height:100%;
max-height:640px;
width:100%;
background-color:#dddddd;
overflow:hidden;/*demo purpose*/
}
/*the following stuff are for demo only*/
img{
position:absolute;
opacity:0.5;
}
img.w{
width:100%;
}
img.h{
height:100%;
}
</style>
</head>
<body>
<div id="t1">
<div id="t1-1">
<img class="h" src="http://www.google.com/images/srpr/logo3w.png" />
<img class="w" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
</div>
</body>
</html>
P.S. In this example, some desktop browsers internally set a min-width value to the whole thing (e.g. 400px in Chrome), unabling the div to keep shrinking horizontally.
You may need a little javascript to make it work:
First of all, you need an <div> element to layout, so I called it mask:
<div id="mask"></div>
Then, style it to fill the entire document, and give a max-width and max-height:
<style>
#mask {
position: fixed;
height: 100%;
max-height: 400px;
width: 100%;
max-width: 400px;
top: 0;
left: 0;
background: red;
}
</style>
This style do not perform the centering work, so you need your javascript to do it, we have a layoutMask function to determine if the div should be centered or not:
var mask = document.getElementById('mask');
function layoutMask() {
// here 400 is the same as the max-width style property
if (window.innerWidth >= 400) {
mask.style.left = '50%';
// to ensure centering, this sould be (max-width / 2)
mask.style.marginLeft = '-200px';
}
else {
mask.style.left = '';
mask.style.marginLeft = '';
}
// the same as width
if (window.innerHeight >= 400) {
mask.style.top = '50%';
mask.style.marginTop = '-200px';
}
else {
mask.style.top = '';
mask.style.marginTop = '';
}
}
At last, assign this function to the resize event, and execute immediately to ensure the <div> got layed correctly on first load:
if (window.addEventListener) {
window.addEventListener('resize', layoutMask);
}
else {
window.attachEvent('onresize', layoutMask);
}
layoutMask();
I tried this on my chrome, but I'm sure it does not work under IE6 since IE6 doesn't support the position: fixed; style, but it should work in most browsers.
I've made a jsfiddle for test.
As per my knowledge, with height:100% it is not possible. You need to use <center> to keep it in center horizontally and vertically. You may need to use margins also. Like:
margin-top:18%;
margin-left:40%;
You can add a #media query to achieve this effect
#media (min-height: 640px) {
#t1-1 {
top: 50%;
margin-top: -320px;
}
}
See JSFiddle for testing.
I'm using Fancybox 2.1.3 to display some text when the page loads. The problem is that it's wrapping it onto two lines when I want it to all be on one line. I've tried the width, autoSize, and fitToView properties, and none of them are doing anything.
I'd prefer not to modify the fancybox css files, since I'm also using fancybox to display some images, and those are working properly.
Javascript
<script type='text/javascript'>
$(document).ready(function(){
// Activate fancyBox
$('.text').fancybox({
padding : 0,
closeBtn : false,
topRatio : 0.75,
helpers : {
overlay: {
css: {'background' : 'rgba(0, 0, 0, 0.0)'}
} // overlay
} // helpers
});
// Launch fancyBox on first element
$('.text').eq(0).trigger('click');
// Close automatically
setTimeout('parent.$.fancybox.close();', 10000);
});
HTML
<a href='#textid' class='text'></a>
<div style='display: none'>
<div id='textid'>The display text goes here.</div>
</div>
CSS
#textid
{
font-size: 40px;
color: red;
}
#textid {
font-size: 40px;
color: red;
white-space: nowrap;
}