friendsterTalk - Friendster Forum

friendsterTalk - Friendster Forum

Welcome guest! Please Login or Register.

  • JavaScript
  •  » Marquee Effects CSS & JS (Moving contents)

#1  2007-11-22 20:13:08

bobcbar
 Bob
bobcbar's display avatar
» Moderator
My computer crashed :(
Location: Dongduchon, Korea
Registered: 2007-04-08
Posts: 11082
Reputation: 361
Friendster

Marquee Effects CSS & JS (Moving contents)

This is a simple collection of marquee codes for use on your profile with IE only!

Marquee means to some moving or scrolling of the contents.

I did not create only collected, the credit goes to Feruzz and Ephemeral and/or others unknown to me.

For a preview of some view my profile I use some of these now. I can not provide a preview of all.
http://profiles.friendster.com/bobcbar or http://profiles.friendster.com/bobstest

CSS Codes (Can not be used in shout box!)
Marquee Right to Left

<marquee>TEXT</marquee>

Marqee Left to Right

<marquee direction="right">TEXT</marquee>

Alternates Back and Forth Marquee

<marquee behavior="alternate">TEXT</marquee>

Marquee Up

<marquee direction="up">TEXT</marquee>

Marquee Down

<marquee direction="down">TEXT</marquee>

Marquee Up and Down

<marquee direction="up" behavior="alternate">TEXT</marquee>

WITH BORDER

<marquee style="border:BLUE 2px SOLID">TEXT</marquee>

WITH BACKGROUD COLOR

<font color="#FFFFFF"><marquee direction="left" style="background:BLUE">TEXT</marquee></font>

BACK AND FORTH ZIG ZAG (used on my profile)

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">Take a minute and join us at Friendster Talk!! Just click here!<br>
Learn all the newest codes and how to customize ur profiles</marquee></marquee>

Credit to BwizetT for the additional effects you can use with the text codes.

Code:

[b]Bold Text[/b]
<strong>Text Here</strong>


[b]Big Text[/b]
<span style="font-size:18px">Text Here</span>
NOTE: You can change the font size from 18px all the way up to like 1000px and even higher, which I dont recommened! 36px is pretty big. 



[i][b]Italicize Text[/b][/i]
<i>Text Here</i>



[b]Strike-through Text[/b]
<s>Text Here</s>



[b]Overline Text[/b]
<span style="text-decoration:overline">Overline Text</span>



[b]Underline Text[/b]
<span style="text-decoration:underline">Underline Text</span>


[b]
Superscript Text[/b]
<sup<SuperscriptText</sup>



[b]Subscript Text[/b]
<sub>Subscript Text</sub>



[b]Color Text[/b]
<span style="color:4A708B">Color Text</span> ( Colors )


[b]
Bolded Big Color Text[/b]
<span style="color:4A708B; font-size:18px; font-weight:bold;">Bolded Big Color Text</span> ( Colors )



[b]Highlighted Color Text[/b]
<span style="color:4A708B; background-color:CAE1FF; padding:2px; font-weight:bold;">Color Text</span> ( Colors )



[b]OVERLAPPING[/b]
Text Example

<span style="color: #4A708B; font-size:48px; font-weight:bold; line-height: 14px; letter-spacing: -5pt;">OVERLAPPING</span>
<span style="color: #4F94CD; font-size:36px; font-weight:bold; line-height: 14px; letter-spacing: 0pt; text-transform: lowercase;">Text Example</span>

JS CODES  If you already have an onload handler just use the last 4 lines of these codes. For example

//Moving Friends Box
var marqueeFriends = document.getElementById("content_2").innerHTML;
document.getElementById("content_2").innerHTML ="<marquee direction='up' height='300' scrollamount='2' onMouseOver='stop()' onMouseOut='start()'>"+
marqueeFriends+"</marquee>";
}

//Moving Friends Box
if ( ! attachOnLoadHandler(function () { movingFrnd();}))
window.onload = function () { movingFrnd();};
function movingFrnd() {
var marqueeFriends = document.getElementById("content_2").innerHTML;
document.getElementById("content_2").innerHTML ="<marquee direction='up' height='300' scrollamount='2' onMouseOver='stop()' onMouseOut='start()'>"+
marqueeFriends+"</marquee>";
}

