0

I am animating a line of text with Jquery which I want to stop at certain window size. When the screen width dips below a certain value, I want to stop my function from running.

I don't get what should be the precise approach? Here is the code:

<h1 class="tlt">Thr brown fox jumped over the grizzely</h1>

<script type="text/javascript">
  $('.tlt').textillate();
</script>
sKhan
  • 9,694
  • 16
  • 55
  • 53
K. Kaur
  • 59
  • 1
  • 1
  • 7

1 Answers1

0

You can make

  $(window).height()
  $(window).width()

a condition for your animation.

Like..

 // check if window size changed
   $(window).resize(function() {
    if($(window).height() < 800 && $(window).width() < 600){
      $('.tlt').textillate();
    }
   });

And it gets only executed on your condition.

Hope that is what you asked for.

Some more informations: How can I detect window size with jQuery?

Edit: 

<h1 class="tlt">Thr brown fox jumped over the grizzely</h1> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script type="text/javascript"> 
    if($(window).height() > 600 && $(window).width() > 800) 
        $('.tlt').textillate();

$(window).resize(function() { 
    if($(window).height() > 600 && $(window).width() > 800) 
        $('.tlt').textillate(); 

    else
        $('.tlt').textillate('stop');
}); 
</script>

First, it initially checks the height/width of the window and starts or don't starts the textillate function. Then, everytime the window resized it checks again. If it doesn't is in height/width area, it stops, otherwise, it will go start the thing/go on. I've tried it and it worked for me. You have to include your textillate-file of course.

Community
  • 1
  • 1
Klassik
  • 141
  • 11
  • Thanks for the quick response but it didn't work for me .here is the code :

    Thr brown fox jumped over the grizzely

    Thanks     – K. Kaur Feb 21 '16 at 22:12
  • Thanks a lot , I've figured it out somehow . Here is the link for this live example www.kirandip.com, any comments will be appreciated. – K. Kaur Feb 22 '16 at 19:58