Automatically Create a Page Index

pcx99 (Patrick) — Thu, 05 Apr 2007 03:19:40 GMT

// description of your code here

First create your HTML. You can style it however you want but the division names must remain the same.

Next place the following code at the end of your content.



els=document.getElementsByTagName('h4');

idx='';

for (i=0; i  idx += ''+els[i].innerHTML+'
';

  els[i].innerHTML=''+els[i].innerHTML;

}

if (!els.length) {

  document.getElementById('indexDiv').style.display='none';

} else {

  document.getElementById('indexContents').innerHTML=idx;

}

Any H4 tag on the page will now be indexed and a link to the element placed in the index the script built. Place the index anywhere on your page and style it however you wish.

Gmail-Like Incremental Search //JavaScript Class

jonasraoni (Jonas Raoni Soares Silva) — Fri, 09 Sep 2005 07:41:46 GMT

Implements a GMail-like auto-complete.

[UPDATED CODE AND HELP CAN BE FOUND HERE]

@REQUIRES Event-Listener



//Requires http://www.jsfromhell.com/geral/event-listener



//+ Jonas Raoni Soares Silva

//@ http://jsfromhell.com/dhtml/incremental-search [v1.0]



IncrementalSearch = function( input, callback, className ){

	var i, o = ( o = this, o.l = [], o.i = input, o.c = null, o.s = { e: null, i: -1 }, o.f = callback || function(){}, o.n = className || "", o );

	for( i in { keydown: 0, focus: 0, blur: 0, keyup: 0, keypress: 0 } )

		addEventListener( o.i, i, function( e ){ o.handler.call( o, e ); } );

};

with( { p: IncrementalSearch.prototype } ){

	(p.constructor.fadeAway = function( o ){

		o instanceof Object ? ( this.trash = this.trash || [] ).push( o ) && setTimeout( this.fadeAway, 200 ) : arguments.callee.c.trash.pop().hide();

	}).c = p.constructor;

	p.callEvent = function( e ){ this[e] && this[e].apply( this, [].slice.call( arguments, 1 ) ); };

	p.highlite = function( e ){ ( this.s.e && ( this.s.e.className = "normal" ), ( this.s = { e: e, i: e.listindex } ).e.className += " highlited", this.callEvent( "onhighlite", this.l[ this.s.i ], this.s.e.d ) ); };

	p.select = function(){ this.s.i + 1 && ( this.i.value = this.l[ this.s.i ], this.callEvent( "onselect", this.i.value, this.s.e.d ), this.hide() ); };

	p.hide = function(){ ( this.c && this.c.parentNode.removeChild( this.c ), this.c = null, this.l = [], this.s = { e: null, i: -1 }, this.callEvent( "onhide" ) ); };

	p.next = function(){ var e = ( e = this.s.e ) ? e.nextSibling || e.parentNode.firstChild : null; e && this.highlite( e ); };

	p.previous = function(){ var e = ( e = this.s.e ) ? e.previousSibling || e.parentNode.lastChild : null; e && this.highlite( e ); };

	p.handler = function( evt ){

		var o = this, t = evt.type, k = evt.key, e = /span/i.test( ( e = evt.target ).tagName ) ? e.parentNode : e;

		t == "keyup" ? k != 40 && k != 38 && k != 13 && o.show()

		: t == "keydown" ? ( k == 40 && o.next() ) || ( k == 38 && o.previous() )

		: t == "keypress" ? k == 13 && !evt.preventDefault() && o.select()

		: t == "blur" ? o.constructor.fadeAway( o )

		: t == "click" ? o.select()

		: t == "focus" ? o.show()

		: o.highlite( e );

	};

	p.show = function(){

		var cS, found = 0, o = this, i = o.i, iV = i.value, d = document, c = ( o.hide(), o.c = d.body.appendChild( d.createElement( "div" ) ) );

		( c.className = o.n, cS = c.style, cS.display = "none", cS.position = "absolute", o.callEvent( "onshow" ) );

		o.f.call( function( s, x, data ){

			if( !( x.length == undefined ? ( x = [x] ) : x ).length )

				return;

			var j, l = 0, i = o.l.length, e = c.appendChild( d.createElement( "div" ) );

			for( j in ( o.l[i] = s, e.className = "normal", e.d = data, e.listindex = i, !found && i == o.s.i && ++found && o.highlite( e ), x ) )

				e.appendChild( d.createTextNode( s.substring( l, x[j] ) ) ).parentNode.appendChild( d.createElement( "span" ) ).appendChild( d.createTextNode( s.substring( x[j], l = x[j] + iV.length ) ) ).parentNode.className = "selectedText";

			for( x in ( e.appendChild( d.createTextNode( s.substr( l ) ) ), { click: 0, mouseover: 0 } ) )

				addEventListener( e, x, function( e ){ o.handler.call( o, e ); } );

		}, iV );

		if( !c.childNodes.length )

			return o.hide();

		for( var x = i.offsetLeft, y = i.offsetTop + i.offsetHeight; i = i.offsetParent; x += i.offsetLeft, y += i.offsetTop );

		( cS.display = "block", cS.left = x + "px", cS.top = y + "px", !found && o.highlite( c.firstChild ) );

	};

}

Example









	

		Preenchimento dinâmico

		Emails

		

		


		Lista de IPs

Auto Tab //JavaScript Function

jonasraoni (Jonas Raoni Soares Silva) — Fri, 09 Sep 2005 05:11:24 GMT

Auto tabulation of text inputs with maxlength setted

Usage: just add the code on the end of your page or call it on the onload event (worse solution) and "the enter tabulation" will be added for all fields enclosed by the

tag.

[UPDATED CODE AND HELP CAN BE FOUND HERE]

@REQUIRES Event-Listener



//Requires http://www.jsfromhell.com/Geral/event-listener



//+ Jonas Raoni Soares Silva

//@ http://jsfromhell.com/forms/auto-tab [v1.0]



autoTab = function(){

	for( var d, f = ( d = document ).forms, i = f.length; i; addEventListener( f[--i], "keyup", function( e ){

		var el, k = String.fromCharCode( e.key ), l = ( e = e.target ).value.length;

		if ( l >= ( e.getAttribute( "maxlength" ) || l + 1 ) && /[\wÀ-ÿ ]/.test( k ) ){

			for( l = k = ( el = e.form.elements ).length; el[--k] != e; );

			while( !(e = el[ k = ++k * ( k < l ) ]).type || e.disabled );

			e.focus();

		}

	} ) );

};

DZone Snippets: auto code

Automatically Create a Page Index

Gmail-Like Incremental Search //JavaScript Class

Auto Tab //JavaScript Function