javascript - function triggers on window width but will not turn off if bigger than set width -

-

here have work if window width under 1024 still trigger though set trigger if on 1024

$(function () {      $('#hamburger').click(function () {         $('div.burger_nav').slidetoggle();     });      $(window).resize(function () {         if ($(window).width() < 1024) {             $('.nav_shown').hide();             $('div.footerdiv_2').hide();             $('div.hidden_nav').hide();             $('div.burger_btn').show();             $('#ft').removeclass('footerdiv_3').addclass('footer_img_clear');         } //end of if          else {             $(".nav_shown").show();             $('.footerdiv_2').show();             $('div.burger_btn').hide();             $('#ft').removeclass('footer_img_clear').addclass('footerdiv_3');              $(document).scroll(function () {                 var headershow = $(this).scrolltop();                 if (headershow > 200) {                     $('div.hidden_nav').fadein();                     $(".nav_shown").hide();                 } else {                     $('div.hidden_nav').fadeout();                     $(".nav_shown").show();                 }             });         } //end of else     }); });

it looks want modify document when window reaches breakpoint, in case 1024 pixels. known responsive web design.

instead of updating screen every time on resize, it's useful set flag triggering breakpoint.

$(function() {      $('#hamburger').click(function(){         $('div.burger_nav').slidetoggle();     });      var currentlysmall = false;     function update() {         if ($(window).width() < 1024 && !currentlysmall) {             currentlysmall = true;             console.log('less 1024');              $('.nav_shown').hide();             $('div.footerdiv_2').hide();             $('div.hidden_nav').hide();             $('div.burger_btn').show();             $('#ft').removeclass('footerdiv_3').addclass('footer_img_clear');         }         else if ($(window).width() >= 1024 && currentlysmall) {             currentlysmall = false;             console.log('more 1024');              $(".nav_shown").show();             $('.footerdiv_2').show();             $('div.burger_btn').hide();             $('#ft').removeclass('footer_img_clear').addclass('footerdiv_3');         }     }      //calling in else part above bind new scroll event each time     //instead, if should happen when screen large, use      //flag created     $(document).scroll(function () {         if (!currentlysmall) {             var headershow = $(this).scrolltop();             if (headershow > 200) {                 $('div.hidden_nav').fadein();                 $(".nav_shown").hide();             } else {                 $('div.hidden_nav').fadeout();                 $(".nav_shown").show();             }         }     });      $(window).resize(update);     update(); //force initial calculation since resize won't called when page loads });

now changes make in above update() function occur when screen sizes changes past 1024 breakpoint instead of every time screen resized.

fiddle: http://jsfiddle.net/25nfqxzk/1/

edit expanding off blgt's comment, don't believe need bind scroll event in if-else. can assigned outside , use same trigger flags.


Comments

Post a Comment

Popular posts from this blog

javascript - how to protect a flash video from refresh？ -

-
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>flash video refresh</title> </head> <body> <div id="playerzone"><embed height="496" width="580" flashvars="flvid=19742822&amp;createtime=2012-4-19 13:46:33" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#000000" name="player" id="player" src="swf/mine.swf" type="application/x-shockwave-flash"></div> <a onclick="return test();" id="test">click me popup div,and hide scrollbar</a> </body> the code upon： for example,when click a#test button,popup div,it's no problem,but want hide scrollbar while div popup. i used $('html').css('overflow','hidden') in...
Read more

visual studio 2010 - Connect to informix database windows form application -

-
i trying figure out how connect ibm informix database. have been doing research , have found threads 5 years ago examples not working. i have installed latest sdk ibm informix. i have included ibm.data.informix.dll references in project. i have included using ibm.data.informix; i adding button , on click testing conenction. debug error "sql0035n file "c:\users\adam\documents\visual studio 2010\projects\test\test\msg\en_us\db2nmp.xml" cannot opened." this file not exist , dont see anywhere in program files (x86)\ibm informix client sdk directory. my on click code is private void button1_click(object sender, eventargs e) { const string host = "192.168.obfuscated"; const string servicenum = "1525"; //port? const string server = "serverobfuscated"; const string database = "dbobfuscatedy"; const string user = "myusername"; const string password = ...
Read more

android - Associate same looper with different threads -

-
Image
in application, want create multiple threads working on single queue. create queue know need call looper.prepare() . i want other threads create should associated looper created first thread, how can achieve this? use 1 of java thread safe queue class java.util.concurrent package instead of looper achieve goal. it's more common practice. share queue between threads , post task queue entry 1 thread can entry thread. blockingqueue can - in 1 thread call take() , block thread until thread put() entry queue. that's all. producer consumer pattern example blockingqueue or concurrentlinkedqueue about blockingqueue
Read more