My First jQuery Plugin: VintageTxt



Ever hearken back to the good ol’ days of the Apple II, with its monochrome screen and visible scanlines? No? Me either, really. I don’t even know what hearken means. But I do know that vintage looking stuff is cool, and people love it when all that is old is new again. So here is a jQuery plugin (new) that injects a green monochromatic scanlined fake computer screen (old) right onto any webpage. You can even make it type out a bunch of text, one character at a time – like that stupid computer from Wargames. No annoying voice-over though. And of course there is an input prompt, so you can bang away at your keyboard while pretending to break through 8 levels of top secret encryption to re-route the protocols through the mainframe and unleash your most advanced viruses… all while chanting, “enhance.”

Why make this? Fun, naturally. Plus I’ve been wondering lately what it would be like to make a jQuery plugin. I know I’m a little late to the jQuery party, and all the cool kids have move on bigger and better things, but the ability to whip up a jQuery plugin seems like one of those skills a self-respecting web developer should acquire at some point. Two helpful guides stocked the pot, and I threw in a bit of my own spicy sauce as I went along. I’m fairly satisfied with the end result, and the knowledge gained. To play around with a fully functional demo, click the link or image above. But to have some real fun, go grab the source from GitHub and VintageTxt your face off!


  1. I just had to comment on this! your demo is great! Although I cant find a use for this personally (tho im trying to think of one) the demo did make me chuckle! And its a very cool little plugin indeed!

    Thank you for brightening my day somewhat :)


  2. This post is great. I realy like it!

  3. This is fantastic and I actually have a use for it.

    I am new to JQuery though and wondered if you could help me modify the code so that the text array is loaded from a text file?

    I would also like to know if it’s possible to change the font size ?

    Appreciate any advise you can give.



  4. Hi Pete, sorry for the late reply. To change the font size, open jQuery.vintageTxt.css and change the ‘font-size: 14px’ rule inside the .vtxt_oldSchoolContent selector (around line 20).

    For your other question, VintageTxt will accept an array of text, so you will need to load your text file into an array via ajax. You can do this without modifying VintageTxt at all. Soemthing like this should get you started:

    file = ""
        var lines = txt.split("\n");
            text: lines
  5. Be cautious when scouting for the credit card by yourself and your family Instant cash at hand
    payday loans are very very simple to obtain and keep
    if desired

  6. An impressive share! I’ve just forwarded this onto a colleague who
    has been conducting a little research on this. And he
    in fact ordered me breakfast due to the fact that I
    stumbled upon it for him… lol. So let me reword this….
    Thanks for the meal!! But yeah, thanks for spending some time to discuss this matter here on your website.

  7. Hello There. I found your blog the use of msn. This is
    an extremely well written article. I will be sure to bookmark it and come back to read more of your helpful information. Thank
    you for the post. I’ll definitely comeback.

  8. Thanks to myy father who stated to me on the topic of tyis blog, this weblog
    is actually amazing.

  9. Right away I am ready to do my breakfast, once having my breakfast coming
    over again to read other news.

Leave a Reply

Your email address will not be published.


© 2016 Eric Terpstra

Theme by Anders NorenUp ↑