friendsterTalk - Friendster Forum

friendsterTalk - Friendster Forum

Welcome guest! Please Login or Register.

  • JavaScript
  •  » Floating and fadeing message boxes (updated)

#1  2008-07-05 02:49:58

mabuhay
» FriendsterFreak
mabuhay's display avatar
KKB YOUTH SUMMIT 08
Friendstertalk University
Location: Laguna
Registered: 2008-03-11
Posts: 1806
Reputation: 79

Floating and fadeing message boxes (updated)

CREDITS:

www.freewebknowledge.com
www.google.com
www.yahoo.com
Me - for sharing this.. :D

Draw more attention to your messages by putting them into floating and fadeing message boxes. You may add as many linkable messages. Easy configuration of text, font, font-size, font-color, font-weight, background-color and border.

Create more than 20 different text animations
Text Wheel is part of the new unique Text Animator. Text Animator allows you to create 20 different text animations for your webpages in no time. You can view, check and edit all effects while you are creating them. Text Animator generates the finished code for your personalized text animations.

Just copy the codes then compiled them on ur js files
put them on the last part...=)
Edit the color red & black bold part

UPDATED:
now with screen shot and page viewer name... =):thumbsup:

NOTE: it works only in FF...i guess :D

screen shot:

Live Preview:

BLAST FROM DA PAST

CODES: HIT THE SPOILER



// artmann mabuhay
// Floating and fadeing message boxes
// By Urs Dudli and Peter Gehrig
// Copyright (c) 2003 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
var text=new Array()
var textlink=new Array()
var texttarget=new Array()
var textsplashcolors=new Array()

/////////////////////////////////////////////////////////////////////
// EDIT VALUES BELOW THIS LINE

// Add or delete as many floating message boxes as you like.
// Just proceed as shown below (this sample creates three message boxes)

// Set the text, link and the target for your first floating message box
text[0]="Hello you "+pageViewerFName+" "
textlink[0]="http://www.freewebknowledge.com"
texttarget[0]="_blank"

// Set the text, link and the target for the second floating message box
text[1]="Welcome "+pageViewerFName+" "
textlink[1]="http://www.google.com"
texttarget[1]="_blank"

// Set the text, link and the target for the third floating message box
text[2]="Have a nice time "+pageViewerFName+" "
textlink[2]="http://www.friendstertalk.com"
texttarget[2]="_blank"

// Set the font
var textfont="Arial"

// Set the font-weight to "bold" or "normal"
var textweight="bold"

// Set the rollover-color
var textfontcolorrollover="#ff0000"

// Set the font-size
var textfontsize=12

// Set the font-color
var textfontcolor="#000000"

// Set the background-color
var textbgcolor="#dddddd"

// Set the border-color
var textbordercolor="#ff9000"

// Set the border-width
var textborder=4

// DO NOT EDIT VALUES BELOW THIS LINE
/////////////////////////////////////////////////////////////////////

var textdecoration="none"
var textfontsizeHTML=3
var textweightA="<b>"
var textweightB="</b>"
var textitalic="normal"
var textitalicA=""
var textitalicB=""
var textredirurl="http://"
var textalign="center"
var textvalign="middle"
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0
var floatingspeed=10
var tempo=20
var numberofmessages=text.length-1
var stepx=new Array()
var stepy=new Array()
var spancontent=new Array()
for (i=0;i<=numberofmessages;i++) {
    stepx[i]=randommaker(floatingspeed)
    stepy[i]=randommaker(floatingspeed)
}
var boxwidth=new Array()
var boxheight=new Array()
for (i=0;i<=numberofmessages;i++) {
    boxwidth[i]=10
    boxheight[i]=10
}
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer
var i_fadestrength=new Array()
var i_fadestep=new Array()
var i_fadenow=new Array()
var i_fadenowmax=new Array()
for (i=0;i<=text.length;i++) {
    i_fadenowmax[i]=randommaker(10)+2   
    i_fadestrength[i]=randommaker(99)   
    i_fadestep[i]=1
    i_fadenow[i]=0
}

getcontent()
function getcontent() {
    for (i=0;i<=numberofmessages;i++) {
        var content=""
        if (ie || ns6) {   
            content="<table cellpadding="+textborder+" cellspacing=0 border=0><tr valign="+textvalign+"><td align="+textalign+">"
            content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolor+";font-style:"+textitalic+";\" onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\">"
            content+=text[i]
            content+="</a></td></tr></table>"
        }
        else {   
            content="<table cellpadding="+textborder+" cellspacing=0 bgcolor="+textbgcolor+" border="+textborder+"><tr valign="+textvalign+"><td align="+textalign+">"
            content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\">"
            content+=textweightA
            content+=textitalicA
            content+="<font face=\""+textfont+"\" size="+textfontsizeHTML+" color=\""+textfontcolor+"\">"
            content+=text[i]
            content+="</font>"
            content+=textitalicB
            content+=textweightB
            content+="</a></td></tr></table>"
        }
        spancontent[i]=content
    }
}

