jQuery, stop performing functions depending on window size, also in resize

Asked

Viewed 354 times

3

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

Link to external JS/CSS files: 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 occurs mainly in the functions phrasesMarginsRandomSLide1(); (slide1), slide4Slider();(slide4) and arrowsLeftRightSlide(); (left/right navigation on the side arrows).

Considering that I have no idea the section responsible for this here is the website for a better analysis, this can be seen in the animation of home page phrases after a resize any.

1 answer

4


The problem is that remove the tag script HTML and its contents do not remove the script from memory. So when your resize runs you will be merging new code on top of the old one that is in memory. I made an example here: http://jsfiddle.net/wg2cdur2/ (Notice the console when you press the button);

If you need to have a responsive system that changes the code for the same user who does a resize then you will need 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 pieces of code that are different between mobile and desktop this function makes return that is to say, the execution of that line does not continue.

if (resolucao != 'mobile') return;  // usar esta verificação em código mobile
if (resolucao != 'desktop') return;  // usar esta verificação em código desktop
  • Thanks @Sergio, when you say return, is Return of what? This check is done where? I have put exactly as it is there but it did not work. I have updated the code on top and also uploaded

  • I mean, it should stay in memory anyway, because even if I reduce the window to < 800 (mobile) functions continue to run, although already without css

  • @Miguel explained wrong, corrected. What I suggest is that you load the script from mobile and desktop, but in each function you should have the check I put on top so that that code is not run if it is in the wrong resolution for that code snippet.

  • no longer duplicates, but I made an example above with the function slide4slider, function continues to run in a resize to window < 800, if you scroll down instead of slide fadein/out still running

  • @Miguel is the slide that is running in the div #clouds2?

  • no, it’s what’s in slider 4 (share), which in resize to < 800 will stay down there, and you can see that continues

Show 1 more comment

Browser other questions tagged

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