CODEWITHSUNDEEP
javascriptjqueryhtmlcsstext-rotation
tslater
tslater

Reputation: 71

Text Rotator getting stuck on 2 of the 4 elements

Im creating a webpage and am utilizing the Simple Text Rotator plugin from http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html but I cant seem to get all 4 elements to display. It seems to pick only two of the four and keep rotating between those. The source code for the section that i'm working on is below and the website is http://www.goaptitude.com

<h1 class="promo-heading animated" data-fx="pulse">Changing how a 
                <strong class="text-rotator-fade color-high">
                    <span class="rotate">Student, Teacher, Parent, World</span>
                </strong> 
                learns
            </h1>

<script src="javascripts/jquery.simple-text-rotator.js" ></script>

Thank you for your help, I really appreciate it.

Upvotes: 0

Views: 916

Answers (2)

twain
twain

Reputation: 1325

RononDex is right that the problem only is the fade part, but by this solution the order is wrong and the first tag does only appear once.

The right solution is that only a part of the code is at the wrong position.

          index = $.inArray(el.text(), array)
          if((index + 1) == array.length) index = -1

has to be before the "el.fadeOut()" part.

This one should solve the problem:

 case 'fade':
          index = $.inArray(el.text(), array)
          if((index + 1) == array.length) index = -1
        el.fadeOut(settings.speed, function() {
          el.text(array[index + 1]).fadeIn(settings.speed);
        });
      break;

Upvotes: 3

RononDex
RononDex

Reputation: 4173

Okay, I think I have found the bug: In the plugin js file change the part of case "fade": to the following:

                case 'fade':
                    el.fadeOut(settings.speed, function () {
                        index = $.inArray(el.text(), array);
                        if ((index + 1) == array.length) index = 0;
                        el.text(array[index + 1]).fadeIn(settings.speed);
                    });
                    break;

It seems to only affect those that use the animation "fade". The other seemed not to be affected by this bug.

EDIT: Demo here

Upvotes: 2

Related Questions