CODEWITHSUNDEEP
jqueryhtml
user3550879
user3550879

Reputation: 3469

Passing variables into function

I'm trying to execute 2 sets of variables in my function (in my functions.php)

EDIT - Here is the working code to apply header-show/header-hide class to one div (header)

jQuery(document).ready(function($){


// adjust this number to select when your button appears on scroll-down
var offset = 70,

// bind with the button link
$animation = $('header');

// apply animation
$(window).scroll(function(){
    ( $(this).scrollTop() > offset ) ? $animation.addClass('header-hide').removeClass("header-show"):
    $animation.addClass('header-show').removeClass("header-hide");
});

});

I wanted to reuse the code for a second div (#top-btn) but can't get it to work. What I have is below:

jQuery(document).ready(function($){

    function reusuableAnimationFunc(elementName, offset, hideClass, showClass) {
    $animation = $(elementName);

    $(window).scroll(function(){
      ( $(this).scrollTop() > offset ) ? $animation.addClass(hideClass).removeClass(showClass):
      $animation.addClass(showClass).removeClass(hideClass);
    });
  }

  reusuableAnimationFunc('header', 70, 'header-hide', 'header-show')
  reusuableAnimationFunc('#top-btn', 300, 'element-hide', 'element-show')

});

Not sure if it is written correctly or if I need to put part of it in my html. I just want to run the same function for two different divs

Upvotes: 0

Views: 83

Answers (1)

Moe kanan
Moe kanan

Reputation: 189

The function is not accessible outside of the jQuery.ready

Your function should be in the global scope. Therefore, you have to remove this "jQuery(document).ready(function($){...}".

Replace it with this:

function reusuableAnimationFunc(elementName, offset, hideClass, showClass) {
        $animation = $(elementName);

        $(window).scroll(function() {
            ($(this).scrollTop() > offset) ? $animation.addClass(hideClass).removeClass(showClass):
                $animation.addClass(showClass).removeClass(hideClass);
        });
    }

    reusuableAnimationFunc('header', 70, 'header-hide', 'header-show')
    reusuableAnimationFunc('#top-btn', 300, 'element-hide', 'element-show')

Upvotes: 2

Related Questions