What to look for

1. Avoid free website hosting companies
With website hosting you usually pay for what you get. Choose a free website host and you are likely to get advertising plastered over your site, slow speeds and poor support.

2. Will you be designing and developing the website?
If you have the knowledge and experience to design and develop your own site you are likely to want to include more features and demand more from your host. If you are looking for a template builder then there are hosting companies out there that will let you create your own site through a wizzard. They are widely varied in quality and most are proprietary. That means that if you decide at any point you want to move your site elsewhere you’re stuck and are likely to have to start from scratch.

3. What level of support will you get?
Most hosting companies will provide some sort of support. Whether you are a novice or a seasoned pro, at some point you will require some sort of support. Even if it is to notify your host that your site is down. Make sure you read up on how they provide support and to what level. I have had varying levels of support from a quick answering phone support team, to waiting in a queue in support, to online chat support and email support. If you are looking for a quick resolution for a problem I always find telephone support is best. Look for companies with a large knowledge base and FAQ’s available online and 24/7 telephone support.

4. Will you get email hosting included?
Loose your old hotmail, AOL and even google email addresses. Your own domain name email address looks professional and is usually easy to set up with your website host. This can usually be done at your hosting company - check first though, some may charge extra. If you are looking for a cheap way to get great email hosting consider Google Apps for Business.

5. What bandwidth and storage allowance do you get?
Hosting companies will usually put a cap on the amount of data / traffic that you can get to your website and a limit on the capacity of storage space for files. If you intend to have large files like videos on your site or expect a large volume of traffic to your site, make sure your host will be able to cope with it.

6. Test the speed of your hosts network.
A quick and easy way to test the speed of a ho
sting companies network is to ping their servers. In windows go to start > run and type “command”. Then enter “ping hostname.com” When the series of pings finish look at the average ping time. Anything around or below 80 is good. Anything above 100 is very bad. Hosts that are located in a different country are likely to be higher.

7. Do you need a dynamic website host?If you are simply looking to put a brochure site online with 1-20 pages that won’t be updated regularly then the answer is likely no. If you want a CMS system, Blog, Ecommerce site or some other dynamic website that will allow users to view up to date content that allows them to truely interact with the site then you are likely to need some sort of server sided scripting language on the server and probably access to a database server. The possibilities are great but the options are most often either php and mySQL on a linux server or ASP.NET and SQL Server on a Windows server. Each have their own advantages and disadvantages. I’m sure books have been written on the subject - I wont be discussing the reasons for and against here but make sure that if you are using a 3rd party CMS or blog like Joomla, Dot Net Nuke, Wordpress or Drupal that your hosting company meets the requirements of the website application.

8. Do you need a dedicated server?
For most small websites a shared hosting package will be enough to get your website up and running. For sites with 10GB or more of data and thousands of visitors a day may require a dedicated server. Look for the amount of RAM offered by the hosting company as well as the speed of the processor.

Advice before you buy

1. Call the hosting company
Get a feel for how their customer service is. Ask for advice on what they would recommend to you. Call the technical support department. You will normally get straight through to a sales department but when you need support it is more likely that you will wait in a queue.

2. Buy domains from the same company
If you are buying multiple domains, buy them with the same company. It doesn’t have to be with the same company as you host with, but managing all your domains in one place will likely save you time in the future.

3. Make sure your host satisfies your requirements for setting up DNS.
I have come across a few hosting companies that will only allow you to edit A records and MX records for the domain and not allow you to add your own custom ones. If you require the functionality, make sure you check before you buy.

4. Search Google for reviews of the company.
Don’t just go with them because they are cheapest. It’s usually for a reason. Do a bit of research first to find out about other people’s experiences with them.

Recommendations

PipeTen
Fasthosts
Media Temple

Share your experience’s and recommendations for website hosting companies in the comments below.

To start with we can have a look at the functionality of the Twitter API on the Twitter wiki site. Here we can see that we are able to send a query to the search API by using the URL: http://search.twitter.com/search.atom?q= followed by our search term. Twitter makes use of hashtags to tag posts.If we wanted to search for just hash tags we can do that by using the URL version of hash before our query. for example: http://search.twitter.com/search.atom?q=#battlestar gives us posts that contain the hashtag of battlestar. Try it out in your browser. It will return an XML document containing the results. That was easy! Now we just need to parse the XML with a bit of PHP and format it in a way that is a bit more useful and can be added to our site.

