Musings of ErisDS » Code

Starting out with Zend Framework

ErisDS — Sun, 16 Oct 2011 09:54:50 +0000

I am on a mission to get to grips with using the Zend Framework for building web applications. At MOO, the Zend Framework is used in it’s more toolkit-like component library capacity and I’m also pretty familiar with its structure from previous work with Magento (although that always seemed to over-complicate it). Using it as a full stack framework however, is a different challenge all together.

Let me explain the reasons why I’m investing time in ZF. If you’ve read this blog before you may be aware that I have a lot of experience working with the Symfony Framework, and I’m really fond of it. However after using it to write what was quite a sizeable app, I found it started to get quite slow, as well as finding the ORMs (I mostly used Propel) to be quite cumbersome (I like SQL!). I often spent a long time trying to figure out how Symfony wanted me to do something and therefore the flexibility of ZF in this regard is attractive.

Zend Framework also seems to be more of an industry standard, where Symfony is somewhat niche. Coming from Zend and with training and qualifications available, it seems like a good tool to add to my toolbox. The added benefit is my code & approach are more likely to be understood by other people quickly, so if any of my side projects ever take off they should scale easily :)

Tackling the Tutorials

So on to the task of learning how to approach a site with ZF. I have two books that I’ve skim-read: Zend Framework in Action and Php|architect’s Guide to Programming with Zend Framework both are OK but pretty broad and don’t cover key topics in much detail. I’ve also been through the quickstart tutorial on Zend.com and some of the more advanced stuff. It’s clear that Zend Framework is a powerful tool, but mastering it is no simple task.

Flexibility & being able to approach problems in multiple ways was one of the attractions of Zend Framework, but I find the complete lack of even a hint at where code should go quite disconcerting. I would be happy with some suggestions and debates on best practice, but even that seems limited. Therefore I have taken to searching Google for key topics with the flag ”-site:zend.com” so that I only get results from sites other than Zend because it is top in all search results but almost never has the answer!

One of the great things about Symfony is the Askeet/Jobeet tutorial. Every version of Symfony has had an in-depth tutorial that went with it, covering each aspect of the system. This provided a great learning tool, and also a fantastic talking point for debate and spin-off tutorials which looked at areas in even more depth.

In complete contrast, the Zend Framework’s own tutorials seems to be extremely lacking. Most of the documentation seems to cover only very basic examples, lacking in any real depth or clever stuff. For example the Getting started with Zend_Auth tutorial lacks CSRF protection & password salting – two things that should really be “the standard” IMO. The following tutorial on Zend_Acl is even more disappointing – it doesn’t give any clue as to where any of the code should go. You’re expected to know/guess or just make it up as you go.

Finding an Approach for Key Concepts

There are three areas in particular which seem to be vastly under-documented / under-exampled in my opinion: Models, Access Control and Routing. I despise patterns using one model class to represent both a collection and instance of an object, which is what appears in a vast number of tutorials. ZF seems to roughly support the ActiveRecord style pattern (which I’m used to from using Propel/Doctrine) through extending its Db_Table & Db_Table_Row classes and paired with Db_Select it works as a kind of lo-fi ORM. It seems that many Zend folk are not a fan of ActiveRecord, but the main documentation barely hints at any of this, or any other potential approaches. You have to leave the main site and search various blogs to get even a whiff of any of this knowledge.

Even more worrying/frustrating is the seeming lack of documentation around Access Control & Routing. I’m used to these being baked-in in Symfony as both were managed via YAML config files, and the almost-comes-as-standard sfGuardPlugin provided fine grained control of users, groups and permissions. ZF provides tools, but little direction and it seems quite intensive to get either of these key parts of a web application up and running.

Frustratingly, there seems to be no such obvious place to setup these vital parts of the site (does everyone end up with enormous Bootstrap files?!?). I’ve already mentioned the vagaries of the ACL tutorial, but routing for me is pretty fundamental. In Symfony you define your database schema (which results in a database, models & forms for CRUD), then write your routes, then you write code. In ZF I’ve really struggled to find anything which takes the same REST API-as-standard approach to configuring routes. I know it can be done, it just doesn’t seem to be a standard way of thinking about things.

Zend Framework vs Symfony?

Well, this turned out to be much more of a Symfony vs Zend Framework post than I intended. It also seems that all the features of Zend that I thought would make it great to use have turned out to be what makes it a pain in the arse! I know that this is partially because I’ve been spoiled by Symfony doing so much of the heavy lifting for me, and by its awesome documentation. I am also aware I’m trying to do ORM-y things without an ORM. It seems that by keeping a tight reign on the approach to key concepts, Symfony had allowed itself to foster a much richer pool of easily-accessible documentation. Also, Symfony seems much more intent on including its community & building great accessible documentation, instead of (or as well as) providing training courses.

Note-to-self: I need to clear my mind of expectations and pre-conceptions about frameworks if I’m going to succeed at this!

