Web International Awards

payday loan

11

JAN 2010 7

Think outside the box! “the team” perfect page!

tutorial demo screenshot

Demo preview?

Just in case you can't wait till the end of the article, here's a demo of what we're doing today in this tutorial.

Concept

Each time you get to a site to check out who works at a certain company you end up on a page that looks dull and familiar. Sometimes you have all the management team or if the company is kinda small all the people employed. You have for each one a picture, a name and perhaps some contact information. Sometimes there's even a short bio.

All this information is usually boxed in the same way. Picture to the left, name beneath the picture, bio to the right and contact information underneath the bio. If there's no bio, you simply have contact information to the right.

Example of an about us page

I am sick and tired of this "inside the box" thinking. In fact, I recently stumbled on the site of a company that could have been my client today - I paid them a visit about three years ago. Found the office closed with no information provided. There was no secretary. I had nobody to pitch to, so no new client. They now have a nice page to round up the management of the company. Unfortunately, the implementation lacks my minimum moral standard.

If I recall correctly those functions that start with function MM_swapImgRestore() are generated via Dreamweaver, which in my opinion is for, uhm, well, kids. The rollovers are created using Flash. I borrowed the concept and did a XHTML / CSS / jQuery implementation. Moreover, I am sharing the full source code and the development process as a tutorial, and you can use it for free as long as you credit the author.

Original design

Screenshot of Edil Concept's about us page

The site where I got this idea from is the site of a local constructions company called Edil Concept. Sorry it is available only in Romanian. Check out how their team page looks like. It has those nice image rollovers and the right box next to them for displaying information. It does have a small downside though. If you want to email that dude in the middle of the team - which is actually the company's manager - you have to write down his email on paper, because content changes when you hover any of the images, and his stuck in the middle.

Improved design

tutorial demo screenshot

Here's what we want to achieve. First of all, the above described layout should be achieved using only XHTML and CSS. No tables as they are so old and ugly. We also want to change from hovering behavior to clicking behavior. Doing so will ensure that you can actually use the information displayed for the middle guy. In order to achieve this we will use jQuery. The hovering effect will be kept, so that people look around as you go through them. As it turns out, doing this on hover, really, really doesn't work. Do not try this at home! No really, don't!

Don't believe me, just see here what happens if hovering behavior is preserved.

The layout

We will have three major boxes in this layout. We will have a wrapper, a photos and a text box. The wrapper will hold the content in place, in the middle of the page. The photos will hold the 9 pictures we will have - our demo company has 9 employees. I don't think I need to say what the text box will contain. Check out the layout page.

The XHTML

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
<h1>Team page demo</h1> <!-- title so demo looks nice -->
 
	<div id="wrapper"> <!-- hold content in place -->
 
		<div id="photos"> <!-- hold all pictures together -->
			<a class="member" id="img1"><img id="image1" src="images/default.jpg" width="140" height="140" alt="Default" /></a>
			<a class="member" id="img2"><img id="image2" src="images/default.jpg" width="140" height="140" alt="Default" /></a>
			<a class="member" id="img3"><img id="image3" src="images/default.jpg" width="140" height="140" alt="Default" /></a>
			<a class="member" id="img4"><img id="image4" src="images/default.jpg" width="140" height="140" alt="Default" /></a>
			<a class="member" id="img5"><img id="image5" src="images/default.jpg" width="140" height="140" alt="Default" /></a>
			<a class="member" id="img6"><img id="image6" src="images/default.jpg" width="140" height="140" alt="Default" /></a>
			<a class="member" id="img7"><img id="image7" src="images/default.jpg" width="140" height="140" alt="Default" /></a>
			<a class="member" id="img8"><img id="image8" src="images/default.jpg" width="140" height="140" alt="Default" /></a>
			<a class="member" id="img9"><img id="image9" src="images/default.jpg" width="140" height="140" alt="Default" /></a>
		</div>
 
		<div id="moretext"> <!-- hold content that will show up once photos on the left are clicked -->
			<span>Click the images on the left to view detailed information about us.</span>
			<h2></h2>
			<h3></h3>
			<h4></h4>
			<h5></h5>
			<h6></h6>
		</div>
 
	</div>

XHTML explained