Create a new PHP document and start off by assigning our search term to a local variable. I’ll also create a variable to hold the number of posts we want to get from Twitter. I’ll just get one but you can change that here if you want.

$searchterm = 'battlestar';
$numberofresults = 1;

Next up is retrieving the XML document. Using loadXML we can get the XML document and store it into an object.

$thedom = new DOMDocument;
$thedom->loadXML(file_get_contents('http://search.twitter.com/search.atom?q=%23'.$searchterm));
if (!$thedom) {
echo 'Error while parsing the document';
exit;
}
$thes = simplexml_import_dom($thedom);

The XML document is now stored in an object in PHP. If you want to find out what nodes and values are in the object you can print it out to a page using:

echo '<pre>';
print_r($thes);
echo '</pre>';

Now we’re going to declare a local variable called count. Since we now have the XML document stored in an object in PHP we can itterate through the nodes, now properties and echo out the values. The count variable will allow us to determine how many items we will display. I’ll give the page a heading here as well before we start the loop.

$count = 0;
echo '<h3>What people are saying on Twitter about #'.$searchterm.'</h3>';

Start the foreach loop:

foreach ($thes->entry as $entry) :

…and then start echoing the values to the page:

$twitterpost = $entry[0]->content.'
';
$twitterpost = $twitterpost.'posted on: '.date('d/m/Y', strtotime($entry[0]->updated)).'
';
$author = $entry[0]->author->name;
$author  = preg_replace('/\((.*)\)/', '', $author);
$twitterpost = $twitterpost. 'Posted by: <a href="'.$entry[0]-&gt;author-&gt;uri.'">'.$author.'</a>';

After the heading we are going to get the contents of the first post. $entry[0]->content gets the content property of the first post. This is what has actually been written to Twitter. The next line uses the same method to get the date the post was created using $entry[0]->updated. The rest of the code is simply to format the date into a readable format. Next up, we get the author. Notice I’ve used a regular expression to format the username. The default is to display in the format: (). All I’ve done it get rid of everything in the brackets. I’ve then taken advantage of the author URI property to allow me to link to the authors page.

Notice that I haven’t actually written anything to the page yet. I’ve just concatenated everything into a variable called $twitterpost. Well now we’ve got everything we can echo it out.

echo $twitterpost;

All that remains is to add to our count, and exit the foreach loop. Again, if you want to display more than one post then change the value here.

$count = $count + 1;
if ($count == 1) {break;}
endforeach;

Download Twitter Search With PHP and SimpleXML

Most large companies began their journey on the internet in the late 1990’s but technology of that time was limited and sites would sometimes, at best, have an array of static pages which would have to be manually updated. Images were sparsely used as internet speeds were not fast enough. In the days that it would take forever to download any sort of multimedia pages were limited in design. We’ve come a long way since then. It’s fun to look back over the old designs of websites that have evolved over the years to sites that are now richly interactive. What will the future hold for web design?

Apple

2000

2003

2007

2010

BBC

2002

2004

2007

2010

Google

2000

2005

2010

McDonalds

2001

2005

2010

Microsoft

2001

2003

2007

2010

Myspace

2003

2007

2010

Thankfully I went into an o2 store and found out that I had been placed on a pay as you go contract. Without warning I was now paying a ridiculous amount for calls and even more for data usage. Now o2 actually have some really great sim only deals on at the moment so I was actually able to switch easily enough onto one of them and save some money. Still, a little warning would have been nice o2!

They made up for it, however, for their great deal on broadband right now. £10 per month for 20Mb connection, unlimited downloads and the first 3 months free on a 12 month contract. Easily beats everyone else out there right now. (offer only applies to current o2 broadband customers and mobile customers)

To find out more about these deals visit the o2 sim only site and broadband deals. If you are an o2 broadband customer, make sure you give customer service a call before your contract runs out and be sure to check to find out when your o2 contract is up or you could find yourself with a hefty bill!

BBC - Gill Sans

The BBC adopted the Gill Sans typeface as its corporate typeface in 1997. Find out about the history of the BBC brand on Wikipedia.

Bebo - Neuropol

Bebo is a popular social website. Find out about the evolution of their logo on Mashable.

Digg - FFF Forward

Digg.com brings together the best news, videos and pictures on the web as voted on by the Digg community.

Envato - Agenda Italic

