Use variable from inside another function jQuery
<p>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.</p>

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

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

<p>Please see code below. Can any one help?</p>

<pre><code>$(window).bind("orientationchange resize", function(e) {

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

    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'
        &amp;&amp; typeof document.documentElement.clientWidth !=
        'undefined' &amp;&amp; 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&lt;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;

    }

});
</code></pre>
