Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need help with DHTML typewriter ticker

    Hi folks, I need some help with a DHTML ticker I'm working with. Currently the script outputs (via innerHTML) a message from a single variable--I need to adapt this to cycle through multiple messages from an array. Any help would be GREATLY appreciated. Here's the script:

    Code:
    var outputDiv = null; 
    var typedPortion = ''; 
    var cursorChar = ''; 
    var cursorHTML = '<span class="cursorChar">@<\/span>'; 
    var workHTML = ''; 
    var count = 0; 
    var typing = setInterval('typeText();', 20); 
    var message = 'A typed message with <span class=\"foo\" style=\"color: #990000\">embedded<\/span> html.'; 
    var msgLength = message.length; 
    
    function typeText() { 
    
    	outputDiv = document.getElementById('outputDiv'); 
    	
    	if (count == msgLength) { 
    		clearInterval(typing); 
    		return; 
    	}
    	
    	else if (count == 0) { 
    		typedPortion = ''; 
    	}
    	
    	else { 
    		typedPortion = message.substring(0, count); 
    		cursorChar = message.charAt(count); 
    	}
    
    	if (/</.test(cursorChar)) { 
    		var tag = message.substring(count).match(/<\/?[^>]+>/); 
    
    		if (tag) { 
    			typedPortion += tag[0]; 
    			count += tag[0].length; 
    		}
    	}
    
    	else { 
    		workHTML = '';
    		workHTML += typedPortion; 
    
    		if (count != msgLength - 1) { 
    			workHTML += cursorHTML.replace(/@/, cursorChar); 
    			outputDiv.innerHTML = workHTML; 
    			count++; 
    		}
    	}
    }
    
    window.onload = function() { 
    	typeText(); 
    }
    Thanks a bunch!

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    This section right here is a working example of what you want you'll be able to mod it to do what you want
    Code:
    var cnt=1;
    var stories = new Array('story1','story2','story3','story4','story5');
    function initializeTimer(id) {
         document.getElementById(id[cnt]).style.display=block;
         timerID = setInterval('chgImage(stories)', 5000) // change the image every 5 seconds
    }
    function chgStory(id) {
         document.getElementById(id[cnt]).style.display='none';
         cnt=++cnt%stories.length; // this just cycles 0,1,2,3,4,5,0,1,2..
         document.getElementById(id[cnt]).style.display='block';
    }
    initializeTimer(stories);


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •