ELATED New Stuff to Love

Create Smooth Rotatable Images with CSS3 and jQuery

Wed, 25 Aug 2010 05:00:00 GMT

Published in jQuery

With the advent of CSS3 transforms, we can do some nice tricks with elements in a web page, including rotation, scaling, and skewing. Once we start throwing jQuery into the mix too, we can start doing some really nice tricks!

In this tutorial, Matt shows how to use CSS3 and jQuery to create images that can be smoothly rotated using the mouse. Full example and code download included. Enjoy!

More Free London Stock Photos

Mon, 23 Aug 2010 05:00:00 GMT

Published in ImageKits

We've just added 20 more lovely high-res stock photos to our ImageKits, taken recently in London, England.

This set of images includes pubs, office buildings, the Palace of Westminster (a.k.a. the Houses of Parliament), fire bells, flags, abstract photos, and more.

Have fun, and enjoy using them on your sites. :)

Easy Ways to Sort Arrays in PHP

Mon, 16 Aug 2010 05:00:00 GMT

Published in PHP Arrays

PHP gives you a large number of sorting functions that can sort arrays using many different criteria. For example, you can sort in ascending or descending order, by key, or by value. These functions make it really easy to sort arrays without getting bogged down in the details of sort algorithms.

In this tutorial you'll learn how to use these sorting functions. We won't try to cover every single sorting function in this tutorial. Instead, you'll learn about the functions that you're likely to find the most useful in your everyday coding.

Have fun!

A Snazzy Animated Pie Chart with HTML5 and jQuery

Wed, 11 Aug 2010 05:00:00 GMT

Published in JavaScript

In this tutorial Matt shows you how to build a lovely, interactive pie chart using the latest HTML5 technologies.

Not that long ago, this kind of thing was only practical to do with Flash. Now, thanks to advances such as the HTML5 canvas element, we can create pretty nifty animated effects using nothing but JavaScript, CSS, and a small sprinkling of maths. Hurrah!

Super-Easy Animated Effects with jQuery

Tue, 03 Aug 2010 05:00:00 GMT

Published in jQuery

One of the lovely things about jQuery is it makes it ridiculously easy to animate page elements. Whereas you previously had to mess around with setTimeout() or setInterval(), and lots of JavaScript code, with jQuery you can work wonders with just a line or two of code.

In this tutorial we'll cover some of the more common effects you can achieve with jQuery, including fading, showing, hiding, sliding, animating CSS properties, animation sequences, and more!

Free London Stock Photos

Fri, 30 Jul 2010 05:00:00 GMT

Published in ImageKits

We've just added 20 lovely stock photos to our ImageKits, taken recently in London, England.

Images include Big Ben, city architecture, sculptures, signs, and the marvellous London Eye.

More London pics to come soon. Enjoy!

Photoshop to HTML Step-By-Step, Layout 1: 'MiniMal'

Tue, 27 Jul 2010 05:00:00 GMT

Published in Website Authoring

A common question we get asked here at Elated is: "How do you take a design in Photoshop and turn it into a finished HTML and CSS website?"

We've given this some thought, and we reckon the best way to answer this question is by example. So this series of tutorials will look at how we took the Photoshop designs for our free PageKits (website templates) and turned them into the finished HTML/CSS templates.

Each tutorial will cover a specific template. In this first tutorial, Matt walks you through our most recent template at the time of writing: MiniMal. Enjoy!

Using Multidimensional Arrays in PHP

Mon, 19 Jul 2010 05:00:00 GMT

Published in PHP Arrays

Array elements in PHP can hold values of any type, such as numbers, strings and objects. They can also hold other arrays, which means you can create multidimensional, or nested, arrays.

In this tutorial you learn how to create multidimensional arrays, how to access elements in a multidimensional array, and how to loop through multidimensional arrays.

Your First 10 HTML Tags

Tue, 13 Jul 2010 05:00:00 GMT

Published in HTML

