jQuery - Simple text spinner with href links


username

I'm using the "Simple Text Rotator" and its awesome functionality, the only problem I'm having is that the text I'm trying to rotate is a link:

<h1 class="sliding-text">
    <span class="rotate">
        <a href="#link-1">Link 1</a>, 
        <a href="#link-2">Link 2</a>,
        <a href="link-3.php">Link 3</a>,
        <a href="link-4.php">Link 4</a>
    </span>
</h1>

But when I run my site they are no longer links :(

This is how I add the library to the sliding text h1:

$(".sliding-text .rotate").textrotator({
    animation: "fade",
    speed: 1000
});

Here is the jQuery code for the library:

!function ($) {

    var defaults = {
        animation: "fade",
        separator: ",",
        speed: 2000
    };

    $.fx.step.textShadowBlur = function (fx) {
        $(fx.elem).prop('textShadowBlur', fx.now).css({ textShadow: '0 0 ' + Math.floor(fx.now) + 'px black' });
    };

    $.fn.textrotator = function (options) {
        var settings = $.extend({}, defaults, options);

        return this.each(function () {
            var el = $(this)
            var array = [];
            $.each(el.text().split(settings.separator), function (key, value) {
                array.push(value);
            });
            el.text(array[0]);

            // animation option
            var rotate = function () {
                switch (settings.animation) {

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

}(window.jQuery);

As you can see the delimiter is, ,this is what I have after each link, why doesn't the link appear? Is there any way I can add a link with text in the spinner?

Vine

It appears that the library is set up to only use jQuery's .text() method for rotation. This way, all the extra HTML will be parsed out when building the text array. A few modifications to the library code will solve the problem for you.

  var el = $(this)
  var array = [];

  $.each(el.html().split(settings.separator), function(key, value) {
    array.push(value);
  });

  el.html(array[0]);

We switch the library's use of .text() to .html() here. This ensures that HTML elements are added to the array between the delimiters, not just the element's inner text.

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

What we do in the library's rotation function is basically the same. Switch it to .html() so the comparison still works so that the HTML in the array fades in properly.

See this fiddle for a working demo

Related


jQuery - Simple text spinner with href links

username I'm using the "Simple Text Rotator" and its awesome functionality, the only problem I'm having is that the text I'm trying to rotate is a link: <h1 class="sliding-text"> <span class="rotate"> <a href="#link-1">Link 1</a>, <a href=

How to replace href links in text using jQuery

Alpha reticulum cells HTML example: <p><a href='link1' target='_blank'><font color='blue' size='4'>TEXT 1</font></a></p> <br /> <p><a href='link2' target='_blank'><font color='blue' size='4'>TEXT 2</font></a></p> <br /> <p><a href='link3' target='_

How to replace href links in text using jQuery

Alpha reticulum cells HTML example: <p><a href='link1' target='_blank'><font color='blue' size='4'>TEXT 1</font></a></p> <br /> <p><a href='link2' target='_blank'><font color='blue' size='4'>TEXT 2</font></a></p> <br /> <p><a href='link3' target='_

jQuery - Simple text spinner with click event

username I'm using the simple text spinner and its awesome functionality, the only problem I'm having is that I'm not using its click event: $(function() { $('a[href*=#]:not([href=#])').click(function() { if(!$(this).hasClass('carousel-control'

jQuery - Simple text spinner with click event

username I'm using the simple text spinner and its awesome functionality, the only problem I'm having is that I'm not using its click event: $(function() { $('a[href*=#]:not([href=#])').click(function() { if(!$(this).hasClass('carousel-control'

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

jQuery text spinner problem

lion dirty I need to show the first container with text and then show and hide the previous/next with a certain delay, but the problem is if I give the class .active the first .container of the text js code and add the addClass again to the first element, but

Accessibility: 2 links same text and different HREF

Diego Jancic In a web application I have a list of things with the following structure: As you can see, when we list items (users, roles, or basically anything), we have some associated actions on the right, highlighted in yellow. In this case, all items have

How to change the color of links (href text) in thyme?

as: I have the following link (href) in a Thymeleaf page. <div class="product-preview-container" th:each="prodInfo : ${products}"> <ul> <li>Product Code: <span th:utext="${prodInfo.productCode}"></span></li> <li>Product Name: <span th

Find all links with href starting with specific text

Alexin I need to find all links on pages that hrefstart with ../items/. E.g: <a href="../items/some-link">Some link title</a> <a href="../other-link">Other link title</a> <a href="../items/some-link-2">Some link title 2</a> I tried the following regex but it

How to change the color of links (href text) in thyme?

as: I have the following link (href) in a Thymeleaf page. <div class="product-preview-container" th:each="prodInfo : ${products}"> <ul> <li>Product Code: <span th:utext="${prodInfo.productCode}"></span></li> <li>Product Name: <span th

Click on links based on text and href attributes protractor

new world For some people, this question may be easy. I want to click on a link based on the href value and the text in the link. Below is what I use to search for the text in the link. var elementselected = this.coinDataTable.element(by.css('a[href*='+CoinLin

jQuery AJAX loading with multiple href links

Su Hi all, I am trying the following to work... demo_test.txt is loaded into the "div1" container Only have href ID "test" to trigger it <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

href nav links not working after jQuery easing

Loop I have a navbar on the website http://deliciousproductions.com.au and the href link in the navbar doesn't seem to work, the href content of #about works but not for actual links like home. <nav class="navbar navbar-default navbar-fixed-top"> <div class="c