Symfony: What is it good for?Symfony is one of my favourite bits of technology. I’ve...
Getting Rid of Non Breaking Spaces ( )Have you ever tried to parse, process or preg_replace some...
Snippet: Symfony Forms – Setting the Form FormatterBy default Symfony displays forms in tables, with each new...

Twitter OAuth: Simple cURL requests for your own data

ErisDS — Mon, 10 Oct 2011 10:01:55 +0000

Having to include an entire PHP OAuth library every time I want to make a simple API request for some of my own data from a 3rd party app like Twitter really pisses me off. Perhaps this is unreasonable, but it’s a problem I ran into for the 4th or 5th time today when trying to help John O’Nolan fetch his status count for his blog.

Making a REST API request for your own twitter info using the “user/show” request is relatively simple as it doesn’t actually require authentication. That is until you upload the code to your server and discover that someone else sharing the server’s IP is very selfishly hogging all of the API requests.

Twitter very helpfully allows you to authenticate your own app for your account and generate an OAuth Access token, meaning you can skip the first few steps of the OAuth process. However after much Googling, I discovered there really aren’t that many examples of what to do next – they all seem to use one or another library – which seems totally unnecessary for making one request.

After much searching, finally I found one awesome step-by-step tutorial which explains the first few steps of OAuth and in particular how to build the OAuth HTTP headers and OAuth signature to sign the request. So I’ve taken lead from here, borrowed the helper functions and signature code, and put it all together to make a signed GET request to the API and return some ACTUAL data.

Here’s the couple of helper functions I borrowed, the first combines the request URI and parameters into a string as required by the OAuth signature. The second one takes an array of OAuth credentials/settings and combines them into the HTTP header for use with cURL.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function buildBaseString($baseURI, $method, $params)
{
$r = array();
ksort($params);
foreach($params as $key=>$value){
$r[] = "$key=" . rawurlencode($value);
}
return $method."&" . rawurlencode($baseURI) . '&' . rawurlencode(implode('&', $r));
}

function buildAuthorizationHeader($oauth)
{
$r = 'Authorization: OAuth ';
$values = array();
foreach($oauth as $key=>$value)
$values[] = "$key=\"" . rawurlencode($value) . "\"";
$r .= implode(', ', $values);
return $r;
}

Next you need to setup all of the OAuth credentials and settings. For Twitter, the tokens, keys and secrets you need will all be available on your App page. If you haven’t got any Apps, you’ll need to create one, authorise it for your account and grab an access token.

1
2
3
4
5
6
7
8
9
10
11
12
13

$url = "http://api.twitter.com/1/account/totals.json";

$oauth_access_token = "YOUR TOKEN HERE";
$oauth_access_token_secret = "YOUR TOKEN SECRET HERE";
$consumer_key = "YOUR KEY HERE";
$consumer_secret = "YOUR SECRET HERE";

$oauth = array( 'oauth_consumer_key' => $consumer_key,
'oauth_nonce' => time(),
'oauth_signature_method' => 'HMAC-SHA1',
'oauth_token' => $oauth_access_token,
'oauth_timestamp' => time(),
'oauth_version' => '1.0');

The tricky bit, that doesn’t ever seem to be explained to well, is creating the OAuth signature. For HMAC-SHA1, this boils down to the following few lines:
Create your URI base string by combining the URL you will be sending the request to with the oauth details as per the helper function. The key is the consumer secret and access token secret URL encoded and combined with an ampersand. Finally, the base url and the composite key are hashed and and base 64 encoded. Sounds really fraking complicated when you read the instructions, doesn’t look so bad when it’s written out in PHP.

1
2
3
4

$base_info = buildBaseString($url, 'GET', $oauth);
$composite_key = rawurlencode($consumer_secret) . '&' . rawurlencode($oauth_access_token_secret);
$oauth_signature = base64_encode(hash_hmac('sha1', $base_info, $composite_key, true));
$oauth['oauth_signature'] = $oauth_signature;

To make the request we have to setup a HTTP header and a few other options to pass to cURL. The helper method does the hard work of creating the correct header format with the OAuth settings and then finally, it’s time to make the request with cURL.

1
2
3
4
5
6
7
8
9
10
11
12
13

$header = array(buildAuthorizationHeader($oauth), 'Expect:');
$options = array( CURLOPT_HTTPHEADER => $header,
CURLOPT_HEADER => false,
CURLOPT_URL => $url,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_SSL_VERIFYPEER => false);

$feed = curl_init();
curl_setopt_array($feed, $options);
$json = curl_exec($feed);
curl_close($feed);

$twitter_data = json_decode($json);

This works really well if you just want to fetch data from your own account – last statuses, mentions, favourites or your stats like in the example above. It should also work with any OAuth based API which supports HMAC-SHA1 signatures (Google, LinkedIn, Vimeo, the list goes on). If the API you’re working with doesn’t have a neat tool for getting an access token for your account like Twitter does, you can always do the first few authentication steps by using an online client. Fill out your details and it will handle the first few exchanges, and once you have your access token you’re free to make requests using just the 50 lines of code above, instead of requiring an OAuth library.

