I've tried a veriety of jQuery plugins recently and I keep getting this error …
(source: shaunbellis.co.uk)
… regardless of what plugin I try to use.
I've checked the links to the JS files which are all there and working fine. I'm using Drupal if that makes any difference.
I've run the plugins away from the main site to demonstrate that they are working and that I am doing things right with 100% success.
Any ideas?
Update:
My jQuery file called in the footer:
$(document).ready(function() {
$('#footer_holder').hide();
// Fancy Box
$("a.fancybox").fancybox({
'hideOnContentClick': true,
'titlePosition' : 'over',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
});
$("#homepage_slider").easySlider({
auto: true,
continuous: true,
});
});
*note - fancy box works fine (unless the easySlider code is above it). jQuery is sorted out by Drupal. I'm running version 1.4
This problem can also arise if you include jQuery more than once.
Ignore me. I'm sorry everyone. I'd mistyped the url of the script. Thanks to Simon Ainley for the prod in the right direction.
Sorry again. Thanks.
I had this problem, or one that looked superficially similar, yesterday. It turned out that I wasn't being careful when mixing jQuery and prototype. I found several solutions at http://docs.jquery.com/Using_jQuery_with_Other_Libraries. I opted for
var $j = jQuery.noConflict();
but there are other reasonable options described there.
For anyone else arriving at this question:
I was performing the most simple jQuery, trying to hide an element:
('#fileselection').hide();
and I was getting the same type of error, "Uncaught TypeError: Object #fileselection has no method 'hide'
Of course, now it is obvious, but I just left off the jQuery indicator '$'. The code should have been:
$('#fileselection').hide();
This fixes the no-brainer problem. I hope this helps someone save a few minutes debugging!
This problem may also come up if you include different versions of jQuery.
This usually has to do with a selector not being used properly. Check and make sure that you are using the jQuery selectors like intended. For example I had this problem when creating a click method:
$("[editButton]").click(function () {
this.css("color", "red");
});
Because I was not using the correct selector method $(this) for jQuery it gave me the same error.
So simply enough, check your selectors!
Related
I'd like to use the onScreen() plugin to control items when they enter or leave viewport (visible part of the screen). As a test a tried to add this line $(".block").fadeIn(6000); to "doIn" but it doesn't work. Is there a syntax issue or something? See http://jsfiddle.net/8E4FA/ Thanks
<script>
$(document).ready(function(){
$('elements').onScreen({
container: window,
direction: 'vertical',
doIn: function() {
$(".block").fadeIn(6000);
},
doOut: function() {
// Do something to the matched elements as they get off scren
},
tolerance: 0,
throttle: 50,
toggleClass: 'onScreen',
lazyAttr: null,
lazyPlaceholder: 'someImage.jpg',
debug: false
});
});
</script>
I'm the plugin developer. You were using the sample code from the plugin's site, meaning you had no matched elements using the $("elements") selector. I changed the selector to $(".block") and got rid of all the default values.
Here's the updated fiddle: http://jsfiddle.net/8E4FA/1/
Cheers!
I ran it with try and catch and it turns out:
ReferenceError: $ is not defined
My best guess is that you put the reference to the onScreen plugin before the JQuery reference, try reversing them.
However, I have a better guess that you did not include <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> in your HTML.
Web noobie here. I'm having a problem getting Masonry to work properly with the site I'm building. Here is the code I'm trying to execute:
$( document ).ready(function() {
...
var $article_display = $('#article_display');
$article_display.imagesLoaded(function() {
$article_display.masonry({
columnWidth: Math.floor($('#article_display').width() *.3) + 2,
itemSelector: '.article',
isAnimated: !Modernizr.csstransitions
});
});
...
});
I'm getting this error: "Uncaught TypeError: Object [object Object] has no method 'imagesLoaded' ." I've looked around for the past two days to find some kind of solution to this before posting this question here and have been unsuccessful so far. It seems like my browser isn't recognizing that I've included the imagesloaded.pkgd.min.js file...? According to the reference material here: http://masonry.desandro.com/appendix.html this code should work.
Any help would be greatly appreciated, I can try to get a jsfiddle set up if that would make a difference.
Thanks!
Edit: Here's a JSFiddle showing the issue: http://jsfiddle.net/DDQtD/
Figured it out. I had a typo when I was loading my scripts, it looked like this:
<script type="filepath/imagesloaded.pkgd.min.js"></script>
I needed to switch out type with src. So many simple mistakes!
I would try Salvattore, it works in a different way so images don't have to load before the script is loaded, and you can configure the script with CSS and HTML.
http://salvattore.com/
I have added the JQuery plugin Isotopte to my site.
It works but only after the browser resizes. The images just seem to stack up on each other before hand.
My code to is:
$(function(){
$('#isotopecontainer').isotope({
itemSelector: '.frontitem',
masonry: {
}
});
});
I've tried adding columnWidth as the site suggests but this makes no difference.
Im really not sure what is going on. Can anyone help me out at all?
I don't know exactly where your issue is but I got a working solution.
Working solution (JSFiddle)
$(document).ready(function(){
$('#isotopecontainer').isotope({
// options
itemSelector : '.frontitem',
masonry : {}
});
}
);
It has all of your options but I can't seem to find exactly where your code is wrong. I did use the document ready callback that jquery supplies however I don't think that was the issue.
Also make sure you include jquery before isotope.
It seems that when I add an afterClose callback to my fancybox I'm getting this error:
Uncaught RangeError: Maximum call stack size exceeded
This is the code I am using:
$("a.termsLink").fancybox({
type : 'iframe',
fitToView : false,
width : 450,
height : 600,
afterClose : function(){
$('#regForm').click();
}
});
What is supposed to happen is when the termsLink box closes, the regForm is supposed to open. I've expiremented with differnt callbacks, but the issue that I am running into seems to be unaffected by this.
The solution appears to be as follows:
afterClose : function(){
setTimeout(function(){$('#regForm').click();}, 1);
}
However that feels like a very hacky method to me, the issue seems to be that the fancybox code trys to call the new box while the animation for the other box is still running, which causes this issue. Is this a documented issue with FancyBox? Or is this a function of the way jQuery animation event work? Is there a more elegant solution to this issue?
If you're using Twitter Bootstrap < 2.3.1, it's known to cause this exact issue (I just experienced it, and upgrading bootstrap solved the problem)
More details here: https://github.com/fancyapps/fancyBox/issues/519
Try
$("a.termsLink").fancybox({
type : 'iframe',
fitToView : false,
width : 450,
height : 600,
afterClose : function(){
$('#regForm').focus();
}
});
although what you have should work you're right. Unsure but check the script doesn't close all fancybox's open. if the #regForm is being opened into a fancybox hence why you'd need the timeout.
Looking into the fancybox script they use this function
function _cleanup() {
overlay.fadeOut('fast');
title.empty().hide();
wrap.hide();
$.event.trigger('fancybox-cleanup');
content.empty();
currentOpts.onClosed(currentArray, currentIndex, currentOpts);
currentArray = selectedOpts = [];
currentIndex = selectedIndex = 0;
currentOpts = selectedOpts = {};
busy = false;
}
This basically confirms what I was saying before. All the instances of fancybox are cleared after this function is run. So even though you've got one opening straight after it's being cleared before really being shown. The solution you've come up with seems to be the better solution unless you want to fiddle with the fancybox script yourself :)
Are you sure the problem is related to the click function?
I found the same problem including, by mistake, two jQuery versions
(jquery-1.2.6.pack.js and jquery-1.4.4.min.js)
Removing the last one solved the problem.
I checked this because of this topic loading jquery twice causes an error?.
You could try to check it.
I've made my own slider with jQuery using .animate functions throughout, and the slider works when I use it once, and twice, but on the 3rd try, it goes crazy! Basically it's similar to Microsoft's 'For Home' and 'For Work' slider, but a lot less complex (right now)
It is live on a website, and to show you what I mean, here's the URL:
http://glorbi.com/index3
(Click For Work, then For Home, then For work, it starts to fail)
Here's the jQuery that handles the sliding:
$("#sidebar2").click(function(){
$("#innerSec2").animate({"right" : 130}, 1000);
$("#sidebar2").animate({"height" : 1100});
$("#innerSec").animate({"left" : -840}, 1000);
$("#innerSec").animate({"left" : 840}, 200);
$("#sidebar").animate({"height" : 400});
});
$("#sidebar").click(function(){
$("#innerSec").animate({"left" : 0}, 1000);
$("#sidebar").animate({"height" : 1100});
$("#innerSec2").animate({"right" : 970}, 1000);
$("#innerSec2").animate({"left" : 710}, 200);
$("#sidebar2").animate({"height" : 400});
});
I've tried using callbacks, but they lead to a more sequential reaction, moving the slider in parts, which looks pretty horrible.
Also I am aware of the z-index issue as it slides, and I'll fix that!
Does anyone know how I could fix this? The code is pretty generic, and it's strict values for every action, I don't really see how it's failing. :S
Thanks alot! Any help is greatly appreciated! :)
After fiddling with it in firebug, I found out that the left:710px on innerSec2 is causing problem, after we click on sidebar2 div, so I tried following and it seems working except z order problem which you can fix :D
$("#sidebar2").click(function(){$("#innerSec2").animate({"left":-130},0);});