How can I make a text carousel for my site cross browser friendly by using javascript or html?
Question
How can I make a text carousel for my site cross browser friendly by using Javascript or html? I have struggled with the code below because it will only work with Firefox but it fails on IE. Is there a way I can make it work on both?
<h4>Carousel-Text-Below </h4>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'
type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
function setRandomWord(){
var phrases =new Array("1-Blah Text","2-Blah Text","3-Blah Text");
$("#test").text(phrases[Math.floor(Math.random()*phrases.length)]);
}
setInterval(setRandomWord,3000);
});
</script>
</head>
<body>
<p style="border:1px dashed gray; background-color:white; padding: 10px">
<span id='test'>Blah Text-Text-Text</p>
</span> Guaranteed Service or...Text---Text</strong></p>
</body>
</html>
2 answers
solution1
1 2013-01-13 22:11:36
I presume it is because you don't have a doctype set. Tried it here, and it works with <!DOCTYPE html> in front of the <html> tag.
solution2
1 2013-01-13 22:20:58
Maybe IE is getting confused by your invalid HTML? Note that you're closing the <p> before closing the <span> inside it. Then you also have unmatched </strong> and </p> at the end. I believe you meant this:
<p style="border:1px dashed gray; background-color:white; padding: 10px">
<span id='test'>Blah Text-Text-Text</span>
<strong>Guaranteed Service or...Text---Text</strong>
</p>
Or maybe
<p style="border:1px dashed gray; background-color:white; padding: 10px">
<span id='test'>Blah Text-Text-Text</span>
</p>
<p>
<strong>Guaranteed Service or...Text---Text</strong>
</p>
I don't have IE to test right now, could you try the above jsfiddle links?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.