Hide A DIV if screen is narrower than 1280px

[admin]

I'm trying to implement a floating div that automatically detects the screen resolution of the user. IF the resolution is lower than 1280, a certain div will be automatically hidden.

I've read <a href="https://stackoverflow.com/questions/5277872/hide-a-div-if-screen-is-narrower-than-1024px">this</a> and <a href="https://stackoverflow.com/questions/4296012/hide-div-if-screen-is-smaller-than-1024">this</a> and tried to use those codes but it's not working for me. I'm using wordpress and pasted the js code in the

</header>

The codes i pasted in my header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {

    var screen = $(window)    

    if (screen.width < 1280) {
        $("#floatdiv").hide();
    }
    else {

        $("#floatdiv").show();
    }

});

//run on document load and on window resize
$(document).ready(function () {
    //on load
    hideDiv();
    //on resize
    $(window).resize(function(){
        hideDiv();
    });
}); 
</script>

unfortunately, i can't make it work. what seems to be the problem here?