Download the full Twitter OAuth Code Example

Big Kudos to Jason Graves (aka. GodLikeMouse) for putting his excellent PHP OAuth tutorial on the web.

5 Top Resources for Twitter SuccessI've been experimenting with developing my Twitter account for the...
Digging TwitterLast night this article hit the front page of Digg....
Awesome: 1. Real-time radiation levels, Twitter heartbeat & BBC #failAn introduction This is the first in a new series...

YUI2: Javascript Carousel – An update about version 2.8.*

ErisDS — Sun, 10 Oct 2010 17:56:20 +0000

Last year I published two parts of a three part tutorial (doh) on the YUI2 Carousel Widget which worked with YUI Carousel 2.7.0. Since that time, a new couple of new versions of the YUI2: Carousel widget have been released (2.8.0 and 2.8.1), and it seems my examples do not work with the updated code. This post covers the issues, the reasons why they occur and how to resolve them.

In version 2.8.0 and 2.8.1 the introduction of code for handling rows has caused a bug which means that the carousels won’t display in Internet Explorer 6, 7 or 8 unless you explicitly set the width and height of the carousel elements in your CSS. If you want to use non-specific widths and heights, then you need to either use version 2.7.0 OR use my fixed version of 2.8.1. The 2.8.* versions of the YUI2 Carousel also fix an issue with the positioning of elements in the carousel going wrong when zoomed in or out in Safari and other WebKit browsers such as Google Chrome so it’s a good idea to use the latest version if you can.

Also, to use version 2.8.* you need to use slightly different CSS to that in my two examples. Details of which are coming soon, along with updated tutorials and part 3.

Fixing version 2.8.1

I have used the YUI carousel in several projects, some of which both require the WebKit fix and to use carousels which vary in width and height dynamically. Therefore I have identified a fix for version 2.8.1.

To apply the fix, you will need to download the latest release of the carousel code:
(Follow the link below, save the page as carousel.js inside your project and link to the file)

http://yui.yahooapis.com/combo?2.8.1/build/carousel/carousel.js

Then locate and change lines 3602-3608:

1
2
3
4
5
6
7

} else {
if(rows) {
size = getCarouselItemSize.call(carousel, "height");
size = size * rows;
Dom.setStyle(carousel._carouselEl, "height", size + "px");
}
}

To the following:

1
2
3
4
5
6
7
8
9

} else {
size = getCarouselItemSize.call(carousel, "height");

if(rows) {
size = size * rows;
}

Dom.setStyle(carousel._carouselEl, "height", size + "px");
}

Alternatively, you can download my fixed version of the YUI Carousel here: YUI2 Carousel 2.8.1 fixed [ZIP File]

Hopefully this fixes the issues that many people have been having with the YUI Carousel in Internet Explorer. Also, this fixes a major roadblock in my release of part 3 of my YUI Carousel custom navigation series, so I hope to release the final part very soon.

YUI: Javascript Carousel with Custom Navigation – Part 2Welcome to Part 2 of my YUI Carousel series. If...
YUI: Javascript Carousel with Custom Navigation – Part 1Welcome to my first JavaScript related post! I'm currently in...
HTML Canvas: Going Ninja with .Net Magazine’s Processing.js tutorialYesterday I finally got around to sitting down with the...

Getting Rid of Non Breaking Spaces ( )

ErisDS — Tue, 13 Jul 2010 12:12:54 +0000

Have you ever tried to parse, process or preg_replace some HTML? Ever tried to do it when the HTML is UTF-8 encoded? Getting rid of white space can be tricky, here’s a few tricks I’ve learned.

I was playing around with debugging some HTML output from Symfony the other day. The HTML was dynamic content added through TinyMCE and I needed to clean superfluous formatting so that the content output looked right. I hate regular expressions and this is the first time I’ve really needed to delve into them properly, so I totally hit a stumbling block when trying to get rid of and other bits of whitespace.

I tried various methods of decoding the content first, to no avail. It turns out the answer is to look for the encoded characters. I found it quite tricky to discover what the encoded values for the white space were and also to detect exactly what white space characters were present, but hopefully these two tips will help you.

UTF-8 representations of white space characters

The following are common white space characters. If you’re missing a few, try out File Format for finding character codes.

\x20 – The standard space or ‘\s’
\xC2\xA0 – The non-breaking space ‘ ’
\x0D – Carriage Return or ‘\r’
\x0A – New Line or ‘\n’
\x09 – The tab or ‘\t’

Discovering which characters are present

Figuring out exactly what white space characters are present in your encoded HTML can be tricky. I used XVI32, which is a hex editor. If you view the source of the HTML you are trying to clean and copy & paste an offending section into the right-hand window it will show the encoded characters in the left hand window.