I won't explain all the small details behind the XHTML code above. However, I feel I need to explain why images are wrapped in anchor tags. I did this so that I could easily style the hover event of images with a nice border, and to cleanly add spacing between images. I also added an ID attribute to each anchor tag because I am going to use those combined with jQuery. Each image has an ID attribute too because we will need to change the SRC attribute of each image when one of them is pressed. We do that with jQuery and use the IDs to identify the elements, that's why make sure your IDs will have unique names if you use this in a production environment.

The #photos div will be floated to the left, while the #moretext div will be floated to the right. The heading tags will be populated with content once an image is clicked, while the span tag will be removed when that happens. We don't need IDs for these heading tags as they're all different and share the same parent. We can identify them by their parent and type.

CSS code

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
/* RESET - we don't want anything to interfere with our styles */
*										{ margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:inherit; }
/* END RESET */
 
/* GLOBAL LAYOUT CONFIG */
body									{ margin:50px 0px 0px 0px;
										  font-family: "Lucida Grande", Verdana, sans-serif; } /* don't let content start right from the top */
h1										{ display:block; text-align:center; width:800px; margin:0px auto; height:30px; font-size:1.3em; }
#wrapper								{ display:block; margin:0px auto; width:800px; height:450px; } /* set width and height, positioning */
#photos									{ display:block; height:450px; width:450px; float:left; } /* set width, height and floating */
#moretext								{ display:block; height:430px; width:330px; float:right; padding:10px; background-color:#EEE; } /* set width, height, floating and background color of text area */
 
/* END GLOBAL LAYOUT CONFIG */
 
/* PHOTOS STYLING */
#photos .member							{ display:block; padding:0px; border:5px solid #CCC; width:140px; height:140px; float:left; }
#photos .member:hover					{ border:5px solid #333; }
/* the most important attributes are the floating, and the border used to space the elements */
/* END PHOTOS STYLING */
 
/* simple text styling */
#moretext span							{ font-size:0.8em;}
#moretext 								{ color:#333; }
#moretext h2							{ font-size:1.2em; }
#moretext h3							{ font-size:0.7em; }
#moretext h4, #moretext h5				{ font-size:0.8em; }
#moretext h6							{ font-size:0.7em; padding-top:25px; }

CSS explained

We set document limits, then set the wrapper's dimensions. Somewhat important is the width and height of the photos box, which is 450 pixels because we have 3 images on a row, and 3 different rows. This means each image should be 150 by 150 pixels. That is not true however due to the fact that we added the anchor tag which has a 5 pixels border. Therefor images should be 140 pixels in height and width. You can check how the layout looks with CSS applied to it over here.

As you have seen so far, neither the XHTML nor the CSS are complicated, and hopefully the jQuery will not look complicated at all. With this said, let's jump into the interesting part of the article.

Scripting with jQuery

Clicking on images doesn't trigger anything yet. That's why we need to spice things up with a little jQuery. We will be using jQuery's .click(), .remove(), .attr() and .text() functionalities. It is obvious what .click() will be used for. The .remove() function will be used to remove the welcome text - which is contained in the span tag - out from the text box after the first click on an image.

.text() will be used to change the contents of the heading tags once images are clicked, while the .attr() will be used to change the SRC attribute of images as we click through them. Take a look at the jQuery code to see what you're up against.

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
$(document).ready(function(){
 
	// the following code will remove the info on top of the right box
	$("#photos a").click(function ()
		{
		$("#moretext span").remove();
		});
	// the following 9 functions will edit information about each employee
 
	$("#img1").click(function ()
		{
		// change the text in the right box
		$("#moretext h2").text("Bogdan Pop");
		$("#moretext h3").text("General Manager");
		$("#moretext h4").text("+40 (954) 037 910");
		$("#moretext h5").text("mailhere@domain.com");
		$("#moretext h6").text("Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He loves web programming and design and has a passion for standards and SEO. He relaxes by taking photos every once in a while and by mixing french electronic music.");
		// change the pictures on the left
		$("#image1").attr("src","images/hey.jpg");
		$("#image2").attr("src","images/l.jpg"); 
		$("#image3").attr("src","images/l.jpg"); 
		$("#image4").attr("src","images/t.jpg"); 
		$("#image5").attr("src","images/lt.jpg"); 
		$("#image6").attr("src","images/lt.jpg"); 
		$("#image7").attr("src","images/t.jpg"); 
		$("#image8").attr("src","images/lt.jpg"); 
		$("#image9").attr("src","images/lt.jpg");
		});
	// 8 more .click functions will be here
});

