Reputation: 13
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.
Upvotes: 1
Views: 258
Reputation: 1333
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(...);
});
}
Upvotes: 2
Reputation: 33409
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.
Upvotes: 4