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.
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– Miguel
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
@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.
– Sergio
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
@Miguel is the slide that is running in the div
#clouds2
?– Sergio
no, it’s what’s in slider 4 (share), which in resize to < 800 will stay down there, and you can see that continues
– Miguel