I'm using the http://fancyapps.com jQuery plugin Fancybox v2. It took me a while to see the error, but here it is.
I only know how to debug "progressively" or "step by step" in Google Chrome, so in Chrome, access developer tools and then select the SCRIPTS tab. From there, make select "Pause on uncaught exceptions" here (http://drm.st/ELqh), then click on one of the thumbnails at the top left of this page: http://dreamstartest.net/#!/gallery/ (site in development).
These should load the linked images inside Fancybox's modal popup, however, it's throwing a Fancybox is not defined error. What's really throwing me off is that Chrome Dev Tools RESOURCES tab doesn't show any scripts which failed to load. So why is the function undefined? Any insights would be greatly appreciated, this has been killing me for hours now.
In your scripts js file you have this function (line 25):
$("#content a[rel=video_box], a.video-box, a.fancybox").live('click', function(){
fancybox({
'hideOnContentClick': false,
overlayShow: true,
showNavArrows: true
});
});
The error you are getting is because the line
fancybox({
should be
$.fancybox({
However, you should also consider that since you are using Fancybox v2.x there is not need to use the .live() method. Additionally you are using jQuery v1.7.x where .live() has been deprecated.
Another thing is that you are using fancybox API options for v1.3.x. Check the documentation for fancybox v2.x since options are new and not compatible between previous versions.
Your function updated to v2.x should work better like:
$("#content a[rel=video_box], a.video-box, a.fancybox").fancybox({
closeClick: false,
arrows: true
});
Looks like jQuery is being loaded twice, once before Fancybox, and once after. The second time it is being loaded by a plugin - mp3-iplayer. I would remove the first link to jQuery from Google APIs, load the mp3-iplayer plugin, then Fancybox
Related
I'm working on a Chrome extension that injects some scripts into Gmail, like jQuery and qtip. It worked without any problem until I added the Chrome extension LinkedIn Sales Navigator, which (I checked) is using jQuery too.
After adding it, I get this error:
TypeError: $(...).qtip is not a function(…)
And console.log($.qtip) returns undefined, while before adding this extension it was returning the function.
My flow to inject these scripts is:
In the manifest's "content_scripts" section I'm adding content.js.
In content.js file I'm using document.createElement("script") for each script and append it to the page's <head>.
I don't know what the problem is but I think it's an overwrite issue with jQuery but I'm not sure why nor how to solve it.
Thanks ahead for any help !
So, thanks to the comments I found out jQuery.noConflict(); existed, and have been able to check the availability of the wanted function and act accordingly :
if(!$.qtip)
jQuery.noConflict();
All of a sudden the nivo slider on one of our clients websites is not showing up at all: www.bedehouse.org
I have tried all sorts but cannot see why its stopped all of a sudden? We have not done any updates to wordpress or any of its plugins recently.
I can see using chromes "inpect element" feature that there is an error: "Uncaught TypeError: $(...).nivoSlider is not a function" but have no idea what it means.
Any helps or pointers in the right direction would be massively helpful.
You're loading two versions of jQuery. One is the copy WordPress is loading and the second is another.
Both are different versions (WP is loading 1.8.3 and you're loading 1.8.2). WordPress loads jQuery in noconflict mode and does not allow the use of the $ shortcut.
Remove the jQuery 1.8.2 call that you made and change all instances of $ to jQuery and try it.
I am running my App on Internet Explorer. There seems to be some issue with JQuery method:
$('.tooltip-demo').tooltip({
selector: "a[rel=tooltip]"
})
for which, i get the following error on the javascript console:
Object doesn't support property or method tooltip
What can be the cause of this error? please help.
There's no standard tooltip() function in jQuery, it's provided by a plugin. Ensure that you're a. loading the plugin and b. loading it after jQuery by placing the <script> tag for the plugin after the one for jQuery.
It looks like you're using a tool tip plugin for jQuery, but it hasn't been loaded when you make the call.
If this code is being run when the page loads, you should put it into a $(document).ready() function, to ensure that all the supporting libraries are loaded before it runs. This should solve the problem.
I am trying to debug my javascript & jQuery and step through it using firebug.
I am running my code on an Apache server (2.4) on a windows machine.
I used the firefox browser version 18.
When i go to run my code, I can't see my javascript (external file) in the scripts panel.
I see the linked jQuery library on the panel but I dont see my javascript code.
On the Firebug, the scripts are clearly linked in the HTML panel. But on the script panel, only the jQuery.js is visible. i would post a screen shot but i dont have enough reputation right now.
I dont know what is going on and what i have to do in order to be able to step through my javascript code.
UPDATE
I placed the "debugger" on my javascript code but it still not showing on the 'script panel'.
debugger;
$(document).ready(function () {
var email_default = "Enter your email address...";
$(':input[type="email"]').val(email_default).on('focus', function () {
if ($(this).val() == email_default) {
$(this).val(' ');
}
});
I also tried to do a browser refresh, disable and re-enable all the firebug panels- but it still won't show my external javascript. I had also double checked my file location & directories to make sure i am linking it correctly.
If Firebug (or other browser developer tools) doesn't show a JavaScript in the list of available scripts, this means it has a syntax error.
In that case you need to switch to the Console panel and check there for the error.
Notes:
As mentioned in a related answer, there can also be other reasons why there are no scripts shown in the list:
Since Firefox 49.0 and Firebug 2.0.18 the Script panel is completely broken. This is due to some internal Firefox API changes. And because Firebug is officially discontinued, this unfortunately won't get fixed anymore.
There was also a bug in Firebug 2.0.11 (and below) in combination with Firefox 39.0 causing this problem. This bug got filed as issue 7918 and fixed for version 2.0.12.
It happens when the Script panel is enabled and you close Firebug and then reopen it.
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.