Log In

Email:
Password:
Keep me logged in

Forgot Password

Email:




Social Media
     
CategoriesCSS (5)
jQuery (73)
PHP (30)
.htaccess (4)
Sponsored Links


Ticker Letter Colors
jQuery
Demo | Browse Category | Friday, February 10, 2012 by




jQuery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var h = 0; //BLANK VARIABLE UNTIL INSIDE THE FUNCTION
function ticker_color(){ //STRING AND NUMBERS OF CHARS, FROM <input> TAG
h++; //INCREMENTING VARIABLE
var str = $('#str').val();
var l = str.length;
var colors = ['#32baed', '#ed3232', '#12495d', '#00ff00'];
var c = colors.length; //NUMBER OF COLORS
var s = ''; //BLANK VARIABLE UNTIL "FOR LOOP"

for(i=0; i<l; i++){
//USE THE FOLLOWING TWO VARS TO MAKE TICKERING GO THE OTHER WAY (OPTIONAL)
//e = (l-i)-1;
//j = (e%c);
j = (i%c); //COLOR INDEX IN ARRAY
g = j+h; //SHIFTS THE COLOR TO THE NEXT LETTER
g = (g%c); //MAKES COLORS EVERY LETTER, INSTEAD JUST FOR THE NUMBER OF ARRAY ELEMENTS
s += '<span style="color:'+colors[g]+'">'+str[i]+'</span>'; //FONT-COLORS MADE
}
$("#ticker").html(s); //DISPLAYS IN HTML
setTimeout("ticker_color()", 1000); //TICKERS COLORS EVERY SECOND
}
ticker_color(); //RUNS THE FUNCTION UPON PAGE LOAD
</script>
</head>
<body onLoad="ticker_color()">
<input id="str">
<span id="ticker"></span>
</body>
</html>
Views: 83 Likes: 0 Dislikes: 0