Envato, a self-funded startup with head offices in Melbourne, Australia that launched in 2006. Envato operates digital goods marketplaces including ActiveDen and ThemeForest, the largest marketplaces online for Adobe Flash files and WordPress themes respectively.

Facebook - Klavika

Founded in February 2004, Facebook is a social utility that helps people communicate more efficiently with their friends, family and coworkers. The company develops technologies that facilitate the sharing of information through the social graph, the digital mapping of people’s real-world social connections.

Flickr - Frutiger Black

Flickr is almost certainly the best online photo management and sharing application in the world allowing you to show off your favorite photos and videos to the world, securely and privately show content to your friends and family.

Last.FM - National

Last FM is the world’s largest online music catalogue, with free music streaming, videos, pictures, charts, artist biographies, concerts and internet radio.

Linked In - Myriad Pro Bold

Linked In is a business-oriented social networking site. Founded in December 2002 and launched in May 2003, it is mainly used for professional networking. As of October 2009, LinkedIn had more than 50 million registered users, spanning more than 200 countries and territories worldwide.

Net Tuts - Lubalin Graph

Envato also operates the tutorial network Tuts+, publishing tutorials on a range of subjects and attracting over four million visitors a month. Other Envato web properties include FreelanceSwitch and AppStorm.

Sykpe - Helvetica Rounded Bold

With Skype you can make free calls over the internet to other people on Skype for as long as you like, to wherever you like.

Twitter - Pico Alphabet

Twitter is without a doubt the best way to share and discover what is happening right now.

Vimeo - Black Rose

Vimeo is a respectful community of creative people who are passionate about sharing the videos they make. We provide the best tools and highest quality video in the universe.

You Tube - Alternate Gothic No. 2

YouTube is a video sharing website on which users can upload and share videos.

Find out about some more logo design evolutions of some of the worlds best known brands on boredpanda.com

Fortunately there is a way that you can use a server sided scripting language like PHP store CSS variables in a PHP file and have the server send back the results to the browser with the mime type text/css. As explained by Chris Coyier over at CSS-Tricks you can use PHP to create a CSS file. We’re going to take this a step further and create a theme switcher using the techniques used by Chris.

First of all we want to create a PHP file for the content of our page.  We will keep this pretty simple for the example but there is no reason why you couldn’t implement this into a site with far content and complex styles. Here is a simple starter page structure. Notice that the link to the CSS file is actually a PHP file located within a folder named css.

<! DOCTYPE HTML >
< html >
<head>
<title>PHP Variables In CSS Demo</title>
< meta http -equiv="Content -Type" content="text /html; charset = utf-8" />
<link rel="stylesheet" href="css/style.php" type="text/css" media="screen" />
</head>
<body>
<div id="wrap">
<div id="nav">
<img src="images/adamoliver.jpg" alt="adamoliver.net" id="logo" />
<p id="switcher">
<span>switch theme:</span>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</p>
</div>
<div id="header">
<h1>PHP Variables In PHP</h1>
</div>
<div id="col1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="col2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</ html >

I’ve created some content with some navigation that will let us change the template used, a header that we will change the style of and two columns of text.

We’re going to use the querystring to allow us to change the current theme that is used by passing the name value pairs to the same PHP file. We will also want to remember which theme is currently being used so that if you wanted to the theme could be used throughout the rest of the site.

Insert the following PHP code before the doctype declaration:

<?php
 session_start();
 
 if (isset($_GET['template'])) {
 $_SESSION['template'] = $_GET['template'];
 $template = '?template='.$_SESSION['template'];
 } elseif (isset($_SESSION['template'])) {
 $template = '?template='.$_SESSION['template'];
 } else {
 $template = '';
 }
?>

Ok, so here is what that code actually does. Since we are using sessions we first need to start the session. Then we check to see if the querystring contains a value for the variable template. If it does then we assign the session variable template to it’s value. We then create a local variable contatining the string that we will append to the location of the CSS file. This string is a querystring with one name value pair. It will allow us to pass the name of the template we want to use to the PHP file creating the CSS styles. If the querystring does not exist for the page then a template hasn’t been requested. If there is a session we want to pass that value to the PHP file creating the CSS file, otherwise we will just leave the querystring passed to the PHP file creating the CSS blank and the default theme will be used.

Now that we know how we are going to handle requests for the different templates we can change the values of the links to update the template used - AKA the theme switcher. Update the links to include the querystring name of template with the value set to the name of your template.  In this case I’ve just used the numbers 1, 2 and 3.