Just starting out with HTML? Here are 10 essential HTML tags that you'll need to know when building your web pages. If you learn how these 10 tags work then you'll have enough knowledge to put together a basic page.

Kitchen Table: Adding a Lightbox

Thu, 01 Jul 2010 05:00:00 GMT

Published in jQuery

In Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery, we created a nice-looking "light table" of draggable photos.

In this tutorial you'll learn how to enhance the light table by adding a lightbox to display a bigger version of a photo when it's clicked. You'll also display a caption for the image within the lightbox.

Working with jQuery Events

Thu, 24 Jun 2010 05:00:00 GMT

Published in jQuery

In this tutorial you'll learn how to use events in jQuery. Events are fundamental to most JavaScript web apps. Using events, your code can respond to things happening in the browser, such as the user clicking a button, entering text into a form field, or submitting a form.

How We Redesigned Elated.com: The Build Process

Thu, 17 Jun 2010 05:00:00 GMT

Published in Website Authoring

Following on from Simon's article on designing the new-look www.elated.com, Matt takes a journey from PSD to HTML (via CSS and PHP) to show how he implemented Simon's new design.

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

Fri, 11 Jun 2010 05:00:00 GMT

Published in jQuery

In this tutorial you learn how to use CSS3 and jQuery to create a nice-looking virtual light table with draggable photos. It's a lovely touchy-feely way to present a handful of photos for viewing. Full code download included. Enjoy!

Removing, Replacing and Moving Elements in jQuery

Tue, 08 Jun 2010 05:00:00 GMT

Published in jQuery

In Matt's latest jQuery tutorial, you learn how to use jQuery to easily remove elements from the page, replace elements, and move elements around. Essential reading for any budding jQuery coder!

Getting to Know Photoshop's Toolbox

Fri, 04 Jun 2010 05:00:00 GMT

Published in Photoshop

This tutorial gets you up to speed with the Photoshop toolbox, and each of the tools it contains. By the time you've finished reading it, you'll be well on your way to working proficiently with the Photoshop toolbox, and you'll have a good general understanding of all the tools in Photoshop too!

How We Redesigned Elated.com: The Design Process

Tue, 01 Jun 2010 05:00:00 GMT

Published in Web Design and Style

On 9 April this year, we launched our brand-new look for www.elated.com, bringing the site's look and feel bang up to date. In all, the process took over a year to complete! So how did we do it?

In this article, Simon walks through the ideas and thought processes that led to the final site redesign. Lots of revealing screenshots from various design stages are included for your enjoyment - it's quite an enlightening read. :)

Using foreach to Loop Through PHP Arrays

Thu, 27 May 2010 05:00:00 GMT

Published in PHP Arrays

Often you need to move through all the elements in a PHP array so that you can do something with each element's value. For example, you may want to display each value in an HTML table, or give each element a new value.

PHP's foreach construct makes it really easy to loop through an array. In this tutorial you learn the basic syntax of foreach, and see how to use it to loop through both indexed and associative arrays.

Adding Elements to the Page in jQuery

Tue, 25 May 2010 05:00:00 GMT

Published in jQuery

One of the lovely things about jQuery is that it makes it really easy to manipulate content in the page. With just a few method calls, you can quickly add, remove, and replace page elements, as well as move elements around the page.

In this tutorial you explore various jQuery methods for adding new content to the page.

Using Photoshop's Smart Filters

Wed, 19 May 2010 05:00:00 GMT

Published in Photoshop

Smart Filters, first introduced in Photoshop CS3, let you apply any of Photoshop's filter effects to a layer non-destructively. This means that - unlike a regular filter - a Smart Filter doesn't permanently alter the pixels in a layer.

This brand new tutorial shows you how to use Photoshop's Smart Filters to create a variety of interesting, tweakable filter effects in your images. Happy Photoshopping!

WinSCP Tutorial - How to Upload Your Site with WinSCP

Mon, 17 May 2010 05:00:00 GMT

