0

I really don't know how to get the following variable from a function into another function. I've read most of the articles and answers about that, and I think my example is more complex. Otherwise, I'm doing it wrong.

This is the function I'm using to determine the value of the wpbar variable. I even could start with $(document).ready(function(), but I removed it for the example:

function wp_adminbar() {
    "use strict";

    var win     = $(window),
        wpbar   = 0;

    if ($('body').hasClass('admin-bar')) {
        win.on("resize load",function(){
            var wpbar, w = window,
                d = document,
                e = d.documentElement,
                g = d.getElementsByTagName('body')[0],
                x = w.innerWidth || e.clientWidth || g.clientWidth;

            if (x <= 782) {
                wpbar = 46;
            } else if (x > 782) {
                wpbar = 32;
            }
        });
    }
    return wpbar;
}

I want to use the variable wpbar into this another function:

$(document).ready(function($) {
    "use strict";

    var wpbar = wp_adminbar();
    console.log(wpbar); // Returns: 0
});

I'm stuck in that. Edit: Actually, return wpbar; is not working at all.

Edit: Full code of a function contaning the first function. In this case, it works:

$(document).ready(function($) {
    "use strict";

    var win         = $(window),
        nav_fixed   = $('.enable-fixed'),
        header      = $('#header-v1');

    if (!nav_fixed.length || !header.length) return;

    // WordPress Toolbar
    var wpbar = 0;
    if ($('body').hasClass('admin-bar')) {
        win.on("resize load",function(){
            var w = window,
                d = document,
                e = d.documentElement,
                g = d.getElementsByTagName('body')[0],
                x = w.innerWidth || e.clientWidth || g.clientWidth;

            if (x <= 782) {
                wpbar = 46;
            } else if (x > 782) {
                wpbar = 32;
            }
        });
    }

    var max_h           = 89,
        min_h           = 55,
        var_h           = max_h - min_h,
        menu            = $('.sticky-wrapper-v1, #header-v1, #header-v1 .wrap, #header-v1 .menuwrap ul:first-child > li > a, #header-v1 .main-nav-search a'),
        logo            = $('#header-v1 #logo, #header-v1 #logo img'),
        nav             = $('#navigation'),
        set_height      = function(){
            var st      = win.scrollTop() + wpbar,
                new_h   = 0,
                new_p   = 0,
                wrapper = $('.sticky-wrapper-v1'),
                top_p   = wrapper.offset().top;

            if (st <= top_p) {
                new_h = max_h;
                new_p = 0;
            } else if (st <= (top_p + var_h)) {
                new_h = max_h - st + top_p;
                new_p = st - top_p;
                header.removeClass("header-scrolled");
            } else {
                new_h = min_h;
                new_p = var_h;
                header.addClass("header-scrolled");
            }

            wrapper.css('margin-bottom', new_p);
            menu.css({'height': new_h + 'px', 'lineHeight': new_h + 'px'});
            logo.css({'maxHeight': new_h + 'px'});
            nav.css({'height': new_h + 'px'});
        };

    win.one("resize",function(){
        $(".navbtn").toggle(function() {
            set_height;
        }, function () {
            set_height;
        });
        set_height;
    });

    win.on('debouncedresize', function(){
        max_h = $(menu).attr('style',"").filter(':first').height();
        set_height();
    });
    win.on('scroll', function(){
        window.requestAnimationFrame( set_height );
    });
    set_height();
});
Unix
  • 1,358
  • 3
  • 14
  • 23
  • Well, neither `load` nor `resize` events would have been fired at the time you call `console.log`, so what else than 0 would you expect? – Bergi Dec 03 '15 at 02:30
  • Have a read of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/q/23667086/1048572) (though it mostly deals with asynchronous functions that eventually yield a single result, not a value that might constantly change). – Bergi Dec 03 '15 at 02:31
  • Yes, but this function worked when I used it directly into the second one. I'm gonna read this answer about asynchronous, thanks! :) – Unix Dec 03 '15 at 02:32
  • Also, @Comptonburger made (in his now-deleted answer) the good observation that your event handler declares its own `wpbar` variable, so whatever it does won't affect the outer scope `wpbar` that you are returning anyway. – Bergi Dec 03 '15 at 02:32
  • Can you post that working code, please? I'm not sure what you mean by "directly into the second one". And why not just use the working code, why did you attempt to change it? – Bergi Dec 03 '15 at 02:35
  • Ok! Well, because I have to use the first function three times (into three functions), so I wanted to avoid duplicate code (three times). That's why I created the first function to use it only once. I'm gonna post the full working code. – Unix Dec 03 '15 at 02:37
  • Your calling a function that adds a listener, it doesn't actually run anything inside the listener unless "load" or "resize" are fired, and neither one of those are fired when you call the function. I suggest you put the code for setting wpbar outside the function, or inside the function outside the listener, depends on what you want to do exactly. – Alizoh Dec 03 '15 at 02:37

0 Answers0