jQuery, stop running functions depending on window size, also do not resize

Question

jQuery, stop running functions depending on window size, also do not resize

Navigation

#1 by (4 votes)

3

I'm working on a site that calls external JS files. The problem is that when I would like some functions to stop running on desktop when $(window).width() < 800 and vice versa:

External JS / CSS file link: HTML tag HEAD:

...

<link rel="stylesheet" media='screen and (min-width: 801px)' href ="css/styles.css">
<link rel="stylesheet" media='screen and (max-width: 800px)' href ="css/stylesMob.css">


<script type="text/javascript" src="js/desktopLayout.js"></script>
<script type="text/javascript" src="js/mobileLayout.js"></script>

desktopLayout.js:

var resolucao = $(window).width() > 800 ? 'desktop' : 'mobile';
$(window).resize(function(){
    resolucao = $(window).width() > 800 ? 'desktop' : 'mobile';
    console.log(resolucao);
});

...
//funções todas aqui
...
function slide4Slider() {

if (resolucao != 'desktop') return;

$("#photosSlide4 > div:eq(0) img:gt(0)").fadeOut(0);
$("#photosSlide4 > div:eq(1) img:gt(0)").fadeOut(0);
$("#photosSlide4 > div:eq(2) img:gt(0)").fadeOut(0);

setInterval(function() { 
    $('#photosSlide4 > div:eq(0) img:eq(0)').fadeOut(800).next().fadeIn(300).end().appendTo('#photosSlide4 > div:eq(0)');
    $('#photosSlide4 > div:eq(1) img:eq(0)').fadeOut(800).next().fadeIn(300).end().appendTo('#photosSlide4 > div:eq(1)');
    $('#photosSlide4 > div:eq(2) img:eq(0)').fadeOut(800).next().fadeIn(300).end().appendTo('#photosSlide4 > div:eq(2)');
},  3000);

}

function runSiteDesktop() {

   phrasesMarginsRandomSLide1();
   pizzasSlider3Animations();
   navSlider3HoverPhrase();
   arrowsLeftRightSlide();
   sizingAndRisizing();
   navBarAnimation();
   contactFancyBox();
   logoAnimation();
   navBarSlider();
   scrollEvents();
   slide4Slider();

}

$(document).ready(function() {
    runSiteDesktop();
});

This effect is mainly seen in the functions phrasesMarginsRandomSLide1(); (slide1), slide4Slider(); (slide4) and arrowsLeftRightSlide(); (navigation left / right on the side arrows).

Given that I have no idea of the section responsible for this here is the website for a better analysis, this can be check in the animation of the homepage phrases after a resize any.

jquery resize multiple

asked by anonymous 24.10.2014 / 16:11

1 answer

How to use QVectorQVector double as array? AngularJS with Socket.io and MySQL data

score 4 · Accepted Answer

The problem is that removing the script tag from the HTML and its contents does not remove the script from memory. So when your resize run will be putting new code on top of the old one that stays in memory. I made an example here: link (notice the console when you press the button);

If you need to have a responsive system that changes the code to the same user who resizes it, then you will have to have a flag indicating which code to run.

Suggestion:

var resolucao = screen.width > 800 ? 'desktop' : 'mobile';
$(window).resize(function(){
    resolucao = screen.width > 800 ? 'desktop' : 'mobile';
});

And then within each function, event handler and other code parts that are different between mobile and desktop this function does return ie does not continue execution of this line.

if (resolucao != 'mobile') return;  // usar esta verificação em código mobile
if (resolucao != 'desktop') return;  // usar esta verificação em código desktop