<p id="switcher">
 <span>switch theme:</span>
 <a href="index.php?template=1">1</a>
 <a href="index.php?template=2">2</a>
 <a href="index.php?template=3">3</a>
 </p>

We also need to update the location of the PHP file creating the CSS. Just append the local variable containing the querystring values:

<link rel="stylesheet" href="css/style.php<?php echo $template; ?>" type="text/css" media="screen" />

Now we are ready to create our PHP file that will handle the creation of our template. There is only line of code that will allow us to do this. We just need to let our server know that we should send this PHP file as the content type of text/css. Do this by including the following on the first line of the style.php file:

header("Content-type: text/css; charset: UTF-8");

Now you can simply use this file as you would do a normal CSS file but with the added benefit of parsing some PHP within it too. This can open up a whole host of options to allow you not only to dynamically change content on the page but also dynamically change the visual appearance of the page.

How I intend to use this is to firstly find out which template we should use. Remember we can receive this information from the querystring. Since I will be expecting a number of the value between 1 and 3 I will do some error checking first to see that the value sent is only one of those values. Otherwise I will apply the default theme - theme number 1.

$numberoftemplates = 3;
if (isset($_GET['template'])) {
 $template = $_GET['template'];
 if ((!is_numeric($template)) || ($template > $numberoftemplates) || ($template < 0)) {
 $template = 1;
 } else {
 $template = round($template);
 }
} else {
 $template = 1;
}

Now I have a local variable named $template that holds the number of template I should be using. For clarity I will echo this out using PHP:

echo '/*====== template used: '.$template.' ======*/';

Visit the style.php page now in the browser and “/*====== template used: 1 ======*/” should be shown. If you change the querystring to style.php?template=2 then the template number 2 will be used.

Since we are not creating entire new CSS files for the different themes we are just going to define some differences between the themes and the main template. We can store these differences into an array like so:

$css = array(
 'header-background'  => array(
 1 => 'url(../images/header-bg-1.jpg) no-repeat',
 2 => 'url(../images/header-bg-2.jpg) no-repeat',
 3 => 'url(../images/header-bg-3.jpg) no-repeat'
 ),
 'header-h1-colour' => array(
 1 => '#fff',
 2 => '#fff',
 3 => '#666'
 ),
 'header-h1-font' => array(
 1 => 'bold normal 35px Helvetica, Arial, sans-serif',
 2 => 'bold normal 35px Trebuchet MS, Arial, sans-serif',
 3 => 'normal normal 35px Georgia, serif'
 )
 );

As you can see, I have defined three elements in the array for each CSS selector I want to change. I have also defined an array as the value for each element in the array allowing me to give each selector a choice of three options depending on which theme we are using.

As an example all we need to do now is echo out the value from the array for our chosen theme into the CSS:

background: <?php echo $css['header-background'][$template]; ?>;

And that’s all that is required. Use this throughout your file to allow you to change lots of visual elements of your site. The full styles I have used are shown below:

* {
margin:0;
padding:0;
}
body {
font-size:.8em;
background:#F3F4F9;
font-family:Arial;
text-align:center;
}
#wrap {
width:990px;
margin:0 auto;
text-align:left;
}
#nav {
padding:10px 0;
width:990px;
overflow:auto;
}
#logo {
float:left;
}
#switcher {
float:right;
width:170px;
text-align:right;
padding:45px 20px 0 0;
}
#switcher span {
float:left;
padding:6px 10px 0 0;
}
#switcher a {
display:block;
float:left;
padding:4px 8px;
border:1px solid #ccc;
background:#eee;
margin:0 0 0 2px;
}
#switcher a:hover {
background:#fff;
}
#header {
clear:both;
background: <?php echo $css['header-background'][$template]; ?>;
height: 206px;
}
#header h1 {
text-align:right;
padding:155px 25px 0 0;
color: <?php echo $css['header-h1-colour'][$template]; ?>;
font:<?php echo $css['header-h1-font'][$template]; ?>;
}
#col1 {
width:450px;
float:left;
margin:20px 0 0 0;
}
#col2 {
width:450px;
float:right;
margin:20px 0 0 0;
}

Download Theme Switcher With PHP Variables In CSS

