SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    typing effect mix with tabs

    hey guys

    i'm using such tabs in my page :

    Code:
    <div id="titles">
    <div class="on"><span>test1</span></div>
    <div class="off"><span>test2</span></div>
    </div>
    
    <div id="test1" class="show">
    here goes the first paraghraph
    </div>
    <div id="Monet" class="hide">
    second one
    
    </div>
    the javaScript code :

    Code:
    onload = function() {
    	var e, i = 0;
    	while (e = document.getElementById('titles').getElementsByTagName ('DIV') [i++]) {
    		if (e.className == 'on' || e.className == 'off') {
    		e.onclick = function () {
    			var getEls = document.getElementsByTagName('DIV');
    				for (var z=0; z<getEls.length; z++) {
    				getEls[z].className=getEls[z].className.replace('show', 'hide');
    				getEls[z].className=getEls[z].className.replace('on', 'off');
    				}
    			this.className = 'on';
    			var max = this.getAttribute('title');
    			document.getElementById(max).className = "show";
    			}
    		}
    	}
    }
    all the tab contents are in the page, so it is simple.

    i have this JS typing effect : http://www.scintilla.utwente.nl/frederiek


    I want to combine these 2 codes, so that when i click on a tab , it shows its content with like someone's typing them , and stop when it is finish( no repeat) , can someone help me with that ?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    It can be done but would take some development work to ensure that html content isn't improperly treated.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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