Markup Tutorials
Duplicate the jQuery Homepage Tooltips
The jQuery homepage has a pretty suave tooltip-like effect as seen below:
Create a Twitter AJAX Button with MooTools, jQuery, or Dojo
There's nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience. Of course widgets like that take many hours to perfect, but it doesn't take long for that effort to be rewarded with above-average user retention and buzz. One of the widgets I love is Twitter's "Follow" button. Let me show you how you can implement this functionality with three popular JavaScript toolkits: MooTools, jQuery, and Dojo.
Create a Dynamic Flickr Image Search with the Dojo Toolkit
The Dojo Toolkit is a treasure chest of great JavaScript classes. You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo. You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within Dijit. In DojoX you can find charting libraries, special data stores, vector graphic helpers, and much more.
Dijit’s TabContainer Layout: Easy Tabbed Content
One of Dojo's major advantages over other JavaScript toolkits is its Dijit library. Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates. One very useful layout class is the TabContainer. TabContainer allows you to quickly create a tabbed content layout with minimal effort. Keep reading to see what you can create in just 10 minutes!
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!