For a math project, the solution of a problem should be displayed in a Sweetalert2 modal. Unfortunately although using
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']]
},
"HTML-CSS": {
linebreaks: { automatic: true }
},
SVG: {
linebreaks: { automatic: true }
}
});
</script>
the automatic line break is not working in a Sweetalert2 modal (see image). Is there any fix for that.
With best greeting, Leon
It looks like your code is rendered in different from HTML-CSS and SVG processor (most likely a Common HTML). Try adding more configs, like:
CommonHTML: {
linebreaks: { automatic: true }
},
PreviewHTML: {
linebreaks: { automatic: true }
}
EDIT
You are also able to specify the output processor by hand with
MathJax.Hub.Register.StartupHook("End Jax", function () {
return MathJax.Hub.setRenderer("HTML-CSS");
});
You can check more possibilities to determining right processor here
Related
I'm trying to implement dark mode on my web where I have the particlesj script and I need to modify the color of the particles for the light mode. Is there any way to switch between JSON files? Let's say particles.json and particles-light.json. Appreciate any help so much.
I've made a sample using themes with tsParticles here: https://codepen.io/matteobruni/pen/vYejMNr
You can have a single config with configured themes like in the sample above.
I'll show below more in details how to achieve it.
// the particles container, used for calling the loadTheme method
let themeableContainer;
document.getElementById("btnLight").addEventListener("click", () => {
if (themeableContainer) {
// the theme name must be used when loading theme
themeableContainer.loadTheme("light");
}
});
document.getElementById("btnDark").addEventListener("click", () => {
if (themeableContainer) {
// the theme name must be used when loading theme
themeableContainer.loadTheme("dark");
}
});
tsParticles.loadJSON("tsparticles", "particles.json").then((container) => {
// assigning the loaded container
themeableContainer = container;
});
and the config looks like this
{
"fpsLimit":60,
"particles":{
"move":{
"bounce":false,
"direction":"none",
"enable":true,
"outModes":"out",
"random":false,
"speed":2,
"straight":false
},
"number":{
"density":{
"enable":true,
"area":800
},
"value":80
},
"opacity":{
"value":0.5
},
"shape":{
"type":"circle"
},
"size":{
"value":{
"min":1,
"max":5
}
}
},
"themes":[
{
"name":"light",
"default":{
"value":true,
"mode":"light"
},
"options":{
"background":{
"color":"#fff"
},
"particles":{
"color":{
"value":"#000"
}
}
}
},
{
"name":"dark",
"default":{
"value":true,
"mode":"dark"
},
"options":{
"background":{
"color":"#000"
},
"particles":{
"color":{
"value":"#fff"
}
}
}
}
]
}
The theme object accept those values, the options inside are a whole options so you can override everything from the background to the particles options.
In the GitHub reop you can find the following example:
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
I guess that you can probably call this load() function with a new JSON file when needed.
Alright so I've been trying and finally came to a solution. What I've done is to create a function associated to the theme selector checkbox.
particlesJS.load('particles-js', 'assets/particles.json');
function ThemeSwitch() {
if (document.getElementById('checkbox').value === 'dark') {
particlesJS.load('particles-js', 'assets/particles-light.json');
document.getElementById('checkbox').value = 'light';
} else {
particlesJS.load('particles-js', 'assets/particles.json');
document.getElementById('checkbox').value = 'dark';
}
}
And this is the input.
<input type="checkbox" id="checkbox" name="check" value="dark" onclick="ThemeSwitch()"/>
Good or bad (have no JS idea pretty much), it is working.
I did some research on this and still can't find a good solution for it. I wrote my app in ExtJS 4.1 and when I run it on an iPod the dragging functionality is disabled by default (which is what I want), but if I write the same app in ExtJS 6.2 all windows can be draggable which causes issues of visibility of the app. With that being said, Does anyone know how to disable window dragging when using Tablets (iPod, iPad, etc.)? I'm using ExtJS 6.2
Here's my working code that works great for a single window, but I want a general solution that will stop ALL windows from being dragged.
var win = Ext.create('Ext.Window', {
title: "My Window",
width: 500,
modal: true,
layout: 'fit',
items: form,
buttons: [{
text: 'Close',
handler: function() {
win.hide();
}
}]
});
win.show();
if(Ext.os.deviceType === 'Tablet') {
win.dd.disable();
}
A "global solution" sounds like you want to use an override to apply one of the other answers globally to your application:
Ext.define('MyAppName.override.Window', {
override: 'Ext.window.Window',
initComponent: function() {
this.callParent(arguments);
if(Ext.os.deviceType === 'Tablet') {
this.dd.disable();
}
}
})
or
Ext.define('MyAppName.override.Window', {
override: 'Ext.window.Window',
initComponent: function() {
if(Ext.os.deviceType === 'Tablet') {
this.draggable = false;
}
this.callParent(arguments);
}
})
To make the override work, put it into the file app/override/Window.js and add a reference to your requires array in Application.js:
requires: [
'MyAppName.override.Window'
],
You are looking for Ext.os class.
More precisely Ext.os.is method, according to the docs it has all the values you would need.
I am not sure why you want to block only iPads and not tables in general. If you wan tablets than you can use if(Ext.os.deviceType === 'Tablet') {...}
Otherwise if(Ext.os.is.iPad) {...}.
UPDATE Solution:
If you want to force anything across all classes in the ExtJS you would use Ext.override.
So the solution would be to put at the beginning of the app this code:
if (Ext.os.deviceType === 'Tablet') {
Ext.override('Ext.Window', {
privates: {
initDraggable: function(){}
}
})
}
FYI You can check the Ext.Window source code. I had to override this method, the default value draggable: false doesn't work.
https://fiddle.sencha.com/#view/editor&fiddle/2iqi
To test it, just press F12 switch to table mode.
But this solution has 1 drawback:
If the target is a class declared using Ext.define, the override
method of that class is called
Which means this solution don't work when you use Ext.create('Ext.Window',{})
Solution for that would be to define our own Ext.Window class and than inside the app when you are using Ext.create('Ext.Window' you would use Ext.create('Fiddle.view.MyWindow', and when we have our own function already we don't need to use override but can put if directly into the class definition like this:
Ext.define('Fiddle.view.MyWindow', {
extend: 'Ext.Window',
alias: 'widget.mywindow',
draggable: (function(){
if (Ext.os.deviceType === 'Tablet') {
return false;
} else {
return true;
}
})()
});
https://fiddle.sencha.com/#view/editor&fiddle/2iqj
I don't know how to override it for Ext.create('Ext.Window' if you still insists on using it. One solution would be to re-write Ext.create or simply edit the framework source itself but I highly discourage from that.
Why you are not using draggable: false in window config
Here is some code in FIDDLE
var win = Ext.create('Fiddle.view.MyWindow', {
title: "My Window",
width: 500,
draggable: false,
modal: true,
layout: 'fit',
buttons: [{
text: 'Close',
handler: function() {
win.hide();
}
}]
});
win.show();
Following this page, I try to display a simple equation into a div container.
Here is an example on this jsfiddle link
It seems that equation is not interpreted as a Mathjax equation and I don't know how to make it rendered.
JS :
MathJax.Hub.Config(
{
messageStyle: "none",
TeX:
{
equationNumbers:
{
autoNumber: "all"
}
},
tex2jax:
{
inlineMath: [['$','$'], ['\\(','\\)']],
displayMath: [ ['\\begin{displaymath}','\\end{displaymath}'], ['\\begin{equation}','\\end{equation}'] ],
processEscapes: true,
preview: "none"
}
});
document.getElementById("containerCanvas").innerHTML = "$ax+b=c$";
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"containerCanvas"]);
Your jsFiddle loads the AsciiMath input jax, not the TeX input jax, so dollar not TeX-delimiter math will be processed. Try using config=TeX-AMS_CHTML instead of config=AM_CHTML.
I have a short reveal.js presentation hosted here on GitHub pages.
I want to wait for the page to fully load before auto-starting the presentation. If the connection is slow, awesomefonts don't get rendered in time, and the user can only see an empty block.
Is it possibile to wait some time before start?
Okay, so after a minute of browsing your code, I noticed that you probably need an onload block in your script before initializing Reveal.js. Try putting the
Reveal.initialize({
controls: false,
progress: true,
history: true,
center: true,
autoSlide: 2200,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true }
]
});
Inside of:
object.onload=function(){myScript};
Hope this helps. The presentation looks great btw.
put your init code inside window.onload() function
if you need multiple things to be loaded asyncronously, just create a myLoad() function and a objToBeLoaded counter, then each time an obj has loaded, make it call somethingHasLoad() function that will check for that counter and eventually call myLoad()
Although there is plenty of information on the web regarding splash images in Flowplayer, I am having difficulty finding anything useful when using Flashembed to embed video. Here is what I have, which does not work:
<script language="JavaScript">
flashembed("player", "flowplayer/flowplayer-3.1.5.swf", {
// "config" parameter is a complex JSON object, not just a simple value
config: {
splash: true,
clip: {
autoPlay: false,
autoBuffering: true,
playlist: [{url:"images/home-video-splash.jpg"}, {url: "http://myWebsite.com/video/myVideo.flv"}]
}
}
});
</script>
Any help would be greatly appreciated!
HAH! What a simple solution, rcdmk - you were right, and I also had some of my .js turned around the wrong way. So with your suggestion, and some proper syntax, which is always helpful, here is what I ended up with that now works:
<img src="images/home-video-splash.jpg" />
<script language="JavaScript">
flowplayer("player", "flowplayer/flowplayer-3.1.5.swf", {
// "config" parameter is a complex JSON object, not just a simple value
config: {
clip: {
playlist: [
{
url: 'images/home-video-splash.jpg'
},
{
url: 'http://myWebsite.com/video/myVideo.flv',
autoPlay: false,
autoBuffering: true
}
]
}
}
});
</script>