Page 1 of 1

scrolling text highlight

Posted: Wed Dec 30, 2009 1:18 pm
by daedalus__
you guys wanna help me clean this up a bit? :)

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>
 
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/

Re: scrolling text highlight

Posted: Wed Dec 30, 2009 1:57 pm
by omniuni
That is pretty darn awesome.

Re: scrolling text highlight

Posted: Wed Dec 30, 2009 2:57 pm
by daedalus__
yeah view my website in ie6 and ie7 or > and it gets even better.

oh and thankks :)

Re: scrolling text highlight

Posted: Wed Dec 30, 2009 6:23 pm
by omniuni
Uh, right then. I don't have access to IE (Linux user) nor do Mac people. What does it do on IE that it doesn't do on everything else?

Re: scrolling text highlight

Posted: Wed Dec 30, 2009 6:40 pm
by daedalus__
well nothing anymore. i wrote over the index without saving the changes to my local copy and now its all gone but its going to list browsers for windows that don't drive me crazy and have a link that says "click to here to view this site in internet explorer" and on the ie page it is just goign to say "too bad you can't" in really big red letters.

Re: scrolling text highlight

Posted: Wed Dec 30, 2009 6:50 pm
by daedalus__
but what is there now is cool that css text gradient thing with the highlighter looks <span style='color:blue' title='I&#39;m naughty, are you naughty?'>smurf</span> classy amazing

Re: scrolling text highlight

Posted: Wed Dec 30, 2009 7:01 pm
by omniuni
Haha! Well, this might make that (detecting IE) easy:

Code: Select all

function isNotIE(){
    if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false)){
        //This means You've got IE
        return false;
    }else{
        return true;
    }
}

Re: scrolling text highlight

Posted: Wed Dec 30, 2009 7:38 pm
by daedalus__
i use conditional comments because they seem to be the most reliable and that way i can check for different versions. anyone who is still using ie6 should be slapped and i refuse to let them view any of my personal work.

Re: scrolling text highlight

Posted: Wed Dec 30, 2009 8:30 pm
by omniuni
Kind of true, you're also somewhat limited in what you can do with IE conditionals, but hey, they work. I used them myself today to fix some IE bugs.

Re: scrolling text highlight

Posted: Wed Dec 30, 2009 9:07 pm
by daedalus__
i know that one day im probably going to end up redirecting ie6 users to goatse.

i can't remember how to disable an anchors default behavior with javascript. do you know?
edit: forgot to place a variable again :)

Re: scrolling text highlight

Posted: Sat Jan 02, 2010 1:01 am
by alex.barylski
Neat why not convert to a jQuery extension?

Re: scrolling text highlight

Posted: Sat Jan 02, 2010 2:19 pm
by daedalus__
well it needs a lot of work still and im not sure how to clean it up. i'd really like to put those functions into an object. plus code needs to be modified to work depending on what the layout is like so i would need to fix those issues. the way the code in the threads works it just pulls the innerHTML so if there are tags inside of it it will eat those up. plus when i tried to put it in a .js it stopped working :|

Re: scrolling text highlight

Posted: Sat Jan 02, 2010 9:26 pm
by omniuni
Javascript is really cool, but it does a lot of unpredictable things. Keep at it, I'm sure you'll overcome all of its redaed.. er ridiculous nuances.