function setValues() {
    if (ie) {
        marginbottom=document.body.clientHeight-5
        marginright=document.body.clientWidth-5
        for (i=0;i<=numberofmessages;i++) {             
            var thisspan = eval("document.all.span"+i)
            thisspan.innerHTML=spancontent[i]
            var thisspan = eval("document.all.span"+i)
            boxwidth[i]=thisspan.offsetWidth
            boxheight[i]=thisspan.offsetHeight
            var maxleftstart=marginright-boxwidth[i]
            var maxtopstart=marginbottom-boxheight[i]
            var thisspan = eval("document.all.span"+(i)+".style")
               thisspan.posLeft=randommaker(maxleftstart)
            thisspan.posTop=randommaker(maxtopstart) 
        }
        checkmovement()
    }
    if (ns4) {
        marginbottom=window.innerHeight-5
        marginright=window.innerWidth-5
        for (i=0;i<=numberofmessages;i++) {             
            var thisspan=eval("document.span"+i+".document")
            thisspan.write(spancontent[i])
            thisspan.close()
            var thisspan=eval("document.span"+i+".document")
            boxwidth[i]=thisspan.width
            boxheight[i]=thisspan.height
            var maxleftstart=marginright-boxwidth[i]
            var maxtopstart=marginbottom-boxheight[i]
            var thisspan=eval("document.span"+i)
               thisspan.left=randommaker(maxleftstart)
            thisspan.top=randommaker(maxtopstart) 
        }
        checkmovement()
    }
    if (ns6) {
        marginbottom=window.innerHeight-11
        marginright=window.innerWidth-11
        for (i=0;i<=numberofmessages;i++) {             
            var thisspan=document.getElementById('span'+i)
            thisspan.innerHTML=spancontent[i]
            var thisspan=document.getElementById('span'+i)
            boxwidth[i]=parseInt(thisspan.offsetWidth)
            boxheight[i]=parseInt(thisspan.offsetHeight)
            var maxleftstart=marginright-boxwidth[i]
            var maxtopstart=marginbottom-boxheight[i]
            var thisspan=document.getElementById('span'+i).style
               thisspan.left=parseInt(thisspan.left)+randommaker(maxleftstart)
            thisspan.top=parseInt(thisspan.top)+randommaker(maxtopstart) 
        }
        checkmovement()
    }
}

