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

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.

<div id=”header”>
<div id=”jclock”></div>
<img src=”images/logo.png” width=”126” height=”38” alt=”Logo” />
</div><!– end of #header –>

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