I am new to using Adsense. Once I added it to my webpage, MathJax no longer renders properly. Sometimes it does, and sometimes it doesn't, and sometimes it load most of the way but doesn't finish. I am loading MathJax at the bottom of the <body> tag. Adsense is being loaded async before then.
I'm not sure how I can get Adsense and MathJax to place nicely with each other? Any thoughts?
Related
None of the bind examples in the documentation work - https://fancyapps.com/docs/ui/fancybox/api
The standard constructor examples work great, but anything that requires binding does not work. There is no error, but the gallery lightbox doesn't work - clicking an image just opens the image as a link. Here is the exact example code with markup:
<div id="gallery">
<a href="https://lipsum.app/id/1/800x600">
<img src="https://lipsum.app/id/1/300x225" />
</a>
<a href="https://lipsum.app/id/2/800x600">
<img src="https://lipsum.app/id/2/300x225" />
</a>
</div>
<script>
Fancybox.bind("#gallery a", {
on : {
ready : (fancybox) => {
console.log(`fancybox #${fancybox.id} is ready!`);
}
}
});
</script>
That console log never fires.
I'm importing FancyBox like this:
import { Fancybox } from '#fancyapps/ui';
I've tried searching around, but very little info on FancyBox 4 other than official docs and it's frustrating as they don't work. I've tried some of the examples in showcase also, and the same deal. If it's binding, it won't work and no errors are shown. Anyone have any insight into this?
Thanks,
Tom
It works perfectly fine. Since you did not provide a live demo (or at least a full HTML code), then it just not possible to help you.
It is so frustrating to read comments like this, no demo, no useful info, nothing. Maybe you did not include JS file, I do not know ... I would love to help you and to improve documentation, but, sorry, your comment is not helpful at all.
Fancybox is designed to be as easy to use as possible, all you have to do is:
Include two files - CSS and JS file (to get Fancybox object).
Add data-fancybox attribute to your links (or to call Fancybox.bind("YOUR_SELECTOR");)
Thats it! It can not be any simpler.
Sorry, it should have been a much clearer question. I didn't include a demo because it's a big wordpress site in production. It was giving me no useful feedback or errors or anything like that. I build websites day in and day out, so assumed it wasn't just me making some incredibly stupid mistake like a typo or something. I genuinely spent a lot of time on this, it wasn't me being lazy and just posting on stack overflow straight away...
It was me being stupid though.
In the process of making a demo to show you, I found the problem and (as you already know!) it's my mistake. I was able to make fancybox work by instantiating it straight away in my js, but binding (and therefore galleries etc) was not working.
The reason was the javascript was included in the head of the html document before the markup instead of at the bottom of the html document before the closing body. There was nothing for the js to bind to when it was executed.
I wouldn't normally include javascript in the head either but it's a wordpress project and because of some plugin, it's required there. Fancybox 3 worked with js in the head, but I suspect it might be jquery being more forgiving than native js with it's binding to DOM elements?
So, yes, entirely my fault. I was following the steps of the installation and startup guide almost exactly, but that inclusion of the js file in a slightly unusual (or bad practice at least) place was what caused all the issues.
I'm having a problem with loading work section, on my web site. This is the repo: https://github.com/Vukasin90/test/blob/gh-pages/_includes/work.html
and this is the we site: https://vukasin90.github.io/test/
when you click thumbnails, it should open a bounch of images and paragraphs, basically a html document.
When I run it locally, it works just fine, but on gh-pages it wont load (there's only a spinner animation, which I've put to show when loading is slow).
I'm guessing that it can't be done this way on GitHub, but I don't have any idea how to go around this problem. Or maybe I made mistake with links, or something. I really don't know
I think this is an issue with your js, not Jekyll.
Jquery is requesting: https://vukasin90.github.io/work/work-1.html
Instead of https://vukasin90.github.io/test/work/work-1.html
There are other js errors too - other 404s and blocked resources.
If you want to reference full paths in jekyll, you should use site.url and site.baseurl with something like:
..data-folder="{{ site.url|append: site.baseurl }}/work/work-1" style="background-image: url({{ site.url|append: site.baseurl }}/Assets/img/work/proj-1/thumb.jpg"..)
Have fun.
EDIT:
Amended above to show on page changes better.
Alternately, if you want to fix keeping your inline relative references, then change these:
...data-folder="../work/work-1"...
To:
...data-folder="../test/work/work-1"...
However, keep in mind this path reference issue between Jekyll and your js could crop up in other ways. So id recommend using full path references throughout or change your js setup to include the baseurl.
I am really curious, why is there a blank space in my waterfall? It looks like everything is cached, but there is still some mystical 100ms lag between html and css.
The browser needs to parse you html file. It could take some time.
You can try to check the problem in Timeline panel.
It provides the information about almost all the actions inside the browser.
Plone 4.2.1.1
plone.tiles 1.2
plone.app.tiles 1.0.1
plone.app.blocks 1.0
plone.app.drafts 1.0a2
Products.TinyMCE 1.2.15
I have a Plone site with two rich text tiles on a page, created following Using tiles to provide more flexible Plone layouts.
The problem is that when editing the tiles, TinyMCE will not load.
In Firebug on the Net tab I see a whole slew of 404s that look like this:
http://example.com/en/front-page/##edit-tile//plugins/pagebreak/editor_plugin.js
By comparison, I know that the correct URLs should look like this:
http://example.com/portal_javascripts/MyTheme/plugins/xhtmlxtras/editor_plugin.js
When I set my portal_javascripts in Development Mode, it works, but when I turn Development Mode off, that's when I see this problem.
So apparently it's due to some kind of javascript conflict, but I don't know where to look for it.
I really need to solve this problem, so any help would be greatly appreciated!
Additional information:
When portal_javascripts has development mode turned off, the condition in this line is never true: https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L47
That's because the tiny_mce.js file is merged with other files and the name is randomized, and so looking it up by name will always fail. Consequently, the baseURL property of the tinymce object will not be set in init.
Instead, baseURL ends up being set here:
https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L8397
This is where the URL http://example.com/my-page/##edit-tile/ is used for baseURL.
I verified this by turning off merging and caching in portal_javascripts, but leaving development mode off. Then it works, because it finds tiny_mce.js by name.
Also, I found that when it fails, all of TinyMCE's plugins are added as explicit <script> elements in the head of the iframe (with the ##edit-tile URLs, which can't be loaded). By contrast, when it works, all the plugins are loaded here:
https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L8458
IOW, they are not added explicitly to the iframe as <script> elements.
(In case I wasn't clear, when I mention iframe, I'm talking about the tile's editing overlay, not TinyMCE's. There is an iframe inside an iframe....)
I'm trying to include a Facebook share iframe on a site that's served using Flask and Apache. The iframe loads inconsistently however and I am at a loss for possible explanations. Here is what I have observed:
The iframe loads correctly in Firefox and Safari but not Chrome 10.0 dev, on Mac
In Chrome, the iframe never loads correctly when I load the entire page
If I strip half of the elements from the page, the iframe loads correctly maybe three times out of ten - doesn't matter which half I remove.
If I strip all of the elements from the page, the iframe loads correctly every time.
The inconsistent behavior makes me think there's some sort of race going on, but I don't understand what the problem would be, or why it would only appear in Chrome. Anyway, I appreciate your help. You can view the site here. Thanks, Kevin
I think they key is in this statement:
If I strip half of the elements from
the page, the iframe loads correctly
maybe three times out of ten - doesn't
matter which half I remove.
I'd dump the output to a text file and would run tidy(1) or xmllint(1) over the response to see if you have a mis-matched HTML tag. Chances are Chrome is not handling the error correctly, but Firefox and Safari are able to recover.