Author: Mark Billen

13th August 2009

20 comments

Build the BBC homepage

13 Adding interactivity

13 Adding interactivity

The page is starting to take shape, but we need to add some interactivity. The BBC website uses the jQuery library to add all the lovely JavaScript effects, so we’ll use the same. Attach scripts>panels.js to your page – this attaches the effects from the jQuery UI library (see In Detail).

14 Cookies

Build the BBC homepage

We want the page to remember your layout and settings when you revisit the page. We’ll store this information in cookies – jQuery has a plug-in to make this easy. Attach scripts>jquery-cookie.js, which handles the cookie’s client-side; PHP will read these cookies when it loads the page.

15 Panel display options

In div#top-form, add a link to toggle the form display and create a form that posts to index.php, containing div#choose-topics. Inside this div, include the file includes>panel_display.php.

<form action=”index.php” method=”post”>
<div id=”choose-topics”>
<h5>Add and remove your preferred topics</h5>
<?php
include(‘includes/panel_display.php’);
?>
</div>
<div class=”buttons”>
<input class=”yes” type=”submit” name=”save_page” value=”Save” />
<input class=”no” type=”button” name=”Cancel” value=”Cancel” id=”cancel” />
</div>
</form>

16 Colour options
The BBC’s page customisation form also allows you to set your page colours. We need to use PHP for these form options, as it allows us to generate a random colour for the Rotate Colours option. Inside the form, create a div with an ID of choose-colours, a header and the Include file includes>colours.php.

<div id=”choose-colours”>
<h5>Choose a page colour</h5>
<?php
include(‘includes/colours.php’);
?>
</div>

17 Changing page colour
To change the colours on the page, we will use PHP to add a class denoting the choice of colour to the body tag. We can then use this class to style different elements of the page appropriately – for example, setting a different header background. Change the body tag of your page to:

class=”<?php echo ($page_settings[‘color’] ? $page_settings[‘color’] : ‘teal’); ?>”

18 Features
The BBC’s Features section uses jQuery UI tabs. Create a div#features at the top of div#content. Inside this div, create four divs containing the content, and beneath them an unordered HTML list containing the links you wish to use as the tabs. You can copy the content from index-step-18.php, or add your own.

<div id=”features” class=”clearfix”>

…

<ul>
<li id=”sea-forts”><a href=”#fragment-1”><span>Sea Forts</span></a></li>
<li id=”portugal”><a href=”#fragment-3”><span>Sintra, Portugal</span></a></li>
<li id=”trolley”><a href=”#fragment-4”><span>Ybor City Trolley</span></a></li>
<li id=”building”><a href=”#fragment-2”><span>Blue bulding</span></a></li>
</ul>

</div>

19 Header
In the header section, add logo.png and div#jclock. Using the jQuery plug-in jclock, we can convert this div into a clock – attach scripts>jclock.js and it starts ticking. The logo is a PNG with transparency so it changes with page colour – but we need to attach scripts>ifixpng.js to fix it in IE6.

20 Reset page
Add a reset link to div#top-form-controls, a reset form to the bottom of the page, and attach scripts>jquery-blockUI.js and scripts>jquery>reset.js. When the user clicks the link, a pop-up will ask them to confirm resetting the page. If they select Confirm, the form is submitted and all the settings’ cookies are deleted.

<div id=”dialog-form”>
<h1>Are you sure?</h1>
<p>When you reset your homepage it goes back to its original settings and any changes you’ve made will be lost</p>
<form action=”index.php” method=”post”>
<div class=”buttons”>
<input type=”submit” class=”yes” value=”Confirm” name=”reset-confirm” />
<input type=”button” class=”no” value=”Cancel” id=”cancel-reset” />
</div>
</form>
</div>

This article was originally written by Ben Scott in Web Designer 145

Pages: 1 2 3

Tags: Ajax, BBC, homepage, jQuery, site design

Did you enjoy this article? Share it!

Follow our

to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.

20 Comments »

Desmond Liang said:

Very cool and useful tutorial. Thanks a lot.

# 7 October 2009 at 5:37 pm

Mtechnik said:

