Fancybox Error on Youtube IFrame Internet Explorer - javascript

I added on my page a FrancyBox Youtube Iframe, but when i close the Iframe i get dialogs from Interet explorer 9.0 (about 15 or above) with Javascript Errors.
http://descuentalomallorca.com/uploads/fancy/demo/index.html
This just happens on the Youtube link, i tried also in the examples of:
http://fancyapps.com/fancybox/
and im getting the same result, any ideas?
Img of the error http://descuentalomallorca.com/uploads/fancy/fancy.jpg

This worked for me (very bad code trick I know)
Adding a beforeClose event on the fancybox. The function will first set the src of the iframe to about:blank, and after 500 ms it will really close the fancybox (directly closing it will still get the error)
beforeClose : function() {
if(!window.mayclosebox) {
$('.fancybox-iframe').attr('src','about:blank');window.mayclosebox = true;setTimeout('$.fancybox.close();',500);return false;
} else {
window.mayclosebox = false;return true;
}
}

The bug has been reported with other lightboxes too, including colorbox (ditching fancybox as previously proposed is not the solution)... it's more like a IE9 bug. You can read more here
Somebody that reported the same issue with colorbox seemed to have found a workaround adding
<meta http-equiv="X-UA-Compatible" content="IE=8" />

This isn't your code. If you try the Youtube link on the fancybox website, you'll see that it also happens there. Even on Fancybox 2.
You can either find the source of the problem in the uncompressed version, or switch to using another library. One such library is Colorbox. The youtube example they have there doesn't have those callback errors. qTip2 also works, but not really designed for the fancybox like implementation. There are likely many more libraries and googling fancybox alternatives will find them.

Related

Running jquery gallery makes links unclickable

I'm trying to build responsive webpage based on Zurb Foundation framework. Everything worked fine until I tried to add nanoGallery which uses jQuery too. When I add gallery scripts, top menu generated by Foundation script becomes unclickable, :hover works fine but if you click on it, nothing happens. Fell free to visit the exact page at http://emfoto.filipsvoboda.net/presentation.html.
This is how I'm trying to call each script:
<script src="js/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
jQuery(document).foundation();
</script>
<script src="third.party/transit/jquery.transit.min.js"></script>
<script src="third.party/hammer.js/hammer.min.js"></script>
<script src="third.party/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="jquery.nanogallery.js"></script>
<script>
jQuery("#nanoGallery").nanoGallery({
kind:'flickr',
(..)
thumbnailHoverEffect:[{'name':'borderLighter'}],
thumbnailLabel:{display:false},
});
</script>
I've already tried changing order of those scripts, but that does not seem to help.
EDIT: It does seem to work properly in IE10, however in Chrome-based browsers it still does not work.
EDIT2: After continual fiddling with the code it seems obvious that the presence of the gallery itself on that page causes the bug. Order of scripts doesn't seem to make any difference, as long as the gallery is not displayed, Foundation works correctly and links does work.
EDIT3: Updated the code, stripped it down and changed the order of scripts. I've added simple "a" link to the sample page and it doesn't work either.
EDIT4: I've searched for event.preventDefault() and it is present in one of the *.js files for the gallery. I've contacted the author and if we get to any solution I will post it here.
Thank you for your help.
This issue has been fixed in nanoGALLERY v4.2.1:
https://github.com/Kris-B/nanoGALLERY/releases/tag/4.2.1
I compared chrome and firefox requests and responses using Developer Extensions (chrome) and Firebug (firefox) for the info shown in Net panel. I'm not sure if the file that chrome doesn't find can be the cause of the problem but wanted to point out that difference.
chrome
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.map (Not found)
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js
firefox http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js
Atleast for time being, you can have a workaround for this by having a click handler which will read the url and take the page to that url.
$(function () {
$("a").click(function () {
var url = $(this).attr("href");
window.location.href = url;
});
});

Youtube iFrame API events not firing on Firefox 14

I'm currently working on embedding a youtube video using the iframe API, what is annoying me is that the events are not firing only on Firefox (I have just tried firefox 14), they work on every other browser (obviously not using browsers from hell like IE7).
The samples from their documentation don't work either, if you grab the piece of code they have under the getting started section of this page and here is the jsfiddle version for your quick view.
The player is displayed on the page, but as I mentioned the events are not working, neither I can use any function from the api, they all throw undefined error.
I appreciate any help.
Ok I found the problem,
It's because of the Firefox Extension HTTPS-Everywhere, which is switching the requests to use https, and since my page is requested using http, that was causing a conflict with the youtube iframe requests.
I believe I should put a warning on my site about using that plugin. Thanks for your help everyone.
I had once a problem with plying events to the iframe and it also apeared only in Firefox.
The answer was to specify the id and name of the iframe to the same value.
Try it - it might work for you as well.

Javascript Array, Object, Date not defined

Strangest situation ever, but I've reproduced it on three PCs already. Only happens in internet explorer 9 (not 8, just 9).
It happens at the site of my friend, this is not a plug, but here is the url: IE bug with javascript
The magic error happens when you click one of the links, for example "Nog fiscaal interessant ..."
This opens a popup, with inside an iframe that hosts a movie player. The movie frame complains, in IE9, about "Object not defined", "Array not defined", "Date" not defined.
What could be going on?
Finally solved by loading the iframe dynamically.
The solution was found on http://code.google.com/p/simplemodal/issues/detail?id=73
Copy/paste here for future reference:
I think this issue is more to do with how IE9 handles iframe and
subsequent loading of javascript in it... my workaround was to set
iframe src only 'onShow' callback function and somehow i stopped
getting those object undefined errors. Hope this helps.
function onShow(){
jQuery("iframe").attr("src", "/goto/site");
}
Another link with possibly more info: http://msdn.microsoft.com/en-us/library/gg622929%28v=VS.85%29.aspx?ppud=4
The solution implemented was loading the iframe src after the popup had fully rendered, instead of first loading the iframe and then showing the popup.
Thanks to all investigators!

CSS Hover and Javascript works on one page and not the other?

ok I had asked for some help on here getting a hover and click setup working for three images.
If you go to http://www.djcproductions.net/test.html you can see everything working perfectly.
However, when I copied and pasted the elements into the actual layout- it does not do the hover. I have stared at the code for at least six hours, moving things around, changing whatever I thought might be causing it and I just cannot figure it out. I have a feeling it is one of those things that I am just missing because I keep staring at it.
The contents loaded into the layout can be found at http://www.djcproductions.net
If anyone could look at the source code for these two pages and maybe see what I am doing wrong it would be appreciated more than you could possibly imagine- it is driving me insane.
Thanks!
*EDIT* I checked this on another computer- in IE, the hover still does not work, but the three images display and swap on click. In chrome, only the web design and web hosting images display and the advertising image is nowhere to be found but the hover and click functions both work. Any ideas?
I see you are not using window.onload, that may be causing the problem... or use jQuery .ready()
IE may be switching to quirks mode, you can check this through the developer tools for IE (press F12). If you're testing the page at an intranet URL, IE switches to compatibility mode by default, and that can cause quirks mode. Avaya may also be switching IE to this mode. If you add the right meta tag to your page, you can force a different document mode. Try placing this in your page (you can specify a non-edge version as well):
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I'm no expert (at all), but looking at your page, it appears that you're missing <a href="pages/ad.html" target="slider"> for your ad link (~line 164 of your source code). Could that be why it doesn't appear?

Certain JavaScript doesn't work in IE9 but there is no JS error

I'm doing some maintenance work on somebody else's site and there's an IE 9 problem. They're using what appears to be a Lightbox to an image gallery. When you click on a certain image on the page, the Lightbox appears, but in IE 9, the Lightbox doesn't show up at all. There's no error or anything - it just silently fails - so I'm kind of at a loss as to how to troubleshoot.
I'm not the best at these kinds of problems. Can someone point me in the right direction?
Here's a link to what I'm working on: http://www.aquilacommercial.com/wlproperties/view/1300-Guadalupe
#Jaitsu, I confirmed that this occurs. For me, IE9 begins to open Lightbox and then immediately opens the image on it's own page. All with no errors.
I'm still unsure on IE9's issue but this might help with an alternate solution:
Most Compatible JQuery Lightbox Plugin, Works in All Current Browsers?
Finally, have you upgraded to Lightbox v2.05. Changelog indicates it didn't work on IE9 till 3/18/11. You might need to upgrade some files.
I confirmed that the Lightbox website is using Prototype v1.7. Your site is using Prototype v1.6.0.2.

Categories

Resources