Question

I’ve just realized my plan won’t work with an earlier question. So I need some advice.

I’m using javascript variable to get the width and height of all browsers.

var viewportwidth;
var viewportheight;

I and i’m applying these variables to my <div id="wapper"></div> like so…

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

But I’m also using @media screen for orientation changes on devices in my css.

Which I need to get these variables into it some how, But i’m not sure if it’s best to either output the whole thing as javascript/jquery or if there’s another way of adding a variable into the CSS

<style>

    #wrapper {
        width: viewportheight ;
        height: viewportwidth ;
    }

    /* Landscape */
    @media screen and (orientation:landscape) {

        #wrapper {
            width: viewportwidth !important;
            height: viewportheight !important;
        }

    }

    /* Portrait */
    @media screen and (orientation:portrait) {

        #wrapper {
            width: viewportheight !important;
            height: viewportwidth !important;
        }

    }

</style>

Any advice would be most awesome thanks!

Josh

---

UPDATE

Here’s another method that I tried but still can’t get it to work…

    $(".portrait").css({
        "width": viewportwidth + 'px !important',
        "height": viewportheight + 'px !important'
    });

    $(".landscape").css({
        "width": viewportheight + 'px !important',
        "height": viewportwidth + 'px !important'
    });

    detectOrientation();
        window.onorientationchange = detectOrientation;
        function detectOrientation(){
            if(typeof window.onorientationchange != 'undefined'){
                if ( orientation == 0 ) {

                    //Do Something In Portrait Mode
                    $("#wrapper").removeClass("landscape").addClass("portrait");

                }
                else if ( orientation == 90 ) {

                    //Do Something In Landscape Mode
                    $("#wrapper").removeClass("portrait").addClass("landscape");

                }
                else if ( orientation == -90 ) {

                    //Do Something In Landscape Mode
                    $("#wrapper").removeClass("portrait").addClass("landscape");

                }
                else if ( orientation == 180 ) {

                    //Do Something In Portrait Mode
                    $("#wrapper").removeClass("landscape").addClass("portrait");

                }
            }
        }

Answer 1

I feel that you can solve this using css:

html,body,#wrapper{width:100%;overflow-x:hidden;}

and then you can position your expanding menus absolutely:

#menu{position:absolute,top:0}

with a margin on the content below the menus

#content{margin-top:50px}

of course it would help to see the html that you are using.
The height of the document should be that of the content normally. You should not have to set it with javascript.