CODEWITHSUNDEEP
jquerycssfunctionscrollresize
alcoven
alcoven

Reputation: 321

Not sure how to properly execute resize function update

Trying to add a resize function to this that allows for the if else statement on the bottom of this script to update based on window width with a refresh and with resize as well. Everything is working properly except when the down arrow button on the hero is clicked the offset top value is not updated on resize.

Current Script in place -

$(function() {
  var windowW = $(window).width();
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if ((target.length) && (windowW > 770)) {
        $('html, body').animate({
          scrollTop: (target.offset().top) + 2
        }, 450);
        return false;
      } else {
          $('html, body').animate({
            scrollTop: (target.offset().top) - 86
          }, 450);
          return false;
      }
    }
  });
});

Things I've tried - this seams to break it.

$(window).resize(function(e) {
  var windowW = $(window).width();
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if ((target.length) && (windowW > 770)) {
        $('html, body').animate({
          scrollTop: (target.offset().top) + 2
        }, 450);
        return false;
      } else {
          $('html, body').animate({
            scrollTop: (target.offset().top) - 86
          }, 450);
          return false;
      }
    }
  });
});

DEV LINK http://www.alexcoven.com/dev/element

Upvotes: 0

Views: 36

Answers (2)

alcoven
alcoven

Reputation: 321

Thanks to @Sam0 this is the script that worked for me

$(function() {
  var windowW = $(window).width();
    $(window).resize(function(){
    windowW = $(window).width();
  });
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if ((target.length) && (windowW > 770)) {
        $('html, body').animate({
          scrollTop: (target.offset().top) + 2
        }, 450);
        return false;
      } else {
          $('html, body').animate({
            scrollTop: (target.offset().top) - 86
          }, 450);
          return false;
      }
    }
  });
});

All I needed to add was a function that updated the windowW variable on resize!

Upvotes: 0

Sam0
Sam0

Reputation: 1459

can you try just updating the windowW variable on resize. the following variation also reassesses 'a[href*="#"]:not([href="#"])' on each new click. feedback via comments if unsuccessful?

$(function() {
  var windowW = $(window).width();
  $(window).resize(function(){
    windowW = $(window).width();
  });
  $('body').on('click', function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if ((target.length) && (windowW > 770)) {
        $('html, body').animate({
          scrollTop: (target.offset().top) + 2
        }, 450);
        return false;
      } else {
          $('html, body').animate({
            scrollTop: (target.offset().top) - 86
          }, 450);
          return false;
      }
    }
  },'a[href*="#"]:not([href="#"])');
});

Upvotes: 1

Related Questions