Markup Tutorials

  • Create a Context Menu with Dojo and Dijit

    Context menus, used in the right type of web application, can be invaluable.  They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available.  Dojo's Dijit frameworks provides an easy way to create stylish, flexible context menus in just minutes.

  • Create a Simple Dojo Accordion

    Let's be honest:  even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget.  Lots of content, small amount of space.  Dojo's Dijit library provides an incredibly simply method by which you can add accordions to your website.  Let's take a look at how we can implement a Dojo accordion!

  • Build HTML Tables From MySQL Tables with PHP

    I was recently completing a project which required that I build a series of HTML tables which would represent all of the tables within a MySQL database.  I didn't have anything created but after a few minutes I had exactly what I needed. Hopefully this helps you out!

  • Multiple File Upload Input

    More often than not, I find myself wanting to upload more than one file at a time.  Having to use multiple "file" INPUT elements is annoying, slow, and inefficient.  And if I hate them, I can't imagine how annoyed my users would be.  Luckily Safari, Chrome, and Firefox have implemented a method by which users can upload multiple files within one INPUT element.

  • Using SCRIPT’s defer Attribute

    One of the seldom used attributes within the HTML tag library is the defer attribute on SCRIPT elements.  As you can probably tell by the name of the attribute, defer instructs the contents of the script tag to not execute until the page has loaded.  Take a look!

  • Sexy Link Transformations with CSS

    I was recently visiting MooTools Developer Christoph Pojer's website and noticed a sexy link hover effect:  when you hover the link, the the link animates and tilts to the left or the right.  To enhance the effect, the background color of the link is changed.  I scoped out his JavaScript file to see how he created the effect but there were no link effects in it — the effects were being created with just CSS!

  • Dive Into Dojo Series: Dijit and Charting

    I just wanted to give you all a heads up that I've started a Dive Into Dojo series over on the SitePen blog.  The series will aim to cover the basics of jumping into the world of the Dojo Toolkit.  The first two posts in the series focus on the amazing charting and Dijit UI classes.

  • WebKit Marquee CSS: Bringin’ Sexy Back

    We all joke about the days of Web yesteryear.  You remember them:  stupid animated GIFs (flames and "coming soon" images, most notably), lame counters, guestbooks, applets, etc.  Another "feature" we thought we had gotten rid of was the marquee.  The marquee was a rudimentary, javascript-like effect to move text from one side of a block to another.  I was recently looking at WebKit's CSS specs and found that Safari has implemented CSS marquees.

  • MooTools Equal Heights Plugin: Equalizer

    Keeping equal heights between elements within the same container can be hugely important for the sake of a pretty page. Unfortunately sometimes keeping columns the same height can't be done with CSS — you need a little help from your JavaScript friends. Well...now you're in luck.

  • TextboxList for MooTools and jQuery by Guillermo Rauch

    I'll be honest with you: I still haven't figured out if I like my MooTools teammate Guillermo Rauch. He's got a lot stacked up against him. He's from Argentina so I get IM'ed about 10 times a day about how great Lionel Messi is. He lives in California so he doesn't have to deal with 3 months of bitter cold like I do in Madison. He even takes some of my chicks. All that said...he's just...just...so damn smart. In the end I think some of my bitterness about Guiller is that he's smarter than me. Better than me at MooTools, JavaScript, and even life.