Web International Awards

payday loan

2

FEB 2010 4

The change is here. Hover events come to mobile devices

Functionalities diagram of hover feature for mobile devices

I think that everyone knows that awesome YouTube movie about technology and how things that we learn today will become obsolete in 6 months or maximum 1 year. Well, when I published the hover behavior article just a few days ago, I certainly didn't think what I advised there will become obsolete so fast. I mean, I didn't see hover behavior coming to mobile devices this soon. Having this said, before going on with this article you should read the first article on hover events.

Apple has been granted a patent which has a mind blowing description, because it tackles proximity based systems and methods. What are those you may ask? Proximity methods are methods that a device can use to detect if there's an object placed in close proximity to its surface. Like a finger pointing above the iPhone's touch screen. Such method would also include performing an action if such an object is sensed.

Basically, this describes hovering events triggered by fingers, not just one finger. Apple has multitouch interfaces so why shouldn't they have a similar multihover event? At first hand, having such a feature in an iPhone, iPad or iPod would be great, because all the issues I described in the first article on this topic would disappear!

But would they?

No they don't! In fact, such a feature in mobile devices would only complicate the situation, because users could easily trigger lots of hover events simultaneously on a web page or web app. This has never been thought of and web developers have never taken this into consideration as PCs don't have multiple mouse pointers. This means there's no protection in websites against such worst case scenarios. Imagine a user viewing a drop down navigation menu that displays multiple menus in the same time. Imagine what their reaction would be, especially if the scenario happened by accidental hovering and the user would be taken by surprise. I also don't think that such a menu would be easy to use.

Description of features of a tablet device app

Such a new technology would technically fix the hovering issues of mobile devices, but would also trigger new ones, like the scenario described above, and would also give us power to create even greater interfaces by using multihover events. How cool would it be to point your finger to a product or pinch without touching the device to pop out details, and then click to buy it?

Here's a link to the patent (Granted Patent 7,653,883, originally filed in Q3 2005 by Steve Hotelling, Duncan Robert Kerr, Bas Ording, Jonathan Ive, Peter Kennedy, Anthony Fadell and Jeffrey Robbin).

Feedback

Please share your thoughts on this topic in the comments section. If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

30

JAN 2010 3

Should I use on hover behavior?

ThemeForest dot net screenshot

Yes, you should! Why not? After all, you could really enhance your user interface. However, using such a behavior could also tear apart user experiences, especially if your visitors are using mobile devices like the HTC Touch, the iPhone or the newly released iPad. Such devices unfortunately cannot "feel" your finger above the screen so there's no hovering triggered in their browsers.

Before choosing hover events in your websites or webapps you should probably check how much of your site's visitors are represented by mobile users. If the percentage is decent, I wouldn't use hovering and switch instead to the traditional click. Envato's marketplaces have been featured on Webia before for their awesome consistency across all websites, which was a good thing.

I am about to talk about a slightly bad thing on Envato's marketplace sites. Each of them has a categories button just below the logo, which if hovered with a mouse expands and shows popular categories. Clicking on such a category will redirect you to that category's dedicated page, while clicking the categories top button will trigger nothing.

ThemeForest's categories menu triggered by hover on PC

Now that's ok if you're using a computer, notebook or anything that comes with a mouse. If you're using a mobile device you simply cannot jump to a category you love. This means you have to go for a work around, which is nowhere to be found if you're not a regular user.

Who does this right?

ThemeForest dot net screenshot

If you think we're going to jump light years away to find another site that does this well, you're wrong. Remember that we talked about the logo, located just above the categories button? Well, next to the logo are two small arrows pointing out that something happens over there. If you click that small button you get a dropdown menu similar to the one you get when checking out categories. This menu is used to rapidly switch between Envato's marketplaces. My question is why did Envato implement click on their marketplace switch and hover on their categories menu?

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

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.

13

DEC 2009 0

