scrolling

[Techno]

hi.

I want to make some text scroll smoothly vertically on my webpage, like a "short news" thing.

I have the code, which was given to me by someone else and had to highly customize it the way I wanted it to work but im not satisfied.

firstly, I need to know how many words I can have per line so that it stays neatly within the table cell

secondly, the text will not smooth out and smooth back in from the round trip as the text can be of any length

these are some of the problems I am having


I am wondering if anyone knows (yes I have googled but cannot find one) a nice simple javascript scrolling script where I can give it any text and it will do its job?

Many thanks

[Dr. Script]

Could you post the code you are using now or at least provide a link to where the code is being used if we could update the current one? As for a new one, I'm the guy who can help with smooth scrolling JavaScripts. I'm more of a document object model JavaScripter

[Techno]

excellent! Much appreciated

Here is the code:


<script lang="javascript">


var tWidth='170px'; // width (in pixels)140
var tHeight='17px'; // height (in pixels)
var tcolour='#FFFFFF'; // background colour:
var moStop=true; // pause on mouseover (true or false)
var fontfamily = 'verdana'; // font for content
var tSpeed=1; // scroll speed (1 = slow, 5 = fast)

var cps=tSpeed;
var aw, mq;
var fsz = parseInt(tHeight) - 4;

function startticker(content)
{
if (document.getElementById)
{
var tick = '<div style="position:relative;width:' + tWidth + ';height:' + '150' + ';overflow:hidden;background-image: url(img/shortNews/test.jpg);background-color:' + tcolour + '"';


if (moStop)
{
tick += ' onmouseover="cps=0" onmouseout="cps=tSpeed"';
tick += '><div id="mq" style="position:absolute;left:10px;top:0px;color:white;font-family:' + fontfamily + ';font-size:' + fsz + 'px;white-space:nowrap;"><\/div><\/div>';
}

document.getElementById('ticker').innerHTML = tick;
mq = document.getElementById('mq');
mq.style.top=(parseInt(0))+"px"; //tWidth
mq.innerHTML='<span id="tx">' + content + '<\/span>';
aw = document.getElementById("tx").offsetWidth;
lefttime=setInterval("scrollticker()", 38);
}
}

function scrollticker()
{
mq.style.top = (parseInt(mq.style.top)>(-10 - aw)) ?parseInt(mq.style.top)-cps+"px" : parseInt(0)+10+"px";
}

</script>



Then we create a table in html and in one of the cells where we wish for the text to be displayed we do this:


<div id="ticker" align="center">



And thats it!

Any help is appreciated.

This does scroll smoothly but I want it so that I dont have to worry about if the text (content) given is 5 words per line - it should be so that it automatically adjusts the number of words to display per line.

As well as this, I would like it to scroll all the way up and then of course scroll back up once the first round trip has been complete

I would do this myself but my knowledge of javascript is poor - have done before but never this stuff.

Again, I appreciate your help and I am sure others will too!

[Dr. Script]

So theoretically if there are 8 words per line, do you want to split the line into 2 lines? And if that is the plan, do you want to split it equally (make 12 words into lines of length 4, 4, 4) or as many possible lines with 5 words, then the left over (make 12 words into lines of length 5, 5, 2). I'm off to bed, so I won't be responding, but if that's your plan, I will (if no one else has) look to edit your current code.

[Techno]

:) Much appreciated!

Well, to be honest I dont mind how you do it - whichever way you think is the best.
I will be getting the "content" from a database, obviously the textual input will vary in size as its kind of to be used as a "news" scroller.

As long as the entire string given to this function is displayed neatly (in other words, making sure that the string does not get cut off to the left/right of the table cell/div) - thats all that matters!

Thank-you and I will be looking forward to seeing the modification

[Dr. Script]

You'll have to provide me with the whole code ... as what it is now, the scroll functions are never triggered ... I'd prefer a link to where it is online so I can see exactly how you have implemented it

[Techno]

ah sure. I forgot to add that I did a Page.RegisterStartupScript() thing in ASP.NET to make it run i believe

I guess you just do body onload=startticker('some string here')

let me know how that goes whilst I upload the full thing :)

[Techno]

yup just did it.

copy and paste that code as is in html page

then on body load

<body onload="startticker('some text here');">

...

but remember to change the tColor var in jscript to a different non white color :)

if you need to look then:

http://www.spapps.co.uk/test/webform1.aspx


I know there is a jscript error on that page but ignore it - has nothing to do with the scroller but with SQL authentication... forget about that
:)

[Dr. Script]

Try placing this code at the very beginning of the startticker function: var arr = content.split("<br>");
var temp = new Array();
for(var i=0,k,l,spa;i<arr.length;i++)
{
temp[i] = new Array()
while(arr[i].length>22)
{
l = 0;
spa = 0;
while (l<=22 && l >= 0)
{
spa = l;
l = arr[i].indexOf(' ',spa+1);
}
temp[i].push(arr[i].substr(0,spa));
arr[i] = arr[i].substr(spa);
}
if(temp[i].length > 0)
arr[i] = temp[i].join('<br>') + "<br>" + arr[i];
}
content = arr.join('<br>');That's probably not the most efficient way of doing it, but that loops through every line, and as long as the line is more than 22 characters (22 fits on a line), it splits the string at the last possible space.

As far as I can tell, this code will only fail if you have a string of at least 22 characters to display that has no spaces. Since that is so rare, I didn't put that into effect. Tell me if there are some glitches that need to be fixed ...

