jquery - Check browser width after resize, without reload (Javascript) -



jquery - Check browser width after resize, without reload (Javascript) -

i have little piece of javascript checks browser's width on load and, depending on result, runs piece of jquery. display different menu on mobile devices

however, can happen user starts little browser on desktop, running jquery (and hence mobile menu). if resizes full-screen, menu doesn't change, because check on browser's width doesn't run again.

the question: how adapt javascript checks every time browser resized?

my code:

if (window.innerwidth <= 992) { jquery(document).ready(function($) { $(".main-menu").hide(); $(".mobile-nav-button").click(function() { $(".main-menu").slidetoggle(500); }); }); } else { jquery(document).ready(function($) { $(".mobile-nav-button").hide(); $(".mobile-cart-button").hide(); }); }

you can utilize resize function wrapper this:

function resize(){ // stuff here }

and phone call 1 time on page load, , recall on every resize event:

$(document).ready(function(){ resize(); $(window).resize(resize); });

instead of wrapper utilize anonymous function ($(window).resize(function(){/*do stuff here*/})), can't phone call function on page load , you'd have repeat yourself.

your specific case

in specific case you'd have take out document readys. heres how should look:

function resize(){ // first need show all, selectively hide based on page width $(".main-menu, .mobile-nav-button, .mobile-cart-button").show(); if (window.innerwidth <= 992) { $(".main-menu").hide(); // also, because bind click event here, you'll need unbind every time // otherwise executed multiple times after couple of resizes // (you @david , move document.ready below) $(".mobile-nav-button").off("click").click(function() { // slidetoggle toggle display of element, because wrapped in click() // gets executed onclick, not resize. also, don't want animation on resize. $(".main-menu").slidetoggle(500); }); } else { $(".mobile-nav-button").hide(); $(".mobile-cart-button").hide(); } } $(document).ready(function(){ resize(); $(window).resize(resize); }); a snippet

below snippet code working. reduced width 700 pixels see effects @ smaller screen difference (because how snippet editor looks) works.

class="snippet-code-html lang-html prettyprint-override"><!doctype html> <html> <head> </head> <body> <div class="mobile-nav-button">mobile nav button</div> <div class="mobile-cart-button">mobile cart button</div> <div class="main-menu">main menu</dov> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> function resize(){ $(".mobile-nav-button, .mobile-cart-button, .main-menu").show(); if (window.innerwidth <= 700) { $(".main-menu").hide(); $(".mobile-nav-button").off("click").click(function() { $(".main-menu").slidetoggle(500); }); } else { $(".mobile-nav-button").hide(); $(".mobile-cart-button").hide(); } } $(document).ready(function(){ resize(); $(window).resize(resize); }); </script> </body> </html>

javascript jquery css

Comments

Post a Comment

Popular posts from this blog

Delphi change the assembly code of a running process -

Delphi change the assembly code of a running process - i'm trying alter address 00741fa5 has push test.009e721c . alter push test.009e71c8 . procedure callback; asm force $9e71c8 end; procedure tform2.btn1click(sender: tobject); var ppid :dword; pprocess : cardinal; begin getwindowthreadprocessid(findwindow(nil,pchar('test')), @ppid); pprocess := openprocess(process_all_access, false, ppid); injectasm(pprocess, $741fa5, 10, integer(@callback), 0); end; here injectasm function (with error checking) function injectasm(process: longword; injectaddress, injectsize, codeaddress, codesize : integer): pointer; var csize, rsize : integer; replaced : array of byte; jmp : array [0..4] of byte; jmpaddress : integer; nopv : byte; : integer; nbr: ulong_ptr; begin //injectsize must equal or greater 5, because need space our //(far) jmp wwxxyyzz instruction //if there's no space, inject in place of few instructions if injectsize ...
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more

C++ 11 "class" keyword -

C++ 11 "class" keyword - i've started using c++ 11 little bit more , have few questions on special uses of class keyword. know it's used declare class, there's 2 instances have seen don't understand: method<class t>(); and class class_name *var; why precede typename keyword class in first example, , keyword pointer in sec example? that known elaborated type specifier , necessary when class name "shadowed" or "hidden" , need explicit. class t { }; // love of god don't t t; t t2; if compiler smart, give these warnings: main.cpp:15:5: error: must utilize 'class' tag refer type 't' in scope t t2; ^ class main.cpp:14:7: note: class 't' hidden non-type declaration of 't' here t t; ^ if class not defined, deed forwards declaration. for example: template <typename t> void method() { using type = typename t::value_type; } method...
Read more