Using a jQuery variable in two different functions

Question

I am having trouble using this variable in two different functions. First, I calculate the offset needed from the top of the window for an element to be in view (the leavespace variable). Then, I have two different functions that need to utilize this, but I can't get it to work.

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

$(function() {

  var topbar_o_height = $(".ipro_topbar").outerHeight();
  var nav_o_height = $(".nav").outerHeight();

  if (topbar_o_height > 0) {
    if ($('.nav').hasClass('menu-fixed-topbar')) {  
        var spacing = 10;
    } else {
        var spacing = 30;
    }
  } else {
    var spacing = 10;
 }

 var extra_height = topbar_o_height + nav_o_height + spacing;

 var leavespace = $(this.hash).offset().top - extra_height; // leave space for top menu

} // end function


$(".link_scroll").click(function(event){        
  event.preventDefault();
  $('html,body').animate({scrollTop:leavespace}, 'slow');
});

if (document.location.href.indexOf('#') > -1 ) {
    // will use the leavespace variable here too...
}

}); // End doc ready

Another option would be to declare leavespace outside of the function as a global variable immediately beneath the jQuery(document).ready(function($) {. Currently it's out of scope which is why the other functions can't see it. — delliottg
– delliottg, Commented Aug 1, 2014 at 2:07
I tried both of @Aguardientico and delliottg's comments and neither worked. — MultiDev
– MultiDev, Commented Aug 1, 2014 at 2:29
Try printing the value of leavespace before the animate statement, algo try adding "px" after leavespace scrollTop: leavespace + "px" — Aguardientico
– Aguardientico, Commented Aug 1, 2014 at 2:59

piergiaj · Accepted Answer · 2014-08-01 02:04:26Z

You need to change the scape of the leavespace variable, try declaring it in the ready function:

jQuery(document).ready(function($) {
  var leavespace;

  $(function() {

  var topbar_o_height = $(".ipro_topbar").outerHeight();
  var nav_o_height = $(".nav").outerHeight();

      if (topbar_o_height > 0) {
        if ($('.nav').hasClass('menu-fixed-topbar')) {  
          var spacing = 10;
       } else {
           var spacing = 30;
       }
     } else {
        var spacing = 10;
     }

    var extra_height = topbar_o_height + nav_o_height + spacing;

    leavespace = $(this.hash).offset().top - extra_height; // leave space for top menu

 } // end function


$(".link_scroll").click(function(event){        
  event.preventDefault();
// you can now access leavespace here
  $('html,body').animate({scrollTop:leavespace}, 'slow');
});

if (document.location.href.indexOf('#') > -1 ) {
    // will use the leavespace variable here too...
/// you can now access leavespace here
}

}); // End doc ready

Community · Accepted Answer · 2017-05-23 12:20:50Z

There are mainly two cases you can use in this case

jQuery(document).ready(function($) {
var leavespace='';
$(function() {

  var topbar_o_height = $(".ipro_topbar").outerHeight();
  var nav_o_height = $(".nav").outerHeight();

  if (topbar_o_height > 0) {
    if ($('.nav').hasClass('menu-fixed-topbar')) {  
        var spacing = 10;
    } else {
        var spacing = 30;
    }
  } else {
    var spacing = 10;
 }

 var extra_height = topbar_o_height + nav_o_height + spacing;

 leavespace = $(this.hash).offset().top - extra_height; // leave space for top menu

} // end function


$(".link_scroll").click(function(event){        
  event.preventDefault();
  $('html,body').animate({scrollTop:leavespace}, 'slow');
});

if (document.location.href.indexOf('#') > -1 ) {
    // will use the leavespace variable here too...
}

}); // End doc ready

or

use window.leavespace will also solve your problem Thanks

Reference

V31 · Accepted Answer · 2014-08-01 03:26:49Z

Why have both dom ready functions at the same time.you can keep the document.ready an remove the $(function() { as both mean the sme thing this way leavespace will have the scope and would be seen inside the functions as well.so you code should look like

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


  var topbar_o_height = $(".ipro_topbar").outerHeight();
  var nav_o_height = $(".nav").outerHeight();

  if (topbar_o_height > 0) {
    if ($('.nav').hasClass('menu-fixed-topbar')) {  
        var spacing = 10;
    } else {
        var spacing = 30;
    }
  } else {
    var spacing = 10;
 }

 var extra_height = topbar_o_height + nav_o_height + spacing;

 var leavespace = $(this.hash).offset().top - extra_height; // leave space for top menu


$(".link_scroll").click(function(event){        
  event.preventDefault();
  $('html,body').animate({scrollTop:leavespace}, 'slow');
});

if (document.location.href.indexOf('#') > -1 ) {
    // will use the leavespace variable here too...
}

}); // End doc ready

Collectives™ on Stack Overflow

Using a jQuery variable in two different functions

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related