function randommaker(range) {       
    rand=Math.floor(range*Math.random())
    if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function checkmovement() {
    checkposition()
    movepictures()
    timer=setTimeout("checkmovement()",tempo)
}

function movepictures() {
    if (ie) {
        for (i=0;i<=numberofmessages;i++) { 
            var thisspan=eval("document.all.span"+(i)+".style")
            thisspan.posLeft+=stepx[i]
            thisspan.posTop+=stepy[i]
            var thisfilter=eval("span"+i)
            i_fadenow[i]++
                if (i_fadenow[i]>=i_fadenowmax[i]) {
                    i_fadenow[i]=0
                    if (i_fadestrength[i]>=100) {i_fadestep[i]=i_fadestep[i]*-1}
                    else if (i_fadestrength[i]<=-20) {i_fadestep[i]=i_fadestep[i]*-1}
                }
            i_fadestrength[i]+=i_fadestep[i]
            thisfilter.filters.alpha.opacity=Math.round(i_fadestrength[i])
        }
    }
   
    if (ns6) {
        for (i=0;i<=numberofmessages;i++) { 
            var thisspan=document.getElementById('span'+i).style
            thisspan.left=parseInt(thisspan.left)+stepx[i]
            thisspan.top=parseInt(thisspan.top)+stepy[i]   
            i_fadenow[i]++
            if (i_fadenow[i]>=i_fadenowmax[i]) {
                i_fadenow[i]=0
                if (i_fadestrength[i]>=100) {i_fadestep[i]=i_fadestep[i]*-1}
                else if (i_fadestrength[i]<=-20) {i_fadestep[i]=i_fadestep[i]*-1}
            }   
            i_fadestrength[i]+=i_fadestep[i]
            document.getElementById('span'+i).style.MozOpacity=Math.round(i_fadestrength[i])/100
        }
    }
    if (ns4) {
        for (i=0;i<=numberofmessages;i++) { 
            var thisspan = eval("document.span"+i)
            thisspan.left+=stepx[i]
            thisspan.top+=stepy[i]
        }
    }

}

function checkposition() {
    if (ie) {
        for (i=0;i<=numberofmessages;i++) {             
            var thisspan=eval("document.all.span"+i+".style")
            if (thisspan.posLeft>marginright-boxwidth[i]-floatingspeed) {
                thisspan.posLeft-=Math.abs(stepx[i]+1)
                stepx[i]=randommaker(floatingspeed)*-1   
            }
            if (thisspan.posLeft<marginleft) {
                thisspan.posLeft+=Math.abs(stepx[i])
                stepx[i]=randommaker(floatingspeed)           
            }   
            if (thisspan.posTop>marginbottom-boxheight[i]-floatingspeed) {
                thisspan.posTop-=Math.abs(stepy[i])
                stepy[i]=randommaker(floatingspeed)*-1

            }
            if (thisspan.posTop<margintop) {
                thisspan.posTop+=Math.abs(stepy[i])
                stepy[i]=randommaker(floatingspeed)
            }
        }
    }
    if (ns4) {
        for (i=0;i<=numberofmessages;i++) {             
            var thisspan=eval("document.span"+i)
            if (thisspan.left>marginright-boxwidth[i]-floatingspeed) {
                thisspan.left-=Math.abs(stepx[i]+1)
                stepx[i]=randommaker(floatingspeed)*-1   
            }
            if (thisspan.left<marginleft) {
                thisspan.left+=Math.abs(stepx[i])
                stepx[i]=randommaker(floatingspeed)           
            }   
            if (thisspan.top>marginbottom-boxheight[i]-floatingspeed) {
                thisspan.top-=Math.abs(stepy[i])
                stepy[i]=randommaker(floatingspeed)*-1

            }
            if (thisspan.top<margintop) {
                thisspan.top+=Math.abs(stepy[i])
                stepy[i]=randommaker(floatingspeed)
            }
        }
    }
   
    if (ns6) {
        for (i=0;i<=numberofmessages;i++) {             
            var thisspan=document.getElementById('span'+i).style
            var leftx=parseInt(thisspan.left)
            var topy=parseInt(thisspan.top)
            if (leftx>marginright-boxwidth[i]-floatingspeed) {
                thisspan.left=leftx-Math.abs(stepx[i]+1)
                stepx[i]=randommaker(floatingspeed)*-1   
            }
            if (leftx<marginleft) {
                thisspan.left=leftx+Math.abs(stepx[i])
                stepx[i]=randommaker(floatingspeed)           
            }   
            if (topy>marginbottom-boxheight[i]-floatingspeed) {
                thisspan.top=topy-Math.abs(stepy[i])
                stepy[i]=randommaker(floatingspeed)*-1

            }
            if (topy<margintop) {
                thisspan.top=topy+Math.abs(stepy[i])
                stepy[i]=randommaker(floatingspeed)
            }
        }
    }
}


if (ie || ns6) {
    for (i=0;i<=numberofmessages;i++) {
        document.write("<span id='span"+i+"' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=0);-moz-opacity:0;border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textbgcolor+";'></span>")
        document.close()
    }
}
if (ns4) {
    for (i=0;i<=numberofmessages;i++) {
        document.write("<layer name='span"+i+"' left=0 top=0>"+spancontent[i]+"</layer>")
        document.close()
    }
}
window.onload=setValues

don't forget my + repu... :D



Friendster Tricks and Tutorials


Last edited by mabuhay (2008-08-28 08:47:18)



#2  2008-07-05 03:06:25

andreapaula08
» FriendsterTalker
andreapaula08's display avatar
>Hate my username<
Friendstertalk University
Location: Emo Valley
Registered: 2007-04-14
Posts: 119
Last visit: 2008-11-22
Reputation: 2
Friendster

Re: Floating and fadeing message boxes (updated)

Nice,I will try this.
but where is the preview?


>>Wish I can change my username<<

#3  2008-07-05 03:07:15

cronixemo
» FriendsterElite
cronixemo's display avatar
am i different??? :-(
Friendstertalk University
Location: no one finds me!
Registered: 2007-11-23
Posts: 3507
Reputation: 135

Re: Floating and fadeing message boxes (updated)

yup....before ill try this??
any preview??
to test if its ok?




photoshop + boredom = art!

#4  2008-07-05 03:20:49

mabuhay
» FriendsterFreak
mabuhay's display avatar
KKB YOUTH SUMMIT 08
Friendstertalk University
Location: Laguna
Registered: 2008-03-11
Posts: 1806
Reputation: 79

Re: Floating and fadeing message boxes (updated)

oooppsss sorry about that...i forgot :D

Live Preview:

Hit the Links

BLAST FROM DA PAST

Last edited by mabuhay (2008-07-05 06:48:31)



#5  2008-07-05 03:30:09

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

Re: Floating and fadeing message boxes (updated)

nice trick bro =):thumbsup:


nO CoMmEnT!

#6  2008-07-05 03:38:07

cronixemo
» FriendsterElite
cronixemo's display avatar
am i different??? :-(
Friendstertalk University
Location: no one finds me!
Registered: 2007-11-23
Posts: 3507
Reputation: 135

Re: Floating and fadeing message boxes (updated)

yah...i olready saw ur trick...
nice one!!!
keep it up!!!
+repu for your trick!!




photoshop + boredom = art!

#7  2008-07-05 03:40:22

janine13
» FriendsterTalker
janine13's display avatar
Location: at 0uR h0mE!!
Registered: 2008-01-16
Posts: 299
Last visit: Yesterday
Reputation: 6

Re: Floating and fadeing message boxes (updated)

weeee..
nice trick..,
i'll gonna try this one!!
thnx,btw..




^^siggy by sisz chii
x0o cute!
-xoxo-
u rock!! =]

*AdDicTed 2 PARAM0RE*

#8  2008-07-05 03:43:42

mabuhay
» FriendsterFreak
mabuhay's display avatar
KKB YOUTH SUMMIT 08
Friendstertalk University
Location: Laguna
Registered: 2008-03-11
Posts: 1806
Reputation: 79

Re: Floating and fadeing message boxes (updated)

thanks 4 da + reps cronixemo...:wow:



#9  2008-07-05 05:09:06

gumscumbag
» FriendsterTalker
gumscumbag's display avatar
holiday ~ retired
Location: localhost
Registered: 2008-01-10
Posts: 162
Last visit: 2008-11-08
Reputation: 14

Re: Floating and fadeing message boxes (updated)

thanks for share :thumbsup:
i suggest to increase z-index message boxes, it will make message boxes at top navigation bar
try with 51000 or higher :D

#10  2008-07-05 05:13:07

pagchur
» FriendsterNewbie
Registered: 2008-07-05
Posts: 19
Last visit: 2008-07-05
Reputation: -1

Re: Floating and fadeing message boxes (updated)

panu mg gawa ng background..,,.,.,.,.,??.,.,.,=|

#11  2008-07-05 05:25:57

cronixemo
» FriendsterElite
cronixemo's display avatar
am i different??? :-(
Friendstertalk University
Location: no one finds me!
Registered: 2007-11-23
Posts: 3507
Reputation: 135

Re: Floating and fadeing message boxes (updated)

pagchur wrote:

panu mg gawa ng background..,,.,.,.,.,??.,.,.,=|

avoid posting tagalog here...
if u want to speak tagalog goto regional section..
and make ur own topic!!!
this is not urs!!




photoshop + boredom = art!

#12  2008-07-05 05:39:50

kingjumbo
» Banned
Registered: 2008-07-05
Posts: 1
Last visit: 2008-07-05
Reputation: -1

Re: Floating and fadeing message boxes (updated)

damn you chronixemo you have no right to discriminate filipino pipol t@ng na mo!!! wala kamo pakialam sa tricks mo ang vovong trick naman yan!!! ang bobo wala ka bataa ka bolokon ka!!!! hawa dri mura kag hawd ha p0ta ka!!!  _ii_

#13  2008-07-05 05:42:50

cronixemo
» FriendsterElite
cronixemo's display avatar
am i different??? :-(
Friendstertalk University
Location: no one finds me!
Registered: 2007-11-23
Posts: 3507
Reputation: 135

Re: Floating and fadeing message boxes (updated)

kingjumbo wrote:

damn you chronixemo you have no right to discriminate filipino pipol t@ng na mo!!! wala kamo pakialam sa tricks mo ang vovong trick naman yan!!! ang bobo wala ka bataa ka bolokon ka!!!! hawa dri mura kag hawd ha p0ta ka!!!  _ii_

aw...wat the???

hey...cool down..
:lol::lol:

flaming huh!!!

im not dicriminating filipino people..
cause im also filipino...lolz!!!

this thread is not allowed to speak filipino..
ok...

damn,,,...wat ive done!!!



photoshop + boredom = art!

#14  2008-07-05 05:50:07

Lordheinz
» Banned
^ trashed
Registered: 2007-06-26
Posts: 5178
Last visit: 2008-09-11
Reputation: 242

Re: Floating and fadeing message boxes (updated)

kingjumbo wrote:

damn you chronixemo you have no right to discriminate filipino pipol t@ng na mo!!! wala kamo pakialam sa tricks mo ang vovong trick naman yan!!! ang bobo wala ka bataa ka bolokon ka!!!! hawa dri mura kag hawd ha p0ta ka!!!  _ii_

you are banned!


Thank you so much FRIENDSTERTALK...

#15  2008-07-05 05:52:23

anne.24
» Moderator
anne.24's display avatar
Desperately in love
Class-S
Location: indonesia >:3
Registered: 2007-10-07
Posts: 1374
Last visit: Today
Reputation: 273

Re: Floating and fadeing message boxes (updated)

:lol: guyz, take it easy.... :D

@kingjumbo don't talk like u have read the rules (that certainly you haven't), becoz cronixemo is right, and he didn't say anything mean/insulting/flaming/cursing/etc. we HAVE to use English in here (except for regional boards).

@cronixemo waa.. u minus his repu.. lol... take it eazy... :)

@topic I can't see the preview, maybe becoz instead of this http://profiles.friendster.com/71426039/ it should be http://profiles.friendster.com/71426039 but still no preview of the trick :|





Premade Layouts | My Ultimate Possesion | Drawing
I miss you so very much.

#16  2008-07-05 05:53:38

irishandme
» FriendsterTalker
irishandme's display avatar
i am innocent!
Friendstertalk University
Location: Philippines
Registered: 2007-08-09
Posts: 125
Last visit: 2008-11-30
Reputation: 32
Friendster

Re: Floating and fadeing message boxes (updated)

kingjumbo wrote:

damn you chronixemo you have no right to discriminate filipino pipol t@ng na mo!!! wala kamo pakialam sa tricks mo ang vovong trick naman yan!!! ang bobo wala ka bataa ka bolokon ka!!!! hawa dri mura kag hawd ha p0ta ka!!!  _ii_

think twice before you post it this kind of f***** message! this is an international forum, you need to speak in engLish...:exclaim:

Last edited by irishandme (2008-07-05 05:55:35)




i'm back..
to all tricks that i posted here, sorry if i've done mistake...
and i'll try to fix that...

#17  2008-07-05 05:54:28

cronixemo
» FriendsterElite
cronixemo's display avatar
am i different??? :-(
Friendstertalk University
Location: no one finds me!
Registered: 2007-11-23
Posts: 3507
Reputation: 135

Re: Floating and fadeing message boxes (updated)

ur the best sir LH..:thumbsup:;)

anime_mania_01 wrote:

@cronixemo waa.. u minus his repu.. lol... take it eazy... :)

lolz...sory for that!!!i didnt meant to..=D



:arrow: @kingjumbo...peace man..no need to be flame!!
just cool down..

oppss..sory for the off topic..:D

Last edited by cronixemo (2008-07-05 05:57:05)




photoshop + boredom = art!

#18  2008-07-05 06:11:22

♥renray♥
» FriendsterGeek
♥renray♥'s display avatar
i aint like em all
Friendstertalk University
Location: hell
Registered: 2008-04-11
Posts: 1437
Last visit: 2008-11-30
Reputation: 14
Friendster

Re: Floating and fadeing message boxes (updated)

woooww...
nc one dude..
im going to try this..
heheheheh..
tnx for sharing...


live
your life
to the fullest
makes my world go around..

#19  2008-07-05 06:11:42

bles_212000
» FriendsterWhiz
bles_212000's display avatar
gray mushroom
.White Protector.
Location: LOST
Registered: 2007-09-25
Posts: 3363
Reputation: 139

Re: Floating and fadeing message boxes (updated)

thanks mabuhay for this new, unique and great great trick! :wow:


#20  2008-07-05 06:35:22

slashedkite
» FriendsterGeek
slashedkite's display avatar
Former LS member..
Friendstertalk University
Location: onloadhandler
Registered: 2007-01-23
Posts: 1077
Last visit: 2008-11-29
Reputation: 15
Friendster

Re: Floating and fadeing message boxes (updated)

nice floating trick artmann.. thanks for sharing this.. ;):thumbsup:



:ninja::ninja:

  • JavaScript
  •  » Floating and fadeing message boxes (updated)

Search Friendstertalk

Board footer

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

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