This is a follow-up question to Override mathjax accessibility blue box feature. I'm playing around with menuSettings in MathJax. However, I can't seem to get inTabOrder to work. Here is my current MathJax config:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$', '$']],
menuSettings: { inTabOrder: false }
}
});
</script>
Can anyone see what I'm doing wrong? Any suggestions will be appreciated.
It should be
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$', '$']]
},
menuSettings: { inTabOrder: false }
});
</script>
as the menuSettings block should be at the top level, not nested inside the tex2jax block.
Related
I am trying to enable siunitx for a (hosted) talkyard side and by adding the following to the html header:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js","[siunitx]/siunitx.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
TeX: {extensions: ["AMSmath.js","AMSsymbols.js", "sinuitx.js"]}
});
MathJax.Ajax.config.path['siunitx'] = 'http://rawgit.com/burnpanck/MathJax-siunitx/master/';
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<script>
talkyard.postElemPostProcessor = function(elem) {
console.log('Telling MathJax to post process elem: ' + elem);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, elem]);
};
</script>
However rawgit seems to be down now and I didn't find another server for it. So how can I enable the siunitx extension on a hostet talkyard site?
On my Web page I put translate widget when i resize browsers widged does not change size
I tried change css but i can change only css for Iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="google_translate_element"></div>
</body>
</html>
do you heve any solution?
Google Translate popup Layout - responsive fixed
<div id="google_translate_element" style="text-align: center;"></div>
<style>
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
.goog-te-menu-frame {
max-width:100% !important;
}
.goog-te-menu2 {
max-width: 100% !important;
overflow-x: scroll !important;
box-sizing:border-box !important;
height:auto !important;
}
</style>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
function changeGoogleStyles() {
if($('.goog-te-menu-frame').contents().find('.goog-te-menu2').length) {
$('.goog-te-menu-frame').contents().find('.goog-te-menu2').css({
'max-width':'100%',
'overflow-x':'auto',
'box-sizing':'border-box',
'height':'auto'
});
} else {
setTimeout(changeGoogleStyles, 50);
}
}
changeGoogleStyles();
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Not the solution to resizing issue but maybe helpful. You can change the default layout in the init function of the google translate selector.
Change in the line
layout: google.translate.TranslateElement.InlineLayout.SIMPLE to layout: google.translate.TranslateElement.InlineLayout.VERTICAL or layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL.
These options will show the language choices in a vertical dropdown with also either the 'Made possible by Google Translate' label under or next to it.
You will not be able to adjust the layout of this widget using strictly CSS. The <a> elements containing links for all of the languages to choose from are laid out in <td> cells in rows. Therefore, they will not be laid out dynamically with resizing.
You can however, get around this by getting all the language links in the contained <iframe> and appending them to a <div> outside the <table>.
This should perform what you seek though may still require much CSS tweaking. Much of Google's UI elements are laid out manually with pixel dimensions and overridden attributes like overflow:hidden to avoid default (sometimes inconsistent) browser behavior. This solution may require a fair bit of [poking around the DOM][1] to determine where these adjustments are being done.
This should be executed in the top-most frame to access the <iframe> element and make changes to its CSS. Note that the selector is not a unique ID so it may return a different <iframe> than expected depending on the contents of your page.
var iframe = document.querySelector('.goog-te-menu-frame.skiptranslate');
if (iframe === null) {
console.error('Could not find iframe of language links');
} else {
// Force <iframe> visibility and auto-resizing
iframe.style.display = '';
iframe.style.height = '';
iframe.style.width = '99%!important';
This should be executed in the about:blank frame of the <iframe> to have access to the elements within.
// Get all the <a> elements
var anchors = document.querySelectorAll('a.goog-te-menu2-item');
anchors = Array.prototype.slice.call(language_anchors);
if (anchors.length < 1) {
console.error('Found no language links');
}
// Get the conatiner <div> that holds the table of links
var div = document.getElementById(':1.menuBody');
if (div === null) {
console.error('Could not find div containing table of language links');
} else {
// Remove width/height attributes to have <div> resize
div.style.height = '';
div.style.width = '';
// Iterate through all language links
anchors.forEach(function (a) {
// Set display to inline=block so its rendered like text
// This is what gets the elements onto a new line if they don't fit
a.style.display = 'inline-block';
// Append them directly to the <div>
div.appendChild(a);
});
// Remove the now empty <table> to keep things clean
div.removeChild(div.querySelector('table'));
}
This may break easily if Google changes their CSS class names or element IDs. Keep that in mind and happy rendering.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="google_translate_element"></div>
</body>
</html>
YOU NEED TO CHANGE THE "SIMPLE" TO "HORIZONTAL"
You can put this in your css file for the theme that you're using. Tweak it to make it work for you. Hope that helps!
select.goog-te-combo{width:100%!important;}
i've searched, i've tried but i couldn't find the answer.
I've got many images in isotope filtering, i've got imagesLoaded but images are still overlaping at each other in vertical.
Here's the link http://cpmedia.pl/test/portfolio.html
the code:
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.itemwrap',
layoutMode: 'horizontal',
horizontal: {
verticalAlignment: 0.5
}
});
});
});
and stil nothing...
First, you are loading jquery twice, once by itself and again with yepnope. Second, you are calling isotope twice as well, once with imagesloaded on #container ( which I don't see on your page) and again on . portfolioContainer, which does exist but is not called using imagesLoaded. You need to load jQuery once, and call isotope once and try this code:
$(function(){
var $container = $('.portfolioContainer');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.itemwrap',
layoutMode: 'horizontal',
horizontal: {
verticalAlignment: 0.5
}
});
});
});
If you want to use horizontal, then get it here and load it as well
ADDENDUM:
Looking at your source, you are still loading multiple copies of your js files. This is what I see in your source:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="assets/core/libs/js/loader.js"></script>
<script src="assets/core/libs/js/vendor/jquery.livetwitter.min.js"></script>
<script src="assets/core/libs/js/vendor/jquery.selestnav.min.js"></script><script src="assets/core/libs/js/plugins.js"></script>
<script src="assets/core/libs/js/main.js"></script>
<script src="assets/user/user.js"></script><script src="skinme/skinme.js"></script>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script> <script src="./assets/core/libs/js/jquery.min.js"></script>
<script src="./assets/core/libs/js/loader.js"></script>
<script src="./assets/html5lightbox.js"></script>
<script src="./assets/core/libs/js/jquery.isotope.min.js"></script>
<script src="./assets/core/libs/js/jquery.livetwitter.min.js"></script>
<script src="./assets/core/libs/js/jquery.jribbble.min.js"></script>
<script src="./assets/core/libs/js/jquery.selestnav.min.js"></script>
<script src="./assets/core/libs/js/plugins.js"></script>
<script src="./assets/core/libs/js/main.js"></script>
<script src="./assets/core/libs/js/user.js"></script>
<script src="./assets/core/libs/js/skinme.js"></script>
<script src="./assets/core/imagesloaded.pkgd.js"></script>
I'm having the classic overflow problem with masonry. I'm trying to load twitter cards but onload, they are still overlapping each other. They work once the screen is resized. FYI, I have imageLoad and masonry in there for sure. I'm doing this in rails so not sure how I would make a jsfiddle. Any help is much appreciated. Thanks!
here is my js code:
$(document).ready(function() {
$('.container').imagesLoaded( function(){
$('.container').masonry({
columnWidth: '.tweet-box',
itemSelector: '.tweet-box'
});
});
});
index.html.erb:
<main class="container">
<% #tweet.search("cnn").take(9).each do |j| %>
<section class="tweet-box">
<p>
<blockquote class="twitter-tweet"><p></blockquote>
<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</p>
</section>
<% end %>
</main>
I ended up fixing my problem with some recursion. FYI, I don't know if this is the best fix but it got it working for me. Open to a better answer if someone has anything.
$(document).ready(function() {
check_size();
check_width();
});
function check_size()
{
if($('.tweet-box').first().height() == 0)
{
// alert('loop called: ' + $('.tweet-box').first().height())
setTimeout('check_size()', 20);
}
else
{
// alert('initialized!!!! boo-ya')
var $container = $('.container').imagesLoaded( function() {
$container.isotope({
// options
itemSelector: '.tweet-box',
layoutMode: 'masonry'
});
});
}
}
This Worked for me, with the imagesloaded script installed.
<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/imagesloaded.pkgd.min.js"></script>
<script>
docReady(function() {
var grid = document.querySelector('.grid');
var msnry;
imagesLoaded( grid, function() {
// init Isotope after all images have loaded
msnry = new Masonry( grid, {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
});
});
</script>
For me a combination of the small script "imagesloaded" and a few additional lines of jQuery that fire masonry after all images are loaded did the trick. My page footer now looks like this:
<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/imagesloaded.pkgd.min.js"></script>
<script>
$('#catalogue').imagesLoaded( function(){
$('#catalogue').masonry({
columnWidth: 10,
itemSelector: '.item',
isAnimated: !Modernizr.csstransitions
/* isFitWidth: true */
});
});
</script>
I don't remember where I got the pinter from, but the script imagesloaded can be found here: https://github.com/desandro/imagesloaded
Does anyone know how to get the below to report a javascript error? (any browser)
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js">
</script>
<script type="text/javascript">
ObjWithEvent = {
testEvent: new YAHOO.util.CustomEvent("testEvent")
};
ObjSubscriber = {
handleTestEvent: function(){
alert('the next line will not show up in the error console');
not_a_valid_function_bro();
}
};
ObjWithEvent.testEvent.subscribe(ObjSubscriber.handleTestEvent);
ObjWithEvent.testEvent.fire();
</script>
</head>
<body>
</body>
Possibly one of the worst chosen default settings ever.....
YAHOO.util.Event.throwErrors is set to false by default, so if you want to see errors:
YAHOO.util.Event.throwErrors = true;