Did anyone come to success on getting this to work?

# 6 November 2009 at 9:47 am

ChicoOfSweden said:

Thanks for a challanging experiment idea. Lovely website.
Good that the original creator got the credit too. But without Mark Billen I would not have seen this.

Thanks a million.

# 17 November 2009 at 12:30 pm

DTP said:

Could not get this to work properly! populated with to many errors!
Notice: Undefined index: sport in C:\wamp\www\includes\feed_output.php on line 5

Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 172

Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 187

Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 208

Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 215

Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 298

Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 306

Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 298

Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 306

Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 388

Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on

# 4 February 2010 at 1:02 am

Misato Maekawa said:

NO DREAMWEAVER, NO LIFE.

# 16 February 2010 at 1:11 am

DTP said:

Got it working but without images. Any please help!!!!!

# 31 March 2010 at 1:43 pm

Tim Lomas said:

Interesting idea.

I’ve found that IE8 causes a few funnies unless you run in compatibility mode … so a slight rejig to use the latest versions of jQuery & jQuery UI is required.

… that said, the premise still works a treat and the rework is educational in itself

Excellent tutorial.

# 1 April 2010 at 3:15 pm

Website Design said:

Nice tutorial and BBC did a fantastic job with the redesign! Keep up the good work!

# 6 April 2010 at 12:27 am

richard said:

The download seems to be invalid – gives me message saying zip is empty:(

# 12 April 2010 at 10:03 pm

Chris said:

Very good work! Looks like a challenge for sure. I think I’ll give it a shot; looks like a lot can be learned from this!!

# 25 June 2010 at 3:29 am

Manchester web design said:

The BBC site is great and think the site will show the first leaps in adopting new ways in the future on web design, web technology and website useability.

# 25 June 2010 at 4:47 pm

Richard Griffin said:

http://www.courtesycouriers.co.uk/index.php

having an issue with the following:

MM_XSLTransform error.
Transformation Error.
variable ‘limit’ not found in file includes/text_feeds.xsl

<!DOCTYPE xsl:stylesheet [

Please help as i want to use your template.

# 21 July 2010 at 7:12 pm

Patrick Burgess said:

@Richard

The issue is within your text_feeds.xsl page.

There is an error in the code. Where it reads:

display:none

You need to remove the $ from the $limit variable. So it reads:

display:none

This fixed the error on mine. Good luck

# 23 July 2010 at 10:37 pm

Patrick Burgess said:

Great walkthrough, thanks guys.

# 23 July 2010 at 10:37 pm

Patrick Burgess said:

@ Richard
Hmmmm comments page doesnt seem to want to display code. Basically just remove the $ sign so that it just says “position() > limit”

# 23 July 2010 at 10:40 pm

Jon Moore said:

I too had everything working except the images… As I hadn’t used feeds or transformation it took quite a while to work out what was wrong…. In the end I found it….

image_feeds.xsl

Line 13

Add a ‘/’ after http://search.yahoo.com/mrss so the line reads…

Apparently it’s the reference to Yahoo that enables the media:thumbnail part of to work…

Hope this helps

# 31 July 2010 at 6:19 am

Jon Moore said:

Ooops! Where’s my code gone? Lets try again… The line should read…

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:media="http://search.yahoo.com/mrss/">

# 31 July 2010 at 6:21 am

Alloy said:

please I need a template for this tutorial.I really want to customize it for my project

# 2 August 2010 at 11:07 am

H. McCreight said:

To get started with this , have a look at the JQuery site , at http://www.jquery.com. Then look for the Sortable plugin. This has a a whole set of pre-written components that you need to download, as well as core JQuery and the example. The key one is Widgets, and after you set up all the JQuery code and JQuery CSS links, then your skeleton HTML “portlet” file will
come alive as the “portlet” s are styled and drag/drop and sorting events
kick in. Then you can add more exotic content and even add in ASP.NET controls inside the content to extend it.

# 6 August 2010 at 1:47 pm

Trackbacks

Build a Brilliant Homepage – Full Tutorial | Choose Daily

Build the BBC homepage

13 Adding interactivity

20 Comments »

Trackbacks

What's your opinion?