Hopefully this post might save you some time. If you have a similar problem that isn’t covered here, I’d be interested to know so drop me a comment!

Update: I thought it would be helpful to add an example of how I used these character codes. This simple function replaces all encoded non-breaking spaces with a normal space. It’s only a small snippet, but it might be of use ;).

1
2
3
4
5
6

function cleanNonBreakingSpaces($text)
{
$text = preg_replace('/\xC2\xA0/',' ',$text);

return $text;
}

You could replace the space with an encoded “normal” space character, although I’m not sure how well that will work:

1	$text = preg_replace('/\xC2\xA0/','\x20',$text);

Or you could check for both encoded or non-encoded non-breaking spaces:

1	$text = preg_replace('/(\xC2\xA0/\| )',' ',$text);

Resources

File Format – An excellent site for looking up character codes.
XVI Freeware Hex Editor – A great tool for discovering hidden characters.

YUI: Javascript Carousel with Custom Navigation – Part 1Welcome to my first JavaScript related post! I'm currently in...
YUI: Javascript Carousel with Custom Navigation – Part 2Welcome to Part 2 of my YUI Carousel series. If...
How to view and extract Plesk backups Have you ever had a minor developmental nightmare and...

HTML Canvas: Going Ninja with .Net Magazine’s Processing.js tutorial

ErisDS — Sun, 23 May 2010 16:45:50 +0000

Yesterday I finally got around to sitting down and playing with the Canvas and Processing.js tutorial in last month’s issue of .Net Magazine (Issue 202, pages 82-85). I have been wanting to try my hand at HTML5 Canvas since Rob got me interested during the HTML5 special of the ExplicitWeb podcast we recorded back in March (note the subtle plug) and this tutorial seemed like a good way of getting stuck in.

Getting it working in Google Chrome (or not)

Getting started, I fired up a text editor and did step one only to find that nothing appeared in Google Chrome but Firefox was working perfectly. I was certain Google Chrome supported canvas, Wikipedia said so, this awesome visualisation of HTML5 readiness said so, hell even the Processing.js homepage said so, so it wasn’t even that Processing JS was the problem. After pouring over the code and a bit of Googling I stumbled across this ticket on the Processing JS website, which basically points to a bug in Google Chrome as a the source of the problem, but only in certain versions.

It turns out that processing adds a data-src attribute to the Canvas element, which is then used to pull in the Processing JS code via ajax. Some bug in Google Chrome means the ajax call fails, and therefore nothing happens. The work around is to include all your processing code on the page inside script tags, and use the processing.init.js script to load it in:

1
2
3
4
5
6
7
8
9
10
11

...
<head>
<script src="processing.init.js"></script>
</head>
<body>
<script type="application/processing">
//processing code here...
</script>

</canvas>
...

You can see an example of Processing JS done this way by viewing the full source of the basic demo on the Processing JS homepage. This works really well, except for the drawback of having all your Processing code inline on the page, which doesn’t play too well with WordPress. Therefore, the game demo page doesn’t work in all versions of Google Chome (particularly not in the latest standard release but it does work in the latest beta release).

Playing with some crazy eyes

The problem with coding tutorials, I always find, is that you end up just copying and pasting without truly understanding the nuances of what you are doing: What does that function do? Which argument is which and what are they for? Why’ is the code in that order? This was especially true with this Processing tutorial with it’s smattering of trigonometry & use of functions like ellipse or arc with no description of the arguments.The only cure is to get stuck in.

The first thing I decided I wanted to do, was change the way the eyes move. It seems wrong to me that they remain equi-distant even when they are to the far left and right, I wanted to make them get closer together. The ninja’s head, body and eyes are all fixed on the y axis – they only move left-to-right so I figured I could do this quite easily.

The arc function used to draw the eyes takes 6 arguments: x position, y position, width, height, start angle, stop angle. Therefore to change the distance between the eyes I needed to change the first argument so that the way the x position of the left and right eye relate to each other is different based on the mouse’s position.

I changed this:

1 2	arc(-10-sin(trackAngle)7,8,6,6,TWO_PI,0); // Draw left eye arc(10-sin(trackAngle)7,8,6,6,TWO_PI,0); // Draw right eye

To this:

1 2	arc(-10-sin(trackAngle)(10-2trackAngle),8,6,6,TWO_PI,0); // Draw left eye arc(10-sin(trackAngle)(10+2trackAngle),8,6,6,TWO_PI,0); // Draw right eye

The first part of the x position -10-sin(trackAngle) placed the eyes and makes them move with the head. The modifying value (originally 7) is what makes the eyes move further than the head – so they move further left or right relative to the heads position. trackAngle is measured in radians and therefore ranges between -1.2 and 1.2. I multiplied this by 2 to make it more significant, and used it to change what the modifying value is. Now the eyes not only move further relative to the head, but also relative to each other.