Published in Using FTP

WinSCP is a popular, free FTP program for Windows, and is a great way to transfer files between your computer and your Web server.

In this beginner WinSCP tutorial, Matt shows you how to connect to your Web server using WinSCP and upload your website's files.

Manipulating Element Classes with jQuery

Wed, 12 May 2010 05:00:00 GMT

Published in jQuery

Working with CSS classes in JavaScript can be tricky, especially when an element contains more than one class. Fortunately, jQuery comes to the rescue once again, with 4 handy methods for working specifically with element classes.

In Matt's latest jQuery tutorial you learn how to use these 4 methods: hasClass(), addClass(), removeClass() and toggleClass().

Adobe CS5, The Verdict

Mon, 10 May 2010 05:00:00 GMT

Published in Web Graphics and Multimedia

Is Adobe's Creative Suite 5 worth the upgrade price? Simon takes an honest look at the pros and cons. Will he fork out the cash, or stick with CS3 instead?

Counting PHP Array Elements Using count()

Thu, 06 May 2010 05:00:00 GMT

Published in PHP Arrays

PHP makes it easy to count array elements, thanks to its built-in count() function. In this tutorial you'll learn how to use count() to count the elements in both regular and multidimensional arrays, and how to move through all the elements of an indexed array by using count() and a for loop.

10 Fantastic Free Web Page Editors

Tue, 04 May 2010 05:00:00 GMT

Published in Website Authoring

Every Web designer and coder needs a Web page editor to create and edit HTML, CSS and JavaScript code. There are hundreds of excellent editors to choose from - many of them paid - but what if you're a coder on a budget?

In this article Matt explores 10 great Web editors that you can download and use for free. Enjoy!

Box of Trix: A Smashing Template for Selling Products

Wed, 28 Apr 2010 05:00:00 GMT

Published in PageKits.com

Our newest PageKit is Box of Trix. This template is perfect for any site selling products, software downloads, and so on. The template includes a 2-column layout, feature lists, boxshots, a "call to action" button, lovely pinstripes and great colours.

We'll also be launching a pink version of this template soon. Enjoy! :)

A Welcome to Wix

Thu, 22 Apr 2010 05:00:00 GMT

Published in Misc

We'd like to welcome our newest site sponsor, Wix.com. Wix is a free online tool that makes it easy and fun to create Flash websites. The Wix drag-and-drop website builder gives you total creative freedom to design whatever you like while achieving professional looking results.

Find out more at www.wix.com.

Interested in putting your brand in front of more than 220,000 webmasters per month? Advertising on elated.com gives you an easy, cost-effective way to advertise your product or service. Find out more!

Do I Really Need Adobe CS5?

Tue, 20 Apr 2010 05:00:00 GMT

Published in Web Graphics and Multimedia

Adobe's new Creative Suite 5 is just around the corner, and promises a slew of new features and updates for Photoshop, Dreamweaver, Flash and more.

In this article, Simon regards the new features in CS5, and tries to decide if it's worth upgrading. What do you think?

Manipulating Element Attributes with jQuery

Mon, 19 Apr 2010 05:00:00 GMT

Published in jQuery

Working with element attributes in JavaScript can be a pain, but jQuery makes life nice and easy for you. Matt's latest jQuery tutorial shows how to use the attr() and removeAttr() methods to read, add, change, and remove attributes.

Opera Mini for iPhone Review

Thu, 15 Apr 2010 05:00:00 GMT

Published in Misc

Apple recently approved Opera's free mobile web browser, Opera Mini, on the App Store, so you can now run another browser on your iPhone apart from Safari. Hurrah!

But is it any good, and how well does it display web pages? Over on his Apple blog, Matt's written an in-depth review of Opera Mini on the iPhone, and compared its page rendering with the built-in Safari browser.

Working with Smart Objects in Photoshop

Wed, 14 Apr 2010 05:00:00 GMT

Published in Photoshop

