[b]_____________________________________________________________________________________________[/b] [align=center][b]GRADUAL ELEMENT FADER EFFECT[/b][/align] [align=center][b]for another show hide boxes effect[/b][/align] sorry if double posted , [img]http://theftalk.com/img/warn_add.gif[/img] if you like it [b]_____________________________________________________________________________________________ [/b] [img]http://s104.photobucket.com/albums/m168/chibib0/wvmaccordion/thnewpost.gif[/img] [b]Credits [/b]: [b]Dynamic Drive [/b] [b][url=http://theftalk.com/p=nopathz]Nopathz[/url][/b] [b] ALL FTALK'ers[/b] [b] [url=http://profiles.friendster.com/awalirsyad]Myself[/url][/b] [img]http://s104.photobucket.com/albums/m168/chibib0/wvmaccordion/thnewpost.gif[/img] [b]Description[/b] : This effect is to hide all your boxes and class and show when mouse over !! [img]http://s104.photobucket.com/albums/m168/chibib0/wvmaccordion/thnewpost.gif[/img] [b]Temporary Preview[/b] : [url=http://profiles.friendster.com/awalirsyad]sorry for a while it's now limit bandwith exceeded[/url] (depends on bandwith exceeded) [img]http://s104.photobucket.com/albums/m168/chibib0/wvmaccordion/thnewpost.gif[/img] [b]Screenshot[/b] : [spoiler][b]boxes hide if not hover [/b] [img]http://i214.photobucket.com/albums/cc118/boimx/notover.jpg[/img] [b]if hovered ( boxes fade in and fadeout on mouseout )[/b] [img]http://i214.photobucket.com/albums/cc118/boimx/onover.jpg[/img][/spoiler] [img]http://s104.photobucket.com/albums/m168/chibib0/wvmaccordion/thnewpost.gif[/img] Step to follow : [img]http://theftalk.com/img/warn_add.gif[/img] 1. [b]GRADUAL FADER EFFECT FUNCTION[/b] ' upload to your webhost and name it [b]gradualfader.js[/b] [spoiler]//Gradual Elements Fader- By Dynamic Drive at http://www.dynamicdrive.com //Last updated: Nov 8th, 07' var gradualFader={} gradualFader.baseopacity=0.0 //set base opacity when mouse isn't over element (decimal below 1) gradualFader.increment=0.1 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2) document.write('<style type="text/css">\n') //write out CSS to enable opacity on "gradualfader" class document.write('.gradualfader{filter:progid:DXImageTransform.Microsoft.alpha(opacity='+gradualFader.baseopacity*100+'); -moz-opacity:'+gradualFader.baseopacity+'; opacity:'+gradualFader.baseopacity+';}\n') document.write('</style>') gradualFader.setopacity=function(obj, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between) var targetobject=obj if (targetobject && targetobject.filters && targetobject.filters[0]){ //IE syntax if (typeof targetobject.filters[0].opacity=="number") //IE6 targetobject.filters[0].opacity=value*100 else //IE 5.5 targetobject.style.filter="alpha(opacity="+value*100+")" } else if (targetobject && typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax targetobject.style.MozOpacity=value else if (targetobject && typeof targetobject.style.opacity!="undefined") //Standard opacity syntax targetobject.style.opacity=value targetobject.currentopacity=value } gradualFader.fadeupdown=function(obj, direction){ var targetobject=obj var fadeamount=(direction=="fadeup")? this.increment : -this.increment if (targetobject && (direction=="fadeup" && targetobject.currentopacity<1 || direction=="fadedown" && targetobject.currentopacity>this.baseopacity)){ this.setopacity(obj, targetobject.currentopacity+fadeamount) window["opacityfader"+obj._fadeorder]=setTimeout(function(){gradualFader.fadeupdown(obj, direction)}, 50) } } gradualFader.clearTimer=function(obj){ if (typeof window["opacityfader"+obj._fadeorder]!="undefined") clearTimeout(window["opacityfader"+obj._fadeorder]) } gradualFader.isContained=function(m, e){ var e=window.event || e var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement) while (c && c!=m)try {c=c.parentNode} catch(e){c=m} if (c==m) return true else return false } gradualFader.fadeinterface=function(obj, e, direction){ if (!this.isContained(obj, e)){ gradualFader.clearTimer(obj) gradualFader.fadeupdown(obj, direction) } } gradualFader.collectElementbyClass=function(classname){ //Returns an array containing DIVs with specified classname var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element var pieces=[] var alltags=document.all? document.all : document.getElementsByTagName("*") for (var i=0; i<alltags.length; i++){ if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1) pieces[pieces.length]=alltags[i] } return pieces } gradualFader.init=function(){ var targetobjects=this.collectElementbyClass("gradualfader") for (var i=0; i<targetobjects.length; i++){ targetobjects[i]._fadeorder=i this.setopacity(targetobjects[i], this.baseopacity) targetobjects[i].onmouseover=function(e){gradualFader.fadeinterface(this, e, "fadeup")} targetobjects[i].onmouseout=function(e){gradualFader.fadeinterface(this, e, "fadedown")} } }[/spoiler] Inject that script before your onload handler [quote]var myjs = document.createElement("script"); myjs.type = "text/javascript"; myjs.src = "[b]URL gradualfader.js[/b]"; document.getElementsByTagName("head")[0].appendChild(myjs);[/quote] [img]http://theftalk.com/img/warn_add.gif[/img] 2. [b]GETELEMENTSBYCLASSNAME FUNCTION[/b] put it inside your onload handler [spoiler]function getElementsByClassName(strClass, strTag, objContElm) { strTag = strTag || "*"; objContElm = objContElm || document; var objColl = objContElm.getElementsByTagName(strTag); if (!objColl.length && strTag == "*" && objContElm.all) objColl = objContElm.all; var arr = new Array(); var delim = strClass.indexOf('|') != -1 ? '|' : ' '; var arrClass = strClass.split(delim); for (var i = 0, j = objColl.length; i < j; i++) { var arrObjClass = objColl[i].className.split(' '); if (delim == ' ' && arrClass.length > arrObjClass.length) continue; var c = 0; comparisonLoop: for (var k = 0, l = arrObjClass.length; k < l; k++) { for (var m = 0, n = arrClass.length; m < n; m++) { if (arrClass[m] == arrObjClass[k]) c++; if (( delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) { arr.push(objColl[i]); break comparisonLoop; } } } } return arr; }[/spoiler] [img]http://theftalk.com/img/warn_add.gif[/img] 3. [b]GRADUALFADER INIT[/b] ' Put it inside your onloadhandler [spoiler]theboxfade=getElementsByClassName("commonbox"); for (i=0;i<theboxfade.length;i++){ theboxfade[i].className+=" gradualfader"; } gradualFader.init()[/spoiler] happy tweaking and [img]http://theftalk.com/img/warn_add.gif[/img] if you like it

Last edited by boim (2008-08-24 06:06:22)