smooth scroll, how! (marquee tag)

I made a marquee like this:
<marquee behavior='scroll' align='center' valign='center' direction='left' width='300' height='15' scrollamount='2' scrolldelay='1' onmouseover='this.stop()' onmouseout='this.start()'> Google Ads code </script></marquee>

And it dont run smoothly. Pls show me sthg wrong in upper code?

See at my site: http://www.printerservices.info

Thank 4 your help!

 

You do understand the 'marquee' is not a part of html, and is totally annoying and amateurish, right?

cheers,

gary

 

So , why not you show me the others way? not amateurish like a pro

 

It's so fast, no one could catch it. Not sure why it's not smooth but I think you'd be better off not using it and just letting it sit still.

 

You can use javascript to make marquees that work better but would advise against it myself as I dont like using javascript unless it is a must and this is not a must.

Or even better you could use Flash to make the same effect or better.

Though same again I dont like using Flash unless I really have to either as it slows down loadtimes for your pages a lot.

 

I made it slow down. But still not smooth. I think it cant use flash. Can U see it again. It's better. By the way, pls give me some advises. Thanks

here: http://printerservices.info

 

Marquee scroll speed is okey for me. Iam using IE. Nothing wrong with your Marquee same time your site too looking good.

 

It is the scrolling text itself that is annoying and amateurish.

From a usability standpoint, any ongoing movement or blinking, &c. distracts the visitor from your main content. It is a Bad Thing®. Put it down, and walk away.

cheers,

gary

 

Unless of course, you are showing ads, in which case more attention is a good thing.

However, this may be against TOS, since that could be considered 'drawing undue attention' to the ad...

 

I would strongly suggest you to use the JavaScript for this rather than the marquee tags. If it's an external one (JS script), then you pages will be W3C valid too ...


/EDIT: Oh sorry, I see that "johneva" already mentioned using a JS script ...


Unfortunately I don't have 10 post already to link to the respective thread at ArsTechnica forums (I will as soon as I'll "collect" 10 posts), however, you can look at my profile, and visit my site. The marquee scrolling-text is used on the "index.html" page.


P.S. -- Also note that blinking and/or scrolling text is annoying for the majority of users !!


tayiper

 

DON'T USE MARQUEE? SURELY YOU MUST BE JOKING MR. FEYNMAN!

I am always amazed how smart the psychologist Jung was when describing the PARENT attitude many people employ when asked a simple question - some call it self-righteous authority or arrogance - it comes with experienced programmers, mechanics, carpenters - you name the trade - there's a parent authority not far away.

I'm the same - having written more code than any 10 programmers combined that any of you know (including over 15,000 web pages I've personally authored and that was AFTER a 20 year career writing financials that turned my hair gray 5 years after I stopped!) - I can be an grumpy parent too! Believe it - my students call me grandma for being such a bitch - and I'm a man!

bada-boom-crash

Onward.

SCROLLING IS OFTEN ANNOYING - true

BUT HTML ARTISTS LOVE TO PLAY - and there are times when a technique that doesn't usually work well (I would avoid the terms amateur or hack - you're an ARTIST darling - be free - run - play! - indulge your wish!) - anyway - sometimes its a good thing. I've used it about 5 times in 15,000 pages so I don't use it often, but here's a good place:

LYRICS TO A VIDEO.

Naturally, the smart thing is to embed the lyrics in the video or if room permits, put them in line on the page - much nicer to read.

But hey - I'm a musician too and if I don't want to thrash the video and I want the lyrics to scroll across (think Sing along with Mitch and the bouncing ball - I guess I am dating myself) - anyway - Marquee is a good way and I prefer it since not everyone visits with Javascript enabled.

So - I came to this forum with the same issue - darn thing is a bit jerky primarily because its a character placement issue on a mapped screen measured in pixels and that darn character is going to move to the next left position the last character was no matter what - its just not likely its going to be smooth no matter what...

and yes - tools like flash clean that up nicely - but I like tight code

ONE WAY to handle it (if javascript is enabled) is to use a tiny spacer.gif image (transparent nothing) to the far left of the line that literally collapses, allowing the character to move over left 1/2 space - or 1/4 (smoother) or even 1/10th - and use that to allow the line to move to the left

You could also do that for a long line in an iframe (no scroll bar - another parental no-no - but hey - in this case its part of the deal) - and you could literally feed the entire line in from the right side to the left side with a slowly collapsing spacer.gif image that started out as