This is quite a weird effect – but I’m pretty pleased with it :)

Making a mini game

Once I was happy with the eyes, and had gotten a good grasp of the math going on, I decided to make it even more interactive, and turn it into a little game. The little ninja’s arms flying all over the place seemed to want something to hit, so I introduced a dot which appears randomly somewhere on the screen, stays put for just over a second, and then disappears and reappears somewhere else. The dot disappears and reappears faster and faster as time goes on.

I added some code to the mouseMoved function to test if the mouse’s new position matches the dot’s position, and if so adds one to the score and forces the dot to move again. Finally I added a box and some text to display the score in the top right corner, which was interesting as the tutorial doesn’t cover text:

1
2
3
4
5
6
7
8

void drawScore()
{
PFont fontA = loadFont("Arial");
textFont(fontA, 36);
ninjaStyle(function(){ rect(width-50, height-(height-20), 30, 16) });
fill(#CD3700);
text(score, width-57, height-(height-41));
}

So there we have it, a mini ninja fighting game. You’ll need to visit the demo page to play the game as this blog isn’t (quite) yet running HTML5.

It doesn’t really do any of the things I’d expect a real game to (yet), like have a start / pause button, a sound track, or a leader board. It could probably do with a samurai sword whizzing around and splitting the dots in half… obviously with plenty of blood and gore. It does however get progressively more difficult, the most I’ve scored is 92. The test is to see if anyone can show me a screenshot with a score of 100 and a broken scorebox ;)

Please note: the original code, imagery & styles were all published in .Net Magazine and were created by Alistair MacDonald of Bocoup.com

YUI: Javascript Carousel with Custom Navigation – Part 2Welcome to Part 2 of my YUI Carousel series. If...
Why don’t all HTML elements have a src attribute?In the middle of writing a blog post about generating...
YUI2: Javascript Carousel – An update about version 2.8.*Last year I published two parts of a three part...

YUI: Javascript Carousel with Custom Navigation – Part 2

ErisDS — Tue, 04 Aug 2009 12:28:07 +0000

Please Note: This tutorial is written for YUI version 2.7.0. It will not work correctly in versions 2.8 and 2.8.1. For more information and a fix please see my update article.

Welcome to Part 2 of my YUI Carousel series. This part uses class names to setup multiple carousel instances, and also drops the YUI CSS in favour of writing your own custom css. The final Part 3 will show you how to ditch the YUI navigation completely, so that you can use custom labels.

I recommend that you read Part 1 of this tutorial if you haven’t already. If you want to follow along, then please setup your workspace with a basic HTML file and somewhere to put Javascript, CSS & images now, the demonstration page is here. I’ll be using the same images as last time, same rules apply!

Getting Started – The HTML

The HTML for the carousel is the same as in Part 1, except this time I have added titles to my images. Below I’ve only listed one carousel, but as you can see on the demonstration page, the setup JavaScript we’ll be writing later will detect multiple carousels on the page. To add another carousel just copy the HTML structure including the container div, change the id’s but leave the classes intact.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<body class="carousel">
<div id="my-carousel" class="carousel-container">
<ol class="carousel-content">
<li>
<img src="http://farm3.static.flickr.com/2181/3529457733_50200b99ab.jpg" width="500" height="364" alt="Baby Dolphin" />
<h2>A Baby Dolphin called Bob</h2>
</li>
<li>
<img src="http://farm4.static.flickr.com/3543/3514480796_2243d70d6b.jpg" width="500" height="364"alt="Birds" />
<h2>Feeding the birds</h2>
</li>
<li>
<img src="http://farm4.static.flickr.com/3306/3503294318_c34fab9d17.jpg" width="500" height="364" alt="Tiger" />
<h2>Up close and personal with a tiger</h2>
</li>
</ol>
</div>
</body>

Referencing YUI

You’ll need to add the same JavaScript references right above your closing body tag as last time. That is the link to the combined YUI scripts, plus your own setup JavaScript file. This time though, DON’T include the YUI CSS, just add a link to your own CSS file at the top of the page. So these are the includes you should have:

1
2
3
4
5
6
7
8
9

Setting up – Javascript

Step 1 – Locate all carousel markup on the page

The first step is the same as last time, to setup our namespace and object literal. We still need an init function, and inside it we use the getElementsByClassName function to populate our carousels property with an array of all the elements which have the class carousel-container. We then loop over carousels and call a setup function on each element.

1
2
3
4
5
6
7
8
9
10
11