[Techno]

Many thanks Dr.Script, I will get back to you on this one. There is one stupid question and I apologise....

where exactly do I place this code right at the top of the function startticker? do I replace the entire thing or....?

[Techno]

disregard that last question - many many thanks for this!

there is 1 problem, it seems to scroll perfectly all the way up but when it starts up again, it starts from almost just above the half way - that half way mark seems to be where the entire string seems to scroll up from.

is there a way to make it scroll from the bottom going all the way up?

apart from that small flaw - youve been amazing. I cannot thank-you enough :)

[Dr. Script]

Ok ... the best thing I could tell you is to change this line:content = arr.join('<br>');to something like:content = "<br><br><br><br><br>" + arr.join('<br>');That would put 5 blank lines at the beginning of object to scroll. That would make it so every time, including the first, it starts with 5 empty lines and scrolls up. Look at it, and you might have to adjust the number of <br>'s there from 5 to like 8 if you need more empty space.

If this isn't what you need, clarify for me exactly what you want because I don't think I'm pciking up exactly what you need clearly.

[Techno]

Thanks!
its almost there :D

it now goes to the bottom straight away when there is like about 2 lines left before it goes outta the cell/scroller area. When it gets to the last 2 lines, thats when it goes immediatly to the bottom now - so really the scroller is not fully complete

I have tried to play about with adding/removing the <Br> before the arr.join and after but makes no difference.

I really appreciate your valuable time, and I am sure other members also - this is fantastic :) Thank-you

[Dr. Script]

Ok, a lot of changes to make, but with some experimentation, this seems to work best. These are the two functions, they need to be changed, and I think it should work to your liking!function startticker(content)
{
var arr = content.split("<br>");
var ll = arr.length;
var temp = new Array();
for(var i=0,k,l,spa;i<arr.length;i++)
{
temp[i] = new Array()
while(arr[i].length>22)
{
l = 0;
spa = 0;
while (l<=22 && l >= 0)
{
spa = l;
l = arr[i].indexOf(' ',spa+1);
}
temp[i].push(arr[i].substr(0,spa));
arr[i] = arr[i].substr(spa);
ll++;
}
if(temp[i].length > 0)
arr[i] = temp[i].join('<br>') + "<br>" + arr[i];
}
content = "<br><br><br><br><br><br><br><br>" + arr.join('<br>');
if (document.getElementById)
{
var tick = '<div style="position:relative;width:' + tWidth + ';height:' + '150' + ';overflow:hidden;background-color:' + tcolour + '"';

if (moStop)
{
tick += ' onmouseover="cps=0" onmouseout="cps=tSpeed"';
tick += '><div id="mq" style="position:absolute;left:10px;top:0px;color:white;font-family:' + fontfamily + ';font-size:' + fsz + 'px;white-space:nowrap;"><\/div><\/div>';
}

document.getElementById('ticker').innerHTML = tick;
mq = document.getElementById('mq');
mq.style.top=(parseInt(0))+"px"; //tWidth
mq.innerHTML='<span id="tx">' + content + '<\/span>';
aw = document.getElementById("tx").offsetWidth;
lefttime=setInterval("scrollticker("+ll+")", 38);
}
}

function scrollticker(nu)
{
mq.style.top = (parseInt(mq.style.top)>(0 - nu*17 - aw)) ?parseInt(mq.style.top)-cps+"px" : parseInt(0)+10+"px";
}

[Techno]

brilliant - absolutly brilliant! Thank-you SO much for this! wow.

think the doc cured the illness successfully :) hats off to you :) Thank-you.

Now im going to try and go over the code so I can understand exactly what its doing fully.

Thank-you once again! :)

[Dr. Script]

OK. Glad you got what you wanted. The brilliance in what I did now makes it so that regardless of the number of lines, it should scroll close to perfectly.

I honestly don't know what a lot of lines that were in the code already do, and thats why I invented things to add to the code to solve your problem, rather than change the code. IF you have an further inquiries, I'd be happy to help.

[Techno]

believe me - I totally agree with you!

actually, perhaps it would help maybe for other visitors/members if it were able to display html url tags!

of course, since the entire url tag can be of more than 22 characters, this is where the entire browser just hangs - perhaps with your great skills you can modify it even more to kind of ignore the limit to a certain extent - but still allow it to display things like the html url?

but this is just me, I love the script as is! excellent

*beers all round* :)

[Dr. Script]

I never considered that ... I'll look into doing that.

[PeejAvery]

of course, since the entire url tag can be of more than 22 characters, this is where the entire browser just hangs - perhaps with your great skills you can modify it even more to kind of ignore the limit to a certain extent - but still allow it to display things like the html url?
After watching this thread a lot, it seems to me that you, Techno could attempt this feature yourself.

1. First, create a new variable which can be altered. This one will be displayed between the <a></a> tags and the original will go in the href.
2. Set that variable to the original URL that you desire to go to.
3. Using substr() shorten the displayed link variable.

Below is an example that will display the first 16 characters.

var linkdisplay;
linkdisplay = originallink;
linkdisplay = linkdisplay.substr(0, 16);

[Techno]

ill give it a shot

[Dr. Script]

ill give it a shot
I think I'll work on something that will look into this matter. The key objective would be to remove the link, but remember the link, and then put the link back into the text after adding the <br>'s.