//Moving Photo Gallery
if ( ! attachOnLoadHandler(function () { movingPhotos();}))
window.onload = function () { movingPhotos();};
function movingPhotos() {
var marqueePhotos = document.getElementById("content_1").innerHTML;
document.getElementById("content_1").innerHTML ="<marquee direction='left' height='100%' scrollamount='2' onMouseOver='stop()' onMouseOut='start()'>"+
marqueePhotos+"</marquee>";
}



//Moving Moreabout Box
if ( ! attachOnLoadHandler(function () { movingMA();}))
window.onload = function () { movingMA();};
function movingMA() {
var marqueeMoreAbout = document.getElementById("content_6").innerHTML;
document.getElementById("content_6").innerHTML ="<marquee direction='up' height='300' scrollamount='2' onMouseOver='stop()' onMouseOut='start()'>"+
marqueeMoreAbout+"</marquee>";
}


//Moving Testi & Comments Box
if ( ! attachOnLoadHandler(function () { movingTestiComm();}))
window.onload = function () { movingTestiComm();};
function movingTestiComm() {
var marqueeTestiComments = document.getElementById("content_18").innerHTML;
document.getElementById("content_18").innerHTML ="<marquee direction='up' height='300' scrollamount='2' onMouseOver='stop()' onMouseOut='start()'>"+
marqueeTestiComments+"</marquee>";
}


//Moving Shoutout Box
if ( ! attachOnLoadHandler(function () { movingCpSB();}))
window.onload = function () { movingCpSB();};
function movingCpSB() {
var marqueeCSbox = document.getElementById("cpShoutoutBox").innerHTML;
document.getElementById("cpShoutoutBox").innerHTML ="<marquee direction='left' height='100%' scrollamount='2' onMouseOver='stop()' onMouseOut='start()'>"+
marqueeCSbox+"</marquee>";
}


//Moving Fan of...Box
if ( ! attachOnLoadHandler(function () { movingFanof();}))
window.onload = function () { movingFanof();};
function movingFanof() {
var marqueeFanof = document.getElementById("content_7").innerHTML;
document.getElementById("content_7").innerHTML ="<marquee direction='up' height='200' scrollamount='2' onMouseOver='stop()' onMouseOut='start()'>"+
marqueeFanof+"</marquee>";
}

//Moving Groups Box
if ( ! attachOnLoadHandler(function () { movingGroups();}))
window.onload = function () { movingGroups();};
function movingGroups() {
var marqueeGroups = document.getElementById("content_8").innerHTML;
document.getElementById("content_8").innerHTML ="<marquee direction='up' height='200' scrollamount='2' onMouseOver='stop()' onMouseOut='start()'>" +
marqueeGroups+"</marquee>";
}

Thanks to Switpotato for these updated codes!!

Code:

//scrolling cpbuttons
function scrollcpbuttons(){
bz = document.getElementById('content_0')
cz = document.getElementById('controlPanelButtons')
dz = '<marquee scrollamount=1 direction=up height=120 scrolldelay=30 truespeed=true onmouseover=stop() onmouseout=start()'+
cz.innerHTML+'</marquee><br><center><div><img src="http://i147.photobucket.com/albums/r299/switpotato/switpotatologo.gif"></div>'
cz.innerHTML=dz}
setTimeout('scrollcpbuttons()', 500);


//scrolling comments
function scrollcomment(){
bz = document.getElementById('18')
cz = document.getElementById('content_18')
dz = '<marquee scrollamount=1 direction=up scrolldelay=30 truespeed=true onmouseover=stop() onmouseout=start()'+
cz.innerHTML+'</marquee><div class="viewall"><a href="http://www.friendster.com/comments.php?uid=UR USER ID HERE">Mag Comment Kayo Ano Ba</div>'
cz.innerHTML=dz}
setTimeout('scrollcomment()', 500);

