CODEWITHSUNDEEP
jquery
patrick
patrick

Reputation: 657

jQuery - Tying function to selector without an event?

I am just learning how to define a function and call it back later. I am stuck trying to define 'this' in my function without using an event. 

function slide() {
    var imgAlt = $(this).find('img').attr("alt"); 
    var imgTitle = $(this).find('a').attr("href"); 
    var imgDesc = $(this).find('.block').html();  
    var imgDescHeight = $(".main_image").find('.block').height(); 

    $(.active); 
    $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 ,
                function() { 
                    $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 ); 
                    $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); 
                }
            );
     }
   });

On line 6 you will see '$(.active); ' and this is where I want to select the class active and then apply the following function to it. Normally I used to setting this up on a click or something so I am unsure how to impliment it.

Any help greatly appreciated! Thanks

Here is a js fiddle where you can see the big picture: http://jsfiddle.net/wzQj6/21/

Upvotes: 1

Views: 194

Answers (3)

mcmlxxxiii
mcmlxxxiii

Reputation: 933

As far as I understood your question, you're looking for a way to call functions (jQuery methods too) on a scope, namely javascript context, that you prepare separatedly. If so, here's my code example and explanations.

var el = $('.active');
$.fn.animate.call(el, options, timeout, function() { 
  var active = this;
  // do whatever you need
});
  1. jQuery animate function is defined in a jQuery.prototype namespace which is also a jQuery.fn.
  2. There are two ways to call a function on a side context. They are apply and call. You may check out the difference between them here.

I hope I helped you.

Upvotes: 0

themerlinproject
themerlinproject

Reputation: 3582

See lines 3-4 in code below for how to cache your .active elements for reuse (and then use that instead of this!):

function slide() {

    //cache all .active elements for reuse
    var actives = $(".active");

    //use the new 'actives' variable instead of 'this'
    var imgAlt = actives.find('img').attr("alt"); 
    var imgTitle = actives.find('a').attr("href"); 
    var imgDesc = actives.find('.block').html();  
    var imgDescHeight = $(".main_image").find('.block').height(); 

    //$(.active); -- not sure what you were doing with this :p
    $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 ,
                function() { 
                    $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 ); 
                    $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); 
                }
            );
     }
   });

Cheers!

Upvotes: 1

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

When you're calling a function, the this inside its scope (also called the context) is normally the object that owns and calls the said function. (i.e. with foo.bar(), inside bar(), this == foo normally.)

In Javascript, if you want to call a function AND specify what the function context is, you can use the call method like so:

bar.call(foo);
// inside bar, this == foo, even if foo wasn't the owner / caller of the function

You haven't posted the code for the function that you actually want to call, so I can't comment on whether or not this is the (most) correct way for you to do it, but from what I understand, this should work for you.

// take note, also, that your syntax for selecting .active is incorrect.
// you should be passing in a string.
var active_elements = $('.active');
some_function.call(active_elements);

Upvotes: 0

Related Questions