Creme Egg. Product site & ads [showcase #1]

Creme egg captain

This is a completely new type of article that we're going to start publishing, hopefully on a regular basis. It was inspired by last night's "Nuit Des Publivores" which took place in Cluj, Romania. We won't just showcase different ads, random ones, but carefully chosen ones. While doing this, we will also try to showcase websites and product marketing related to the ads showcased. Moreover, these ads should be part of a series. Something like the "Get a mac" ads that Apple runs.

Creme Egg site & ads

Creme Egg's website screenshot

First of all, I have never got my hands on one of these eggs, but I really liked the original ads. I have no idea what the Creme egg season is, but their site is lovely, their ads are fun and it seemed like a good place to start.

 

Hope you enjoyed this post. If you know other ads that could go into the list, please send over a link. You can stay updated to new content via our RSS feed or by email.

9

DEC 2009 0

9 months stats

9 months screenshot

It has been almost nine months since Web International Awards was launched with the main goal as achieving decent traffic (somewhere around top 500.000 Alexa, as opposed to original 2m+ rank) after no more than one year. Three months before the deadline Web International Awards is in top 400.000 Alexa, meaning that the main goal was achieved sooner than believed.

Of course this journey would have been a lot easier with huge amounts spent on advertising, but then that traffic wouldn't have been created by you guys who come to our website because you like our content. We ditched that advertising infusion and focused on great content. Here's a showcase of our best articles in the last 9 months - be advised that best symbolizes most visited:

2010 Goals

Main goal will be reaching top 100.000 Alexa without any huge advertising expenses, if any. This means that we will have to publish content of even higher quality, more often. We will achieve this by getting some of our readers to write articles for us, which is our secondary goal. Having some of you write for us and getting paid will ensure we will be able to post more high quality articles. However, as of now we don't have the means to pay for articles, but if you'd like to write and get your name in here and some links to your sites, feel free to contact us and pitch your ideas.

Advertising

If you wish to buy banner ads on Web International Awards you can do so by using Buy Sell Ads's marketplace - here's our listing.

28

NOV 2009 0

Green sites showcase

This is the third article of our color series of articles. Back in July we had an interview with Igor Asselbergs, renowned color expert with over 20 years of experience who blogs on livelygrey.com and is the current CEO of Colorjinn, a company that develops digital colors tools.

We then had a beautiful showcase of red websites, emphasizing what we previously discussed about red with mr. Asselbergs. It is now time to move forward. Therefor we will now talk about green nuances and we will also showcase beautiful websites that use such color tones.

Green. What about it?

Green is not a primary color, but is created by combining blue (cyan) and yellow. The complement of green is magenta, which is a combination of blue and red. We chose for this article green exactly because it is the complement of red. It is an additive color which combined with blue and red will produce white light.

Green is generally used to point out validity, permission and alike. This is exactly the opposite of red, which is generally used to point out errors, forbidden actions etc. If contrast is powerful enough, the best bet would be using green for call to action buttons, emphasized links or in forms while validating data.

Showcase of beautiful green websites

Emotions Live

Emotions Live screenshot

Simply Invoices

Simply Invoices screenshot

Lipton Green Mint

Lipton Green Mint screenshot

Deluge Studios

Deluge Studios screenshot

Green Globe Ideas

Green Globe Ideas screenshot

Rype Arts

Rype Arts screenshot

CSS Style

CSS Style screenshot

Cool Tribe

Cool Tribe screenshot

Life Tree Creative

Life Tree Creative

Moby Green

Moby Green screenshot

This article is part of a series of articles regarding colors. What do you think about the things pointed here? If you know other sites that could go into this post, please send over a link, and if enjoyed this article you can stay updated to new content via our RSS feed or by email.

25

NOV 2009 5

Enhance your clients list page with jQuery goodness

clients list demo preview

I have seen a lot of web development companies, or for that matter, companies that offer IT services having a dull client list page. They usually reside to a logo showcase or a text list divided into multiple columns. This later design is what we will try to achieve in this tutorial, but we will also add a service list, and map the two lists together. Pointing to a service will reveal clients that bought that service while pointing to a client will reveal services bought by that client. We will use jQuery to map the two together.

The HTML

I will be using HTML 5 tags for this tutorial, which means what we are building here will only work on modern browsers. However, it's just a few tags and a doctype that need to be changed to make it work on every browser. The structure of the file will be consisted of two HTML 5 tags: header and section. Enough talk, here's the 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<header class="top-rounded">
	<!-- this is the horizontal bar with the gradient-->
	<h1>Services</h1>
	<h2>Clients</h2>
</header>
<section>
	<ul class="services btlft-rounded">
		<!-- this is the section that will hold the services-->
		<li>Systems Development
			<ul>
				<li class="ubn"><a href="#" class="">Business Needs</a></li>
				<li class="dd"><a href="#" class="">Design &amp; Development</a></li>
				<li class="ti"><a href="#" class="">Test &amp; Implement</a></li>
			</ul>
		</li>
		<li>Design &amp; Branding
			<ul>
				<li class="mr"><a href="#" class="">Market Research</a></li>
				<li class="bs"><a href="#" class="">Business Strategy</a></li>
				<li class="ci"><a href="#" class="">Corporate Identity</a></li>
				<li class="obp"><a href="#" class="">Online Brand Presence</a></li>
				<li class="ue"><a href="#" class="">User Experience</a></li>
				<li class="ia"><a href="#" class="">Information Architecture</a></li>
				<li class="ad"><a href="#" class="">Application Development</a></li>
			</ul>
		</li>
	</ul>
	<ul class="clients btrght-rounded">
		<!-- this is the section that will hold all clients -->
		<li class="dd ti"><a href="#" class="">Nike</a></li>
		<li class="ubn di ti"><a href="#" class="">Adidas</a></li>
		<li class="dd"><a href="#" class="">Hugo Boss</a></li>
		<li class="ci ad"><a href="#" class="">Canal +</a></li>
		<li class="mr bs ci obp"><a href="#" class="">TV shop plus</a></li>
		<li class="ad"><a href="#" class="">CBS</a></li>
		<li class="ia"><a href="#" class="">NBC</a></li>
		<li class="mr bs ci ue ia ad"><a href="#" class="">GOL TV</a></li>
		<li class="ia ad"><a href="#" class="">Petrom</a></li>
		<li class="ue ia ad"><a href="#" class="">OMV</a></li>
		<li class="ci obp"><a href="#" class="">La pizza</a></li>
		<li class="mr"><a href="#" class="">The shop</a></li>
	</ul>
</section>

As you see in the code above, each list item has a various number of classes. These classes are used to identify services and to map services to clients and viceversa. The class attribute in the anchor tags is used to emphasize which clients or services are selected. With that said it is time to move on to some basic styling.

The CSS

I will use some rounded corners instructions, but apart from that everything else is pretty simple. Here's the 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/* reset basic styling and set rounded corners */
*
{ margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:inherit; }
.all-rounded,
ul.services li a,
ul.clients li a			
{ border-radius:9px; -moz-border-radius:9px; -webkit-border-radius: 9px; }
.btlft-rounded			
{ border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -webkit-border-bottom-left-radius:9px; }
.btrght-rounded			
{ border-bottom-right-radius:9px; -moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px; }
.top-rounded			
{ border-top-left-radius:9px; -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px; 
border-top-right-radius:9px; -moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px; }
 
/* styling of the general structure: size, position and alike */
header
{ display:block; width:801px; height:40px; margin:0px auto; margin-top:100px; border:1px solid #888;  border-bottom:none; }
header h1, header h2
{ display:block; margin:0px; padding:0px; }
header h1
{ width:200px; float:left; }
section	
{ display:block; width:803px; margin:0px auto; margin-bottom:50px; overflow:auto; }
ul
{ display:block; float:left; list-style:none; padding-bottom:15px; }
ul.services
{ width:200px; }
ul.clients
{ width:600px; }
 
/* visual styling: colors, font size etc */
header
{ background:#999 url('../images/top.png') repeat-x; }
header h1, header h2
{ font-size:20px; color:#F6F6F6; line-height:40px; text-align:center; }
ul.services
{ background-color:#999; border:1px solid #888; border-right:none; }
ul.clients
{ background-color:#F0F0F0; border:1px solid #888; }
 
ul.services a, ul.clients a
{ text-decoration:none; }
ul.services li a		
{ display:block; color:#F0F0F0; height:23px; line-height:25px; padding:0px 5px; border:1px solid #999; }
ul.services li a:hover
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }
ul.services li ul		
{ margin-left:20px; }
ul.services li			
{ overflow:hidden; }
 
ul.clients li a			
{ display:block; float:left; width:138px; padding:0px 5px; line-height:25px; height:23px; text-align:center; border:1px solid #F0F0F0; }
ul.clients li a:hover
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }
 
ul.services li a.selected,
ul.clients li a.selected
{ color:#222222; line-height:25px; padding:0px 5px; border:1px solid #222222; background:#999 url('../images/hover_services.png'); }

Clients list demo, columns of unequal height

And here is a demo of how what we coded looks like. Being done with HTML and CSS, we move forward to jQuery coding to map services and clients together.

The jQuery

As you've seen in the demo the two columns do not share the same height. If you have many services and few clients, or few services and lots of clients, it is very likely that the two columns will not be of equal height. We can easily fix that with the following jQuery code:

1
2
3
4
5
6
// resize column for same height
var servicesHeight = $('.services').height(); // get height of services ul
var clientsHeight = $('.clients').height(); // get height of clients ul
// check who's bigger and set height accordingly
if(servicesHeight>clientsHeight) $('.clients').height(servicesHeight); 
   else $('.services').height(clientsHeight);

You can view a demo with the equal height columns problem solved. Next piece of code is the one creating the behavior necessary when clicking on services.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// if services on the left are clicked
$('.services a').click(function(){
   $('.selected').attr('class',''); // a service is clicked, make any, if selected, as not selected
   // when we click one service we need to emphasize that it is selected
   $(this).attr('class','selected'); // set current link as selected	
 
   // get the services classes
   var classesString  = $(this).parent().attr('class');
   var classes = classesString.split(' '); // now classes contains all class attributes of the service clicked
   // loop through all classes
   for(var i=0;i < classes.length;i++)
      {
      // set selected to all clients that have such a service
      $('.clients li.'+classes[i]+' a').attr('class','selected');
      }
});

When clicking a client, same thing happens but exactly the other way. We first get the class attribute of the client to check out the services bought and then loop through those services and set them as selected. Pretty neat! Here's the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// if clients on the right are clicked
$('.clients li a').click(function(){
   $('.selected').attr('class',''); // a client is clicked, make any, if selected, as not selected
   // when we click one client we need to emphasize that it is selected
   $(this).attr('class','selected'); // set current link as selected	
 
   // get the client's classes
   var classesString  = $(this).parent().attr('class');
   var classes = classesString.split(' '); // now classes contains all class attributes of the client clicked
   // loop through all classes
   for(var i=0;i < classes.length;i++)
      {
      // set selected to all services that were bought by the client
      $('.services li.'+classes[i]+' a').attr('class','selected');
      }
});

And we're done. You can check out the final demo over here and download the source codes over here. If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

23

NOV 2009 2

How to properly design your links

I have seen a lot of poorly designed websites. One aspect that makes me say that a website is poorly developed is how links are designed and how one can interact with a link across a website. First of all, we click on links with the mouse pointer, which points to a precise and small location. Secondly, what if someone uses a mobile platform like the iPhone or the Android? If your link is small enough, people browsing the site with a mobile device may have some serious issues navigating through your website.

Fixing the issues

The first thing you should do is set display inline to your links - display block won't work because text will not flow naturally after the link. Next step is to add a few pixels of padding to your link. Perhaps 2 pixels top and bottom and 3 or 4 pixels on the sides would do just fine and make your links better.

Now, if you don't think doing so will improve your site just make two links ( one as described above and one however you usually do ) and ask some non technical person to click the links - embed those links in a decent text paragraph.

Some examples

nyromodal screenshot

Furthermore, to backup my idea, here are some perfectly good examples. Thickbox has a small text link in the bottom right corner. It does have an extra feature: the modal window can be closed by pressing the esc key. Without the escape key Thickbox would be really hard to close on a mobile platform. How precise can you in clicking small "close" text links? Facebox is better than Thickbox as it has a close button which is decent, big enough. NyroModal has a tiny X button which I have trouble clicking on my iPhone. Fancybox also has an X button which is a bit bigger than the one used by NyroModal and which works somewhat better.

fancy menu screenshot

A really good example would be a close button that would resemble the one I have designed for the sliding menu with modal windows, which was published a while ago over Freelancer Magazine (NOTE: I don't want to brag about the menu tutorial, its just that it was the example that came in mind. If you know any other modal window plugins that have proper close buttons let me know).

If you liked this article you can subscribe to our RSS feed and stay updated as new articles get published.

22

NOV 2009 2

Building an awesome sliding menu with modal windows using jQuery

jQuery awesome menu screenshot

I just published the second part of a great tutorial over Freelancer Magazine. The tutorial covers building modal windows for a sliding menu to expand its functionalities. Here's how you can build an awesome navigation menu with jQuery. Please note that this is the second part of a two part tutorial which will help you build a complex menu.

12

NOV 2009 4

Showcase of beautiful UK medical designs

After looking through the stats of the site I realized that you really like showcase articles. Therefor, here's a brand new awesome showcase of UK medical websites. You will see in here websites of hospitals, private clinics, doctors and more.

All about cosmetic surgery

allaboutcosmeticsurgery.co.uk screenshot

Body Tite

bodytite.eu screenshot

Andrew Yelland

andrewyelland.com screenshot

Cadogan Clinic

cadoganclinic.com screenshot

Enhance Cosmetic Surgery

enhancecosmeticsurgery.co.uk screenshot

Surgical Art

surgicalart.co.uk screenshot

Alex D. Karidis's website

nipntuck.co.uk screenshot

Katherine Corbett Clinic

kcclinics.co.uk screenshot

Make Yourself Amazing

mya.co.uk screenshot

Harley Medical

harleymedical.co.uk screenshot

Similar posts will follow. I could use a helping hand in finding really unique and original pieces of material so please let me know about any websites you may have similar to these ones.If you liked this article you can stay updated and get new content via our RSS feed.

Page 5 of 11« First...34567...10...Last »