I'm using MathJax on my website and I want to add some semantic support.
Currently, my MathJax configuration is to take TeX input and spit out HTML-CSS output (unfortunately MathML doesn't work too well in Chrome). I also have a jQuery function that takes the html of any .latex class and dumps it into the title attribute.
The following HTML...
<div class="latex">\[ a^2 + b^2 = c^2 \]</div>
with the following script...
/* jQuery */
$('.latex').attr('title', function() {
return $(this).html();
})
will output...
<div class="latex" title="\[ a^2 + b^2 = c^2 \]">
<div class="MathJax_Display">a2+b2=c2</div> <!-- becomes prettyprint in browser -->
</div>
Obviously the contents of div.MathJax_Display will be styled with a whole slew of spans and classes and styles. I'm just not going to type all that here. Anyway, after the math is rendered, users can hover over div.latex to see the TeX commands in a tooltip.
Now, what I want to do is define a new macro in my MJ configuration that will add a title attribute to a newly-created span of HTML-CSS output, given a bit of TeX input. Let's call that macro \title[2]. Here's what I want to be able to input:
<div class="latex">\[ a^2 + b^2 = \title{c}{'hypotenuse'}^2 \]</div>
And here's what I want it to output:
<div class="latex" title="\[ a^2 + b^2 = \title{c}{'hypotenuse'}^2 \]">
<div class="MathJax_Display">a2+b2=<span title="hypotenuse">c</span>2</div> <!-- prettyprint -->
</div>
If this happens, users who hover over the c in the math will get a tooltip that says "hypotenuse", but hover over any other area of the math and get the original input.
Here's my thinking for the algorithm:
//pseudo-code:
given the TeX input '\title{mathstr}{titlestr}':
var thespan = document.createElement('span');
$(thespan).attr('title', titlestr).html(mathstr);
somehow put this into the MJ output at the right place
Why not just use the action extension that defines \texttip and \mathtip for attaching tooltips to subexpressions? See the MathJax documentation for details.
Related
I'm writing equations using sphinx. My code looks like this:
.. math::
:label: eq1
\begin{eqnarray}
\begin{cases}
a_{11}x_{1} + \dots + a_{1m}x_{m} = b_1\\
a_{21}x_{1} + \dots + a_{2m}x_{m} = b_2
\end{cases}
\end{eqnarray}
This displays the label (1) on the right side of the first line, but I would to allocate it the center of this {cases}, namely, between the first and the second line.
How do I do this?
This question seems to pertain principally about MathJax usage.
By some experimenting I discovered it understands \smash and that using it provides the hoped for label placement. But perhaps there is some MathJax setting which would avoid using this \smash. Besides \smash works fine only for two or three "cases".
I have moved the \smash approach to second part, where also its drawbacks are explained. Indeed, I have since found a half-satisfying CSS approach.
At any rate, don't use eqnarray there.
CSS based approach
Create a file _static/custom.css in your source repertory with these contents.
.MathJax_Display {
transform: translate(0%,-50%) translate(0%,8px);
}
div.math {
transform: translate(0%,50%);
}
Add this at end of conf.py:
if html_theme != 'alabaster':
def setup(app):
app.add_stylesheet('custom.css')
For example I obtain this with 'classic' theme:
This works also with 'agogo' and 'alabaster' themes, but some fine tuning might be needed for equations with only one line to be positioned like the label.
In the case RTD theme it does not work at all.
Support may be browser dependent.
\smash approach
Text before.
.. math::
:label: eq1
\smash{\begin{cases}
a_{11}x_{1} + \dots + a_{1m}x_{m} &= b_1\\
a_{21}x_{1} + \dots + a_{2m}x_{m} &= b_2
\end{cases}}
Text after.
I get from make html (with classic theme)
conf.py contains
extensions = ['sphinx.ext.mathjax',
]
html_theme = 'classic'
By the way your eqnarray is not good mark-up. IF you use it you should use :nowrap: option. See Sphinx doc.
Note Of course usage of cases here is dubious because your example is one of equations. I added &'s but the spacing is one appropriate for cases, which is surely not the one expected. So remove them.
Here is mark-up which does not abuse cases environment:
Text before.
.. math::
:label: eq1
\smash{\left\{\begin{aligned}
a_{11}x_{1} + \dots + a_{1m}x_{m} &= b_1\\
a_{21}x_{1} + \dots + a_{2m}x_{m} &= b_2
\end{aligned}\right.}
Text after.
CAVEAT The smash trick only works with two (perhaps three) equations, even in MathJax.
Trying to use kendo-mobile-switch inside kendowWindow. The switch is displayed fine, but doesn't toggle. On the same page with the same included kendo css/js the same mobile switch toggles just fine if used on the page itself, not inside the kendoWindow.
I've looked in the page source and it looks like when switch does toggle, the following transformation is added:
<span class="km-switch-handle" style="transform: translateX(27px) translateY(0px);">
The same switch in the "non-toggled" state looks like this:
<span class="km-switch-handle" style="transform: translateX(0px) translateY(0px);">
However, if I look at the source of the toggle inside kendoWindow, in both toggled and non-toggled states it looks like this:
<span class="km-switch-handle" style="transform: translateX(0px) translateY(0px);">
I've also dogged through kendo.all.js and it looks like when switch is toggled, it computes the offset it needs to transform itself based on the position. My guess is when displayed in the kendoWindow, get position logic fails/doesn't work properly:
_position: function (position) {
var that = this;
that.position = position;
that.handle.css(TRANSFORMSTYLE, 'translatex(' + position + 'px)');
if (that._animateBackground) {
that.background.css(MARGINLEFT, that.origin + position);
}
},
Any idea what the problem might be?
Guess I'm going to answer my own question:
Found a very similar issue when mobile switch is used inside the list view:
http://www.telerik.com/forums/angular-kendo-mobile-switch-in-list-view-template
The switch in this example behaves exactly the same as it does in kendoWindow. Judging by the title of the issue, the problem was with "angular compilation is performed before the items are inserted into the DOM". This would explain why position is not calculated in the case with kendoWindow.
I have a HTML like this.
<span class="vm-video-side-notification-text-item">
Includes copyrighted content
</span>
I use
var x = document.querySelectorAll("span + a");
alert(x.length);
the alert is "0"... I don't know why.
I see the w3school says
element+element
div + p
Selects all <p> elements that are placed immediately after <div> elements
so I try span + a. Can anyone correct my mistake?
You're conflating elements with tags.
While the start tag of the a is directly after the start tag of the span indeed, the a element is inside the span element.
So, in order for your example to work, you can either
change the query selector to "span > a" for "any a directly inside a span"
var x = document.querySelectorAll("span > a");
alert(x.length);
or change the html to have the a element after the span element
<span class="vm-video-side-notification-text-item">
</span>
Includes copyrighted content
(... but not both!)
I'm working on my first TYPO3 project and I'm done with the template, I just can't figure out how to make this work:
My page content is one column with header, text and title in every field.
I don't have any problems showing header and text on my website, but the image just won't work.
My image-path is fileadmin/user_upload/ and I can show it by setting the filename in my code, but thats obviously not what I want.
This is my Content Object Array, the code for the image is one of the versions I found when searching, but none of them worked:
page.20 = CONTENT
page.20.table = tt_content
page.20.wrap = <div id="content">|</div>
page.20.renderObj = COA
page.20.renderObj.wrap = <div id="news">|</div>
page.20.renderObj {
10 = TEXT
10.stdWrap.field = header
10.stdWrap.wrap = <div id="newstitle"><span>|</span></div>
20 = IMAGE
20.stdWrap.field = image
20.stdWrap.wrap = <div id="newsimage><img src="fileadmin/user_upload/|"</img></div>
30 = TEXT
30.stdWrap.field = bodytext
30.stdWrap.wrap = <div id="newstext"><p>|</p></div>
}
Hope someone could help me out, so I can finally finish this project!
Maybe I don't understood correctly, but... you don't need to write it yourself, just in your main TS template include CSS Styled Content from extension, so you can render whole column like:
page.20 < styles.content.get
If you need to change some wrappings (i.e.: to add your news CSS classes) you can also override them in setup field.
edit: Go to Templates > Template analyzer and check the EXT:css_styled_content/static/ code to find declaration you'd like to change (prepare for looong reading ;)) when you finally find it, just you can overwrite it in your TS, ie: to wrap text section of Text w/ image CE you can use:
tt_content.textpic.20.text.wrap = <div class="myNewsClass"> | </div>
Finally I'd suggest not to replace original classes but add your own so the above sample would be like:
tt_content.textpic.20.text.wrap = <div class="csc-textpic-text myNewsClass"> | </div>
de facto all these classes csc- has some CSS default styling therefore you can choose to align the image to the left or right (etc) out of the box. If you'll remove it you'll need to handle these things yourself.
The excellent dropdown jQuery UI Multiselect widget that supports styling via jQuery UI Themeroller still doesn't have support for including images within the drop down rows.
I didn't see any answers to this problem within Stackoverflow yet it seems to be asked regularly in various areas of the internet, so I am giving the answer to this question below..
(ALSO See my FIDDLE Example to see this in action,)
The following is based on an initial idea by 'pdlove' for introducing the use of images within this excellent UI Multiselect for jQuery.
Adding Image support for line items in check box text area is achieved by setting out the selector option rows html like this:
<option value="somevalue" image="yourimage.jpg" class="multSelktrImg">
normal visible text
</option>
I would also add a class control to your style sheet css file to set the image size being rendered in the option line items of the drop down, along with a couple of position settings for the image, label and span text.
In this example I use the class name 'multSelktrImg', so within the css file it would look something like this:
.multSelktrImg span{position: relative;top: 10px;vertical-align: middle;
display: inline-flex;}
.multSelktrImg input {vertical-align: -2px;}
.multSelktrImg img {position: relative;height: 30px;margin: 2px 6px;top: -10px;}
Now for the change in the src/jquery.multiselect.js file
Search for the following matching code around line 130 (depending on what version id of the script you are using):
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
title = this.innerHTML,
description = this.title,
....
ADD the following line above "title = this.innerHTML,":
image = this.getAttribute("image");
so that it looks like this:
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
image = this.getAttribute("image");
title = this.innerHTML,
description = this.title,
Now Search for the following matching code around line 180:
// add the title and close everything off
html += ' /><span>' + title + '</span></label></li>';
....
Replace the code line with the following to allow for rendering of your images:
// add the title and close everything off
html += ' /><span>';
if (image != null) {
html += '<img src="'+image+'" class="multSelktrImg">';
}
html += title + '</span></label></li>';
save the new version of the script src/jquery.multiselect.js file and now the images will appear in the multiselect drop down. Use the 'multSelktrImg' class value to control the size of the image displayed by altering the pixel size for the class in your css file.
In the FIDDLE version, I have altered the minimized version of the jQuery script, and created an initialisation of the Select object.