Steph Benoit

Navigation

Skip navigation.

Search

Site navigation

Email conversation

FromSteph Benoit
ToMe
SubjectECMAscript Tutorial - Replacing 'Marquee' with ECMA function
Date21 November 2004 15:49
Hi

I was reading in your mail section that someone had seen an excellent
ECMAscript tutorial on your site.

I am very much interested in this, but couldn't find it anywhere.

Specifically, my problem is that my site currently uses 'Marquee' in PHP
programs to scroll content extracted from my MySQL database. and as you are
probably aware, W3C isn't wild about Marquee and thus, my site can't become
HTML 4.01 Transitional compliant.

I've looked in about 1000 places trying to find the correct syntax to get
ECMAscript to do this, but haven't been able to find anything like that.
Sure, I've found some commercial programs that do it, but none of them
actually produce a 'Simple' script.  They all want to do fancy things that
frankly, I don't need as my other block properties are already defined.
Further, most of these programs aren't friendly with commands that extract
data from a database, but are rather designed for static content. (you
provide the data and it will define the box and make the content scroll)

For an example about what I am doing, please feel free to visit my website
at [site address]

You'll see several different types of examples of blocks (for PHP-Nuke) in
PHP that use Marquee including a nice collapsing forums block with single
item scrolling, as well as a constant scroll type of block for my Syndicated
News solutions.

All of this code was created by me and I'm willing to provide it all to
anyone as it is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by the Free
Software Foundation; either version 2 of the License.

Anyway. I'm hoping your tutorial will teach me how to make my dynamic
PHP-Nuke content scroll using ECMAscript.

Thanks for you time!

Steph Benoit
FromMe
ToSteph Benoit
SubjectRe: ECMAscript Tutorial - Replacing 'Marquee' with ECMA function
Date21 November 2004 23:20
Steph,

ECMAscript is just the core programming language syntax. JavaScript
describes how to use ECMAscript to interract with the page. As a result,
the two are usually mistaken for each other.

A marquee is essentially just a message scroller. It moves the content
across, and clips it when it reaches the edge. Once it gets to the end, it
recycles it back again to the other side.

There is an easy way and a hard way to do what you want.

The easy way is not to use marquees, then use a script to put marquees back
in again. This is cheating, because you are using valid HTML (so it will
validate), then putting the invalid part back again afterwards.

The harder but better (valid and more cross-browser) way is to use DHTML.
http://www.howtocreate.co.uk/tutorials/javascript/dhtml

One div inside another. The outer one has
overflow: hidden; position: relative; height: 1.2em; width: 100%;
The inner one has
position: absolute; top: 0px; left: 0px;
You can then use a timed script to modify the style.left property to step
this to the left every 25 or 50 miliseconds. When the left position gets to
-1*theInnerDiv.offsetWidth you then change left to the offsetWidth of the
outer div. Not too hard to do, as long as you are familiar with it.

These are both very simple to do, and I can easily write either of these.
The idea would be to base it on you outputting something like this:
<div class="makemarquee">Contents</div>
If you want me to write something like this, let me know which one you would prefer.


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.