Question 182471 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to initialize marquee on mobile and destroy on desktop with jQuery

How can i initialize marquee on mobile and destroy it on desktop with jQuery ? each time i minimize the window width, i want to check if it hits the minimum threshold and just say if its less than < 767px, i want the marquee to initialize. If user expand the window width > 767px, i want the marquee to be destroy..

The code i have now seems to be buggy as it crashes the whole site..

The is the repo i’m using for reference https://github.com/aamirafridi/jQuery.Marquee

<script src="//cdn.jsdelivr.net/npm/[email protected]/jquery.marquee.min.js" type="text/javascript" defer></script>
<script>
  window.onload = function () {
    if (window.jQuery) {
      $(function () {
        var width = $(window).width();
        if (width <= 767) {
          $('.tt-services-listing').marquee({
            duration: 20000,
            duplicated: true,
            delayBeforeStart: 0,
            startVisible: true,
          });
        }
        $(window).on('resize', function () {
          if (width >= 768) {
            // I want to check here each time the user resize, if hits the threshold, DESTROY marquee here
            $('.tt-services-listing').marquee('destroy');
          } else {
            $('.tt-services-listing').marquee({
              duration: 20000,
              duplicated: true,
              delayBeforeStart: 0,
              startVisible: true,
            });
          }
        });
      });
    }
  };
</script>
Tags:

2

Answers


  1. 0

    is it compulsary to use jQuery?
    if not then i believe it can achieve it by media query also….

    just add these lines to your css file…

    //css starts here //

    marquee {
    display: none;
}

@media only screen and (max-width: 767px) {

    marquee {
        display: block;
    }
    
}
    Login or Signup to reply.
  2. 0

    It seemes the issue with the width during the window.onload event, when the resize event is triggered, the width value remains the same.

    Try the following code:

    <script src="//cdn.jsdelivr.net/npm/[email protected]/jquery.marquee.min.js" type="text/javascript" defer></script>
<script>
  $(function() {
    var marqueeInitialized = false;

    //initialize the marquee
    function initializeMarquee() {
      $('.tt-services-listing').marquee({
        duration: 20000,
        duplicated: true,
        delayBeforeStart: 0,
        startVisible: true,
      });
      marqueeInitialized = true;
    }

    //destroy the marquee
    function destroyMarquee() {
      $('.tt-services-listing').marquee('destroy');
      marqueeInitialized = false;
    }

    //check the window size and initialize/destroy the marquee accordingly
    function checkWindowSize() {
      var width = $(window).width();
      if (width <= 767 && !marqueeInitialized) {
        //initialize marquee if window width is less than or equal to 767px and marquee is not already initialized
        initializeMarquee();
      } else if (width > 767 && marqueeInitialized) {
        //destroy marquee if window width is greater than 767px and marquee is currently initialized
        destroyMarquee();
      }
    }

    $(window).on('resize', function() {
      //call on resize
      checkWindowSize();
    });

    //on page load
    checkWindowSize();
  });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search