im going discover how make menu resposible small screen. trying find jquery code so. code running need make more complicated , try response on current screen width. when trying call mobmenu() menuscreen() function think lost current $(this) object because code stoped running. can helpfull.
(function($) { $.fn.mobmenu = function(options) { console.log("m1 - current version of jquery being used: jquery " + jquery.fn.jquery); return this.each(function(){ console.log("m1.1 - waiting click..."); //---------- , nothing going on here :-( $(this).find("ul.nav > li > .not_active").on("click", function(){ console.log("m2 - menu element cliked"); if ($(this).siblings(".nav-child").css("display") == "block") { $(this).siblings(".nav-child").toggle(); } else { console.log("m3 else loop"); $(this).parents(".nav").find(".nav-child").css("display", "none"); $(this).siblings(".nav-child").toggle(); console.log("m4 else loop end"); }; $(this).siblings(".nav-child").find(".not_active").on("click", function() { if ($(this).siblings(".nav-child").css("display") == "block") { $(this).parents("li").find("li .nav-child").toggle(); }; if ($(this).siblings(".nav-child").css("display") == "none") { console.log("m5 - menu 2nd level display before: ", $(this).siblings(".nav-child").css("display")); $(this).siblings(".nav-child").toggle(); console.log("m6 - menu 2nd level display after: ", $(this).siblings(".nav-child").css("display")); }; }); }); }); }; })(jquery); (function($) { $(document).ready(function() { function menuscreen() { console.log("3 - called menuscreen"); console.log("4 - screen.width = ", screen.width,"px"); $(this).mobmenu(); console.log("5 - called mobmenu"); }; //----------------------------------------------- console.log("1 - main code start after page ready"); if ($(window).width() < 400) { console.log("2 - czy < 400px: -> ", screen.width, "px", $(window).width()," px" ); menuscreen(); } else { console.log("6 - screen larger than: 400 -> ", screen.width); }; //----------------------------------------------- $(window).on('resize', function() { console.log("7 - screen resize detected"); if ($(window).width() < 400) { console.log("7 - after resize screen", screen.width); menuscreen(); console.log("8 - menuscreen called"); } else { console.log("9 - screen after resize operation still larger than: 400 -> ", screen.width); }; }); }); })(jquery);
use actual selector call plugin.
the way using now, this not element
change
$(this).mobmenu(); to
$('#mobmenuid').mobmenu(); please note going compounding many many click handlers calling inside resize event.
resize event can triggered many times second during manual resize ... , each time call plugin inside compounding click listeners on top of existing click listeners
Comments
Post a Comment