1 Replies - 93 Views - Last Post: 09 June 2019 - 09:11 AM

#1 Sibylline   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 09-June 19

Onresize and based on window width disable javascript

Posted 09 June 2019 - 12:52 AM

Hi,

I want to disable a script when the window width is less than 1200 pixels, I don't want it to be disabled only when you reload the page but directly when you resize the page. Thanks for your help.

Here is what my code that doesn't work :


$(document).ready(function(){
 
 
 
var windowsize = $(window).width();
var totalHeight = $(document.body).outerHeight();
var scrollHContainer = $('.scroll-h-container');
var lastScrollHItem = $('.scroll-h-item:last-child');
var scrollContainerWidth = lastScrollHItem.offset().left + lastScrollHItem.outerWidth();
var scrollVContainer = $('.scroll-v-container');
var lastScrollVItem = $('.scroll-v-item:last-child');
var scrollContainerHeight = lastScrollVItem.offset().top + lastScrollVItem.outerHeight();
 
$(window).resize(function() {
windowsize = $(window).width();
if (windowsize >= 1200) {
$(window).scroll(function () {
var percent = $(window).scrollTop() / (totalHeight - window.innerHeight);
 
scrollHContainer.css({
transform: 'translateX('+(-percent * (scrollContainerWidth - $('.scroll-h').outerWidth()))+'px)'
})
 
// scrollVContainer.css({
// transform: 'translateY('+(-percent * (scrollContainerHeight - $('.scroll-v').outerHeight()))+'px)'
// })
})
}
});
 
 
 
 
});


It does work though like this (but the script is disabled only on reload) :

$(document).ready(function(){
 
 
 
if($(window).width() >= 1024) {
var totalHeight = $(document.body).outerHeight();
var scrollHContainer = $('.scroll-h-container');
var lastScrollHItem = $('.scroll-h-item:last-child');
var scrollContainerWidth = lastScrollHItem.offset().left + lastScrollHItem.outerWidth();
 
var scrollVContainer = $('.scroll-v-container');
var lastScrollVItem = $('.scroll-v-item:last-child');
var scrollContainerHeight = lastScrollVItem.offset().top + lastScrollVItem.outerHeight();
 
$(window).scroll(function () {
var percent = $(window).scrollTop() / (totalHeight - window.innerHeight);
 
scrollHContainer.css({
transform: 'translateX('+(-percent * (scrollContainerWidth - $('.scroll-h').outerWidth()))+'px)'
})
 
// scrollVContainer.css({
// transform: 'translateY('+(-percent * (scrollContainerHeight - $('.scroll-v').outerHeight()))+'px)'
// })
})
}
 
 
 
 
});


Is This A Good Question/Topic? 0
  • +

Replies To: Onresize and based on window width disable javascript

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15109
  • View blog
  • Posts: 60,436
  • Joined: 12-June 08

Re: Onresize and based on window width disable javascript

Posted 09 June 2019 - 09:11 AM

In your browser, when you hit f12 and look at the console, are you getting any errors? From that snippet I am getting one that is stopping the script from working.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1