friendsterTalk - Friendster Forum

friendsterTalk - Friendster Forum

Welcome guest! Please Login or Register.

Pages: 1 2

 

  • JavaScript
  •  » Gradual Element Fader (boxes effect)

#1  2008-07-03 09:37:10

simpleMe
 tax
» FriendsterWhiz
› [i gz it's gudbye]
› Class X
Location: BeHiNd EnEmY LiNeS
Registered: 2008-02-28
Posts: 3147
Last visit: 2009-01-05
Reputation: 206
Friendster

Gradual Element Fader (boxes effect)

credits :arrow: Dynamic Drive =)

This is a generic fader script that can be applied to element(s) on the page to make them gradually fade into view when the mouse rolls over them, and fade out when out.

just paste this on your js extension :thumbsdown:

/***********************************************
* Gradual Element Fader- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var gradualFader={}
gradualFader.baseopacity=0.10
gradualFader.increment=0.2
document.write('<style type="text/css">\n')
document.write('.commonbox{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){
var targetobject=obj
if (targetobject && targetobject.filters && targetobject.filters[0]){
if (typeof targetobject.filters[0].opacity=="number")
targetobject.filters[0].opacity=value*100
else
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (targetobject && typeof targetobject.style.MozOpacity!="undefined")
targetobject.style.MozOpacity=value
else if (targetobject && typeof targetobject.style.opacity!="undefined")
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){
var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i")
var pieces=[]
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<alltags.length; i++){
if (typeof alltags.className=="string" && alltags[i].className.search(classnameRE)!=-1)
pieces[pieces.length]=alltags[i]
}
return pieces
}
gradualFader.init=function(){
var targetobjects=this.collectElementbyClass("commonbox")
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")}
}
}
gradualFader.init()

just edit the bold part with the value of opacity you like =)


for tracker & add boxes, just insert this at the bottom of your Onload Handler =)

gradualFader.init()

so it will look like this :thumbsdown:

if (!attachOnLoadHandler(function(){onProfileLoad()})) window.onload = function(){onProfileLoad()};
function onProfileLoad() {

other codes inside onloadhandler....................
other codes inside onloadhandler....................
other codes inside onloadhandler....................
other codes inside onloadhandler....................

gradualFader.init()

}<--end of the onloadhandler

Freeview

Last edited by simpleMe (2008-11-23 12:35:16)

sO deeP, tHat iT didn'T eveN bleeD

-Offline-
 

#2  2008-07-03 10:06:19

i i LeA i i
 ask my doctor!
i i LeA i i's display avatar
» FriendsterElite
› ^pEaCe^
› Class X
Location: cannot be located!
Registered: 2008-03-22
Posts: 3998
Reputation: 111
Friendster

Re: Gradual Element Fader (boxes effect)

1st to comment!
another nice trick!:eh:
cheers to that!:D

but it wont work on mine..=|

Last edited by i i LeA i i (2008-07-03 10:10:41)
 

#3  2008-07-03 10:18:37

unmaskedluke
 NeLNeL
» FriendsterFreak
› >iM cOnFuse!<
Location: Malaysia
Registered: 2008-01-05
Posts: 1718
Reputation: 265
Friendster

Re: Gradual Element Fader (boxes effect)

whoa. isn't it the same as this? :arrow: http://friendstertalk.com/t30142-The-Bl…ns%29.html

Last edited by unmaskedluke (2008-07-03 10:18:56)


Layouts Compiled ©
my blog
 

#4  2008-07-03 10:24:11

simpleMe
 tax
» FriendsterWhiz
› [i gz it's gudbye]
› Class X
Location: BeHiNd EnEmY LiNeS
Registered: 2008-02-28
Posts: 3147
Last visit: 2009-01-05
Reputation: 206
Friendster

Re: Gradual Element Fader (boxes effect)

unmaskedluke wrote:

whoa. isn't it the same as this? :arrow: http://friendstertalk.com/t30142-The-Bl … ns%29.html

lol :D blurrycloud trick is only for add-ons =)
just check the tutorial if its the same :paranoid:
this trick is for all boxes =)

sO deeP, tHat iT didn'T eveN bleeD

-Offline-
 

#5  2008-07-03 10:30:33

Hoshigaki
 caaaarl (:
Hoshigaki's display avatar
» Promoter
› Buriza-do Kyanon
› The Scandalers
Location: Japan
Registered: 2008-05-20
Posts: 2815
Reputation: 300

Re: Gradual Element Fader (boxes effect)

The Preview is so Cool!! +repu for you

As soon as I get online,
I look for your name first.
When listening to a slow song,
Your face comes to my mind.
When I hear the phone ring,
I hope it's you calling. <3333
Plurk | Fss | | Multi
 

#6  2008-07-03 10:31:40

simpleMe
 tax
» FriendsterWhiz
› [i gz it's gudbye]
› Class X
Location: BeHiNd EnEmY LiNeS
Registered: 2008-02-28
Posts: 3147
Last visit: 2009-01-05
Reputation: 206
Friendster

Re: Gradual Element Fader (boxes effect)

Hoshigaki wrote:

The Preview is so Cool!! +repu for you

thanks bro =):thumbsup:

sO deeP, tHat iT didn'T eveN bleeD

-Offline-
 

#7  2008-07-03 10:32:07

unmaskedluke
 NeLNeL
» FriendsterFreak
› >iM cOnFuse!<
Location: Malaysia
Registered: 2008-01-05
Posts: 1718
Reputation: 265
Friendster

Re: Gradual Element Fader (boxes effect)

^oh i see i see.. u make it works for all d boxes. good job ma fwen. :thumbsup: :D another trick from u. keep it going mate.. =)


Layouts Compiled ©
my blog
 

#8  2008-07-03 10:35:15

simpleMe
 tax
» FriendsterWhiz
› [i gz it's gudbye]
› Class X
Location: BeHiNd EnEmY LiNeS
Registered: 2008-02-28
Posts: 3147
Last visit: 2009-01-05
Reputation: 206
Friendster

Re: Gradual Element Fader (boxes effect)

unmaskedluke wrote:

^oh i see i see.. u make it works for all d boxes. good job ma fwen. :thumbsup: :D another trick from u. keep it going mate.. =)

thanks dude =)

sO deeP, tHat iT didn'T eveN bleeD

-Offline-
 

#9  2008-07-03 11:00:24

naruxhina
» FriendsterNewbie
Location: `K`O`N`O`H`A`
Registered: 2008-06-24
Posts: 36
Last visit: 2008-08-27
Reputation: ~
Friendster

Re: Gradual Element Fader (boxes effect)

WOW NYC.!
HOPE DZ WORKS..
I WANT TO TRY IT..!!
SOOOO COOL..!!

-Offline-
 

#10  2008-07-03 11:20:22

switpotato
 .M.O.N.I.X.
switpotato's display avatar
» FriendsterWhiz
› dcrazier dbetter bxtreme
› Class X
Location: HubbieHubbieLand
Registered: 2007-05-23
Posts: 3071
Reputation: 303

Re: Gradual Element Fader (boxes effect)

hmmm .. tax moving up... so proud of u.. lol..
go go... like every new break thru u make...
for i dunno how i can make ordinary script be applicable to fs lol...



:crybaby:

   
my official site>>    http://switpotato.ucoz.com/
theres nothing wrong at making mistakes..
whats wrong is letting it stay as a mistake without the effort of making it right
 

#11  2008-07-03 12:48:24

BwizetT
 Jairi
BwizetT's display avatar
» FriendsterGeek
› ImmA DirTy No0dLe
› Rockstars
Location: Basta my Allergy
Registered: 2007-09-19
Posts: 1102
Reputation: 53

Re: Gradual Element Fader (boxes effect)

Another Cool one from you Bro.. :thumbsup: =) :thumbsup:


Watch me and My Band
 

#12  2008-07-03 13:31:11

simpleMe
 tax
» FriendsterWhiz
› [i gz it's gudbye]
› Class X
Location: BeHiNd EnEmY LiNeS
Registered: 2008-02-28
Posts: 3147
Last visit: 2009-01-05
Reputation: 206
Friendster

Re: Gradual Element Fader (boxes effect)

switpotato wrote:

hmmm .. tax moving up... so proud of u.. lol..
go go... like every new break thru u make...

thanks swit :kiss: :rose:

BwizetT wrote:

Another Cool one from you Bro.. :thumbsup: =) :thumbsup:

thanks bro =):thumbsup:

@ naruxhina thanks also for your comment =)

Last edited by simpleMe (2008-07-04 01:25:48)

sO deeP, tHat iT didn'T eveN bleeD

-Offline-
 

#13  2008-07-03 16:19:59

kuntilanak
 Dewi Kunthi
kuntilanak's display avatar
» Promoter
Registered: 2008-05-29
Posts: 4854
Reputation: 164

Re: Gradual Element Fader (boxes effect)

Kuntilanak Said To You

Nice trick brother... thanks for share

 

#14  2008-07-04 12:30:41

simpleMe
 tax
» FriendsterWhiz
› [i gz it's gudbye]
› Class X
Location: BeHiNd EnEmY LiNeS
Registered: 2008-02-28
Posts: 3147
Last visit: 2009-01-05
Reputation: 206
Friendster

Re: Gradual Element Fader (boxes effect)

kuntilanak wrote:

thanks for share

ur welcum bro :thumbsup:

sO deeP, tHat iT didn'T eveN bleeD

-Offline-
 

#15  2008-07-04 12:46:50

dekha_21
 Dekha Anggareska
dekha_21's display avatar
» FriendsterGeek
› Forza Milan and Liverpool
› Executive Coder
Location: Indramayu
Registered: 2007-09-01
Posts: 1019
Reputation: 52
Friendster

Re: Gradual Element Fader (boxes effect)

how if we only want one box/element to se this effect?
is it can?


DEKHA ANGGARESKA
Like : ADA Band, Kerispatih, Yovie Nuno, Milan, Liverpool, Atletico.
 

#16  2008-07-04 14:29:54

simpleMe
 tax
» FriendsterWhiz
› [i gz it's gudbye]
› Class X
Location: BeHiNd EnEmY LiNeS
Registered: 2008-02-28
Posts: 3147
Last visit: 2009-01-05
Reputation: 206
Friendster

Re: Gradual Element Fader (boxes effect)

dekha_21 wrote:

how if we only want one box/element to se this effect?
is it can?

here =)

/***********************************************
* Gradual Element Fader- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var gradualFader={}
gradualFader.baseopacity=0.10
gradualFader.increment=0.2
document.write('<style type="text/css">\n')
document.write('.commonbox{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){
var targetobject=obj
if (targetobject && targetobject.filters && targetobject.filters[0]){
if (typeof targetobject.filters[0].opacity=="number")
targetobject.filters[0].opacity=value*100
else
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (targetobject && typeof targetobject.style.MozOpacity!="undefined")
targetobject.style.MozOpacity=value
else if (targetobject && typeof targetobject.style.opacity!="undefined")
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){
var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i")
var pieces=[]
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<alltags.length; i++){
if (typeof alltags.className=="string" && alltags[i].className.search(classnameRE)!=-1)
pieces[pieces.length]=alltags[i]
}
return pieces
}
gradualFader.init=function(){
var targetobjects=this.collectElementbyClass("commonbox")
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")}
}
}
gradualFader.init()

just edit the bold parts =)

sO deeP, tHat iT didn'T eveN bleeD

-Offline-
 

#17  2008-07-04 14:33:33

dekha_21
 Dekha Anggareska
dekha_21's display avatar
» FriendsterGeek
› Forza Milan and Liverpool
› Executive Coder
Location: Indramayu
Registered: 2007-09-01
Posts: 1019
Reputation: 52
Friendster

Re: Gradual Element Fader (boxes effect)

what example should i paste n bold parts?


DEKHA ANGGARESKA
Like : ADA Band, Kerispatih, Yovie Nuno, Milan, Liverpool, Atletico.
 

#18  2008-07-04 14:42:22

simpleMe
 tax
» FriendsterWhiz
› [i gz it's gudbye]
› Class X
Location: BeHiNd EnEmY LiNeS
Registered: 2008-02-28
Posts: 3147
Last visit: 2009-01-05
Reputation: 206
Friendster

Re: Gradual Element Fader (boxes effect)

dekha_21 wrote:

what example should i paste n bold parts?

the master boxes (div_classes) =)

for eg. if you  want the effects only in your more about me section :D

heres the eg. :thumbsdown:

/***********************************************
* Gradual Element Fader- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var gradualFader={}
gradualFader.baseopacity=0.10
gradualFader.increment=0.2
document.write('<style type="text/css">\n')
document.write('.moreabout{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){
var targetobject=obj
if (targetobject && targetobject.filters && targetobject.filters[0]){
if (typeof targetobject.filters[0].opacity=="number")
targetobject.filters[0].opacity=value*100
else
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (targetobject && typeof targetobject.style.MozOpacity!="undefined")
targetobject.style.MozOpacity=value
else if (targetobject && typeof targetobject.style.opacity!="undefined")
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){
var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i")
var pieces=[]
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<alltags.length; i++){
if (typeof alltags.className=="string" && alltags[i].className.search(classnameRE)!=-1)
pieces[pieces.length]=alltags[i]
}
return pieces
}
gradualFader.init=function(){
var targetobjects=this.collectElementbyClass("moreabout")
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")}
}
}
gradualFader.init()

Last edited by simpleMe (2008-07-04 22:53:03)

sO deeP, tHat iT didn'T eveN bleeD

-Offline-
 

#19  2008-07-05 16:17:50

adin234
» FriendsterNewbie
Registered: 2008-02-23
Posts: 24
Last visit: 2008-12-25
Reputation: ~

Re: Gradual Element Fader (boxes effect)

it doesnt fade in..

http://www.friendster.com/23434748

-Offline-
 

#20  2008-07-06 07:52:43

simpleMe
 tax
» FriendsterWhiz
› [i gz it's gudbye]
› Class X
Location: BeHiNd EnEmY LiNeS
Registered: 2008-02-28
Posts: 3147
Last visit: 2009-01-05
Reputation: 206
Friendster

Re: Gradual Element Fader (boxes effect)

adin234 wrote:

it doesnt fade in..

:arrow: follow my instructions :exclaim:

sO deeP, tHat iT didn'T eveN bleeD

-Offline-
 

 

Pages: 1 2

  • JavaScript
  •  » Gradual Element Fader (boxes effect)

Search Friendstertalk

Board footer

FriendsterTalk is not affiliated with Friendster.com
Copyright © 2002–2009 PunBB

[ 11 queries - 0.058 second ]

Pay Per Click Ads by pay per click advertising by Kontera

FriendsterTalk.com x

Welcome to FriendsterTalk! You'll need to login in order to fully use all the features and view all the sections of this site.

Please register if you're not yet a member. =)