To begin with download jQuery and start the basic html page with the page structure and a link to the jQuery library.  We will use the built in post method within jQuery to post to the server and retrieve the results given from the PHP script.

<!DOCTYPE html >
< html >
<head>
<title>JSON: A Real World Example</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>

</body>
</ html >

Now on our page we are going to have two drop down lists. The first will be our primary option list which will be pre-populated with values. The second will not have any values to start with but will instead be populated via an AJAX request depending on which option is selected in the primary option list.

Put the following drop down lists into the body section of the page:

<select name="primary_select" id="primary_select">
 <option value="0">select an option</option>
 <option value="1">option one</option>
 <option value="2">option two</option>
 <option value="3">option three</option>
</select>

<select name="secondary_select" id="secondary_select">
</select>

Before we code any javascript or PHP we should really hide the secondary options list from the user before they select from the first list. Add this line of CSS to hide the secondary drop down list:

<style type="text/css">
#secondary_select {display: none;}
</style>

Ok, now we are ready for some jQuery. We’ll start by capturing the change event of the primary option list. Every time a user selects a different option from the list the code will execute.  Within this code block we want to post the value of the selected option in the primary option list.  we can get this value using the val property of the option list as shown below:

<script type="text/javascript">
 $("#primary_select").change(function () {
   
   $.post("dynamicselect.php",
   {
       primary_select : $('#primary_select').val(),
   },
 
   function(data){
 
   }, "json");
});
</script>

We’ve posted our selected value to the PHP script named dynamicselect.php and have set up the second argument of the post method ready to capture the response from the PHP script. We’ll come back to the results and how to populate the second list shortly. Let’s first get into some PHP.

In one go here is all the PHP code we need:

$selected_option = $_POST['primary_select'];
 
if ($selected_option == 0) {
    $options = '';
} elseif ($selected_option == 1) {
$options = array(
    'option one a'  => 'option one a',
    'option one b'  => 'option one b',
    'option one c'  => 'option one c',
    'option one d'  => 'option one d',
);
} elseif ($selected_option == 2) {
$options = array(
    'option two a'  => 'option two a',
    'option two b'  => 'option two b',
    'option two c'  => 'option two c',
    'option two d'  => 'option two d',
);
} elseif ($selected_option == 3) {
 $options = array(
    'option three a'  => 'option three a',
    'option three b'  => 'option three b',
    'option three c'  => 'option three c',
    'option three d'  => 'option three d',
);
}

$array = array('options' => $options);
echo json_encode($options);

Here’s an explanation of what I did in the PHP code. We can capture the value of the selected item in the primary drop down list and assign it to a local variable using this line:

$selected_option = $_POST['primary_select'];

The next section of code checks to see if the selected item’s value is equal to 0, 1, 2 or 3. Depending on the results it assigns another variable, $options, with an array. This array is a two dimensional array that we will send back to our page and assign the name and value pairs to the secondary drop down list. In this case I have simply hard coded in some values but this script could easily be amended to fetch results from a database XML file or elsewhere to assign values to the array.

In the last two lines we create a new array to hold the current array, encode the array with the json_encode function and print the results to the page. This is then retrieved in the browser via javascript.

$array = array('options' => $options);
echo json_encode($options);

Back in our javascript the our function is waiting for the results:

function(data){
 $('#secondary_select').show();
 $('#secondary_select').empty();
 $.each(data, function(val, text) {
  $('#secondary_select').append(
  $('<option></option>').val(val).html(text)
  );
 });

Since we made our second drop down list invisible we’ll first use jQuery to show the option list on the page.

$('#secondary_select').show();

Each time this code runs it will append options to the select element. So that we don’t just add to what is already there we want to first of all empty all contents of the select element.

$('#secondary_select').empty();

Then using jQuery we can loop through our array that we sent from PHP appending an option each time we run through the loop.

 $.each(data, function(val, text) {
  $('#secondary_select').append(
  $('<option></option>').val(val).html(text)
  );

And that’s it! When a user chooses from the first option list the second option list is displayed on the page and values are dynamically added to the list from values defined in the PHP script. The full javascript code is shown below:

$("#primary_select").change(function () {
 
     $.post("dynamicselect.php",
     {
         primary_select : $('#primary_select').val(),
     },
 
     function(data){
         $('#secondary_select').show();
         $('#secondary_select').empty();
         $.each(data, function(val, text) {
             $('#secondary_select').append(
             $('<option></option>').val(val).html(text)
         );
     });

     }, "json");
 
});

Download JSON Drop Down List Files

In this tutorial I will show you how to do this using a form to post a number to a PHP script which will do a simple calculation and return the results to the browser without a page refresh. In the next example coming up I will show you a more real world example of how this can be useful.

Start off with the basic HTML page structure and add the link to the jQuery library available from jquery.com.

<!DOCTYPE html >
< html >
<head>
<title>JSON</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>

</body>
</ html >

In the body of the document we are going to use an input field to take a number from the user, a submit button to post the value to the PHP script an empty paragraph tag with the id of result as a placeholder for the result that will come from the PHP script.

<h1>JSON Example.</h1>
<p>Enter a number to be multiplied by 4.</p>
<input id="textbox" name="textbox"></input> x 4
<input type="submit" name="submit" id="submit" value="calculate"></input>
<p id="result"></p>

Now for some javascript. We’ll start off by capturing the click event of the submit button which we gave the id of submit. Using return false we can prevent the default action of the button - submitting the form - as we do not want the entire page to post back to the server.

<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function () {

return false;
});
});
</script>