400 wide (i.e.) and ended at 1 - 5 pixels wide over the course of (lets see - 400 pixles - that's about 50 charactes, so at 150 characters a minute or 2.25 per second - a fairly good clip - you'd crush that spacer.gif at a rate of 50 characters (400 pixels at a -1 size in arial/verdana font) in 20 seconds

or 20 pixels per second

or using a javascript time out function, 1 pixel every setTimeout("crush()",50) where crush would have the code

(don't laugh - grandma lines up the curly cues and shoots programmers who do it the sloppy bong-ripper way - heh heh)

alllines=new Array(
"My first message really long about 50 or more characters ",
"followed by more messages and then ",
"lots more and more and more ",
"and the end of the paragraph or scrolling phrase last line etc."
)

var startmsg=alllines[0]
var lineptr=0
var charptr=0
var nextline=""
var initspacer=400

function addtoline()
{ charptr++
if (charptr>=nextline.length)
{ charptr=0
var lineptr++
if (lineptr>=alllines.length)
{ lineptr=0
}
nextline=alllines[lineptr]
}
var achar=nextline.substr(charptr,1)
// tack that puppy onto the end of the line
mymsg=mymsg+achar
document.getElementById('msgdiv').innerHTML = mymsg
}

function crush()
{ var mysmallerspacer="<img src=\"spacer.gif\" height=10 width=\""+initspacer+"\" align=left>"
initspacer--
var test8=initspacer/8
if (test8==parseInt(test8)
// we've moved 8 pixels - about 1 character if 50 characters is 400 pixels
// so go grab another character
{ addtoline()
}
document.getElementById('spacerdiv').innerHTML = mysmallerspacer
setTimeout('crush()',50)
}

(sorry -haven't tested this - hope you get the drift)

then somewhere down in your html you'd lay in

<div id="spacerdiv">
<img src="spacer.gif" width=400 height=10 align=left>
</div>
<div id="msgdiv">

</div>

<script>
// and lets not forget to jump start this puppy
crush()
</script>

something like that

And now that I've bragged about how much code I've written

and posted some untested code

I guess I get to spank myself (I do muss my real granny - she used a BELT!) and go try it out and come back here and let you know if the theory held water

(and return with something that sort of works)

see you in a few

p.s. no matter what anyone tells you - even if its tacky, bad form, bad code, amateurish and all of that parental stuff (like white text on dark blue which I do a lot and am trying to break that habit) - if YOU want to do it - be free - be an artist - and always remember that in a few months if it sucks, you'll finally admit it and fix the darn thing the way you want it - until the next month

THAT is what being an artist is all about (can you tell I lean towards the CHILD in Jung's world?)

have fun...

 

this is getting really ugly - but YES - the first part of the line does scroll very smooth

The problem with the CRUSH routine is that different letters have different pixel widths - so when an I is at the far left and about to disappear, you have to adjust/reduce the spacer by less pixels than if it were a wide-body letter M

Here's the code (don't choke - I am still polishing this - ahem - sort of like polishing a grand piano with a dull hatchet)

<html>
<head>
<script language="javascript">

alllines=new Array
(
"My first message is really long about 50 or more characters and there's lots of news here for you and ",
"followed by more messages and some song song lyrics - (I guess I am dating myself now) I've been dazed and confused for so long its not true, ",
"wanted some software, never bargained for you, ",
"lots of people talking, but few of them know, ",
"the soul of George Bush was created below ",
"dun dun dun bada bada bada dun dun dun bada bada bada ",
" and the end of the paragraph or scrolling phrase last line etc."
)

var startmsg=alllines[0]
var lineptr=-1
var charptr=0
var nextline=""
var initspacer=400
var mymsg=""

function addtoline()
{ charptr++
if (charptr>=nextline.length)
{ charptr=0
lineptr++
if (lineptr>=alllines.length)
{ lineptr=0
}
nextline=nextline+alllines[lineptr]
}
var achar=nextline.substr(charptr,1)
// tack that puppy onto the end of the line
if (mymsg.indexOf("arial>")>-1)
{ msplit=mymsg.split("arial>")
mymsg=msplit[1]
}
mymsg=mymsg+achar
if (mymsg.length>70)
{ mymsg=mymsg.substr(1,70)
initspacer=initspacer+3
}
mymsg="<font size=-1 face=arial>"+mymsg
document.getElementById('msgdiv').innerHTML = mymsg
}

function crush()
{ if (initspacer<1 || mymsg.length<70)
{ addtoline()
}
initspacer--
var mysmallerspacer="<img src=\"spacer.gif\" height=30 width=\""+initspacer+"\" align=left>"
document.getElementById('spacerdiv').innerHTML = mysmallerspacer
setTimeout('crush()',40)
}
</script>
</head>
<body bgcolor=white><center>
Lets put some limits on this puppy so we can see how it works in a confined area<p>
<table width=50% border=1 cellpadding=5>
<tr>
<td bgcolor=black>
<img src="spacer.gif" width=5 height=1>
</td>
<td bgcolor=white>
<div id="spacerdiv">
<img src="spacer.gif" width=400 height=10 align=left>
</div>
<p id="msgdiv">

</p>
</td>
<td bgcolor=black>
<img src="spacer.gif" width=5 height=1>
</td>
</tr></table><p>
something like that

<script>
// and lets not forget to jump start this puppy
addtoline()
crush()
</script>
</body></html>

===============
ok - ooopsie - I went to look up a table on font pixel width heights etc. and figured I could lay in an array with that data and reference it (talk about client side javascript overhead) - but

a) different size screens/resolutions - wanna make 4 - 10 tables with different values
b) font differences - arial vs times - so multiply that by 5 - 10 fonts or 20 - 100 tables
c) and yup - spacing changes between letters so an IJ will have different spacing than an IM (so they say - haven't tested it)

but if true now you take the number of tables above - and put it to something like the 26th power and with 100 ** 26 you get more javascript table space than you can download in an hour at high speed

conclusion - there IS a way to do this - but this old hack ain't figured it out yet -

But granny knows one of you young cocky whipper snappers will show me up in the next post - heh heh

===============
p.s. the code posted above DOES NOT look pretty like it does in my vintage 1985 Norton Editor (an ap that's only 29K babe - I love it)

 

Ok an hour later I got it - but probably not the way you'd do it - but yes - its smooth as silk (heh heh) grandma likes silk especially on - never mind

Anyway, here's how it works.

1. I gave up trying to scroll left to right with this method. Because the letters that drop off the left side are of varying width and spacing, and therefore caused the jerking when I reduced pixel size and dropped a letter, I had to go with an up and down movement - which is fine since I'm doing lyrics anyway.

2. I scrapped the marquee part altogether and went with an iframe - matched the background colors, gave it a frameborder="0" and scrolling=no (oh no Mr. Bill - no scroll bars - bad boy grandma) - too bad - do you see scroll bars on a Kareokee screen? Huh? No - well there ain't any scroll bars here either.

3. Once I built the lyrics (which are in the framed area) then I defined that frame in the parent and put that frame below the video so the lyrics smoothly scroll up. I could make them go down - in fact I just figured out hot to do a left/right thing as I was typing this but it would require a page in the frame that was 20000 pixels wide - so I'm sticking with this method - it does work really nicely and I believe is cross-browser compatible - a nice touch

Here is the framed lyric page - by the way this is a song sung by an Islander about how global warming is destroying their home.

<html>
<head>
<script language="javascript">
var h1=20000

function loaded()
{ doscroll()
window.location="#starthere"
}

function doscroll()
{ var spcr="<img src=\"spacer.gif\" height="+h1+" width=30>"
if (h1>1)
{ h1=h1-1
}
document.getElementById('topspc').innerHTML = spcr
setTimeout("doscroll()",130)
}

</script>
</head>
<body background="bkcolor.jpg" bgcolor="#F2F2F2" onLoad="loaded()">
<center>
<p id="topspc">
<img src="spacer.gif" height=20000 width=30>
</p>
<font face=times size=+1 color="#314263">
<br>
<p>
<a name="starthere"></a><br>
<br>
<img src="spacer.gif" height=150><p>
<b>Ke Ke Kitea<br>(so you can see)<p></b>
Verse 1<br>
e ui lava ki tatou e mamao <br>
even though we live far apart<br>
e tatau ai koe ke ahiahi mai<br>
you should come visit us<br>
ke ke kitea ite gali o tenei lalolagi<br>
so you can see how beautiful my world is<p>
Chorus<br>
ke ke kitea - so you can see<br>
ite matou lalolagi - my world<br>
ke ke kitea - so you can see<br>
i te gali o tenei lalolagi<br>
how beautiful this world is<p>
Verse 2<br>
ke ve koe ko au - If you could be with me<br>
se aho fakatahi - for just one day<br>
iloa ai e koe - you would then understand<br>
mea lea atu ai au - what I'm on about<br>
ke ke kitea - so you would see<br>
ite gali o tenei lalolagi<br>
how beautiful this world is<p>
Chorus<br>
ke ke kitea - so you can see<br>
ite matou lalolagi - my world<br>
ke ke kitea - so you can see<br>
i te gali o tenei lalolagi<br>
how beautiful this world is<p>
(guitar break)<p>
Verse 3<br>
e ui lava ki tatou e mamao<br>
even though we live so far apart<br>
e tatou ai koe ke ahi ahi mai<br>
you should come visit us<br>
ke ke kitea i te gali o tenei lalolagi<br>
so you can see how beautiful this world is<p>
e talitonu ai au - so you can see<br>
i toku loto nei - the beauty in my world<br>
ke kitea e koe - so you can see<br>
to matou olaga - the beauty in our world<br>
so you can see<p>
e talitonu ai au - so you can see<br>
i toku loto nei - the beauty in my world<br>
ke kitea e koe - so you can see<br>
to matou olaga - the beauty in our world<br>
so you can see<p>
the wonderful life we live<p><hr><p>
</body></html>


Next the javascript in the parent - pretty simple stuff. I kept the same variable name as I was using (lyric marquee) which had a marquee in it before, but is now a simple iframe and a control button to zap the video and make it disappear - since I robbed users of the control buttons on the player (I am bad) by also stuffing that in a frame without borders and so tight you don't see the control buttons - I figured I better at least let them make it go away - so if they click stop video - the entire video and lyrics disappears from the screen


function marqoff()
{ document.getElementById('marqframe').innerHTML = "<font face=\"verdana, arial, helvetica\" size=\"0\" color=\"#314263\" class=\"thtcolor\">(click ABOUT to play video)<br>"
// this makes it disappear
}

var kekekitea="<div id=\"marqframe\"><center><iframe src=\"keke.html\" scrolling=no height=205 width=350 frameborder=\"0\"></iframe></center>"
var lyricmarquee="<iframe src=\"keke2.html\" width=320 height=200 frameborder=\"0\" scrolling=no></iframe><br>"
lyricmarquee+="<font face=\"verdana, arial, helvetica\" size=\"0\" color=\"#314263\" class=\"thtcolor\"><a href=\"javascript:marqoff()\"><font color=blue>"
lyricmarquee+="<br>(stop video)</a><p>"
kekekitea+=lyricmarquee
kekekitea+="</div>\n<font face=\"verdana, arial, helvetica\" size=\"2\" color=\"#314263\" class=\"thtcolor\">"

Then down in the html is a simple

<script>
document.write(kekekitea)
</script>

which puts that code into that part of the html and the video embed is above it

You can see it at the org site uoin - click the ABOUT button - its still in progress so if you get a NOT FOUND I'm uploading

by the way - for all you hackers interested - grandma here has been off the grid doing web work entirely on WIND POWER for 10 years - actually April 6th will mark my 11th year - and there was a time when I ran a 30 web site 1U rack mount out here for 3 months - entirely on wind and a good quality wifi hit - don't faint - we were just building it and wanted to know everything was gonna fly when we sent it to the colo place.

Those guys said it was the only rack mount they ever received in a suitcase that fired up and ran without a hitch or any changes required in 8 years they'd been open - it even figured out its IP address on the boot and rewrote the config files so it could start dishing out pages without any human touching a single key.

NOW - if I can stay off the grid for 11 years and do this work - you kiddies can go to the windgenzen site - take the free class there and learn to carve wooden wind generator blades and start flying them on your roof tops - and if you do that, then the man who wrote this song - (script above) - a man who's island nation is going under the sea because of our power usage (did you know we use TWICE as much power per capita as Europeans?!?) - well anyway, then this script and solution will be a double edge sword and you can help the planet AND learn some javascript

CONCLUSION: the pixel spacer.gif thingy does work and gave a silky smooths scroll - no marquee jerking - hope this helps

p.s. I did find an article by someone who did this with CSS style sheets and some software wiget you embedded in your javascript - their solution did all kinds of 'extra' things - changed speeds etc. which you could do with this as well