Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

147 lines (129 sloc) 5.768 kB
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=624">
<title>MathQuill Test Page</title>
<link rel="stylesheet" type="text/css" href="home.css">
<link rel="stylesheet" type="text/css" href="mathquill.css">
<style type="text/css">
body {
font-size: .8em;
}
#body {
padding: 1.25em;
}
h1 {
font-size: 2.5em;
}
td {
width: 33%;
}
button {
float: right;
}
.show-textareas .mathquill-textbox {
overflow: visible;
}
.shown-textarea {
position: relative;
display: inline;
}
.shown-textarea textarea {
position: absolute;
top: -45px;
user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
}
</style>
</head>
<body>
<div id="body">
<a href="http://github.com/laughinghan/mathquill"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub!"></a>
<h1><a href="http://mathquill.github.com">MathQuill</a> Tests <small>local test page</small></h1>
<button>Show Textareas</button>
<h3>MathQuill Editables</h3>
<table id="editables">
<tr><th colspan=3>Initial LaTeX
<tr>
<td><span class="mathquill-editable">\frac{d}{dx}\sqrt{x}=\frac{1}{2\sqrt{x}}</span>
<td><span class="mathquill-textbox">lolwut $a^2 + b^2 = c^2$. Also, awesomesauce: $\int_0^1 \sin x dx.</span>
<td><span class="mathquill-embedded-latex">\sqrt{\editable{x^2+y^2}}</span>
</table>
<p id="selection-performance"><b>Selection Performance</b>: <span class="mathquill-textbox">lolwut $a^2 + b^2 = c^2$. Also, awesomesauce: $\int_0^1 \sin x dx.</span>
<h3>Dynamic mathquill-ification</h3>
<table id="dynamic">
<tr><th colspan=3>Initial LaTeX
<tr>
<td><span>\frac{d}{dx}\sqrt{x} = \frac{d}{dx}x^{\frac{1}{2}} = \frac{1}{2}x^{-\frac{1}{2}} = \frac{1}{2\sqrt{x}}</span>
<td><span>\frac{d}{dx}\sqrt{x} = \frac{d}{dx}x^{\frac{1}{2}} = \frac{1}{2}x^{-\frac{1}{2}} = \frac{1}{2\sqrt{x}}</span>
<td><span>\frac{d}{dx}\sqrt{x} = \frac{d}{dx}x^{\frac{1}{2}} = \frac{1}{2}x^{-\frac{1}{2}} = \frac{1}{2\sqrt{x}}</span>
<tr><th colspan=3><code>.mathquill('redraw')</code>
<tr>
<td><span>\sqrt{ \left ( \frac{x^2 + y^2}{2} \right ) } + \binom{n}{k}</span>
<td><span>\sqrt{ \left ( \frac{x^2 + y^2}{2} \right ) } + \binom{n}{k}</span>
<td><span>\sqrt{ \left ( \frac{x^2 + y^2}{2} \right ) } + \binom{n}{k}</span>
</table>
<h3>Static LaTeX rendering (<code>.mathquill-embedded-latex</code>) tests</h3>
<table>
<tr><td><span class="mathquill-embedded-latex">^{\frac{as}{ }df}</span><td><span>^{\frac{as}{ }df}</span>
<tr><td><span class="mathquill-embedded-latex">e^{i\pi}+1=0</span><td><span>e^{i\pi}+1=0</span>
<tr><td><span class="mathquill-embedded-latex">\nthroot{n}{1}</span><td><span>\nthroot{n}{1}</span>
<tr><td><span class="mathquill-embedded-latex">\left ( n+1 \right ) + \frac{1}{\frac{n}{k}}</span><td><span>\left ( n+1 \right ) + \frac{1}{\frac{n}{k}}</span>
<tr><td><span class="mathquill-embedded-latex" style="font-size:1.4375em">\sqrt{x}+\sqrt{\frac{x}{\frac{ }{\frac{ }{ }}}}+\sqrt{\frac{x}{\frac{ }{\frac{ }{\frac{ }{\frac{ }{ }}}}}}</span><td><span>\sqrt{x}+\sqrt{\frac{x}{\frac{ }{\frac{ }{ }}}}+\sqrt{\frac{x}{\frac{ }{\frac{ }{\frac{ }{\frac{ }{ }}}}}}</span>
</table>
<p>There should be no space between here <span class="mathquill-embedded-latex"> </span>and here, even in IE8</p>
<p>Clicks/mousedown to drag should work anywhere in the blue box: <div class="math-container" style="border: solid 1px lightblue; height: 5em; width: 15em; line-height: 5em; text-align: center"><span class="mathquill-editable">a_2 x^2 + a_1 x + a_0 = 0</span></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
window.onerror = function() {
$('html').css('background', 'red');
};
</script>
<script type="text/javascript" src="build/mathquill.js"></script>
<script type="text/javascript">
$('button').click(function() {
$(document.body).toggleClass('show-textareas');
$('.textarea,.shown-textarea').toggleClass('textarea shown-textarea');
});
//FUGLY HACK: monkey-patch jQuery to show/hide static math textareas when prepended
var _prepend = $.fn.prepend;
$.fn.prepend = function(el) {
if ($(el).hasClass('textarea') && $(document.body).hasClass('show-textareas'))
$(el).removeClass('textarea').addClass('shown-textarea');
else if ($(el).hasClass('shown-textarea'))
$(el).removeClass('shown-textarea').addClass('textarea');
return _prepend.apply(this, arguments);
};
document.body.onload = function() {
setTimeout(function() {
$('#selection-performance .mathquill-textbox').each(function() {
var start = +new Date;
$('textarea', this).focus().trigger({type: 'keydown', ctrlKey: true, which: 65});
$(this).after(new Date - start);
});
});
};
$('#dynamic tr:eq(1)').each(function() {
var math = $('span', this);
math.eq(0).mathquill();
math.eq(1).mathquill('editable');
math.eq(2).mathquill('editable').mathquill('revert');
});
$('#dynamic tr:eq(3)').each(function() {
var math = $('span', this), td;
td = math.eq(0).parent();
math.eq(0).detach().mathquill().appendTo(td).mathquill('redraw');
td = math.eq(1).parent();
math.eq(1).detach().mathquill('editable').appendTo(td).mathquill('redraw');
td = math.eq(2).parent();
math.eq(2).detach().mathquill('editable').mathquill('revert').appendTo(td).mathquill('redraw');
});
// test selecting from outside the mathquill editable
$('.math-container').mousedown(function(e) {
$(this).find('.mathquill-editable').trigger(e);
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.