Remove attribute from a DIV only in the mobile version

Question

Remove attribute from a DIV only in the mobile version

Navigation

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

0

I would like to rembrand the href of an element only in the mobile version, which would be at 769px, the href I would like to remove is from a menu, this menu is the same as the desktop version, it only gains another css upon entering 769px, I tried adding a new class when entering 769px to be able to modify this href without having to tinker with the desktop menu, but that does not work, when it comes back the desktop version is with the href removed.

This class .menu-mobile only exists in 769px and goes up to 769px, but as the menu is the same in both sizes it only gains one more class, I believe that is the reason for not working, because it returns it only loses the class, but the change is already made soon lose this class no has no effect whatsoever. How could I solve this? Remove the href only at 769px.

Code that I tried to use

$j(document).ready(function() {
    $j('.menu-mobile a').removeAttr('href');
});

javascript html jquery

asked by anonymous 16.10.2017 / 20:43

3 answers

0

Use "window.innerWidth" it will take full size of the site.

$(document).ready(function() {  
   var windowWidth = window.innerWidth;

   if(windowWidth <= 769) {
     $('.menu-mobile a').removeAttr('href');
   }
});

Try this code then:

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

if(!eDesktop){
  $('.menu-mobile a').removeAttr('href')
}

jQuery(document).ready(function($) {
      if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )         {
         
          $('.teste2').removeClass('teste');
       }
 });

.teste {
width: 500px;
height: 500px;
background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="teste teste2">
</div>

16.10.2017 / 20:46

0

Just complementing, to get control of the browser resizing, just use the resize method of jquery , example

$(document).ready(function() {  
   windowWidth = window.innerWidth;

   if(windowWidth <= 769) {
     $('.menu-mobile a').removeAttr('href');
   }

function onResize(){
   windowWidth = window.innerWidth;

   if(windowWidth <= 769) {
     $('.menu-mobile a').removeAttr('href');
   }
                   }

$(window).on('resize', onResize);

});

16.10.2017 / 21:13

is repeating only once How do I make two apps use the same database in firebase?

score 1 · Accepted Answer

This code will work in modern browsers. It adds (or holds) the% s of% s when the resolution is greater than or equal to 769px and removes them when it is less than or equal to that, whenever the page is uploaded or resized . I created an array to store% s of% s and retrieve them when needed:

temp_href = [];
$(window).on("load resize", function(){
    els = $(".menu-mobile a");
    if(window.innerWidth <= 769){
        for(x=0;x<els.length;x++){
            if(temp_href.length != els.length){
                temp_href.push(els.eq(x).attr("href"));
            }
            els.eq(x).removeAttr('href');
        }
    }else if(temp_href.length != 0){
        for(x=0;x<els.length;x++){
            els.eq(x).attr('href',temp_href[x]);
        }
    }
});

temp_href = [];
$(window).on("load resize", function(){
	els = $(".menu-mobile a");
	if(window.innerWidth <= 769){
		for(x=0;x<els.length;x++){
			if(temp_href.length != els.length){
				temp_href.push(els.eq(x).attr("href"));
			}
			els.eq(x).removeAttr('href');
		}
	}else if(temp_href.length != 0){
		for(x=0;x<els.length;x++){
			els.eq(x).attr('href',temp_href[x]);
		}
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="menu-mobile">
	<a href="#1">Link 1</a>
	<br />
	<a href="#2">Link 2</a>
</div>