I'm writing a quiz in JS and my problem is that I need a lot of formulas, that's why I use MathJax, it works perfectly in HTML.
I'm trying to implement MathJax inside an object for questions and answers but it doesn't render.
This is the MathJax script:
<script type="text/x-mathjax-config"> MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]} });
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
</script>
Sorry if this question is repetitve or stupid, I just can't find the right solution.
Thank you in advance!
Related
I have the following page http://link.org/ (tested and is valid W3 HTML), where I am using the jquery cycle slideshow function (old version).
But even though the cycle function file is definitely being called, I am still getting an error: $(...).cycle is not a function
Would someone be able to look and see what the issue might be?
Thanks!
For some weird reason jQuery tools are invoking ready event before page is completely loaded, change order of scripts from:
<script type="text/javascript" src="includes/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="includes/jquery.tools.min.js"></script>
to
<script type="text/javascript" src="includes/jquery.tools.min.js"></script>
<script type="text/javascript" src="includes/jquery.cycle.all.min.js"></script>
and your error will be gone.
Simple example - two templates:
<script type="text/x-jsrender" id="tpl-test1">
<div>{{include tmpl="tpl-test2" /}}</div>
</script>
<script type="text/x-jsrender" id="tpl-test2">
<div>Hello World</div>
</script>
If I render tpl-test1, it displays "tpl-test2" in the browser instead of Hello World. If I render tpl-test2, it renders Hello World just fine.
What gives?
Boris, himself, answered my question. The {{include}} needs to specify a selector.
{{include tmpl="#tpl-test2" /}}
Thought I'd post this in case anyone else experiences a similar brain fart. ;-)
How do you load d3.js with SystemJS?
I currently use:
<html>
<head>
<!-- SystemJS -->
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('d3.min.js').then(function(){
System.import('myJavascript.js')
})
</script>
Which seems to work. Is this the most reasonable way to go?
I found little help in SystemJS documentation towards this end, so I am not even sure .then is the approach for waiting for an import. What might be the best way, also for production?
Above, I load d3.min.js from my own server, but a CDN approach is also of interest..
Thanks!
If your myJavascript.js is depend on d3 then just dynamically import your script and add d3 inside your own script
index.html
<script>
System.import('src/myD3App');
</script>
myD3App.js
import './d3.min.js';
I recommending to use jspm (created by Guy Bedford same as SystemJS). But that just a personal opinion.
I'm restructuring a page for a client, and I'm having some issues with the jQuery code I implemented on the page.
There's a pop-up lightbox that uses Prototype which appears when the page loads, and then there's marquee/scrollers on the top and right that I put there that use jQuery. I'm really unsure about what's causing the error.
I'm familiar with jQuery's noConflict, but I've tried pretty much every variation of it on this page and I still get an error - after a few seconds the marquees stop - and IE displays that "Errors on page" dialog, referencing line 464 ("Array length must be assigned a finite positive number").
Here is the page: -link removed by author-
Here is prototype.js: -link removed by author-
I have absolutely no idea what is causing this error and JavaScript isn't my strongest side.
When I first started seeing this error, I was Googling around for more general "Prototype + jQuery" errors, when I should have been looking for a solution specific to the exact problem I was dealing with.
Adding the terms "array length" and "line 464" actually led me to the solution to this specific problem, and here it is:
Updated from prototype v1.4 to v1.5.1.2 (v1.7, the latest release,
didn't work right and even produced a stack overflow error).
Changed around the order of the scripts, and changed noConflict:
<script src="/scripts/jquery-1.5.2.js" type="text/javascript"></script>
<script src="/scripts/jquery.Scroller-1.0.src_4.js" type="text/javascript"></script><!-- all _$_'s replaced with _jQuery_ -->
<script type="text/javascript">
<!--
// more jquery, all $'s replaced with jQuery
-->
</script>
<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>
<script src="scripts/prototype-1.5.1.2.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
// everything else, including prototype scripts
-->
</script>
And that's it! Now I don't get the "Line 464" error and all scripts work fine.
Thank you #Ken and #Diodeus for leading me to the solution.
You may need to go through the plugins and replace $( with jQuery(, since you need to use "jQuery..." instead of "$..." in no-conflict mode.
Surround the code that uses jQuery with
(function ($) {
... // Your code
})(jQuery)
This way it uses local $ which is bound to jQuery and and jQuery only.
Also it is considered a bad idea to use both frameworks on the same website. You can find jQuery replacements for pretty much all of Prototype plugins.
I would find plugins in the same library. jQuery has all the plugins you mentioned, so there's no need to try using both. These two libraries can be difficult to get working together.
If you're set on using both libraries, try this ordering:
1) other lib
2) jquery
3) noconflict call
4) all plugins
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="/scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$.noConflict();
-->
</script>
<script src="/scripts/jquery.Scroller-1.0.src_3.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<blink>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='/lightview.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript" src="/photography/js/scrollable.js"></script>
<script>
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div.scrollable").hide();
});
// Use Prototype with $(...), etc.
$('div.box').hide();
</script>
</blink>
My code isnt working im not sure why?
any advice?
You need to use jQuery.noConflict() to release $ back to prototype, like this:
jQuery.noConflict(); //restore $ to prototype
jQuery(document).ready(function(){
jQuery("div.scrollable").hide();
});
$('div.box').hide();
Though jQuery can do show/hide, so you may not need both libraries, depending on what you're doing (for example, there are lightbox plugins for jQuery and scrollable plugins for prototype, so you could go either way with using a single library for everything).
You can also give it an alias from the $ restoring call, it returns a reference to jQuery, so you can do this:
var $j = jQuery.noConflict(); //restore $ to prototype
$j(function(){
$j("div.scrollable").hide();
});
$('div.box').hide();
Once I had the same problem, using Prototype and jQuery on the same page, and specifying the jQuery.noConflict() function, but my stuff didn't fade in/out right (stuff were jumping weird and sometimes only worked on the first animation). When I disabled Prototype, my jQuery code did exactly what it was supposed to do. I came to the conclusion the jQuery and Prototype have the same function names and these cause conflict in some way.
Disable Prototype temporarily and see if your jQuery code performs as expected.