Smart Objects are an often-overlooked, yet handy feature of Photoshop. Introduced in CS2, Smart Objects let you store all kinds of different image content within a single, layer-like object.

This tutorial explores Photoshop Smart Objects. Learn why Smart Objects are useful, and how to create, edit, duplicate, and rasterize Smart Objects.

What do you think of our new site design?

Fri, 09 Apr 2010 05:00:00 GMT

Published in Misc

We've just launched a brand new design for www.elated.com. What do you think? Please let us know. :)

Lovely Aircraft Stock Photos Added

Thu, 08 Apr 2010 05:00:00 GMT

Published in ImageKits

We've just added 20 gorgeous high-res aircraft stock photos to our ImageKits, taken recently at a flight museum in the UK.

Images include plane markings, stencilling, artwork, a moody-looking satellite dish, and lots more. Enjoy!

New Free Website Template: MiniMal

Fri, 02 Apr 2010 05:00:00 GMT

Published in PageKits

Here's a lovely new free PageKit for you! MiniMal has a spacious layout and a subtle colour scheme that's easy on the eye. Great photos too! Everything's controlled via CSS, making it very easy to add your own text, images and other content.

View PageKit | Download PageKit

Extracting Elements from PHP Arrays with array_slice()

Tue, 30 Mar 2010 05:00:00 GMT

Published in PHP Arrays

With PHP you sometimes need to work with a range of array elements, rather than individual elements. For example, you may want to work with a large array in chunks, or sort an array then retrieve just the "top 10" values from the start of the array.

In this tutorial you'll explore PHP's array_slice() function for extracting a range of elements from an array.

New site feature: Subscribe to the forums via RSS

Mon, 29 Mar 2010 05:00:00 GMT

Published in Forums

You can now subscribe to any of our forums via RSS. There's also a combined feed containing posts for all forums.

By adding the forum feeds to your feed reader, you can keep up with the latest forum topics without needing to check the forums for new posts. Enjoy. :)

Accessing Element Content with jQuery

Fri, 26 Mar 2010 05:00:00 GMT

Published in jQuery

In this tutorial Matt shows you 3 jQuery methods designed for working directly with the contents of an HTML element:

* html() for reading and changing the HTML contents of an element

* text() for reading and changing the text contents of an element

* val() for reading and changing form field values

As you'll see, these methods make it very easy to read or change the raw contents or value of any HTML element.

Adobe's Jaw-Dropping Content-Aware Fill

Wed, 24 Mar 2010 05:00:00 GMT

Published in Photoshop

Adobe's new eye-popping Content-Aware Fill feature looks set to make designers' lives a lot easier (and no doubt shift a few units of Photoshop along the way). Matt takes a look at what this new feature might mean for the design industry.

Working With Array Elements in PHP

Fri, 19 Mar 2010 05:00:00 GMT

Published in PHP Arrays

In this tutorial you look at how to manipulate the individual elements inside a PHP array. You'll see how to:

* Read element values
* Alter element values
* Add and remove elements in an array
* Output the entire contents of an array

Textile and Markdown: 2 Nice Alternatives to WYSIWYG Editors

Tue, 16 Mar 2010 05:00:00 GMT

Published in JavaScript

These days, many websites allow you to enter your own content - whether it's creating a Web page, writing a blog post, or posting in a forum. In order to do this, many sites use WYSIWYG (What You See Is What You Get) HTML editors. Great though these editors are, they do have a few drawbacks.

In this article you'll learn about 2 popular alternatives to WYSIWYG editors: Textile and Markdown.

What would you like to see on elated.com?

Sun, 14 Mar 2010 06:00:00 GMT

Published in Forums

It's been a while since we asked for specific feedback on www.elated.com, but we feel that this is your site as much as ours, so we'd love to have your input on the direction the site takes.

What would you like to see more of on the site? Templates? Photoshop tips? PHP tutorials? Please let us know by posting your suggestions in this forum topic. Thanks!