YAHOO.namespace("ErisDS");
YAHOO.ErisDS.Carousel = {
carousels: '',
init: function()
{
this.carousels = YAHOO.util.Dom.getElementsByClassName('carousel-container');
for(i = 0; i < this.carousels.length; i++)
{
this.setup(this.carousels[i]);
}
}, ...

Step 2 – Turn carousel markup into working carousels

Now we need to write our setup function. It takes the element that is to be a carousel as an argument. The body of the function contains the same setup code as our original init function from Part 1, where the settings are explained.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

setup: function(carousel_el)
{
var carousel = new YAHOO.widget.Carousel(carousel_el,
{
autoPlayInterval: 5000,
isCircular: true,
animation: {
speed: 1.0
},
numVisible: 1
});
carousel.render();
carousel.show();
carousel.startAutoPlay();
}

Finally, don’t forget to call the function using onDOMReady().

1
2
3
4
5

YAHOO.util.Event.onDOMReady(
function (ev) {
YAHOO.ErisDS.Carousel.init();
}
);

Styling up - The Custom CSS

This time we aren't going to use the YUI CSS at all, so we will need to do quite a bit of work ourselves. First up I'll show you the bare minimum needed to get the carousel working. Then we will go through styling the navigation, and finally the customisations to get it looking the same as the demo page.

The Bare Minimum

To get the carousel working horizontally, we need to get all the items to display side-by-side. We then need to hide all but the item that should be visible using overflow:hidden. We also need to clear margins and padding, but we don't need to set any width or height - the carousel will just resize to fit the largest element inside of it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.carousel .carousel-container{
overflow: hidden;
position: relative;
margin: 0;
}

.carousel ol.carousel-content{
position: relative;
overflow: hidden;
width: 32000px;
padding: 0;
margin: 0;
}

.carousel ol.carousel-content li{
position: relative;
margin: 0;
float: left;
overflow: hidden;
*float: none;
*display: inline-block;
*zoom: 1;
*display: inline;
}

I can hear people all over the interweb screaming "nooooo!" at the IE hacks. Feel free to move these to conditional comments, but for the purpose of tutorials using hacks makes it easier to show what I'm doing! All that extra code (plus the position:relative's) is used to get IE6 & 7 to display the items side-by-side whilst still hiding all but the first item.

On the right you can see how the carousel looks with just this basic styling - pretty nasty! Time to get creative. I want to get rid of the text in the navigation, put the navigation at the bottom, and add some nicer buttons*.

The Navigation

Because I want to put the navigation at the bottom & have my carousel be fixed size, I need to set width and height on carousel-container and on the content li. I'm also going to add a border to contain the carousel. The following is the extra CSS I added.

1
2
3
4
5
6
7
8
9
10

.carousel .carousel-container{
width: 500px;
height: 364px;
border: 5px #451669 solid;
}

.carousel ol.carousel-content li{
width: 500px;
height: 364px;
}

The following code uses position:absolute to move the navigation to the bottom. I've also added a semi-transparent background to the navigation bar, and used the inline-block hack again to get the UL to sit in the middle for all browsers. In the second part I have turned the navigation into circles using the CSS3 border-radius property (IE users will see squares) & gotten rid of the text with positioning.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

.carousel .yui-carousel-nav{
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 300;
width: 500px;
text-align: center;
height: 31px;
line-height: 30px;
background: transparent url('../images/bg.png') top left repeat;
}

.carousel .yui-carousel-nav ul{
margin: 5px 0;
padding: 0px;
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
list-style: none;
}

.carousel .yui-carousel-nav ul li{
float: left;
height: 8px;
width: 8px;
background: #673191;
margin: 5px;
border: 1px solid #673191;
-moz-border-radius: 5px;
cursor: pointer;
}

.carousel .yui-carousel-nav ul li a{
left: -10000px;
position: absolute;
}

.carousel .yui-carousel-nav ul li:hover,
.carousel .yui-carousel-nav ul li.hover,
.carousel .yui-carousel-nav ul li.yui-carousel-nav-page-selected {
background: #b6a2c4;
cursor: pointer;
}

Next let's replace those ugly buttons with something else. By setting the width, height and padding of the button we can hide it. Then I've added a background image to the spans and absolutely positioned them. I have also been adding hover states to all the navigation, but at the moment these will only work in browsers that support the :hover psuedo class on elements other than the anchor tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

.carousel .yui-carousel-nav span{
position: absolute;
bottom: 3px;
width: 25px;
height: 25px;
}

.carousel .yui-carousel-nav span button, #carousel-2 .yui-carousel-nav span button:focus{
background: transparent;
border: none;
padding: 30px 0 0;
width: 25px;
height: 25px;
cursor: pointer;
}

.carousel .yui-carousel-nav span.yui-carousel-first-button{
left: 170px;
background: url('../images/prev-arrow.gif') no-repeat top left;
}

.carousel .yui-carousel-nav span.yui-carousel-next-button{
right: 170px;
background: url('../images/next-arrow.gif') no-repeat top left;
}

.carousel .yui-carousel-nav span.yui-carousel-first-button:hover,
.carousel .yui-carousel-nav span.prev-hover{
background: url('../images/prev-arrow-hover.gif') no-repeat top left;
}

