I am experiencing some trouble using Openseadragon:
This is my code for the viewer:
<div id="viewer"></div>
<script>
var viewer = OpenSeadragon({
preserveViewport: true,
visibilityRatio: 1,
defaultZoomLevel: 0,
id: "viewer",
sequenceMode: true,
tileSources: {
type:'image',
url:"https://api.digitale-sammlungen.de/iiif/presentation/v2/bsb10200197/canvas/1/view"},
showFullPageControl: false,
showHomeControl: false,
prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon#2.4/build/openseadragon/images/"
});
</script>
As you can see, I have a tileSource from the bayerische Staatsbibliothek in Germany.
Whenever I access the url directly in the browser, the image opens as intended, however, when I'm in my viewer in receive the error
Unable to open [object Object]: Error loading image at https://api.digitale-sammlungen.de/iiif/presentation/v2/bsb10200197/canvas/1/view
Can anyone tell me what I'm doing wrong?
all the best and thanks in advance
Are you looking to use the IIIF tilesources here? If so you will need to use the IIIF Image Information url for the tileSource and not the canvas. I would also remove type: 'image'.
<div id="viewer"></div>
<script>
var viewer = OpenSeadragon({
preserveViewport: true,
visibilityRatio: 1,
defaultZoomLevel: 0,
id: "viewer",
sequenceMode: true,
tileSources: {
url:"https://api.digitale-sammlungen.de/iiif/image/v2/bsb10200197_00001/info.json"},
showFullPageControl: false,
showHomeControl: false,
prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon#2.4/build/openseadragon/images/"
});
</script>
I have a probem with three options while configuring Mathjax v.3 in my application. The minimal code to reflect the problem is an html file and two js file, one being tex-svg.js downloaded from github and the other being my configuration file for mathjax.
Content of the HTML file reads
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
<script type="text/javascript" src="test_files/mathjax-config.js"></script>
<script type="text/javascript" src="test_files/tex-svg.js" async=""></script>
</head>
<body>
first we have $1+\tan(\alpha)^2=\frac{1}{\cos(x)^2}$, then we have $$\int_a^b f(x,\tau,\epsilon)\,dx$$ and last we would have<br>\begin{align}<br>\sin(x)<br>\end{align}<br>and then continue by going to the next line ...<br>... right here
</body>
</html>
and the content of the configuration file is as what follows
window.MathJax = {
options: {
renderActions: {
addMenu: [],
//checkLoading: []
}
},
loader: {
//load: ['[tex]/tagFormat']
},
tex: {
inlineMath: [ ["$","$"] ], // ["$","$"],["\$","\$"],["\(","\)"],["\\(","\\)"]
displayMath: [ ["$$","$$"] ],
processEscapes: true, // for \$ to mean a common dollar sign, not a math delimiter
//ignoreHtmlClass: 'tex2jax_ignore', // divs with class "tex2jax_ignore" are NOT to be rendered
//processHtmlClass: 'tex2jax_process' // divs with class "tex2jax_process" are to be rendered
//processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
//processRefs: true, // process \ref{...} outside of math mode
packages: {'[+]': ['tagFormat','includeHtmlTags','skipTags']},
skipTags: ["script", "style", "textarea", "pre", "code"], //their contents won't be scanned for math
includeHtmlTags: {br: '\n', wbr: '', '#comment': ''}, // HTML tags that can appear within math
digits: /^(?:[\d۰-۹]+(?:[,٬'][\d۰-۹]{3})*(?:[\.\/٫][\d۰-۹]*)?|[\.\/٫][\d۰-۹]+)/, // introduce numbers
tagSide: "right",
tagIndent: ".8em",
multlineWidth: "85%",
tags: "ams",
tagFormat: {
number: function(n){
return n.replace(/0/g,"۰").replace(/1/g,"۱").replace(/2/g,"۲").replace(/3/g,"۳")
.replace(/4/g,"۴").replace(/5/g,"۵").replace(/6/g,"۶").replace(/7/g,"۷")
.replace(/8/g,"۸").replace(/9/g,"۹");
}
}
},
svg: {
fontCache: 'global', // or 'local' or 'none'
mtextInheritFont: true, // required to correctly render RTL Persian text inside a formula
scale: 0.97, // global scaling factor for all expressions
minScale: 0.6 // smallest scaling factor to use
//matchFontHeight: true, // true to match ex-height of surrounding font
//exFactor: .5, // default size of ex in em units
//displayAlign: 'center', // default for indentalign when set to 'auto'
//displayIndent: '0' // default for indentshift when set to 'auto'
},
chtml: {
mtextInheritFont: true, // required to correctly render RTL Persian text inside a formula
scale: 0.97, // global scaling factor for all expressions
minScale: 0.6 // smallest scaling factor to use
//matchFontHeight: true, // true to match ex-height of surrounding font
//exFactor: .5, // default size of ex in em units
//displayAlign: 'center', // default for indentalign when set to 'auto'
//displayIndent: '0', // default for indentshift when set to 'auto'
//adaptiveCSS: true // true means only produce CSS that is used in the processed equations
}
};
The problem is with these options:
skipTags, includeHtmlTags, and tagFormat
any of them which I use, an error is written in console which says Invalid option as there is no default value. As far as I have learned, this error shows these are not loaded, but I don't know how to do so. Adding codes like load: ['[tex]/tagFormat'] gives another error when it cannot find the js file in a specific address, while MathJax3 is seemingly supposed to be a one single file solution.
Where am I wrong? and what's the solution?
Thanks in advance
There is an error in the documentation concerning the skipHtmlTags, includeHtmlTags and a few other options. They should be in the options sub-object, not the tex subject. Also, it is skipHtmlTags, not skipTags.
As for tagFormat, it is not included in the base tex-sag.js file, so you do need to load it separately. Since you have only copied the base tex-svg.js file, and no the tagFormat component, that will lead to a load failure (the message you are getting). It would be better if you installed the complete MathJax distribution if you are hosting your own copy, otherwise these kinds of load problems can occur. Otherwise, you might want to use the tex-svg-full.js file, which includes nearly all the TeX extensions.
Here's a working example, using the CDN, and tex-svg.js, while loading the tagFormat extension by hand (so the initial download is smaller).
<script>
window.MathJax = {
options: {
renderActions: {
addMenu: []
},
skipHtmlTags: ["script", "style", "textarea", "pre", "code"], //their contents won't be scanned for math
includeHtmlTags: {br: '\n', wbr: '', '#comment': ''}, // HTML tags that can appear within math
},
loader: {
load: ['[tex]/tagFormat']
},
tex: {
inlineMath: [ ["$","$"] ],
displayMath: [ ["$$","$$"] ],
processEscapes: true,
packages: {'[+]': ['tagFormat']},
digits: /^(?:[\d۰-۹]+(?:[,٬'][\d۰-۹]{3})*(?:[\.\/٫][\d۰-۹]*)?|[\.\/٫][\d۰-۹]+)/, // introduce numbers
tagSide: "right",
tagIndent: ".8em",
multlineWidth: "85%",
tags: "all",
tagFormat: {
number: function(n){
return String(n)
.replace(/0/g,"۰")
.replace(/1/g,"۱")
.replace(/2/g,"۲")
.replace(/3/g,"۳")
.replace(/4/g,"۴")
.replace(/5/g,"۵")
.replace(/6/g,"۶")
.replace(/7/g,"۷")
.replace(/8/g,"۸")
.replace(/9/g,"۹");
}
}
},
svg: {
fontCache: 'global', // or 'local' or 'none'
mtextInheritFont: true, // required to correctly render RTL Persian text inside a formula
scale: 0.97, // global scaling factor for all expressions
minScale: 0.6 // smallest scaling factor to use
}
};
</script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-svg.js">
</script>
Testing math:
\begin{align}
\sqrt{x^2<br>
+1}
\end{align}
I've left in the skipHtmlTags and includeHtmlTags options, even though these are the defaults and they could be removed. Also, the tagFormat.number function receives a number not a string, so you need to create the string from it before you can do the substitutions.
Finally, this example has pointed out that there is a timing issue between the tagFormat extension and the ams tag format (which isn't available until after the ams extension is registered), so I've used the all tagging for now. I will submit a bug report for that.
Edit
Here's a version that includes a patch that overrides the tagFormat extension with one that handles the ams tags properly. You can use it for now until MathJax is fixed.
<script>
window.MathJax = {
loader: {
load: ['[tex]/tagFormat']
},
startup: {
ready: function () {
var Configuration = MathJax._.input.tex.Configuration.Configuration;
var TagsFactory = MathJax._.input.tex.Tags.TagsFactory;
var tagFormatConfig = MathJax._.input.tex.tag_format.TagFormatConfiguration.tagFormatConfig;
var TagformatConfiguration = MathJax._.input.tex.tag_format.TagFormatConfiguration.TagformatConfiguration;
Configuration.create('tagFormat', {
config: function (config, jax) {
var tags = jax.parseOptions.options.tags;
if (tags !== 'base' && config.tags.hasOwnProperty(tags)) {
TagsFactory.add(tags, config.tags[tags]);
}
return tagFormatConfig(config, jax);
},
configPriority: 5,
options: TagformatConfiguration.options
});
return MathJax.startup.defaultReady();
}
},
tex: {
packages: {'[+]': ['tagFormat']},
tags: "ams",
tagFormat: {
number: function(n){
return String(n)
.replace(/0/g,"۰")
.replace(/1/g,"۱")
.replace(/2/g,"۲")
.replace(/3/g,"۳")
.replace(/4/g,"۴")
.replace(/5/g,"۵")
.replace(/6/g,"۶")
.replace(/7/g,"۷")
.replace(/8/g,"۸")
.replace(/9/g,"۹");
}
}
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-svg.js">
</script>
Testing math:
\begin{align}
\sqrt{x^2<br>
+1}\qquad \text{with AMS number}
\end{align}
$$
\sqrt{x^2+1}\qquad\text{with no number}
$$
I've removed the options that don't play a role in this in order to make this example a bit cleaner.
I'm working with typed.js to get some words typed. I would like the first word to be showing when the page loads and start the loop from there. In order to get this result I've just placed "nice" in between the span tags, did this the trick.
But... When looking to the following codepen, you can see that the first loop is correct. When the second loop starts, the first word (nice) is not being typed but just appears and disappears quickly. I could really use some help to fix this. Any thoughts?
var typewriter = $('.typewriter');
if(typewriter.length) {
function initTypewriter() {
var typed = new Typed(".typewriter", {
strings: $(".typewriter").attr("data-typewriter").split("|").map(function(e) {
return e
}),
typeSpeed: 80,
backSpeed: 75,
startDelay: 1000,
backDelay: 2000,
loop: !0,
loopcount: false,
showCursor: false,
callback: function(e){ } // call function after typing is done
});
};
initTypewriter();
};
<h2>A <span title="nice, clean, good" class="typewriter" data-typewriter="nice|clean|good">nice</span> example</h2>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
CodePen Link
Kind regards
I realise this question is over 2 years old now, but I came across this issue today and couldn't find a solution either so put together a workaround.
Essentially, create 2 instances of Typed JS.
The first removes the existing text and uses the onComplete method to remove itself, clear the text content from the DOM and then setup the second instance to do the actual loop.
My example has no dependencies outside of Typed JS, but you could adapt to jQuery selectors, etc, pretty easily.
Demo here: https://codepen.io/jneale/pen/pogyzXK
HTML
<h1>Hello <span class="typed-replaced">world</span></h1>
Javascript
function setupTypedReplace() {
// the text node to type in
var typed_class = 'typed-replaced';
// the original text content to replace, but also use
var replace_text = 'world';
var options = {
strings: ['there', 'buddy', replace_text], // existing text goes at the end
typeSpeed: 80,
backSpeed: 60,
backDelay: 1000,
loop: true,
smartBackspace: false,
cursorChar: '_',
attr: null
};
// clear out the existing text gracefully then setup the loop
new Typed('.' + typed_class, {
strings: [replace_text, ''],
backSpeed: options.backSpeed,
backDelay: options.backDelay,
cursorChar: options.cursorChar,
attr: options.attr,
startDelay: 700,
onComplete: function (t) {
// existing text has now been removed so let's actually clear everything out
// and setup the proper Typed loop we want. If we don't do this, the original
// text content breaks the flow of the loop.
t.destroy();
document.getElementsByClassName(typed_class)[0].textContent = '';
new Typed('.' + typed_class, options);
}
});
}
setupTypedReplace();
The following Instafeed code shows not 5 but 6 images, and the #load-more button is hidden, indicating hasNext() is false:
var tagged_cofiwear = new Instafeed({
target: 'instagram-tagged',
get: 'tagged',
tagName: 'cofiwear',
clientId: '8852afa8788546a199c37543b77b043c',
sortBy: 'most-recent',
limit: 5,
template: '<a target="_blank" href="{{link}}"><img src="{{image}}" /></a>',
after: function() {
if (!this.hasNext()) {
$('#load-more').hide();
}
}
});
tagged_cofiwear.run();
$('#load-more').on('click', function() {
tagged_cofiwear.next();
});
To try and troubleshoot, I found a jsfiddle with Instafeed pagination that works (http://jsfiddle.net/unuLyzx0/107/) and edited tagName: 'justanotherinvegas' to be tagName: 'cofiwear'.
Here is the result, which also shows the wrong number and the load more button doesn't work :(
http://jsfiddle.net/unuLyzx0/108/
Any tips?
Thanks!
In case it helps anyone else:
Turns out I needed to add the userId and accessToken for the user cofiwear, which happens to be the tag we want from all users.
Given the following javascript code :
var layoutFull = new YAHOO.widget.Layout({
units: [
{
position: 'left',
header: 'Right',
width: 300,
resize: true,
collapse: true,
scroll: true,
body: 'right1',
animate: true
},
{
position: 'center',
body: 'Da center...'
}
]
});
layoutFull.render();
I can have a full layout with a collapsible left pane. But there is a fine line between left and center parts. I would like to be able to drag this line for resizing both left and center part as in this example : http://developer.yahoo.com/yui/examples/layout/page_layout_source.html.
Which property should I enable in the layout configuration ? Looking at sample or the API doc didn't give me any luck.
I'm wondering if the following two libraries need to be included ...
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/resize/resize-min.js"></script>
Without 'seeing' the html, its rather hard to guess. Some 'magic' might occur by adding these two. Just a hunch. :)