scrolling text highlight
Posted: Wed Dec 30, 2009 1:18 pm
you guys wanna help me clean this up a bit? 
i barely got it working haha.
also if i stick those functions in a .js and link to em it doesn't work?
in action: http://thats.redaedal.us/
Code: Select all
<script type="text/javascript">
function prepareElement(em)
{
em.chars = em.innerHTML.split('');
for (i = 0; i < em.chars.length; i++)
{
em.chars[i] = '<span>' + em.chars[i] + '</span>';
}
em.innerHTML = em.chars.join('');
return true;
}
function populateChars()
{
first = document.getElementsByTagName('h3')[0];
second = document.getElementsByTagName('h1')[0];
prepareElement(first);
prepareElement(second);
for (i = 0; i <= first.childNodes.length; i++)
{
chars[i] = first.childNodes[i];
}
for (i = first.childNodes.length-1, n = 0; i < ((first.childNodes.length - 1) + second.childNodes.length); i++, n++)
{
chars[i] = second.childNodes[n];
}
return true;
}
function scrollHighlight(i, chars)
{
t = setTimeout('scrollHighlight(i++, chars); if (i > ((chars.length)+16)) { i = 0; }', 100);
(typeof(chars[i-15]) != 'undefined') ? chars[i-15].style.color = colors[6] : '' ;
(typeof(chars[i-14]) != 'undefined') ? chars[i-14].style.color = colors[6] : '' ;
(typeof(chars[i-13]) != 'undefined') ? chars[i-13].style.color = colors[6] : '' ;
(typeof(chars[i-12]) != 'undefined') ? chars[i-12].style.color = colors[6] : '' ;
(typeof(chars[i-11]) != 'undefined') ? chars[i-11].style.color = colors[5] : '' ;
(typeof(chars[i-10]) != 'undefined') ? chars[i-10].style.color = colors[4] : '' ;
(typeof(chars[i-9]) != 'undefined') ? chars[i-9].style.color = colors[3] : '' ;
(typeof(chars[i-8]) != 'undefined') ? chars[i-8].style.color = colors[2] : '' ;
(typeof(chars[i-7]) != 'undefined') ? chars[i-7].style.color = colors[1] : '' ;
(typeof(chars[i-6]) != 'undefined') ? chars[i-6].style.color = colors[0] : '' ;
(typeof(chars[i-5]) != 'undefined') ? chars[i-5].style.color = colors[1] : '' ;
(typeof(chars[i-4]) != 'undefined') ? chars[i-4].style.color = colors[2] : '' ;
(typeof(chars[i-3]) != 'undefined') ? chars[i-3].style.color = colors[3] : '' ;
(typeof(chars[i-2]) != 'undefined') ? chars[i-2].style.color = colors[4] : '' ;
(typeof(chars[i-1]) != 'undefined') ? chars[i-1].style.color = colors[5] : '' ;
(typeof(chars[i]) != 'undefined') ? chars[i].style.color = colors[6] : '' ;
if (i >= ((chars.length)+16))
{
clearTimeout(t);
i = 0;
t = setTimeout('scrollHighlight(i++, chars); if (i > ((chars.length)+16)) { i = 0; }', 4000);
}
return true;
}
y=0;
var colors = new Array();
colors[0] = '#dadaff';
colors[1] = '#c9cdfc';
colors[2] = '#b7c0f8';
colors[3] = '#a6b3f5';
colors[4] = '#94a5f2';
colors[5] = '#8398ef';
colors[6] = '#718beb';
var chars = new Array();
window.onload = function()
{
populateChars();
i = 0;
setTimeout('scrollHighlight(i++, chars); if (i > ((chars.length)+colors.length)) { i = 0; }', 2500);
}
</script>
also if i stick those functions in a .js and link to em it doesn't work?
in action: http://thats.redaedal.us/