Next we will add in the post jQuery post method which will allow us to post an array of values to the PHP script on the server using HTTP POST.

$.post("results.php",
{
theValue : $('#textbox').val(),
},
function(data){
$("#result").html(data.result);
}, "json");

Here we are posting the varible theValue with the value of what is entered by the user in the textbox with the id textbox to the php file results which will handle the processing of the data.

We will be working with this value on the server. The second argument that the post method requires is what is a function containing the results of what is returned from the server. As I will show shortly we will return a multidimensional array which will contain a value for result.  In this line of javascript:

$("#result").html(data.result);

I am taking the value as returned from the PHP script and replacing the contents of the paragraph tag we created with the id of result.

So with the values passed over to the PHP file we can now retrieve the values, do the required processing and return the results. The following code is placed into the results.php file.

<?php
$theValue = $_POST['theValue'];

if (is_numeric($theValue)) {
$result = $theValue * 4;
} else {
$result = $theValue . ' is not a number.';
}

$data = array('result' => $result);
echo json_encode($data);
?>

Firstly, we can retrieve the value of what was passed through the post method by using the $_POST function. Next I have done some simple error checking to see that what is entered is a number, if it is then the number is multiplied by four, if not then the result variable is assigned a value of an error message.

We then create an array of the results and use the json_encode function to encode the results into a json friendly syntax. Echo the $data array in this format and the results are received by the jQuery post function to display in the page.

Download JSON Simple Demo

I thought Jack Osborne wrote a good post on his resolutions for the new year and adding it to my blog where it is written down for me to check and update in a year’s time sounded like a good idea.

Project 52

Over the last few years posting to my blog has been patchy with rushes of inspiration coming now and again throughout the year but I would like to be more focused on this throughout the year and have decided to try to post to my blog once every week.  Project 52 kicked this idea off a few years ago.  Let’s see how long it lasts on my blog…

Learn Japanese

Ok, I’m unlikely to be a master of Japanese in a year but I aim to learn a lot more than I have done in the last couple of years.  I started listening to the podcasts over at japanesepod101.com a couple of years ago but never really got beyond the basics.  This year I hope to progress further with the aim of learning enough for a visit to Japan in 2011.

Play and learn more guitar

I have a million and one ideas for song writing but unfortunately over the last few years I have not practiced guitar as often as I would have liked.  Hopefully this year I can make some more time for practicing and writing some music. I can’t really see myself on Top of the Pops or whatever the equivalent is these days but maybe by the end of the year I might just have something recorded!

Web Development - Continue to learn by doing

Over the last few months I have pushed myself to learn more jQuery, PHP, AJAX, CSS3 and HTML5. With upcoming projects I hope to be able to use these newly learned skills and hope to set up some more websites that are community driven. I have a few ideas that I am keen to get going with already. Watch this space!

Attend web conferences and meetups

Working for a small company I sometimes feel that I miss out on the interaction with other people in the industry.  Attending the FOWD conference in 2009 was a great way to meet up with like-minded designers and developers.  I hope to go to more conferences this year as well as meeting new people at web design meet ups locally.

Watch the IMDB top 100 films

I recently had a look through the top 100 films on IMDB and realised there are a lot of them I have never seen and some I haven’t seen for ages.  I thought it would be a nice goal to aim to see all 100 of them this year!

