Zach’s ugly mug (his face) Zach Leatherman

maLArquee, Bringing Back the Marquee

August 20, 2007

What did you spend your Saturday afternoon on? Did you kick up your feet in your hammock with a nice glass of lemonade in the shade of your favorite tree and read the HTML specification? Me too! Who knew that we’d have so much in common? Since you’re obviously like me, you’ve probably wondered to yourself: where did the marquee tag go? Why isn’t the internet graced with scrolling text gently flowing like a babbling brook across the pixels of your web browser? Well since you spent your Saturday reading the HTML specifications, you would know that the tag was only supported by Internet Explorer, and wasn’t even a part of the HTML spec. Unbelievable right? And to think the tag I came to know and love wasn’t part of the spec either! I’m just offended as you, let me reassure you.

Well today, we’re going to solve all of that. Today, I’m going to show you a full screen web browser marquee that will both amaze and excite you. Here we go:

Malarquee

Watch on YouTube: maLArquee, Bringing Back the Marquee

What is it for?

There are a few obvious uses, I suppose. You can send someone a nice greeting in an email link (it does a ROT13 encoding to mask the text inside the link). Try one of these:

For a spouse: I want a divorce.

For an employee: You’re fired.

For a doctor: I’m sorry but you have anal warts.

For your son or daughter: You were adopted.

So, what else does it do?

I knew you’d ask. If you click the Options link in the top right corner, you can scroll your text across multiple web clients! Input the number of clients you’d like to use and the number of your current client. Hit the update and save button to refresh your page. It will automatically parse your text accordingly (adding extra spaces at the end as blank slides if needed). You can test this using one computer by bringing up the following two links in separate windows side by side (you can use a different web browser for each link if you’d like):

maLArquee Client #1
maLArquee Client #2

You could also go into a computer lab and scroll some text on a couple different computers.

Why?

I think it’s fun to try new things on the web, experiment a bit. That’s also why I made ALARMd, an Internet Alarm Clock. For this project, I think it might be fun to try a new JavaScript library, just to get a little bit more experience with a range of different coding types. So I decided to use MooTools, and wrote a little review on my experience, coming from a YUI and jQuery background.

How does it work?

Every 5 scrolls (I reserve the right to change this number at any time I so wish to conserve bandwidth), the page makes an XmlHttpRequest to the server, gets the server time, and adjusts the delay of the next scroll event to synchronize scrolling between multiple browsers. Ideally, if every computer were the same, we could just do a single XmlHttpRequest at page load and do a standard interval for scrolling. But we all know that every web browser is different, and just because you do a setInterval(yourFunction,1000) doesn’t mean it’s actually going to run yourFunction every second. It might run in 1010 ms or 990 ms. Thus, the XmlHttpRequest is needed to resynchronize all of the clients to a standard clock.

If there is any interest, I’ll post the code to the time.php script that returns the JSON containing the server time.

What would you do different next time?

I told my gracious web host about this project after I was approximately 90% complete with it, and his response was: “Did you use NTP?”, with which I replied: “What is NTP?” Ugh. There is even a JavaScript implementation.

In order to provide balance and order to the universe, please read the following link.


< Newer
ALARMd now supports URLs
Older >
YUI Code Review: YAHOO.namespace

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

4 Comments
  1. Jehiah Disqus

    21 Aug 2007
    nice idea; and a great imlementation.i hope you found my ntp code helpful
  2. Zach Leatherman Disqus

    21 Aug 2007
    Well, that's my problem, is that I didn't. If I had known about it from the beginning, it would have saved me quite a bit of work. But that's my own ignorance, I didn't know what NTP was.
  3. mehan Disqus

    08 Jun 2009
    i didn't like it not either you, total scrap. you was suppose to take bath rather then making it "you Stinky", now don't be dump to allow this post appear on your blog. just delete it happy wasting time :)
  4. Zach Leatherman Disqus

    22 Jul 2009
    I forgive you.
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)