.carousel .yui-carousel-nav span.yui-carousel-next-button:hover,
.carousel .yui-carousel-nav span.next-hover{
background: url('../images/next-arrow-hover.gif') no-repeat top left;
}

We can fix the hover states for the previous and next buttons with some Javascript, but I haven't found a way to get this to work for the list navigation yet as it gets rewritten everytime the carousel changes and therefore it loses the listeners. To add listeners to the buttons, first add the following code to the end of your init function.

1
2
3

var nav_buttons = YAHOO.util.Dom.getElementsByClassName('yui-carousel-button','span');
YAHOO.util.Event.addListener(nav_buttons,'mouseover',this.mouseover);
YAHOO.util.Event.addListener(nav_buttons,'mouseout',this.mouseout);

Next, after the setup function add a comma, and then add the following two functions. All this does is add a class on mouseover and then remove it on mouseout, we use two different classes to make it easier to reference the buttons in IE6. This could be replaced with a sprite image & CSS that just changes the background position.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

mouseover: function(e)
{

var add_target = YAHOO.util.Event.getTarget(e, false);

//add_target = YAHOO.util.Dom.getAncestorByTagName(target,'span');
if(YAHOO.util.Dom.hasClass(add_target, 'yui-carousel-next-button'))
{
YAHOO.util.Dom.addClass(add_target, 'next-hover');
}
else if(YAHOO.util.Dom.hasClass(add_target, 'yui-carousel-first-button'))
{
YAHOO.util.Dom.addClass(add_target, 'prev-hover');
}
},
mouseout: function(e)
{
var rem_target = YAHOO.util.Event.getTarget(e, false);
//rem_target = YAHOO.util.Dom.getAncestorByTagName(target,'span');
if(YAHOO.util.Dom.hasClass(rem_target, 'next-hover'))
{
YAHOO.util.Dom.removeClass(rem_target, 'next-hover');
}
else if(YAHOO.util.Dom.hasClass(rem_target, 'prev-hover'))
{
YAHOO.util.Dom.removeClass(rem_target, "prev-hover");
}
}

Headings

That's it for the functionaliy. Here's the CSS I used to style my main heading. It's almost identical to the nav-bar code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.carousel ol.carousel-content li h2{
position: absolute;
top: 0;
left: 0;
right: 0;
width: 500px;
z-index: 300;
line-height: 28px;
background: transparent url('../images/bg.png') top left repeat;
color: #fff;
margin: 0px;
padding: 5px;
text-align: center;
}

On the demo page, the two carousels are the same size and styled very similarly. However this is not necessary as you do not need to specifiy the size (the carousel will default to the size of the largest item within it) and you can also use id's to style the two carousels entirely differently in the CSS, yet still use the same Javascript to make them work. However the functionality for the two carousels would remain the same.

Well I think that's a wrap! Not every single bit of CSS I used is here, but I will be providing all my files which I publish Part 3 next week some time. Hope you've found this useful & reasonably easy to follow. Please drop any suggestions or ideas in the comments!

* I said nicer, not amazing... I'm no designer!!

Resources

YUI: Javascript Carousel with Custom Navigation – Part 1Welcome to my first JavaScript related post! I'm currently in...
YUI2: Javascript Carousel – An update about version 2.8.*Last year I published two parts of a three part...
HTML Canvas: Going Ninja with .Net Magazine’s Processing.js tutorialYesterday I finally got around to sitting down with the...

YUI: Javascript Carousel with Custom Navigation – Part 1

ErisDS — Tue, 28 Jul 2009 12:22:50 +0000

Please Note: This tutorial is written for YUI version 2.7.0. It will not work correctly in versions 2.8 and 2.8.1. For more information and a fix please see my update article.

Welcome to my first JavaScript related post! I’m currently in the process of both learning *proper* JavaScript and trying to get to grips with the YUI framework. If you have suggestions for how to improve the following code I’d love to hear them.

The YUI Carousel widget is currently in Beta, and the navigation that it generates is very basic and, unlike the rest of the YUI framework, doesn’t have the necessary CSS hooks to style it properly. This may change with the release of YUI 3.0, but the Carousel widget isn’t included yet. So for the time being this three-part series will show you how to setup a Carousel & build custom navigation.

Part 1 will go through the HTML, CSS & Javascript needed to setup a basic carousel using the YUI default skin. In Part 2 we’ll remove the YUI skin and write our own, introduce multiple instances via class names and do some customisation to the carousel. Finally, in Part 3 I’ll go through all of the Javascript needed to write your own, completely custom navigation for the carousel.

Getting Started – The HTML

If you want to follow along, then setup your workspace with a basic HTML file and somewhere to put Javascript, CSS & images now. I’ll be using some photos from my recent holiday, feel free to use these images for testing purposes, but please don’t publish them as your own work! If you want to see the finished carousel in action, then please check out the demonstration page.

First we need to create the HTML list & containers for our carousel along with some CSS classes for both reference and styling. This should include a container

