Category Archives: XHTML

Untold Entertainment Made in jQuery Part 3 – The Project Slider

Being a showcase for the Flash work of Untold Entertainment, the image slider is used as the main focus of the home page and displays his latest projects. Continuing from the first two tutorials, I’ll now show you how to create this slider with jQuery.

We’ll be treating the slider as a separate element from our Twitter bar before, so no need to use old code here.

With the abundance of jQuery image gallery plugins and scripts it’s safe to say that jQuery makes this sort of thing in particular run a lot more smoothly than with plain JavaScript. This section will be the easiest part of the series.

Let’s dive in. Continue reading Untold Entertainment Made in jQuery Part 3 – The Project Slider

Untold Entertainment Made in jQuery Part 2 – Styling the Twitter Bar

Carrying on from the first part of creating a Flash-less home page on Untold Entertainment, we add to the tutorial on animating Twitter text with some more usability and style.

We start off by generating links (to URLs and Twitter pages) inside the text, make a couple of buttons to skip the tweets backwards and forwards, then animate the Twitter bird and speech bubble as a background. Continue reading Untold Entertainment Made in jQuery Part 2 – Styling the Twitter Bar

Untold Entertainment Made in jQuery Part 1 – Animating Twitter Text

Ryan Creighton’s Flash development site Untold Entertainment has a quirky home page with plenty of animation and things to click on (complete with roll-out tongue) and of course is built in Flash. Thing is, I’m against any kind of Flash interface. It’s great for games, but otherwise it’s unnecessary (which includes videos).

With the whole Adobe v Apple debate that’s going on right now (yes, I said I wouldn’t mention it but it applies here ‘kay), it’s safe to say you’d be better placing your chips on the JavaScript and HTML5 end of the table.

The discouraging part is that his website could be done without Flash as most of the scrolling and animating could be done with straight JavaScript, and jQuery will help see things along smoothly.

Today I’ll show you how to animate the text at the top, feeding in from his Twitter feed, complete with jerky timings, slanted text and collecting feed data. Continue reading Untold Entertainment Made in jQuery Part 1 – Animating Twitter Text

Messing with Background-Attachment

Earlier this week I came across an interesting Tumblr theme by Jarred Bishop. The site played with the background-attachment CSS property to show a unique background for each Tumblr post on his main page (depending on which post image he used) and stays static as you scroll.

I started to play around with some code to replicate this effect and instead came up with some different examples, while still manipulating background-attachment. Hit the jump for some demos. Continue reading Messing with Background-Attachment

Load WordPress Gravatars on the Fly

Globally Recognised Avatar (or Gravatar) is a service from the WordPress team that allows you to improve your web presence across blogs and specialist websites. It’s one of those “why didn’t I think of that?” products that are so simple but yet have so much opportunity to be integrated into virtually everything. You can see examples of this from the comments below and in my sidebar.

The problem with Gravatars that I find a lot of people mentioning is that they don’t get to see their Gravatar before they post a comment – like the comments section on Shamus Young’s Wavatar post.

You may not think that’s too big of a deal, or perhaps from a marketing point of view that’s your way of driving comments (nasty people), but allowing them to play about with their image in the form will improve their relationship with your site and increase traffic anyway. Saves people deleting and re-commenting just because their Gravatar didn’t show up right too.

So this week I’ve put together a little script that generates these little Gravatars as you type. It’s even got little Wavatar faces on them that change when you make a new address, so you’ll never get bored! Continue reading Load WordPress Gravatars on the Fly

How to Display a User’s Visited Web Pages

Allowing a developer to access a visitor’s browsing history is a huge security risk, that’s why it’s not possible. If you own a website that runs PHP with MySQL and handles sessions then this could be done by tracking IP addresses, user agents and so on to associate a browsing pattern with a particular person. This however can be pretty inaccurate, plus it’s only limited to your own website.

So what are we going to use? Well when you think about it, a user’s browsing history is stored on their computer, client-side. And what else runs client-side that us web developers can make? JavaScript and CSS. These are what we’re going to use. Continue reading How to Display a User’s Visited Web Pages

Create Social Bookmarks with the AddThis API

One service that I had used a while back was AddThis social bookmarks. I really liked its ease of use, support for a huge range of social networks and bookmarking sites, and most importantly it had great tools for analytics.

The social bar itself however left more to be desired. It was an eyesore, appearing after every post on my site, and made me cringe at the fact that it relied on JavaScript to function. Luckily, I found an alternative in the form of their API docs. Continue reading Create Social Bookmarks with the AddThis API

Beginner’s Guide to Google AJAX Feed API

For those that don’t know, the Google AJAX Feed API is a JavaScript tool that you can use to handle your AJAX requests, and is particularly useful for reading in feed data from external websites. After searching for all kinds of plug-ins and tools, I landed on Google’s answer, and found exactly what I needed – a JavaScript-only feed parsing script.

This tutorial will provide you with a very basic script to start using this great tool and covers what you need to get started.

Continue reading Beginner’s Guide to Google AJAX Feed API

Using jQuery To Create Parallax Scrolling Backgrounds

Just a quick demonstration today on using JavaScript and CSS techniques to create scrolling backgrounds. Here we layer backgrounds on top of each other and change their horizontal position to move them past the viewing area. It also uses different multipliers to move the closer objects quicker, and create a parallax effect.

Continue reading Using jQuery To Create Parallax Scrolling Backgrounds

Open Windows in HTML with Standards Compliance

When opening new windows from your web page that link to external files, a common practice is to open them in a new window as not to deter the user from your site.

One method to do this in the past was to use target="_blank" that tells the browser to open the link’s href attribute in a new window. This, however, is deprecated in the Strict Doctype of W3C web standards so we should be trying to avoid using it whenever we can, and in this post I’ll show you exactly how it’s done.

Continue reading Open Windows in HTML with Standards Compliance