/    Sign up×
Community /Pin to ProfileBookmark

Scrolling Text

Copy linkTweet thisAlerts:
Mar 22.2005

I found this script at [URL=http://dynamicdrive.com/dynamicindex2/crosstick.htm]dynamicdrive.com[/URL]
but I can’t use it because it uses ilayers…which I’m told are not good. So what I want to know is if anyone has another script that has the same effect but that is actually GOOD. ? Thanks in advance for any hints you can give me.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@herodote92Mar 22.2005 — I find these scrollers stressing. You have to lose you time watching very carefully at them, not knowing how long the message will stay, if you will have time to understand it and click on it at time if it looks worth it, and if not, how long you will have to wait until it comes again, and how many messages there are in the file. And every time a new message shows up, you have forgotten what was the former one.:mad:

And as far as i'm concerned, I certainly can imagine much more pleasant ways to lose my time.?
Copy linkTweet thisAlerts:
@hooloovoo24authorMar 22.2005 — OK, thanks for the input. Well, let me tell you what I want it for, and maybe you can come up with a better way to do it. I want to have a list of "New News" for the city, stuff that's going on right now, with each item linking to the page that talks about the headline. How would you do this?
Copy linkTweet thisAlerts:
@herodote92Mar 22.2005 — I guess there are many possible ways to do it, but definetly I would build a fixed list, not a scrolling one. For ex a popup that opens when you click a button 'News', or a sidelist that unfolds when you click on a title 'News', or...

It also depends of the number of entries in the list. If there were no more than 4 or 5, I would probably not care about scrolling or unfolding. If there can be plenty of them, then the list should be visible only on demand, to avoid overloading the screen.

The compromise would be: make it easy for the user to get to the news AND avoid to make him crazy or overwhelmed.

Well, that's my opinion...
Copy linkTweet thisAlerts:
@Warren86Mar 23.2005 — Portable, clickable, floating, customizable vertical scrolling text:

<HTML>

<Script Language=JavaScript>

// -------- Begin RollMessage -------------

//--------- Begin Customization ----------

var textColor = "Blue"; // may use either HexDec or alpha names

var backColor = "#00FA9A"; // may use either HexDec or alpha names

var speed = 150; // lower is faster, minimum is 50;

var pause = 5; // number of seconds to wait before scrolling

var alignTo = "right"; // this ignored if float positioning is used

var floatTo = "top"; // float positioning = top, bottom or "", use lower case

var itemsInUse = 5; // this can be less than the actual number of items below

var hasLinks = true; // use false if the roll text items are not "clickable"

var useWidth = 575; // minimum is 350 pixels, CANNOT use width %;

//--------- End Customization ---------------

//--------- Input the roll text ------------

rollText = new Object;

rollText.A = "Congratulations Lakewood Rangers Divisional Champs 2004!"

rollText.B = "Check out video highlights from the game on our web site."

rollText.C = "Kindergarten registration begins July 10th. Call the Hotline 555-0095."

rollText.D = "June is Cholesterol Awareness Month. Get tested."

rollText.E = "Start recycling! All proceeds benefit the Recreation Department."

//--------- End roll text -----------------

//----------Set roll links-----------------

linkList = new Object;

linkList.A = "1/Test.html"

linkList.B = "1/Test.html"

linkList.C = "1/Test.html"

linkList.D = "1/Test.html"

linkList.E = "1/Test.html"

//----------End set roll links--------------

//--------- Add more text/link items as needed, e.g., .F, .G, then change var itemsInUse ------

//--------- No further coding is necessary! -------

//--------- DO NOT EDIT BELOW THIS LINE -----------

var absStr = "";
var leftStr = Math.round((screen.width-useWidth-36)/2);

if (useWidth < 350){useWidth = 350};
if (speed < 50){speed = 50};

if (floatTo == 'top'){
alignTo = "";
absStr = "Position:Absolute;Top:1px;Left:"+leftStr+"";}

if (floatTo == 'bottom'){
alignTo = "";
if (useWidth < screen.availWidth-15)
{absStr = "Position:Absolute;Bottom:1px;Left:"+leftStr+"";}
else{absStr = "Position:Absolute;Bottom:16px;Left:"+leftStr+"";}
}

var nList = -1;
var i = 0;

var currItem = new Array();
for (each in rollText){currItem[i++] = rollText[each]}

i = 0;
var linkItem = new Array();
for (each in linkList){linkItem[i++] = linkList[each]}

var xV = 0;
var saveXV = 0;

function openLink(){

if (hasLinks == true)
{
isLink = linkItem[nList];
window.open(isLink);
// or use- window.location = isLink, or window.location.replace(isLink)
}
}

function stayHome(){

nV = document.body.scrollTop;
if (xV > saveXV && saveXV != 0){xV = saveXV};
if (floatTo == 'top'){isFloat.style.top = nV};
if (floatTo == 'bottom'){isFloat.style.top = xV+nV};
saveXV = xV;
}

window.onscroll = stayHome;

var rollLimit = 0;
var pause = pause*1000;

function initRoll(){

if (nList < itemsInUse-1){nList++} else{nList=0;}
iText.innerHTML = currItem[nList];
iText.style.paddingTop = 0;
setTimeout("rollDown()",pause);
}

function rollDown(){

if (rollLimit < 22)
{
rollLimit++;
iText.style.paddingTop = rollLimit;
setTimeout("rollDown()",speed);
}
else {
rollLimit = 0;
setTimeout("initRoll()",1500);
}
}

function buildRollBox(){

styleStr = "<Style> .cDiv {"+absStr+";Height:26pt;Padding-Left:0px; Padding-Right:0px;Padding-Top:3px;Padding-Bottom:0px;Margin-Right:4px;Margin-Left:6px;Margin-Top:4px;Margin-Bottom:2px;Text-Indent:0px;Text-Align:Center;overflow:hidden;width:"+useWidth+";Border-Top:#C0C0C0 1px solid;Border-Left:#C0C0C0 1px solid;Border-Bottom:Black 1px solid;Border-Right:Black 1px solid;background-color:"+backColor+";} .midTbl {Border:None;Padding-Left:0px;Padding-Right:0px;Padding-Top:0px;Padding-Bottom:0px;Margin-Left:0px;Margin-Right:0px;Margin-Top:0px;Margin-Bottom:0px;Text-Indent:0px;Text-Align:none;} .hldr {Padding-Right:0px;Padding-Left:0px;Padding-Top:0px;Padding-Bottom:0px;Margin-Right:0px;Margin-Left:0px;Margin-Top:0px;Margin-Bottom:0px;Text-Indent:0px;Text-Align:none;} .leftPad {Color:"+backColor+";Font-Style:normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:none;Text-Decoration:None;Text-Indent:0px;} .cBox {Line-Height:140%;Font-Style:normal;Letter-Spacing:normal;Font-Weight:normal;Text-Align:none;Text-Decoration:none;Text-Indent:0px;Font-Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Background-Color:none;Border:None;Text-Transform:none;Padding-Left:0px;Padding-Right:0px;Padding-Top:0px;Padding-Bottom:0px;Margin-Left:0px;Margin-Right:0px;Margin-Top:0px;Margin-Bottom:0px;} </Style>";

tblStr = "<Table class=hldr align="+alignTo+"><TD><DIV id=isFloat class=cDiv ><Table cellpadding=0 class=midTbl><TD id=iText class=cBox></TD></Table></DIV></TD></Table>"

document.write(styleStr);
document.write(tblStr);
if (hasLinks == true)
{
iText.onmouseover = iText.style.cursor = "pointer"
iText.onclick = openLink;
}
}

function runRollMsg(){

buildRollBox();
xV = isFloat.offsetTop-4;
initRoll();
}

// ---- End RollMessage ---------

</Script>

<Body>

<center>

<br><br>

<h4>Portable Foating, Rolling, Clickable Messages</h4>

</center>

<!-- If using FLOAT postioning ALWAYS put the following line immeditately above the closing Body tag. If using INLINE positioning insert that line in your code where you want the scrolling message to appear, paying attention also to the alignTo customization variable. -->

<Script> runRollMsg() </Script>

</Body>

</HTML>
Copy linkTweet thisAlerts:
@hooloovoo24authorMar 23.2005 — How do you fix the height of that scroller?
Copy linkTweet thisAlerts:
@Warren86Mar 23.2005 — It's set to 26pt, to be visually acceptable for 13pt text.

Find this line in the buildRollBox function:

styleStr = "<Style> .cDiv {"+absStr+";Height:26pt;Padding-...

Change the height to pts or pixels, but then be sure to change the font-size to pts or pixels, further inside that style string, but here:

Family:Tahoma,Arial,Veranda;Font-Size:13pt;Color:"+textColor+";Background...
×

Success!

Help @hooloovoo24 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...