Geek Answers Handbook

Prevent Javascript from continuing if screen is less than 480 pixels

First of all, I am not a javascript expert. I'm going crazy, trying to figure out how to conditionally execute specific javascript. I use jQuery to completely focus my block on the browser page, but only if the screen size is more than 480 pixels (in another sense, I do not want this script to work on smartphones). I am using a CSS request to request my request. The fact is that this script works fine on all smartphones, Safari 5+, IE10, Firefox 13. BUT THIS DOES NOT WORK IN IE6-9 and Opera 12 (As far as I understand, they do not support transitions) CAN ANY PLEASE HELP ME PICTURE THAT I AM DEFECTED? And if there is a better way to do this? (I tried the @media request in CSS, but the script continues to work no matter what) ... I would really appreciate help.

<script> if (matchMedia('only screen and (max-device-width:800px) and ' + '(orientation: portrait)').matches) { // smartphone/iphone... maybe run some small-screen related dom scripting? event.preventDefault(); } else{ //Absolute Content Center function CenterItem(theItem){ var winWidth=$(window).width(); var winHeight=$(window).height(); var windowCenter=winWidth/2; var itemCenter=$(theItem).width()/2; var theCenter=windowCenter-itemCenter; var windowMiddle=winHeight/2; var itemMiddle=$(theItem).height()/2; var theMiddle=windowMiddle-itemMiddle; if(winWidth>$(theItem).width()){ //horizontal $(theItem).css('left',theCenter); } else { $(theItem).css('left','0'); } if(winHeight>$(theItem).height()){ //vertical $(theItem).css('top',theMiddle); } else { $(theItem).css('top','0'); } } $(document).ready(function() { CenterItem('.content'); }); $(window).resize(function() { CenterItem('.content'); }); } //end of "else" (normal execution) </script>
+4
source share
4 answers

You can try the following: -

 <script> var screenWidth = screen.width; if (screenWidth > 480 ) { //Absolute Content Center function CenterItem(theItem){ var winWidth=$(window).width(); var winHeight=$(window).height(); var windowCenter=winWidth/2; var itemCenter=$(theItem).width()/2; var theCenter=windowCenter-itemCenter; var windowMiddle=winHeight/2; var itemMiddle=$(theItem).height()/2; var theMiddle=windowMiddle-itemMiddle; if(winWidth>$(theItem).width()){ //horizontal $(theItem).css('left',theCenter); } else { $(theItem).css('left','0'); } if(winHeight>$(theItem).height()){ //vertical $(theItem).css('top',theMiddle); } else { $(theItem).css('top','0'); } } $(document).ready(function() { CenterItem('.content'); }); $(window).resize(function() { CenterItem('.content'); }); } </script>
+2
source

To get the exact height and width across the entire browser is pretty tricky due to IE, but don't worry that the solution for all browsers, including IE 6, is the latest.

These two functions are:

  if (matchMedia('only screen and (max-device-width:800px) and ' + '(orientation: portrait)').matches) { // smartphone/iphone... maybe run some small-screen related dom scripting? event.preventDefault(); } else{ //Absolute Content Center $(document).ready(function() { CenterItem('.content'); }); $(window).resize(function() { CenterItem('.content'); }); } //end of "else" (normal execution) function CenterItem(theItem){ var winWidth=getWindowWidth(); var winHeight=getWindowHeight(); var windowCenter=winWidth/2; var itemCenter=$(theItem).width()/2; var theCenter=windowCenter-itemCenter; var windowMiddle=winHeight/2; var itemMiddle=$(theItem).height()/2; var theMiddle=windowMiddle-itemMiddle; if(winWidth>$(theItem).width()){ //horizontal $(theItem).css('left',theCenter); } else { $(theItem).css('left','0'); } if(winHeight>$(theItem).height()){ //vertical $(theItem).css('top',theMiddle); } else { $(theItem).css('top','0'); } } function getWindowHeight() { var myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { myHeight = document.body.clientHeight; } return myHeight; } function getWindowWidth() { var myWidth = 0; if( typeof( window.innerWidth ) == 'number' ) { myWidth = window.innerWidth; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { myWidth = document.documentElement.clientWidth; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { myWidth = document.body.clientWidth; } return myWidth; }

This will help you get the exact height in any browser, so you can apply your logic. Hope this helps !!!

+2
source

The easiest way is not to attach an event handler if the media request does not match.

 $.fn.extend({ centerItem: function () { return this.each(function () { var $this = $(this), hCenter = ( $(window).width() - $this.width() ) / 2, vCenter = ( $(window).height() - $this.height() ) / 2; $this.css({ left: hCenter > 0 ? hCenter : 0, top: vCenter > 0 ? vCenter : 0 }); }); } }); $(function() { var bigScreen = 'only screen and (max-device-width:800px) and (orientation: portrait)'; if ( matchMedia(bigScreen).matches ) { $(window).resize(function() { $('.content').centerItem(); }); } });

Notes

  • $() replaces $(document).ready() . See http://api.jquery.com/ready/
  • By convention, only object constructors begin with a capital letter, so your CenterItem() function should be called CenterItem() .
  • I turned your function into a jQuery plugin. Of course, you can continue to use your own implementation if you find this confusing.
  • The .css() function can take an object argument, so you can set multiple CSS properties in one step.
  • I used the ternary operator ( expression ? ifTrue : ifFalse ) to replace if .
+2
source

You can do

 window.innerHeight window.innerWidth

to get the dimensions of the viewport. Now you can do:

 var width = window.innerWidth if (width > 480){ /* do desktop stuff*/ }

Alternatively, you can go for UserAgentString and / or with:

 window.navigator

( more reliable Detect-script )

However, any attempt may not work in some conditions.

edit: it would be nice if you placed your match-media function.

edit2: use the script to detect correctly in the viewport: fooobar.com/questions/105420 / ...

and then change the code:

 if ( getViewport()[0] < 480 ) { // smartphone/iphone... maybe run some small-screen related dom scripting? event.preventDefault(); } else{ // your desktop code }
+1
source

More articles:


All Articles