Home/ Questions/Q 7819123
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T06:48:36+00:00

I’m trying to use a variable from a function, but the variable does seem

  • 0

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;

    }

});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0