Wedge

Public area => The Pub => Off-topic => Topic started by: MultiformeIngegno on May 14th, 2013, 12:25 AM

Title: jQuery(document).ready function issue
Post by: MultiformeIngegno on May 14th, 2013, 12:25 AM
Code: [Select]
jQuery(document).ready(function() {
jQuery(".fancybox").fancybox({
  helpers : {
   title : { type : 'float' }
  },
      beforeShow: function(){
       this.title = '<div>'+jQuery(this.element).next('div').html()+'</div>';
      }
});


jQuery("a.fancybox").fancybox({
tpl: {
  next: '<a title="Avanti" class="fancybox-nav fancybox-next"><span></span></a>',
  prev: '<a title="Indietro" class="fancybox-nav fancybox-prev"><span></span></a>'
}
});



});

The first part (.fancybox) is "ignored", the second (a.fancybox) is taken into account. If I remove the second, the first is taken into account. -_-
Title: Re: jQuery(document).ready function issue
Post by: Anonchair on May 14th, 2013, 07:14 AM
Just out of interest, have you tried removing the $(document).ready? I ask this because if you've followed the convention of loading in your scripts at the bottom of the page (before the closing <body> tag), then there's no *absolute* need for $(document).ready. However if this is a misleading title and the problem lies in either JQuery or FancyBox - then that sure is a misleading title. ;)

Tried solving this puzzle myself but this is the first time I've been exposed to FancyBox (and I don't have access to all your code)... Did the obvious checking for any syntax errors, found none so you're good there... One thing to note though is that JQuery does have it's own quirks - some of it's methods do modify the state of the object so there could be some conflict.

Also, it might be worth having a look at the scope of "this" to see if it's actually pointing to what you want it to using Chrome Devtools or Firebug. If it isn't, you can pass the outer scope of "this" using either .call() or .apply() methods on a function. So, if for example I had an object:

Code: [Select]
var myObject = {
  aMethod: function() {
    return console.log(this);
  }
};

And I called myObject.myMethod() - I'd get a representation of myObject. However, if I wanted "this" inside aMethod to be the scope of this OUTSIDE of the object, I'd do this:

Code: [Select]
myObject.myMethod.call(this); // pass the scope of this as it is outside the object - in this case the global object

myObject.myMethod() // "this" refers to the myObject

Also, it must be a pain having to type jQuery all the time. If you're doing this because you're using another library that uses the "$" object/variable, then there's still a way to use the $ when working with jQuery by passing the jQuery object as a parameter to a self-executing anonymous function that takes a parameter of $:

Code: [Select]
(function($) {
  $(function() {}); // <-- and even use the shorthand version of $(document).ready()
})(jQuery);

Title: Re: jQuery(document).ready function issue
Post by: MultiformeIngegno on May 14th, 2013, 07:33 AM
Hi!
Thanks for the reply and your advices! :-) Probably it's a misleading title.. you can see the code I'm talking about here: http://goo.gl/uuv5y
Unfortunately because it's a live site I only left the first part and removed the TPL one..
Title: Re: jQuery(document).ready function issue
Post by: Anonchair on May 18th, 2013, 11:09 AM
Again I'm not particularly great with FancyBox, I don't know the library well enough to be considered a valuable source of help. There's always StackOverflow. I generally get some useful responses on my own questions there, but the best place to look is the community surrounding the plugin.