Use variable from inside another function jQuery

Question

I'm trying to use a variable from a function, but the variable does seem to work because I'm trying to use it outside the function.

The variable I'm trying to use is called 'viewportwidth', which I'm also trying to use after the first 'orientationchange resize' function.

Is there anyway to use this variable outside my function. I have attempted it below the first function in a new variable called 'sidebarwidth'

Please see code below. Can any one help?

$(window).bind("orientationchange resize", function(e) {

    <?php if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) echo "$('#wrapper, #sidebar').addClass('iphone-min-height');" ; ?> 

    var viewportwidth;
    var viewportheight;

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined')
    {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth !=
        'undefined' && document.documentElement.clientWidth != 0)
    {
        viewportwidth = document.documentElement.clientWidth,
        viewportheight = document.documentElement.clientHeight
    }

    // older versions of IE

    else
    {
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }

    $( '#wrapper' ).css( {
       'width'   : viewportwidth + 'px',
       'height'  : viewportheight + 'px'
    });

    var iWebkit;

    if(!iWebkit){
        iWebkit=window.onload=function(){
            function fullscreen(){
                var a=document.getElementsByTagName("a");
                for(var i=0;i<a.length;i++){
                    if(a[i].className.match("noeffect")){}

    else{a[i].onclick=function(){
        window.location=this.getAttribute("href");return false}}}}
            function hideURLbar(){window.scrollTo(0,0.9)}iWebkit.init=function(){
            fullscreen();
            hideURLbar()
        };
    iWebkit.init()}}

}).trigger("resize");

var     $openClose      = $("span.open-menu"),
        buttonwidth     = $openClose.outerWidth(),
        sidebarwidth    = viewportwidth - buttonwidth,
        $wrapper        = $("#wrapper"),
        $sidebar        = $("#sidebar"),
        menuOpen        = false;

$sidebar.css({
    'left' : '-210px',
    'width' : sidebarwidth + 'px'
});

$openClose.on('click', function () {

    if (menuOpen) { // run if button says "Close Menu"

        $sidebar.stop().animate({ left: "-" + sidebarwidth + "px" }, 400);   
        $openClose.html("Menu");
        $(this).addClass('active');
        menuOpen = false;

    } else { // run if button says "Open Menu"

        $sidebar.stop().animate({ left: "0" }, 400);
        $openClose.html("Close");
        $(this).removeClass('active');
        menuOpen = true;

    }

});

tereško · Accepted Answer · 2012-04-20 16:15:00Z

Why are you doing this ?!

<?php 
if( strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') 
    || strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
{
    echo "$('#wrapper, #sidebar').addClass('iphone-min-height');" ; 
}
?>

This is just stupid! Instead of doing this with using jQuery for it, you should be setting <body class="has-iphone">. There is no need for using bloatware.

This is pointless.

if (typeof window.innerWidth != 'undefined')
{
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as 
//the first line in the document)

else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0)
{
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else
{
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
}

Nobody is supporting IE6 anymore , and which would be the "older IE" ? Do you really expect people with IE5.5 ?! This is just a bad case of copy-paste ...

As for the original problem, if you want to share variables between two or more function , and not put the in global scope, then use closures:

var handlers = (function () {
        var shared_variable,
            current;
        return {
            click: function (e) {
               // code for click handler
            },
            mouseover: function (e) {
            },
            mouseout: function (e) {
            }
       };

    }()),
    menu = document.getElementById('menu');

$(document).on('click', handler.click);
$(menu).on('mouseover', handler.mouseover);
$(menu).on('mouseout', handler.mouseout);

All function will share the current variable, which, for example, is really useful when building a responsive menu.

P.S also, you should try to avoid setting css values in javascript. First of all it violates SoC and it also triggers Reflow in browser on each value you set.

Google, Facebook, AND Microsoft are no longer supporting IE6 (or at least advertising support). So I think it is safe to do away with this. Corporate systems (government, banks, etc) which still use IE6 generally are confined to a subset of pages or are fixed in a local intranet, which negates the claim that these users are still effected by not supporting IE6. So +1 for every part of this answer. I wish I could +2 it.

bfavaretto · Accepted Answer · 2012-04-20 16:13:08Z

1

Declare the variable outside the handler for orientationchange and resize. I also recommend wrapping everything in a closure to avoid polluting the global namespace:

(function(){
    var viewportwidth;
    var viewportheight;

    $(window).bind("orientationchange resize", function(e) {
    // Rest of your current code

})();

edited Apr 20, 2012 at 16:13

answered Apr 20, 2012 at 15:59

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

2 Comments

Joshc Over a year ago

Thank you - I wrapped everything up. But lets say do screen size change, and then run the on click animation. It's still using the original variable value, and not the refreshed one.

bfavaretto Over a year ago

Are you redeclaring viewportwidth and height again, with var, anywhere else on your code? If so, don't.

user610217 · Accepted Answer · 2012-04-20 15:59:10Z

0

Move the variable out to a higher scope; it should then be available to both functions.

If they are global variables, both functions should be able to see them.

answered Apr 20, 2012 at 15:59

user610217

Comments

Anurag Uniyal · Accepted Answer · 2012-04-20 15:59:18Z

0

Take viewportwidth out of the resize function make it a global or attribute of some global object, then on resize set that variable, onclick calculate various values from viewportwidth and use them.

answered Apr 20, 2012 at 15:59

Anurag Uniyal

89.2k41 gold badges181 silver badges223 bronze badges

Collectives™ on Stack Overflow

Use variable from inside another function jQuery

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related