Blog Archives: Page 2?s=order
Using jQuery or MooTools For Drag, Drop, Sort, Save
One of my most popular posts has been Using MooTools 1.2 for Drag, Drop, Sort, Save. My post detailed how you can create a drag'n'drop, AJAX-ified system to allow the user to drag and drop elements and quickly save them with PHP and MySQL on the server side. I've chosen to update the post with a faster, more efficient set of MooTools and PHP code. I've also provided a jQuery equivalent. Enjoy!
Browser-Specific Styles with the Dojo Toolkit
Every JavaScript library aims to cure the pain of dealing with cross-browsers JavaScript issues. The Dojo Toolkit takes that a step further by trying to help you deal with cross-browser CSS issues. Dojo features a file called "uacss.js" which adds CSS classes to the page's HTML element to allow you to more easily write browser-specific CSS. Lets take a look at how Dojo attempts to help us write more maintainable CSS.
Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript
I'm what you would consider a bit of a GitHub fanboy. We all know that GitHub is the perfect place to store repositories of open source code, but I think my love of GitHub goes beyond that. GitHub seems to understand that most repo sites are usually boring so they've spiced their site up with some catchy CSS and great JavaScript features. One tiny piece of the GitHub design I love are the basic buttons. Lets examine how we can create our own GitHub-style buttons with a bit of HTML, CSS, and JavaScript.
Quick Tip: MySQL date_add
Here's a quick MySQL tip I wanted to throw your way. I created an event system a while back and one of the requirements of the system was to show events that happened yesterday forward, meaning events older than 2 days were to be hidden. MySQL's date_add will allow you to do just that:
Create Twitter-Style Buttons with the Dojo Toolkit
I love that JavaScript toolkits make enhancing web pages incredibly easy. Today I'll cover an effect that I've already coded with MooTools: creating a Twitter-style animated "Sign In" button. Check out this five minute tutorial so you can take your static buttons to the next level!
Use Custom Missing Image Graphics Using Dojo
A few months back I posted an article about how you can use your own “missing image” graphics when an image fails to load using MooTools and jQuery. Here’s how to do the same using Dojo.
Animated AJAX Record Deletion Using Dojo
I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with Dojo JavaScript.
Scrolling “Go To Top” Link Using Dojo
One of the most popular code snippets of posted on my blog has been the scrolling "Go To Top" link snippet. The premise of the snippet is simple: once the user scrolls an element (usually the BODY element) past a given threshold, a "Go To Top" anchor fades into view. Simple, stylish, and functional — the definition of a good JavaScript-powered enhancement. I've showed you how to accomplish this task using jQuery and MooTools; here's how you can accomplish that same effect using Dojo.
Create a “Recent Posts” Module Outside of WordPress
The websites I create are never powered by WordPress. Sure I may add a blog to the website but I've never created a client website that was run by the powerful blogging software. In an effort to tie the website and blog together, I'll usually do some quick PHP/MySQL programming to pull in recent blog post titles and links to the individual posts. Here's the PHP and MySQL that accomplishes that task.
Automatically Generate a Photo Gallery from a Directory of Images: Updated
Two years ago Chris Coyier wrote an outstanding tutorial detailing how you can generate a photo gallery based on the images within two directories: a thumbnails directory and an originals directory. I've decided to take his tutorial a step further by showing you how to generate thumbnails for the gallery using PHP. I've also implemented a MooTools lightbox: Smoothbox. The following code will show you how to create a beautiful photo gallery by simply dumping your photos in a directory.