Crazy long jQuery animation chains for a slideshow widget

So I was recently coding a slideshow widget using jQuery. Nothing fancy — just a box showing one image, you click an arrow, the next/previous image slides in. The code was also very straightforward — get a handle on the “slides” and use index to loop through them. For one of the animations in the transition (there were labels that were animated separately) I used a simple chain, something like $(slide).find(label).animate(). As I was writing it, it hit me, jQuery has pretty robust chains, they allow mixing pretty much every operation you can do on an element — traversal, manipulation, effects, etc. So I decided to see if I could do the entire slideshow functionality as one long chain (well, technically two, one for each arrow). Here is a demo of the slideshow widget in action. Read more »

More Codex icons for Android

Codex icons for AndroidI made several more icons in the same style as my previous Codex Icons. There are 30 icons this time, and as before, each comes in two versions — with and without reflections. The ones with reflections work really well with LauncherPro dock. This time around I’ve included icons for Angry Birds, Layar, Evernote, Settings, Doubletwist, Shazam, Firefox Home, Bookmark and more. Check out the full preview below. Read more »

Cool CSS only buttons

I love CSS because it’s like having Photoshop inside a browser. Okay, maybe I’m exaggerating, but with modern browsers there are a lot of very cool things you can do with just CSS, without needing any of those pesky images with their overheads and extra kilobytes to download. In my work though I don’t often get a chance to try anything really interesting with buttons because they’re either simple, or if they’re not then I have to make them IE (worse yet, IE6) compatible so I end up reverting to mostly images anyway. So I decide to “go wild” and see what I can do without having to care about any of that compatibility nonsense.

Sidenote: Can you imagine if first cars had to be made horse-compatible? Yeah, think about that for a second.

So anyway, this is what I came up with.

CSS buttons

Look ma, no images!

Here is a demo of the buttons, pretty much exactly what I used for the screenshot above. I go over the styles after the break.

Read more »

Codex Icons for Android

Codex Android IconsI’ve made these to put on my Nexus One, but of course they can be used anywhere, not just on Android. These are minimalistic icons with subtle gradients and shadows; they come in two flavors, one with reflections (what you see in the image above) and a plain style (no reflections and slightly bigger). There is a total of 26 icons and you can see a full preview below. Read more »

Write single-page Ajax web applications with Sammy.js

Tutsplus.com has a great intro tutorial to Sammy.js, a small JavaScript framework that allows you to write single page web apps, similar to Gmail for example. Because Sammy.js is built on top of jQuery it’s very small, only about 20kb. With this framework you can keep track of your app’s state via hash (#) in the URL, without the need to refresh the site as you go from page to page, and of course it allows you to use the browser’s back button as well.

Check out the full tutorial at net.tutsplus.com.

HTML5 Boilerplate is a kickass base template for website development

HTML5 is the future of the web, but building the future is hard work and so it’s always great to get a bit of help with that. Some of that help comes in the form of HTML5 Boilerplate from the minds of Paul Irish and Divya Mani, who have teamed up to bring us “the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site”. Boilerplate is basically a bunch of files, the exact kinds of files you would create as you start working on a new website, except that these already contain the basic starting code and include all the best practices baked in. Things like reset styles, pngfix, HTML5 markup and more. I went over most of it line by line and after a few adjustments based on my own personal preferences I’m going to start using it as the base for all websites I work on. Read more »

Joomla Toolbar fix

If you work with Joomla 1.5 and like me, find the right alignment of toolbar icons counterproductive (in the default admin theme), then you can fix it with just a few CSS tweaks. Here’s what I mean.

joomla menu fix

To do this, in Joomla’s root folder go to administrator/templates/khepri/css. In file rounded.css find the style for div.m and add position:relative to it. That’s it for that file. Now open the file general.css and that’s where you’ll need to make several changes. Read more »

Custom AddThis share button

I wanted to have an AddThis share button that would fit better with the site’s design, and if you’re reading this post on its own page you can scroll down and see what I mean. While AddThis provides plenty of ways to customize their buttons, there is no way to assign your own image to the icon, which means doing it the hard way… well, relatively speaking of course.

There are three main steps to creating a customized share button. There’s some javascript to include in the footer.php, few lines of html to add at the end of your posts, and of course some styles and the icon itself.
Read more »

Page 5 of 8« First...34567...Last »