Phew! Six things to achieve in a year! Maybe I’ll write a post in 6 months time with an update. What are you’re resolutions/goals for the new year? Post a note in the comments to let me know.

Since users of a website will only scan through the content in a page jQuery can easily be used to allow users to only view an introduction or summary of an article and then click to instantly view more. In this tutorial I will show you how to use jQuery to hide a portion of the content at first and view the content when a user clicks a view more link. Furthermore, I will show you how to change the link so that you can collapse the content again allowing the page to return to it’s original state.

Let’s start off with some simple HTML to get the page content in. We will start by linking the jQuery library to the page, inserting an introduction in the body that users will see first, follow this with the content that users will see when they click to see more and finally the link that will allow users to view more or less content. The order of this content is important as we will find out later.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>View or Less Content With jQuery</title>

<script type="text/javascript" src="jquery.js"></script>
</head>
<body>

          <div class="intro">
          	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>

          <div class="moretext">
		<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
          </div>

          <p class="morelesslink more">view more</p>

</body>
</html>

Notice the class names I have given the content. The intro is in a div with class name intro. This class name isn’t actually used but could easily be to style differently from the rest of the content. The following div is the content that we will be hiding to start with then showing when the link it clicked. The final part is a paragraph of text which when clicked will show or hide out further content.

Ok, let’s get some functionality in there. Our javascript is as follows:

<script type = "text/javascript">
$(document).ready(function() {

 //hide the all of the elements with class moretext
$(".moretext").hide();      

//show the more link for users with javascript enabled
$(".morelesslink").show();      

//toggle the content to be displayed
$(".morelesslink").click(function()   {
if ($(this).prev(".moretext").is(":hidden"))
 {
$(this).html("view less");
$(this).prev(".moretext").slideToggle(600);
$(this).addClass("less");
$(this).removeClass("more");
} else {
$(this).html("view more");
$(this).prev(".moretext").slideToggle(600);
$(this).addClass("more");
$(this).removeClass("less");
}
});
});
</script>

So what is this code doing? Let’s break it down. To start with we will take care of enhancing the page for browsers with javascript enabled and leave a usable page for those without. The hidden text is hidden using jQuery and the link shown with jQuery so that all users without javascript will see the page with all content and no link to view more:

(".moretext").hide();
$(".morelesslink").show();

Next we will create an event that handles the clicking of our link to view more or less content:

$(".morelesslink").click(function()   {
});

Within this event we check to see if the more text is already hidden. Since this event will handle both showing as well as hiding the text we need some logic to determine what state the page is in. The following if statement takes care of that:

if ($(this).prev(".moretext").is(":hidden"))
 {
} else {
}

If the more text is hidden then we need to change the content to be shown, change the link’s text to “view less”, and we will also swap around some additional classes on the link for styling purposes.

We also want to do the opposite when the more text is visible and the link is clicked. The link text will be changed to “view more”, the more text is toggled to hide the text using the slideToggle method in jQuery and again we swap about some classes for the link for styling.

Notice that to access the current more text for the specific link that we use the prev property. This accesses the previous sibling in the HTML. This is why it is important to keep the HTML in the same order as specified.

Here is the full if statement:

if ($(this).prev(".moretext").is(":hidden"))
 {
$(this).html("view less");
$(this).prev(".moretext").slideToggle(600);
$(this).addClass("less");
$(this).removeClass("more");
} else {
$(this).html("view more");
$(this).prev(".moretext").slideToggle(600);
$(this).addClass("more");
$(this).removeClass("less");
}

Now all our javascript is up and running let’s tidy it up with a bit of CSS. We can now take advantage of the classes we added for the link: .more and .less.

<style type="text/css">
* {
margin:0;
padding:0;
}

body {
font-family:Arial;
font-size:.8em;
padding:1em;
}

p {
padding:.3em 0 .8em 0;
}

.morelesslink {
display:none;
background:#eee;
color:#333;
padding:.3em .6em .3em 2em;
border:1px solid #999;
cursor:pointer;
}

.more {
background:url(more.gif) no-repeat 5px center;
}

.less {
background:url(less.gif) no-repeat 5px center;
}

</style>

And that’s it! Simple, reusable, progressively enhancing code. If you want to use the code more than once on the page you can do since it only requires the use of classes. Just make sure that you keep the order of HTML the same.

Download jQuery more and less links