jQuery explained

The first thing that happens when we click an image is the removal of the span tag together with its content. We do that with the .remove() function that we call upon the tag we're looking for. That is identified using #moretext span identifier, and we call it once an image is clicked. We do that with the .click() trigger applied to the anchor tags that wrap the images: #photos a. Here's the code that does that.

1
2
3
4
$("#photos a").click(function () // function called when image anchor is clicked
	{
	$("#moretext span").remove(); // remove the span tag inside the #moretext div
	});

Next, whenever a specific image is clicked, like the one above identified as img1 using its ID, we need to change the text of the heading tags in the text area of the demo (#moretext div) and also update the sources of all images. As you've seen in the original site or in the live demo, we change the image of each employee to appear as if they were all looking to whom you've just clicked upon. Here's the code we use to change a heading tag as I've just described.

1
	$("#moretext h2").text("Bogdan Pop");

In the above code I've identified the level two heading and changed its contents using jQuery's .text() function. By using the .attr() function with two arguments, we change the SRC attribute of an image. We identify images using their IDs that we uniquely named them with in the XHTML such as image6. Here's the code used to change the source of an image.

1
	$("#image6").attr("src","images/lt.jpg");

The result

This is pretty much everything you need to know to achieve what I've done in this demo. Because the entire jQuery code used is almost 200 lines of code, I haven't posted it entirely over here, but it is basically the same scenario as applied above to img1, and it is fully available in the source code of this tutorial. Sprinkle.js file is the one used to achieve the demo in this tutorial, while sprinkle_hover_crazyness.js is used to achieve a page that works similarly to the original site, which I don't recommend.

Download

You can download and use the code above from here. If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Published on Monday, January 11th, 2010 at 4:24 pm in design, layout, usability.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.
 
  1. Ortalon says: January 21st, 2010 at 6:04 am

    Lengthy and in depth article but full of useful information.

  2. Nikhil says: January 25th, 2010 at 7:04 pm

    Hey,
    That’s really cool! great idea.

  3. Mike says: January 25th, 2010 at 7:17 pm

    Nice idea.

    You should really put all the contact information into the HTML and not place it via JS. If the user has JS turned off they can’t get *any* contact information, but if the contact info was in the HTML they can still access it. Also, instead of doing ‘ ‘ why not use an unordered list?

    Thanks for the article.

  4. Trackback on Squico says: January 25th, 2010 at 11:07 pm

    […] In: Design inspiration 25 Jan 2010 Go to Source […]

  5. admin says: January 26th, 2010 at 12:13 am

    Hey Nikhil and Mike and thanks for your comments!

    @Mike:
    You do have a point, regarding placing contact information in the html. I too was a while back fighting for unobstructedness and after realized I was swimming against the flow, I stopped.

    The usual excuse is javascript is off on so few browsers it doesn’t really make a count. But my excuse in this tutorial is that I wanted to achieve and present a great idea, leaving the bits of details aside, which is a bit wrong.

    The best solution for this concept would be adding all content into HTML, style it so that it looks ok, in a classic way, then change the layout and functionality with JS if it is available. Like this, users without JS would see a default, basic version, and users with JS on would see something based on this concept.

    Finally, if anyone likes this, if you plan to use it in a live site, do as described in the above paragraph so that you don’t deprive users without JS from their rights.

  6. Mike says: January 26th, 2010 at 5:53 pm

    Thanks for the response, very awesome. You should update the tut accordingly for any new people out there so they can learn the correct way from the start. (Not trying to be a pain I swear)

    Thanks again for the article and response.

  7. admin says: January 26th, 2010 at 11:24 pm

    Hey Mike,

    After I posted the comment I thought about that myself, and I hope I’ll be able to update the tutorial in the following two weeks. I even have some nice additions in mind. I’m gonna see how things turn around and update this page when the new version is live.

    And thank you for taking the time to read and comment this blog!





Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.


If you do not have a username, you can register in just a few clicks.