removing a div using jquery for mobile

Question

Hopefully this isn't a repeat of another question out there.

I want to remove a floating social button sharer when my screen resolution is below a certain number of pixels or a mobile device.

Main reason is so it doesn't load and slow down my mobile page speed on google page speed.

I have entered the following code in my head

<script type="text/javascript">
    $(document).ready(function() {
        var screen = $(window)
        if (window.innerWidth < 1280) {
            $("#legacy-social-bar").remove();
        }
    } else {
        $("#legacy-social-bar").show();
    }
    });

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

any idea where I am going wrong?

the div id and class is #legacy-social-bar

Thanks

Answer 1

Rather than remove the div, you may want to hide it instead.

$(document).ready(function() {
    var screen = $(window)
    if (screen.innerWidth < 1280) {
        $("#legacy-social-bar").hide();
    } else {
        $("#legacy-social-bar").show();
    }
});

Also, your brackets on your if else seem to be off a bit.

Answer 2

Your if else block is closed prematurely, you have an extra } .

Your screen variable appears to be unused, you can use the innerWidth from that instead:

 $(document).ready(function() {
        var screen = $(window);
        if (screen.innerWidth() < 1280) {
            $("#legacy-social-bar").remove();            
        } else {
           $("#legacy-social-bar").show();
        }
    });