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

Question

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

Asked 6 years, 8 months ago

Viewed 128 times

0

I have a code a function Avascript, and in the condition "IF" wanted to add one more parameter, Scrolltop side, because I just want to happen slideDown if the user of my site is on a computer screen. Take a look at him!

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>
<div id="conteudo">
    <div id="div" calss="objeto">Div para aparecer em tela de computador</div>
    Role para baixo.
</div>
</body>

2 answers

0

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();
            }

        });
    });
});

vlw my partner, more you

– Gerson Valdeir

2017/10/16 at 13:55

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.

by Laércio Lopes • **4,352** points · Answer 1 · 2017-10-15T03:25:11+00:00

I tested this code and it worked in identifying whether I 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 make a check of the width of the window, but as nowadays there are already tablets with resolution of a PC would not be the most recommended:

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