//Shout Box
document.getElementById('cpShoutoutBox').innerHTML = "<div> <font color='#FFFFFF'><marquee behavior='alternate' style='border:red 2px SOLID; background: black'> monica</marque></div></font>";

15  Mar 2008 - Removed Marquee Control Panel - Can not get the code to work:wallbash:
8 May 2008 - Added JS Marquee Control Panel, Shout Box, Comments from Switpotato
4 Jul 2008- Switpotato posted alternate code for scrolling effect at this link  http://friendstertalk.com/t37511-Scroll…tents.html

Last edited by bobcbar (2008-07-16 10:45:18)


#2  2007-11-22 20:43:38

aftermath
 Erik
aftermath's display avatar
» FriendsterGeek
Location: 127.0.0.1
Registered: 2007-09-21
Posts: 1005
Last visit: 2009-04-06
Reputation: 37

Re: Marquee Effects CSS & JS (Moving contents)

Speaking of MARQUEE. I have read that there is a MARQUEE css code for Firefox since sometimes, some normal marquee codes doesn't work with FF. Have you ever heard of this?



WVMv3.1.1 Shared Database *11/19/07 updated*
Javascript Linker *11/19/07 updated*

#3  2007-11-22 20:46:36

bobcbar
 Bob
bobcbar's display avatar
» Moderator
My computer crashed :(
Location: Dongduchon, Korea
Registered: 2007-04-08
Posts: 11082
Reputation: 361
Friendster

Re: Marquee Effects CSS & JS (Moving contents)

aftermath wrote:

Speaking of MARQUEE. I have read that there is a MARQUEE css code for Firefox since sometimes, some normal marquee codes doesn't work with FF. Have you ever heard of this?

No I was unaware the marquee codes did not work in FF, I just read xaviers post that these marquee codes only work in FF with mouse over :(

Last edited by bobcbar (2007-11-22 23:02:11)


#4  2007-11-22 20:51:20

pulasara
 Stupid Moderator
pulasara's display avatar
» FriendsterGeek
Admin
Class X
Location: digicorner.net
Registered: 2007-07-24
Posts: 1118
Reputation: 3
Friendster

Re: Marquee Effects CSS & JS (Moving contents)

where the preview??? :rolleyes:  :rolleyes:
btw,thanks for sharing :penguin:  :penguin:


Rule Number 5 No nudity and offensive content in any post including signatures and avatars.

Edited by Moderator

#5  2007-11-22 20:57:00

asn585
 SiLeNTrickeR ..(^_^)..
asn585's display avatar
» FriendsterAddict
BG Changer @ any Browsers
Location: Paris, France
Registered: 2006-12-03
Posts: 423
Last visit: 2009-06-19
Reputation: 10
Friendster

Re: Marquee Effects CSS & JS (Moving contents)

where the preview??? ...

My page @ my photo Gallery and my Friendslists Original / Default  Friendslist Setting !.... 

FF Marquee is different , yup !....

Need to........ :penguin:


:thumbsup:  Happy to Help !.  :D Ready to Share :o That 's Friendstertalker....

Internet Explorer 8 Beta 1 Compatibilty...
=)

#6  2007-11-22 20:58:47

aftermath
 Erik
aftermath's display avatar
» FriendsterGeek
Location: 127.0.0.1
Registered: 2007-09-21
Posts: 1005
Last visit: 2009-04-06
Reputation: 37

Re: Marquee Effects CSS & JS (Moving contents)

Here's some codes for cross-browser marquee. I'm trying to look for w3c complaint marquee codes.

http://devedge-temp.mozilla.org/toolbox…ex_en.html



WVMv3.1.1 Shared Database *11/19/07 updated*
Javascript Linker *11/19/07 updated*

#7  2007-11-22 21:34:17

sHy19
 the abandoned
sHy19's display avatar
» FriendsterElite
[`.daddy's girl.`]
Class-S
Location: [{.in isolation.}]
Registered: 2007-04-07
Posts: 4415
Last visit: 2009-06-21
Reputation: 57

Re: Marquee Effects CSS & JS (Moving contents)

aftermath wrote:

Speaking of MARQUEE. I have read that there is a MARQUEE css code for Firefox since sometimes, some normal marquee codes doesn't work with FF. Have you ever heard of this?

that's wat im lookng for too.,
coz js marquee codes dont work automatically n FF.,
xavierkym also stated that on his thread bout sideways marquee FList.

Last edited by sHy19 (2007-11-22 21:35:36)


zOMG!:O...it's ruSzhie!

as mysterious as the dark side of the moon...

#8  2007-11-22 22:40:14

xavierkym
 !!bloody bastard!!
xavierkym's display avatar
» Retired Moderator
The Sinister
Class-S
Location: London, England
Registered: 2007-06-10
Posts: 5378
Last visit: 2009-06-22
Reputation: 141
Friendster

Re: Marquee Effects CSS & JS (Moving contents)

marquee codes in FF needs to be mous hovered before it will move. :thumbsdown:


#9  2007-11-22 23:04:53

bobcbar
 Bob
bobcbar's display avatar
» Moderator
My computer crashed :(
Location: Dongduchon, Korea
Registered: 2007-04-08
Posts: 11082
Reputation: 361
Friendster

Re: Marquee Effects CSS & JS (Moving contents)

Thanks to all for correcting on the fact these codes only work properly in IE, was totally unware of that fact as an IE user :/  I updated my post to reflect that now.

Last edited by bobcbar (2007-11-22 23:05:20)


#10  2007-11-23 00:01:04

levisornothing
levisornothing's display avatar
» FriendsterManiac
Location: Singapore
Registered: 2007-07-31
Posts: 877
Last visit: 2009-06-22
Reputation: 16

Re: Marquee Effects CSS & JS (Moving contents)

Thanks, my friend.. I've been looking for this :D

Off topic
Anybody knows where to find cross browser scroll bar? Scroll bars won't work in FF2. FF2 is almost perfect except scroll bars :D

Last edited by levisornothing (2007-11-23 01:02:32)


...

#11  2007-11-23 00:50:28

*_RolAnd_*
 RolanD GomezZ
*_RolAnd_*'s display avatar
» FriendsterManiac
make me smile
Singles Goes HOT!
Location: CebU
Registered: 2007-09-12
Posts: 861
Last visit: Today
Reputation: 23
Friendster

Re: Marquee Effects CSS & JS (Moving contents)

  wow     nice sir bobc tnx for sharing  ..... 



click here :thumbsdown:

visit my page Sea fighT

#12  2007-11-23 06:43:21

dylan_tarlit
» FriendsterNewbie
Registered: 2007-06-17
Posts: 2
Last visit: 2007-12-06
Reputation: ~

Re: Marquee Effects CSS & JS (Moving contents)

:evil: ayoko na :norose:

#13  2007-11-23 07:15:44

dale
 Dale Pernz
dale's display avatar
» Moderator
Clique Mee
Friendstertalk University
Location: G.Lagro.subd.
Registered: 2007-05-24
Posts: 7212
Last visit: Yesterday
Reputation: 77
Friendster

Re: Marquee Effects CSS & JS (Moving contents)

any preview spidey bob.. :paranoid:


#14  2007-11-23 07:45:59

slashedkite
 I got amnesia.
slashedkite's display avatar
» FriendsterGeek
GRANDCHASER
Class-S
Location: access denied
Registered: 2007-01-23
Posts: 1154
Last visit: Today
Reputation: 28
Friendster

Re: Marquee Effects CSS & JS (Moving contents)

cool compilation sir bob! it will serve a big help for newbies. Nice one!  :eh:  :thumbsup:




Kite rises against the wind, not with it..

#15  2007-11-23 09:32:08

kahramell_2212
 Katleya Remollino
kahramell_2212's display avatar
» FriendsterAddict
-->*i love my self..
Singles Goes HOT!
Location: --sa bahay
Registered: 2007-11-01
Posts: 454
Last visit: 2009-06-22
Reputation: 4
Friendster

Re: Marquee Effects CSS & JS (Moving contents)

tnx for sharing!!



~Pls. Visit my Site~

~mwuah!~

#16  2007-11-23 09:53:32

iconald
 Ronald
iconald's display avatar
» FriendsterManiac
Pogi c",) \m/
Location: Philippine
Registered: 2007-09-27
Posts: 820
Reputation: 4
Friendster

Re: Marquee Effects CSS & JS (Moving contents)

nice profile.. thanks for sharing...  =)  :thumbsup:


#17  2007-11-23 15:49:04

bobcbar
 Bob
bobcbar's display avatar
» Moderator
My computer crashed :(
Location: Dongduchon, Korea
Registered: 2007-04-08
Posts: 11082
Reputation: 361
Friendster

Re: Marquee Effects CSS & JS (Moving contents)

Thanks everyone! Appreciate ur comments :thumbsup:


#18  2007-11-25 17:42:26

yossi
 __yossi__[s][h][y]
yossi's display avatar
» FriendsterManiac
_DeKill-SamePah_
Location: _iN sOmeonE care_
Registered: 2007-10-24
Posts: 842
Last visit: 2009-04-15
Reputation: 13
Friendster

Re: Marquee Effects CSS & JS (Moving contents)

nice ...  :thumbsup: 

but   

Code:

 //Moving Moreabout Box
if ( ! attachOnLoadHandler(function () { movingMA();})) 
window.onload = function () { movingMA();};
function movingMA() {
var marqueeMoreAbout = document.getElementById("content_6").innerHTML;
document.getElementById("content_6").innerHTML ="<marquee direction='up' height='300' scrollamount='2' 

onMouseOver='stop()' onMouseOut='start()'>"+
marqueeMoreAbout+"</marquee>";
}

help me.... pls nonactive mouse in this code,,   so when cursor moving, the marque still moving...   :D  ,  please edit in this code.  :crybaby:  i needed  =|


1. Inter Milan         38      25      10      3      85
2. AS Roma           38       24      10      4       82
3. Juventus           38      20      12      6      72
4. Fiorentina          38      19      9      10      66
5. AC Milan            38     18     10     10      64 :lol: 

bubye champion taon depan  :lol:

#19  2007-11-25 23:51:53

bobcbar
 Bob
bobcbar's display avatar
» Moderator
My computer crashed :(
Location: Dongduchon, Korea
Registered: 2007-04-08
Posts: 11082
Reputation: 361
Friendster

Re: Marquee Effects CSS & JS (Moving contents)

yossi wrote:

nice ...  :thumbsup: 

but   

Code:

 //Moving Moreabout Box
if ( ! attachOnLoadHandler(function () { movingMA();})) 
window.onload = function () { movingMA();};
function movingMA() {
var marqueeMoreAbout = document.getElementById("content_6").innerHTML;
document.getElementById("content_6").innerHTML ="<marquee direction='up' height='300' scrollamount='2' 

onMouseOver='stop()' onMouseOut='start()'>"+
marqueeMoreAbout+"</marquee>";
}

help me.... pls nonactive mouse in this code,,   so when cursor moving, the marque still moving...   :D  ,  please edit in this code.  :crybaby:  i needed  =|

I am not a coder, I only shared the codes I have collected. If you are using IE it is designed to move unless you put ur mouse on the item..just reverse if using FF.


#20  2007-11-26 01:25:03

sHy19
 the abandoned
sHy19's display avatar
» FriendsterElite
[`.daddy's girl.`]
Class-S
Location: [{.in isolation.}]
Registered: 2007-04-07
Posts: 4415
Last visit: 2009-06-21
Reputation: 57

Re: Marquee Effects CSS & JS (Moving contents)

thanks for the compilation sir bob.,
now it wont b dat hard to look for diffrent marquee codes :thumbsup:


zOMG!:O...it's ruSzhie!

as mysterious as the dark side of the moon...

  • JavaScript
  •  » Marquee Effects CSS & JS (Moving contents)

Search Friendstertalk

Board footer

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

[ 9 queries - 0.066 second ]
Powered by SyntheticNetwork

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. =)