CODEWITHSUNDEEP
javascript
Brad Fletcher
Brad Fletcher

Reputation: 3593

Javascript Slider not accepting HTML

I'm using this little script for scrolling text, it stores the slides in an array but I cannot use HTML tags within the array, is there a way around this?

//SLOGAN CHANGE
var cnt=0, texts=[];

// save the texts in an array for re-use
$(".slogan-content").each(function() {
  texts[cnt++]=$(this).text();
});
function slide() {
  if (cnt>=texts.length) cnt=0;
  $('.slogan').html(texts[cnt++]);
  $('.slogan')
    .fadeIn('slow').animate({opacity: 1.0}, 2900).fadeOut('slow', 
     function() {
       return slide()
     }
  );      
}      
slide()

Upvotes: 0

Views: 37

Answers (2)

phreakv6
phreakv6

Reputation: 2165

It looks like what you need is to escape the html you are trying to store in the array. Try this.

function escapeHtml(str) {
    return str
         .replace(/&/g, "&")
         .replace(/"/g, """)
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/'/g, "&#039;");
 }

and in the $.each(), do this.

$(".slogan-content").each(function() {
  texts[cnt++]=escapeHtml($(this).html());
});

Upvotes: 0

Shadi Shaaban
Shadi Shaaban

Reputation: 1720

Try changing .text() to .html() as follows:

$(".slogan-content").each(function() {
  texts[cnt++]=$(this).html();
});

Upvotes: 1

Related Questions