html - Add browser max-width (media query) to javascript when hide header? -

-

could use help*

i want control on width hide header (javascript) starts working lets say: @ width 667px , downwards. mobile viewing, don't want use:

if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.useragent) ) {

because doesn't let me control larger screen sizes big tablets/phones.

i saw media query scripts javascript, can't work code see below:

--> fiddle

// hide header on scroll down //  var didscroll; var lastscrolltop = 0; var delta = 44; var navbarheight = $('header').outerheight();  $(window).scroll(function(event){ didscroll = true; });  setinterval(function() { if (didscroll) {     hasscrolled();     didscroll = false; } }, 250);  function hasscrolled() { var st = $(this).scrolltop();  // make sure scroll more delta if(math.abs(lastscrolltop - st) <= delta)     return;  // if scrolled down , past navbar, add class .nav-up. // necessary never see "behind" navbar. if (st > lastscrolltop && st > navbarheight){     // scroll down     $('header').addclass('nav-up'); } else {     // scroll     if(st + $(window).height() < $(document).height()) {         $('header').removeclass('nav-up');     } }  lastscrolltop = st; }

if sole desire hide header (your question not clear that) when viewport smaller n pixels not need js that. use simple css media queries:

 @media screen , (max-width: 667px) {      .your-header-class {          display: none;      }  }

but if want go mobile first should do:

/* general + mobile css */ .your-header-class {      display: none; } /* tablet + desktop css */ @media screen , (min-width: 667px) {     .your-header-class {         display: block;     } }

otherwise check out this answer gave couple of days ago.

i repost code couple of comments might of use you:

$(window).resize(function() {     // make sure 'media query' run,     // once viewport has stopped changing in size     cleartimeout(resizetimer);     resizetimer = settimeout(breakpointchange(), 400); });  function breakpointchange() {     // window width     width = window.innerwidth;      // adapt values (i.e. 667) here     if (!mobile && width < 667) {                 tablet = desktop = false;         mobile = true;         // mobile, execute js here     }      if (!tablet && width > 401 && width < 768) {         mobile = desktop = false;         tablet = true;         console.log('is tablet');     }      if (!desktop && width > 769) {         mobile = tablet = false;         desktop = true;         console.log('is desktop');     } } // you'll need call $(window).resize(); first time script loads $(window).resize();

this allows control media breakpoints - define functions next these two, , call them inside appropriate conditional.


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more