$(window).width(); not work at correct position

Question

Thats my code:

$(window).on("load scroll resize", function() 
{
    if( $( window ).width() >= 767)
    { 
        $( ".boxlogo" ).css("display","block");
        $( ".nav > li").css("margin-top","95px");`

        var s = $(window).scrollTop();
        if(s  > 1)
        {
            $( ".boxlogo" ).css("width","140px");
            $( ".navbar-color" ).css("background-color","#fff");
            $( ".dropdown-menu > li > a") .css("color","#000");
            $( ".dropdown > a ").css("color","#000");
            $( ".nav > li > a").css("color","#000");                    
            $( ".dropdown-menu > li > a") .css("text-shadow","2px 2px #fff");
            $( ".dropdown > a ").css("text-shadow","1px 1px #fff");
            $( ".nav > li > a").css("text-shadow","1px 1px #fff");
            $( ".nav > li").css("margin-top","62px");
            $( ".dropdown-menu").css("background-color","#fff");
        }
        else 
        {
            $( ".boxlogo" ).css("width","200px");
            $( ".navbar-color" ).css("background-color","transparent");                
            $( ".dropdown-menu > li > a") .css("color","#fff");
            $( ".dropdown > a ").css("color","#fff");
            $( ".nav > li > a").css("color","#fff");
            $( ".dropdown-menu > li > a") .css("text-shadow","1px 1px #000");
            $( ".dropdown > a ").css("text-shadow","1px 1px #000");
            $( ".nav > li > a").css("text-shadow","1px 1px #000");
            $( ".dropdown-menu").css("background-color","transparent");
            $( ".nav > li").css("margin-top","96px");
        }
    }//if windows
    else {
        $( ".boxlogo" ).css("display","none");
        $( ".nav > li").css("margin-top","5px");
    }
});//scroll resize*/`

The problem is that:

$( ".boxlogo" ).css("display","block");
$( ".nav > li").css("margin-top","95px");

not work when the windows width is 767px but at 784px...why?? thats more important because is the point when menu change style. I have try to use if( $( window ).innerWidth() >= 767) but the problem persist. I also try to do that with css @media but not work at all. I'm using bootstrap.

Try first adding a printout of the relevant properties you need. — FDavidov, Nov 04 '16 at 22:16

score 0 · Accepted Answer · answered Nov 05 '16 at 08:36

0

Instead of using $(window).width() or something similar you could try the property document.documentElement.clientWidth which returns the document width (without scrollbar). At least this works for me in a similar case and across browsers as far as I can say.

answered Nov 05 '16 at 08:36

Flyer53

754
6
14

Read [this SO answer](http://stackoverflow.com/a/7205786/1891677) for a good explanation on what `document.clientWidth` returns and when. – tao Nov 05 '16 at 09:03
Besides, they are trying to match a media query in their CSS. Your code will only work as OP expects on pages without scrollbar and will misbehave when a scrollbar is present, if the current browser renders the page in desktop mode (with solid sidebars). – tao Nov 05 '16 at 09:16
@AndreiGheorghiu `document.clientWidth` returns undefined because it doesn't exsist. I talked about `document.documentElement.clientWidth`. Anyway, I did not say this is the most perfect solution for everyone, but it's worth a try. In my usecase it works absolutely perfect in IE11, EDGE, FF, Chrome and Brave ... with or without visible scrollbars. So I don't see a reason not to try it. – Flyer53 Nov 05 '16 at 09:41
I meant `document.documentElement.clientWidth`. If you read the answer (and the question) I linked to, you would know we are referring to the same property, but it's a very good observation. In JavaScript one should be exact. But apart from that, please note you are the only one here who knows and refers to your use-case. Everyone else refers to the OP use-case, because that's what this question is about. – tao Nov 05 '16 at 13:37

$(window).width(); not work at correct position

1 Answers1