jquery's removeAttr function inside $(document).ready doesn't work

Question

Got stuck with some trouble. I got a page, where I use @media to create mobile and tablet version separatly. In mobile version I use mmenu jquery plugin, to make a sliding menu. In tablet version I do not want to use this menu, but still planning to use it's html. So I decided to remove id, that shows mmenu plugin where it need to make sliding menu. But for some reason juery's removeAttr does not work as I expected. Ps: I'm pretty new to js, so I might not know about thihgs related to browser workings.

I got this code (html is pretty simple - nav, that wraps a bunch of ul's) :

   var func = function() {
            var width = $(window).width();
            var menu = $(".menu");
            /*if it is tablet*/
            if (width > 401) {
                menu.removeAttr("id");
            }

            /*loading mmenu*/
            $(function() {
                $('#my-menu').mmenu({
                    slidingSubmenus: false,
                    zposition: "next"
                });
            });

        };

        $(document).ready = func();

I'll be very happy if someone clarifies where is my mistake.

Answer 1

You're binding document.ready incorrectly. It should be

$(document).ready(func);

You don't set the property, and you don't call your function.

Answer 2

Instead of removing the ID from #my-menu , you could move the function to create the menu inside the width-checking function. That way, the menu is only created if the width is wider than 401. Otherwise it's skipped altogether.

if (width > 401) {
    $(function(){
        $('#my-menu').mmenu(...);
    });
}