Markup Tutorials

  • Animated Progress Bars Using MooTools: dwProgressBar

    I love progress bars. It's important that I know roughly what percentage of a task is complete. I've created a highly customizable MooTools progress bar class that animates to the desired percentage.

  • Create a NoScript Compatible Select Form Element with an onChange Event

    I wouldn't say that I'm addicted to checking Google Analytics but I do check my statistics often. I guess hoping for a huge burst of traffic from some unknown source. Anyway, I have multiple sites set up within my account. The way to switch between sites is by choosing the site from a dropdown list. Once the dropdown list changes, the page automatically reloads with the requested site content.

  • Editable Content Using MooTools 1.2, PHP, and MySQL

    Everybody and their aerobics instructor wants to be able to edit their own website these days. And why wouldn't they? I mean, they have a $500 budget, no HTML/CSS experience, and extraordinary expectations. Enough ranting though. Having a website that allows for editable content blocks is the dream of many customers. I've taken a few hours to develop a system for in-page, editable content blocks.

  • Multi-Select Transfers Using MooTools 1.2

    While I was a Zone Leader for DZone's AJAX, CSS, and PHP Zones, DZone's Rick Ross asked me to contact Jeremy Martin with regard to a hot blog post he created: Easy Multi Select Transfer with jQuery. Both Rick and I were impressed with Jeremy's script and asked him to repost on DZone.

  • Assign Anchor IDs Using PHP

    Last week, I challenged my readers to create a PHP script that finds anchors in an HTML document and assigns an ID to the element IF the element doesn't have an ID already. Jeremy Parrish stepped up to the challenge.

  • Create HTML Elements Using PHP: html_element Class

    I love creating HTML elements using the MooTools JavaScript library. It's easy, fast, and the JavaScript code to create the element is beautiful. That got me thinking — why don't I do this using PHP? When you build as many dynamic CMS-like websites as me, you end up having to manipulate single HTML element attributes with a bunch of if/else logic and the code can start looking ugly.

  • Facebook Sliders With Mootools and CSS – Now With Image Generation!

    A few weeks back, I posted Facebook Sliders With Mootools and CSS, which explain how to create Facebook-style sliders that control the height, width, and opacity of an image:

  • Post Load Basic View Source

    During one of my recent experiments, I used a ton of MooTools functionality to modify the elements on the page. Unfortunately, I kept running into a problem and couldn't figure out the problem. Here's a portion of the MooTools 1.2 code I had:

  • Popular Websites and XHTML Validation Errors

    During my confession session a while back, I mentioned that I wasn't high and mighty when it came to XHTML validation. The customer doesn't care, the website's budget doesn't care, and the Mustache probably doesn't care. I caught some crap for saying this so I've decided to check some popular websites from various genres to see how closely they stick to validation rules with their XHTML. The following is what I found for each homepage.

  • Guest Blog: Create a Color Palette Using CSS and MooTools 1.2

    As you can see from my site's lack of design, I'm about 90% programmer and 10% designer. As someone that's not a designer, I'm really grateful for websites like ColourLovers — websites that provide you palettes of colors that look good together. Let's pretend for a moment that I do have a good design and I want others to know my palette. MooTools 1.2 has made that a reality.