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
» FriendsterWhiz
› [i gz it's a gudbye]
› Class X
Location: through da monsoon
Registered: 2008-02-28
Posts: 3103
Reputation: 196
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)

nO CoMmEnT!
 

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

i i LeA i i
» FriendsterElite
i i LeA i i's display avatar
› ^pEaCe^
› Class X
Location: cannot be located!
Registered: 2008-03-22
Posts: 3980
Reputation: 110
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
» FriendsterFreak
unmaskedluke's display avatar
› >iM cOnFuse!<
Location: Malaysia
Registered: 2008-01-05
Posts: 1697
Reputation: 263
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
» FriendsterWhiz
› [i gz it's a gudbye]
› Class X
Location: through da monsoon
Registered: 2008-02-28
Posts: 3103
Reputation: 196
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 =)

nO CoMmEnT!
 

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

Hoshigaki
» Promoter
Hoshigaki's display avatar
› Active Mode
› The Scandalers
Registered: 2008-05-20
Posts: 2285
Reputation: 208

Re: Gradual Element Fader (boxes effect)

The Preview is so Cool!! +repu for you

Don't Be Afraid to fall for me bcoz i promise
i'll catch you when you do.

+repu is da best thank y0u. j0ke. l0l.
visit my site ^_^
 

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

simpleMe
» FriendsterWhiz
› [i gz it's a gudbye]
› Class X
Location: through da monsoon
Registered: 2008-02-28
Posts: 3103
Reputation: 196
Friendster

Re: Gradual Element Fader (boxes effect)

Hoshigaki wrote:

The Preview is so Cool!! +repu for you

thanks bro =):thumbsup:

nO CoMmEnT!
 

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

unmaskedluke
» FriendsterFreak
unmaskedluke's display avatar
› >iM cOnFuse!<
Location: Malaysia
Registered: 2008-01-05
Posts: 1697
Reputation: 263
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
» FriendsterWhiz
› [i gz it's a gudbye]
› Class X
Location: through da monsoon
Registered: 2008-02-28
Posts: 3103
Reputation: 196
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 =)

nO CoMmEnT!
 

#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
» FriendsterWhiz
switpotato's display avatar
› dcrazier dbetter bxtreme
› Class X
Location: HubbieHubbieLand
Registered: 2007-05-23
Posts: 2980
Reputation: 285

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/
Ive juz realized.. many peepz r such a user..
to all affected with this have a lil delicadeza..remove
my works from ur site... u r selfish ... who knows how to get
but never know how to give.. puro sarili inintindi nyo!!
 

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

BwizetT
» FriendsterGeek
BwizetT's display avatar
› **We*Are*SoliD**
› Rockstars
Location: Basta my Allergy
Registered: 2007-09-19
Posts: 1090
Reputation: 49

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
» FriendsterWhiz
› [i gz it's a gudbye]
› Class X
Location: through da monsoon
Registered: 2008-02-28
Posts: 3103
Reputation: 196
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)

nO CoMmEnT!
 

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

kuntilanak
» Promoter
kuntilanak's display avatar
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
» FriendsterWhiz
› [i gz it's a gudbye]
› Class X
Location: through da monsoon
Registered: 2008-02-28
Posts: 3103
Reputation: 196
Friendster

Re: Gradual Element Fader (boxes effect)

kuntilanak wrote:

thanks for share

ur welcum bro :thumbsup:

nO CoMmEnT!
 

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

dekha_21
» FriendsterGeek
dekha_21's display avatar
› Forza Milan and Liverpool
› Executive Coder
Location: Indramayu
Registered: 2007-09-01
Posts: 1016
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
» FriendsterWhiz
› [i gz it's a gudbye]
› Class X
Location: through da monsoon
Registered: 2008-02-28
Posts: 3103
Reputation: 196
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 =)

nO CoMmEnT!
 

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

dekha_21
» FriendsterGeek
dekha_21's display avatar
› Forza Milan and Liverpool
› Executive Coder
Location: Indramayu
Registered: 2007-09-01
Posts: 1016
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
» FriendsterWhiz
› [i gz it's a gudbye]
› Class X
Location: through da monsoon
Registered: 2008-02-28
Posts: 3103
Reputation: 196
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)

nO CoMmEnT!
 

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

adin234
» FriendsterNewbie
Registered: 2008-02-23
Posts: 22
Last visit: 2008-10-29
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
» FriendsterWhiz
› [i gz it's a gudbye]
› Class X
Location: through da monsoon
Registered: 2008-02-28
Posts: 3103
Reputation: 196
Friendster

Re: Gradual Element Fader (boxes effect)

adin234 wrote:

it doesnt fade in..

:arrow: follow my instructions :exclaim:

nO CoMmEnT!
 

 

Pages: 1 2

  • JavaScript
  •  » Gradual Element Fader (boxes effect)

Search Friendstertalk

Board footer

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

[ 28 queries - 2.470 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. =)