scrolling text highlight

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

scrolling text highlight

Post 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/
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: scrolling text highlight

Post by omniuni »

That is pretty darn awesome.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: scrolling text highlight

Post by daedalus__ »

yeah view my website in ie6 and ie7 or > and it gets even better.

oh and thankks :)
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: scrolling text highlight

Post 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?
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: scrolling text highlight

Post 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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: scrolling text highlight

Post 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
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: scrolling text highlight

Post 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;
    }
}
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: scrolling text highlight

Post 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.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: scrolling text highlight

Post 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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: scrolling text highlight

Post 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 :)
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: scrolling text highlight

Post by alex.barylski »

Neat why not convert to a jQuery extension?
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: scrolling text highlight

Post 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 :|
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: scrolling text highlight

Post 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.
Post Reply