Markup Tutorials
![Google-Style Element Fading Using MooTools or jQuery]()
Google-Style Element Fading Using MooTools or jQuery
Google recently introduced an interesting effect to their homepage: the top left and top right navigation items don't display until you move your mouse or leave the search term box. Why? I can only speculate that they want their homepage as...
![Replace Content in PRE Tags with HTML Entities]()
Replace Content in PRE Tags with HTML Entities
If you have a website that relies heavily on PRE tags, you know the important of converting PRE tag content to their HTML entities. Doing so prevents worlds of possible rendering issues. The following PHP snippet HTML-Entitizes (?) any code within PRE tags: I use...
![Sliding Labels Using MooTools]()
Sliding Labels Using MooTools
A week back I saw a great effect created by CSSKarma: input labels being animated horizontally. The idea is everything positive: elegant, practical, unobtrusive, and requires very little jQuery code. Luckily the effect doesn't require much MooTools code either! The HTML A...
![IE Conditional Comments]()
IE Conditional Comments
As we all know too well, Internet Explorer is the browser that tends to cause web developers the most pain. Maybe it's because Microsoft currently has 3 very different browser versions we have to account for. Maybe it's because the earlier versions of the...
![Hot Effect: MooTools Drag Opacity]()
Hot Effect: MooTools Drag Opacity
As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...
-
![Create a Simple Slideshow Using MooTools, Part III: Creating a Class]()
Create a Simple Slideshow Using MooTools, Part III: Creating a Class
In my previous two slideshow posts, Create a Simple Slideshow Using MooTools and Create a Simple Slideshow Using MooTools, Part II: Controls and Events, I showed you how to create a slideshow using...
![MooTools Quick Coding: Expand Abbreviation]()
MooTools Quick Coding: Expand Abbreviation
One of the many great reasons for an official MooTools Forge is that I get to check one place to find numerous MooTools plugins that I've never seen before. One such plugin, Expand Abbreviation, allows the developer to create elements using...
![Create a Simple Slideshow Using MooTools, Part II: Controls and Events]()
Create a Simple Slideshow Using MooTools, Part II: Controls and Events
Last week we created a very simple MooTools slideshow script. The script was very primitive: no events and no next/previous controls -- just cross-fading between images. This tutorial will take the previous slideshow script a step further by: Adding "Next" and "Previous" controls. Adding...
![MooTools Overlay Plugin]()
MooTools Overlay Plugin
Overlays have become a big part of modern websites; we can probably attribute that to the numerous lightboxes that use them. I've found a ton of overlay code snippets out there but none of them satisfy my taste in code. Many of them are...
![Create a Simple Slideshow Using MooTools]()
Create a Simple Slideshow Using MooTools
One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events.