(with class carousel-container) and an ordered list to contain our carousel items (class carousel-content). I have also added the classes yui-skin-sam and carousel to the body tag. Apart from those prefixed with “yui” all the classes I’m using are my own conventions and are not required by YUI.

1
2
3
4
5
6
7
8
9

The yui-skin-sam class is a reference point for the YUI CSS so that the styling can be applied. For now I have added just three items to the list, and each one contains only an image. You can also include headers, paragraphs and any other HTML content to your carousel.

Referencing YUI

To turn our numbered list of images into a carousel we need to include reference to the YUI CSS and Javascript. Unlike many other frameworks, rather than downloading a local copy of the framework, it is normal to reference YUI direct from the Yahoo! Servers using the YUI Dependency Configurator to work out which files you need. For now I will show you which files to add:

We are going to need the carousel.css file to style the list properly. Add the following stylesheet link to the head of your HTML file.

1	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/carousel/assets/skins/sam/carousel.css" />

In order for the Carousel to work properly, we will need the YUI Dom collection & Event utilities, the Element utility (which provides an object to represent HTML elements), the animation utility and finally, the carousel component. They are minimised and combined by YUI and served to you as a single file. YUI is an unobtrusive framework, so add the following lines of HTML to the very bottom of your page just above the tag.

1	<script src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/element/element-min.js&2.7.0/build/animation/animation-min.js&2.7.0/build/carousel/carousel-min.js" type="text/javascript"></script>

Setting up – Javascript

Now with all of the framework components in place, we can go about the work of setting up our carousel. For now we will do this by getting the id of the carousel’s wrapping

, but in Part II we will create the carousel based on class name so that we might have multiple instances.

Create a file called carousel.js in a Javascript folder, and link to it after the YUI scripts so it appears something like this:

1	<script src="js/carousel.js" type="text/javascript"></script>

Be aware that we create an instance of the carousel by passing in the id of the containing

, not the ordered list. We also need to pass in a set of properties which are explained below. I have made our carousel variable into a property of our object so that we can easily have reference from additional methods of our object when we add more functionality later.

Once we have setup our carousel instance, we call render, show, and startAutoPlay to setup, display & start the carousel. Of course none of this happens until the init method is called. As YUI is non-intrusive the methods to setup the carousel are called after the page has finished loading using onDomReady. I have added a test to the onDomReady function to ensure that the carousel id exists before we try using it to create an instance of the carousel widget.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

//Setup a namespace to contain your own code within the YAHOO namespace
YAHOO.namespace("ErisDS");

//Create our carousel object literal with an init method
YAHOO.ErisDS.Carousel = {
carousel: '',
init: function()
{
this.carousel = new YAHOO.widget.Carousel("my-carousel",
{
autoPlayInterval: 5000,
isCircular: true,
animation: {
speed: 0.5
},
numVisible: 1
});

this.carousel.render();
this.carousel.show(); // display the widget
this.carousel.startAutoPlay();
}
};

//onDomReady check to see if our carousel exists, and call the setup function
YAHOO.util.Event.onDOMReady(
function (ev) {
if(YAHOO.util.Dom.get("my-carousel"))
{
YAHOO.ErisDS.Carousel.init();
}
}
);

Copy the code above into your Javascript file. You should now have a working carousel.

The Properties

autoPlayInterval: 5000: How many milliseconds between transitions (i.e. 5 seconds)
isCircular: true: Previous & next button are always active as when the carousel gets to the last item it carries on back to the first.
animation: { speed: 1.0 }: How long it takes for a transition from one item to the next to complete. 1.0 is one second.
numVisible: 1: How many items are visible at any one time.

Note: The configuration attribute used to make the YUI Carousel autoplay changed somewhere between YUI 2.6 & 2.7 from autoPlay, to autoPlayInterval. It works the same way, but there is no backwards compatibility.

Tidying up – A little Custom CSS

Depending on your browser and any other CSS you have present on the page your carousel may have some spacing which makes it look untidy. The following CSS is designed to ensure the carousel fits snug around the images and looks smart.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#my-carousel .carousel-container{
width: 500px;
height: 364px;
margin: 0px auto;
}

#my-carousel ol.carousel-content{
margin:0px;
padding: 0px;
list-style: none;
}

#my-carousel ol.carousel-content li{
margin:0px;
padding: 0px;
width: 500px;
height: 364px;
}

The finished article is basically an image slideshow. In the next part we will drop the YUI CSS and customise the carousel and navigation. If you have had any problems following this tutorial or ended up with a different result, please drop me a comment and I’ll try to help out.

Resources

YUI: Javascript Carousel with Custom Navigation – Part 2Welcome to Part 2 of my YUI Carousel series. If...
YUI2: Javascript Carousel – An update about version 2.8.*Last year I published two parts of a three part...
Snippet: WordPress Admin – Tidy Dashboard Widgets By RoleRecently I worked on a Wordpress site where I wanted...