Code for javascript to display div only in one size screen x, Ex: pc

Question

Code for javascript to display div only in one size screen x, Ex: pc

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm having a code with a javaScript function, and in the "IF" condition I wanted to add another parameter, on the ScrollTop side, because I only want the slideDown to happen if the user of my site is on a computer screen. Take a look at it!

jQuery(document).ready(function($) {

	$(function(){
		var nav = $('.objeto');
		$(window).scroll(function () {
			if ($(this).scrollTop() >= 150) {
				//nav.fadeIn();
				$('#div').css("background","#06f2c9").slideDown(2000);
				//$("#div").animate({background-color:"#333"});
				
			} else {
				nav.fadeOut();
			}

		});
	});
});

div#div{
  background-color:blue;
  width:100%;
  height:90px;
  top:0px;
  display:none;
  position:fixed;
  
}
div#conteudo{
  background-color:f9f9f9;
  width:100%;
  height:1000px;
  margin:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body><divid="conteudo">
    <div id="div" calss="objeto">Div para aparecer em tela de computador</div>
    Role para baixo.
</div>
</body>

javascript

asked by anonymous 14.10.2017 / 18:17

2 answers

0

I tested this code and it worked in the id if it was accessing from a desktop or not:

function eDesktop() {
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    return false;
  } else {
    return true;
  }
}

if(eDesktop){
  alert('É Desktop!')
}

This can do a check of the width of the window, however as there are already tablets with a resolution of a PC today would not be the most recommended:

if (window.innerWidth >= 800){
  //acao para maior que 800 pixels
} else {
  //acao para menor que 800 pixels
}

15.10.2017 / 05:25

Angular - How to pull a request from another page Print table value

score 0 · Accepted Answer

I just added the "window.innerWidth", it takes the full screen size.

jQuery(document).ready(function($) {
    $(function(){
        var nav = $('.objeto');
        var window = window.innerWidth;

        $(window).scroll(function () {
            if (($(this).scrollTop() >= 150) && (window <= 767)) {
                //nav.fadeIn();
                $('#div').css("background","#06f2c9").slideDown(2000);
                //$("#div").animate({background-color:"#333"});

            } else {
                nav.fadeOut();
            }

        });
    });
});