This is why choosing the right host for your site is very crucial. And to actually look for a host that is free and that is reliable just makes the task even more challenging. Here’s the good news though, there really are good free web hosting providers around. You just have to be very picky to be able to point yourself on the right one.

A few basic things to consider:

1. Check if the hosting company has been around for at least a year. This is a better way to avoid yourself from signing up on a hosting company only to find out after a couple of days or so that they aren’t reachable anymore. This could definitely cause your website a big problem especially if you don’t regularly do backups for your site and other issues.

2. Look for a host that says no banner ads. Some free web hosts, in exchange for the free service that they would provide your website, put tons of ads on to your site. Often times, this really could cause irritation for your visitors.

3. Look for a host that offers free technical support to their free hosting customers. This is very helpful especially when you’re not that very technical yourself. A company that has a good support system is often a sign that they are indeed providing a good service for their customers.

4. Look for a host that guarantees at least 99% uptime.. To actually know if a host is reliable is really very hard to determine.. Since usually you’ll just get to know about a host’s reliability once you have been with them. So your best shot is at least go with a host that gives high guarantees for their reliability.

Free hosting provider I recommend

So far, I’ve been with a few free web hosts and have experienced some of the worst. One free web hosting provider I highly would recommend is Doteasy.com. There are other free good web hosts too, but I have to admit, Doteasy has better offers than others.

Doteasy is a free hosting company that is well established, so that gives me an assurance that my website is safe and secured. They also strictly implement banner-free, this means no annoying ads on your website. Aside from that, I find their support team very reliable especially at times I’m having trouble on my site. I can’t be more thankful, because they still are very willing to help me even when the problem was basically caused by me. And as for their reliability, for a free host, I can say that I hit the jackpot with them. They guarantee 99.9% uptime and they have kept my website up and running all the time.

I get all of their great service for free, this is certainly a very good deal that I just can’t pass up. As of the moment, I can’t think of a better host or just even close on providing the service I get from Doteasy. And to get your own free web hosting account with them, you just need to click here to sign up and open a free account.

This second part will cover building a modal window and coding its behavior. If you don’t know what I already explained, please go back to the first article here and come back once you finish that one. However, if XHTML, CSS and jQuery are your friends, you may pick things up as we go, so just go ahead and read this part of the tutorial.

Let me remind you the concept we described in the previous article. We have a horizontal menu with a few categories. Each category has multiple subcategories and each such subcategory may contain a random number of products. For easier and faster movement of users thorough the site, we won’t reload the page once a subcategory is clicked. Instead, we will display all products in a modal window.

Here’s a screenshot of the menu and one simple modal window.

How does the modal work?

Once someone clicks a subcategory link, the modal window will be displayed and the products will show up. The modal will close when products are clicked, and the browser is targeted to a new page, when the user clicks the close button or when the overlay is clicked. It isn’t that hard is it?

The main issue is that we need different content in the modal window. Each subcategory will have its own products and we need to find out which products to display. We will do this with the help of jQuery as you’ll find out in just a few minutes.

But first, lets get to coding the structure and design of the modal window. First of all, we have the overlay mask, which will be an empty div. We need to make sure the overlay mask will be on top of all site content but beneath the modal window, so we will use z-index:1100 for modal content and z-index:1000 for the overlay. The overlay won’t be displayed unless a subcategory is clicked, so display:none is also mandatory. You should also choose your favorite color for the overlay, and set it absolutely to top left 0 pixels.

<div></div>

#overlay-mask {
	display:none;
	z-index:1000;
	background-color:#333;
	position:absolute;
	top:0;
	left:0;
	}

The modal window will be something like this. An outer div to hold everything in place, another inner div to hold the products, and a link that will server as a close modal window button. Because we want the button to span all the way, we had to use an outer div for the content of the modal, so that’s why there’s 2 divs and not just one.

<div class="all-rounded">
<div>
		<a class="thumb" href="http://www.ultimatewasher.com" target="_new"><img src="images/wash1.jpg" alt="Wash1" width="102" height="102" /><span>First thumb</span></a>
 
		<a class="thumb" href="http://www.city-rentals.ca" target="_new"><img src="images/wash2.jpg" alt="Wash2" width="102" height="102" /><span>Second</span></a>
 
		<a class="thumb" href="http://www.tonsoftools.com" target="_new"><img src="images/wash3.jpg" alt="Wash3" width="102" height="102" /><span>Third</span></a>
 
		<a class="thumb last" href="http://www.carriergenerators.com" target="_new"><img src="images/wash4.jpg" alt="Wash4" width="102" height="102" /><span>Fourth</span></a></div>
<a class="close bottom-rounded">Click to close</a></div>

As you see, each product is in fact a link containing a product thumbnail and some text. Lets see how we style them. the purpose of the tutorial is creating the modal window, not styling it, so the style is really basic, especially if you take out the rounded corners.

#overlay-content {
	width:500px;
	}
 
#overlay-content div {
	width:450px;
	padding:25px;
	padding-bottom:10px;
	}
 
#overlay-content a.close {
	display:block;
	padding:0px;
	border-top:1px solid #333;
	font-size:15px;
	line-height:25px;
	height:25px;
	text-align:center;
	}
 
#overlay-content a.thumb {
	display:block;
	width:102px;
	height:122px;
	padding:0px;
	margin:0px 14px 0px 0px;
	float:left;
	text-decoration:none;
	}
 
#overlay-content a.thumb img {
	display:block;
	width:102px;
	height:102px;
	padding:0px;
	border:0px;
	}
 
#overlay-content a.thumb span {
	display:block;
	width:102px;
	height:20px;
	padding:0px;
	text-align:center;
	color:#999;
	}
 
#overlay-content a.last {
	margin-right:0px;
	}
 
#overlay-content div {
	overflow:auto;
	}

The first two lines are just setting the dimensions of the modal window, for the purpose of a modal window that contains four products, all on the same line. The anchor tag with the “close” class is in fact the button that will be displayed in the bottom of the modal that will be used to close to modal window if needed.

The thumb classed anchor will contain the image and the text description contained in a span tag. As all thumbnails have a small right margin, we need the additional last class to remove the right margin from the last product in the modal. The overflow is used to cancel the collapsing of the inner div that contains only floating elements.

We finished with structure and styling, so lets move on to jQuery coding. Take a look at the code in its entirety and try to understand it. The explanations will follow it just below.

var opacity = '0.8'; // can be up to 1
 
$('a[name=modal]').removeAttr('href'); 	//javascript on, no need to redirect to a link here
$('a[name=modal]').click(function ()
	{
	var maskHeight = $(document).height();
	var maskWidth = $(document).width();
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var contentWidth = $('#overlay-content').width(); // width
	var contentHeight = $('#overlay-content').height(); // and height of content area
 
	//Set height and width to mask to fill up the whole screen
	$('#overlay-mask').css({'width':maskWidth,'height':maskHeight});
	$('#overlay-mask').css('opacity',opacity);
	$('#overlay-mask').css('display','block');
 
        // put the overlay content area in the center of the window
	$('#overlay-content').css('display','block');
	$('#overlay-content').css('left',(windowWidth-contentWidth)/2);
	$('#overlay-content').css('top',(windowHeight-contentHeight)/2);
	});
 
	// move overlay content to center of the window
$(window).resize(function ()
	{
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var contentWidth = $('#overlay-content').width(); // width
	var contentHeight = $('#overlay-content').height(); // and height of content area
 
	//Set height and width to mask to fill up the whole screen
	$('#overlay-mask').css({'width':maskWidth,'height':maskHeight});
	$('#overlay-content').css({'left':(windowWidth-contentWidth)/2});
	$('#overlay-content').css({'top':(windowHeight-contentHeight)/2});
	});
 
var $scrollingDiv = $("#overlay-content");
$(window).scroll(function()
	{
	$scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop()) + "px"}, "fast" );
	});
 
$('#overlay-mask').click(function ()
	{
	$('#overlay-mask').css('display','none');
	$('#overlay-content').css('display','none');
	});
 
$('.close').click(function ()
	{
	$('#overlay-mask').css('display','none');
	$('#overlay-content').css('display','none');
	});

The opacity variable will set the overlays opacity. It would look really odd with a non transparent overlay, so perhaps anything below .8 will do just fine. Except if you have it completely transparent when there isn’t going to be any overlay.

We find all anchor tags that has “modal” as name, and remove their href attribute, as we don’t want to move to another page before seeing the overlay, don’t we?

Then we have the on click behavior. As soon as an anchor link that has an attached modal window is clicked, we get the sizes of the document as well as those of the window. We also check out the width and height of the content inside the modal window.

Next, we set the width and height of the overlay mask using css attributes. We want the overlay to span across the entire page, right? We then set its opacity and make it appear in the page by changing its display property from none (set in the css) to block. We do the same with the content div, and also put it in the center of the browser window.

We also have a resize behavior, which will be triggered if you resize the browser after the page has loaded. If that happens, we check out the dimensions of the document and browser as well, and reset the content window in the center of the page. In the same time, we modify the width and height of the overlay so that it matches the changes triggered by resizing the browser.

If the page has a scrollbar and we scroll either up or down, we use the scroll jQuery trigger to animate the modal back to the center of the page. The stop function there before the animation will make sure that older animations will be stopped if the scroll is used continuously or with small pauses.

Finally, once the overlay mask or close button is clicked, we need to close the modal window, and the last two lines of code do just that.

One small, but real problem!

We haven’t taken in consideration the most important aspect. Each time we load the modal window the content needs to be different. The above code only works for the same content in the modal window such as a contact form, and we need to fix this issue.

First of all, we remove content from the overlay-content inner div and leave it empty. This div will auto-populate with proper content when a subcategory is clicked. Next, we add rel attributes to modal anchor links (those that were named “modal”). We will use unique rel attributes to identify the content we need to load.

We will also add divs that have classes corresponding to each rel attribute, which will contain the content we will load on click. We have to make this divs hidden so they don’t pop up god know where inside your site’s layout. Simple right? But how do we do this via jQuery? Even simpler, using only three lines of code.

Once a modal anchor is clicked we identify its rel attribute, get the html contents of the div that has the same class name as the rel attribute, then populate the inner div in the overlay content with the html content we found. Cool! Here’s the code for that, which we add just below the .click function.

var rel = $(this).attr('rel');
var modal_content = $('.'+rel).html();
$('#overlay-content div').html(modal_content);

And we’re done. You can check out the demo over here, or perhaps you’d like the source code? If so, you can download the source codes for the first part, which is just the sliding menu from here, or if you want the real deal you can get full source codes for modal window too from here.

Seems like everyone is a blogger these days, publishing articles on personal or freelance business blogs, updating statuses on twitter – even commenting on previously written articles. Face it, we’re blogging. But how can we stand out in a sea of keyboard happy drones? Repent from these sins and maybe the blog Gods will forgive you.

1. Pride
You can’t do it on your own, or maybe you can; don’t get me wrong, self belief is a good thing. But when you are starting a blog, one of the fastest ways to increase traffic is to partner up with other bloggers. Link exchange, link backs, shared links, they all work; find one that’s compatible with your niche then blog happy.

2. Envy
All blogs are not created equal, there is never going to be another gossip blog like Perez Hilton’s. Many have tried, but it’s still not the same. The faster you realize that you can’t imitate other successful blogs, the sooner your blog will become successful. So go out there and do your own thing, in fact look at what everyone is doing and do the exact opposite; you’ll be surprised with the results.

3. Gluttony
You can’t have all the followers, the twitter traffic machine , spamming, following everybody with the hopes they follow you back, all these are no no’s. These aren’t genuine connections, they are really not interested in what you have to say.

4. Lust
The lust for success and money from blogging. Honestly, there is no money in blogging; you can have a successful blog but I don’t see it bringing you any riches. If there is someone out there making millions from blogging please contact me!! I know there are blogs out there bringing in more than what my condo costs in day, but they just got simply lucky. 1 out of every 10,000 blogs get lucky and the other 9,999?? Well half of them fade to obscurity, and the other half are the true bloggers; still producing great content and informing and entertaining their readers all over the world..from the bedroom to the cubicle.

5. Anger
Don’t start a blog for a sake of hate, a blog solely created to lash out at someone or a group of people will eventually die. It becomes annoying because it’s the same thing over and over again. Protesting is different.

6. Greed
Take everything a step at a time. Have you ever been to those blogs with a sidebar filled with ‘Advertise Here’. Walk before you run, get the traffic before you start putting ad space up on your site. And go easy on the google ads, you don’t want your blog looking like the classifieds.

7. Sloth
Unnecessary widgets and apps on your blog makes it look unattractive and over crowded, if you don’t want any visitors to your site leave it there or put them up.

Remember always keep it short and sweet, don’t be the drunkard at the bar that won’t stop talking.

There are a few ways that bloggers make money:

(1). The most common way for bloggers to make money is through ads. When blogging first started, Adsense and Blogads were the way to create income. But since that time loads of other ways have emerged. Some of these are Chitika’s eMinimalls, Adbrite, Adgena, AVN, and many more.

(2). Sponsorships are another way to earn money with your blog. Once a few bloggers and a few companies figured out how lucrative this could be for both sides, it was on from there. They found it was an excellent way to advertise and to sell.

(3). Another way is through affiliate programs. By signing up with affiliate programs like Amazon or Clickbank, you can advertise and sell their products on your blog for a commission. If you’re a good marketer, this can be a very lucrative way for you to go.

(4). You can sell and advertise ’services’ as well and make money. These would be things like eBooks and tele-seminars or marketing courses.

(5). You can write for other people’s blogs. Lots of people who have blogs don’t do their own writing. You can write and post for them and earn yourself some money that way. If you’re good with SEO (Search Engine Optimization), then it might pay you to look into this.

(6). Some blogs operate strictly on a ‘donation’ basis. They leave it up to their visitors to leave something if they find any value in what they read or their experience on the blog. They put on a lot of free stuff, and then depend on charity for how much they own.

(7). Then you can sell retail. Blogs have become a popular way of selling retail items. Anything from T-shirts to kitchenware can be found on a blog. A blog is just a dynamic way to advertise practically anything.

(8). Consulting is another form of revenue earning on blogs. If someone is an expert on something, then they can set up a blog and interact with people and give advice and charge a fee. Most bloggers always try to come across as an expert in their niche, so keep an eye out for the so-called ‘experts’ in any given field.

Anyway, these are just a few of the ways you can make money blogging. If you’ve never tried blogging you owe it to yourself to see if you’re any good. Who knows, after a while you may be able to quit your regular job and make a better living blogging, and have more fun as well.

I took a look at TaskCity, one of the newer platforms for matching professional freelancers with outsourced projects.  This free market for freelancers and employer services is focused squarely on the following categories of work:

• Web Development
• Software Development
• Networking & Information Systems
• Graphic Arts & Design

I didn’t really find any projects related to writing, marketing or administrative services, so please note that this platform is not suited to every type of freelancer at this point in time. From browsing the site, the greatest number of existing project listings appear to be technical in nature.

When you first use any project-matching service, it pays to describe your best professional and personal attributes in your profile. Promote your relevant education, training and experience, upload samples of your work, link to your portfolio, and even speak to your working style and personality. By perfecting your profile, you will increase your chances for winning your first project within the service. And once you do score that first job, each additional project will be easier to win, since you’ll have some new credibility via favorable ratings and referrals from project employers.

Once your profile is set, searching for projects on TaskCity is quite easy. From a usability point of view, the interface is clean and it provides good flexibility for searching on a number of important dimensions. Once you find an appealing project (there are over 1500 open projects at the time of writing), you can submit your bid and proposal. If all works out well, the employer will choose your services and pay through TaskCity’s escrow-like payment system. This payment method provides a level of credibility and trust to the system, and is crucial when matching people who probably have not met face-to-face or interacted previously.

There is no cost to register for TaskCity, and the only fees are related to actual transactions between buyer and seller. If you’re a technical freelancer looking for new avenues to find work, it couldn’t hurt to give this service a test run to try and win new business.

How It Works
Install is a quick and painlessly delivered through the Adobe AIR system. Just a couple clicks and less than a minute later, we’re ready to go. When you startup the software, GTime asks you to enter your Google account login credentials. From there onward you can create new timesheets or access existing ones. For a website redesign project I’m working on, I found it best to correlate one ‘timesheet’ to that unique project and client. This timesheet is stored on Google’s servers as a spreadsheet, and its individual records are accessible either through the GTime software or direct on the web in your Google account.

There are two options for creating and categorizing a timed task, which I did today for creating a new website logo for the project. The first option and easiest for my style is to use GTime’s simple start / pause / stop timer. The ’start task’ button helps you track timed tasks as you work on them, and immediately lets you enter that time record into your timesheet when you click ’stop’. The entry I made showed the date, hours spent (1.45), and let me add a category (Graphic Design) and a task note (logo redesign for client X). The second option is to view all task records for a timesheet, and manually create and/or update the record of your choice. This works well for recording time spent away from your computer, like at a client meeting.

One of the nice features that I enjoy is the reporting module. For each project, you can get a weekly or monthly view of how much time you’ve spent within each category of work. For my web redesign project, I know that coding isn’t my strongest area of work, and it’s hours are disproportionately large vs. my graphic design category. With this report, I can use accurate time data to make an informed decision on whether or not to outsource development for future projects.

Recommendation
Overall, this utility does the trick for me – it saves me time from my current spreadsheet-input process, and is much cheaper than the competition at $20 USD for a single lifetime license.

I definitely recommend this tool for the individual freelancer who needs a better way to manage their time. Whether you’re billing clients by hour, or merely want to see an overview of where your time is spent in a given week, the 14-day trial of GTime is definitely worth a shot. You can download the free trial at http://gtimetracking.com and give it a whirl.

Product Features

• Software works on PC, Mac and Linux platforms
• Very fast install with no server software
• Secure and reliable, with smooth usability
• Start / pause / stop tray timer for recording tasks
• Immediate and automatic synchronization between Google and GTime
• Lowest-cost option vs. the competition
• Leverage all the features offered by Google Docs
  • Export your timesheets from Google to Excel, Open Office, PDF, CSV, HTML, Text
  • Ability to share timesheets publicly, or privately with other Google users
  • Automatic timesheet backup and versioning

If you’d like to learn more about the author of GTime Tracking, check out freelancer Nicholas Bilyk’s blog.

1. select categories, wait for a page to load
2. select a subcategory, wait for another page to load
3. check out products
4. click to go to desired product

The typical web user only wants to click once or twice to get to the product they want. And if clicks are unavoidable, make sure page loads are minimized! The more clicks and the more page loading they have to go through, the higher the risk they will get lost and never come back to your site. The good news is that you can achieve a good navigation menu that reduces page reloads.

This article is an in-depth tutorial on how you can achieve an expandable navigation menu using valid xhtml coding, valid css and a bit of javascript.

The concept

In order to achieve a fully functional menu for our huge website, we need one that will enable users to choose a category or subcategory in a timely manner, then browse hassle-free for the product they like. In Part 1 of the tutorial, we will create a horizontal bar that contains all the main categories of the products our customer is selling. This menu bar will expand so users will see all sub-categories. In Part 2 of the article, we’ll create the functionality where clicking on a sub-category will trigger an overlay that displays a list of the individual products.

In the image above there’s a sketch of what the site layout should be. We have the menu bar, right under the menu comes a header that can contain images, paragraphs of text, news. You get the picture. Then comes the content area. The menu will expand and push the header together with all elements that come after it down the page, as you can see in the following image.

Sneak peak at what we’re building here

Just in case you cannot wait for the end of the article, just check out the demo over here.

Coding the HTML and CSS

The navigation bar will consist of an unordered list. I have chosen this tag because menus contain lists, therefore an unordered list is the best way to go for this. The part of the menu that will slide will be contained by a div, each item in the navigation menu having a separate div for its information. We will have the header and the content section also contained in a div. Here’s a view on the XHTML structure.

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
61
62
63
64

<!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>
	<!– head meta tags, css , javascript links will be here–> 	
</head> 	
<body> 	
	<div id="wrapper"> <!– used only for cosmetic purposes. IE: The site background image in the top –> 		
		<ul id="menu" class="all-rounded"> <!– the menu ul I talked about. all-rounded class will round the corners –> 				
			<li><a href="" target="_self">home</a></li>
			<li><a target="_self" >cleaning</a></li>
			<li><a target="_self" >cooking</a></li>
			<li><a target="_self" >gardening</a></li>
			<li><a href="" target="_self">about us</a></li> 			
		</ul> 			
	<div class="menu-extend cleaning"> <!– extended menu div –>
		<ul> 					
			<li><a href="" target="_self">Pressure Washers</a></li>
			<li><a href="" target="_self">Pressure Washers Accessories</a></li>
			<li><a href="" target="_self">Hoses and Water Fittings</a></li>
			<li><a href="" target="_self">Water Pumps</a></li>
			<li><a href="" target="_self">Dry Vacuums</a></li>
			<li><a href="" target="_self">Wet Vacuums</a></li>
			<li><a href="" target="_self">Industrial Vacuums</a></li>
			<li><a href="" target="_self">Specialist Vacuums</a></li>
			<li><a href="" target="_self">Vacuum Cleaner Bags</a></li>
		</ul>
 		<ul>
			<li><a href="" target="_self">Steamers</a></li>
			<li><a href="" target="_self">Scrubber Dryers</a></li>
			<li><a href="" target="_self">Buffers</a></li>
			<li><a href="" target="_self">Floor Care Chemicals</a></li>
			<li><a href="" target="_self">Carpet Care Chemicals</a></li>
			<li><a href="" target="_self">Carpet Cleaning Machines</a></li>
		</ul>
		<ul>
 			<li><a href="" target="_self">Trolleys</a></li>
			<li><a href="" target="_self">Household Cleaning Chemicals</a></li>
			<li><a href="" target="_self">Vehicle Cleaning Chemicals</a></li>
			<li><a href="" target="_self">Cleaning Equipment</a></li>
			<li><a href="" target="_self">Brooms and Brushes</a></li>
			<li><a href="" target="_self">Interchange System</a></li>
		</ul>
		<span class="clear">&nbsp;</span> 
	</div>
 
	<div class="menu-extend cooking"> <!– same as above div –>
		expanded menu goes in here for cooking
		<span class="clear">&nbsp;</span>
	</div>
 
	<div class="menu-extend gardening">
 		expanded menu goes in here for gardening
		<span class="clear">&nbsp;</span>
	</div>
 
	<div id="header"> <!– header div with an image –>
		<img src="images/header.jpg" width=900 height=200 alt="Header" /> 		</div>
 
	<div id="content"> <!– finally the content area –>
		<h1>Fancy menu</h1>
		<p>Fancy menu info goes here </p>				 		</div>
	</div> 	
</body> 
</html>

I chose to round up the corners of the menu. To create this effect we will use some CSS level 3 and browser specific markup. The navigation bar will also have vertical separators between the items. The separator is consisted of two different lines, each with a custom color. We won’t use images for the separators. Instead we will use the css border property. Each list item in the navigation bar will have a 1px solid left border, and a 1px solid right border. The first element in the list and the last one won’t have the left border, and right border respectively. Here’s the html markup of the modified list, to reflect that there won’t be the above mentioned borders, and the css code:

8
9
10
11
12
13
14

<ul id="menu" class="all-rounded">
	<li class="no-left-border"><a href="" target="_self">home</a></li>
	<li><a target="_self" >cleaning</a></li>
	<li><a target="_self" >cooking</a></li>
	<li><a target="_self" >gardening</a></li>
	<li class="no-right-border"><a href="" target="_self">about us</a></li>
</ul>

.all-rounded	{
	border-radius:9px;
	-moz-border-radius:9px;
	-webkit-border-radius: 9px;
	}
 
/* these are the rounded corners */
#menu  {
	display:block;
	margin:0px auto;
	width:898px;
	border:1px solid #DD4CAB;
	height:48px;
	background:url('../images/menu_bg.jpg') repeat-x; color:#DD4CAB;
	 } 
 
/* ul style */
#menu li {
	display:block;
	width:178px;
	height:48px;
	line-height:48px;
	float:left;
	text-align:center;
	border-right:1px solid #DD4CAB;
	border-left:1px solid #AD3B87;
	}
 
/* li items style */
#menu li.no-left-border {
	border-left-style:none;
	}
 
/* no border as we said */
#menu li.no-right-border {
	border-right-style:none;
	}

Because I chose to round the corners of the menu, there are some issues while hovering the menu items, so the links that are held by the li items will have to have rounded corners as well. The first link in the menu will have rounded corners on the left side, while the last one will have rounded corners on the right side. Here’s the code for that:

#menu li a	{
	display:block;
	height:48px;
	color:#DD4CAB;
	text-decoration:none;
	}
 
#menu li a:hover	{
	display:block;
	height:48px;
	color:#DD4CAB;
	text-decoration:none;
	background:url('../images/menu_bg_hover.jpg');
	}
 
#menu li.no-left-border a:hover  {
	border-top-left-radius:9px;
	border-bottom-left-radius:9px;
	-moz-border-radius-topleft:9px;
	-moz-border-radius-bottomleft:9px;
	-webkit-border-top-left-radius:9px;
	-webkit-border-bottom-left-radius:9px;
	}
 
#menu li.no-right-border a:hover  {
	border-top-right-radius:9px;
	border-bottom-right-radius:9px;
	-moz-border-radius-topright:9px;
	-moz-border-radius-bottomright:9px;
	-webkit-border-top-right-radius:9px;
	-webkit-border-bottom-right-radius:9px;
	}

Coding the behavior of the menu using jQuery

I am not going to reinvent the wheel here, but jQuery seems to be the best javascript framework out there. If you’re not familiar to jQuery you can find some great tutorials and examples over here.

Javascript for menus? Are you insane!

Some people out there say you must not use javascript for navigation under any circumstances. I am sorry guys, but if you write your code professionally, using javascript for menus can seriously enhance your site’s functionality. The trick they’re talking about is what do you do when javascript is unavailable in the visitors browsers? Well, you have to code your menu in such a way it has progressive enhancement and works just fine if javascript is off. And yes, this menu achieves progressive enhancement. If javascript is turned off, the menu will be directly visible, including the part that should slide when needed. Nothing is inaccessible. Moreover, search engine’s bots will see the site just as if they were a visitor without javascript, so search engine optimization is preserved if using this menu.

Let’s get down to the jQuery

jQuery uses html IDs and classes to identify elements in the html page that it needs to work with. Our menu currently has unique ID, but the “cleaning”, “cooking” and “gardening” links don’t, so we add a class for each of them. The classes are unique too.

8
9
10
11
12
13
14

<ul id="menu" class="all-rounded">
	<li class="no-left-border"><a href="" target="_self">home</a></li>
	<li><a target="_self" class="cleaning-but">cleaning</a></li>
	<li><a target="_self" class="cooking-but">cooking</a></li>
	<li><a target="_self" class="gardening-but">gardening</a></li>
	<li class="no-right-border"><a href="" target="_self">about us</a></li>
</ul>

In order to achieve progressive enhancement, we must first disable javascript and load the menu page. So far, due to our code the menu displays in its entirety, including the part that in a few minutes will slide beautifully if javascript is on. But if it has to slide, it has to be hidden first, and this is the trick we pick out from our sleeves. The first thing we’re to do with jQuery is to hide the sliding part of the menu. By doing this, people having javascript turned on will not see the menu until they click to expand it. They will only see the menu bar. Here’s the jQuery code needed to achieve this:

$('.menu-extend').hide();

The rest is simple. When you click one item in the navigation bar, you are taken to a page. This happens for the Home and About us links. When you click one of the links in the middle of the menu, the menu will slide and reveal the contents. If there’s another menu visible, clicking to expand one other item will make the expanded section slide back under the navigation bar, then the required content will slide back out. How cool is that?

jQuery code step by step
There’s a bit of jQuery to be written here, so you can take a peak below to the full source code, then continue to the part I dice the code in pieces and explain what I’ve done.

jQuery(document).ready(function($)
 	{
 	// start the magic
 	// if javascript is on, the menu will work ok
 	// Therefore we hide the expanded menu 	$('.menu-extend').hide();
 	$('.clear').height(0);
 	// if the "Detailed menu" button is clicked, fade it out and fade in the "Close menu button"
	// also slide the expanded menu into place
 	$('.cleaning-but').click(function ()
 		{
 		var isVisible = $('.menu-extend').is(':visible');
 		var isVisiblecleaning = $('.cleaning').is(':visible');
 		var isVisiblecooking = $('.cooking').is(':visible');
 		var isVisiblegardening = $('.gardening').is(':visible');
 		if(isVisible)
 			{
 			if(!isVisiblecleaning)
 				{
 				if(isVisiblecooking)
 					{
 					$('.cooking').slideUp("1000", function() { $('.cleaning').slideDown("1000") });
 					}
 				else if(isVisiblegardening)
 					{
 					$('.gardening').slideUp("1000", function() { $('.cleaning').slideDown("1000") });
 					}
 				}
 				else
 				{
 				$('.cleaning').slideUp("1000");
 				}
 			}
 		else
 			{
 			$('.cleaning').slideDown();
 			}
 	    });
 	$('.cooking-but').click(function ()
 		{
 		var isVisible = $('.menu-extend').is(':visible');
 		var isVisiblecleaning = $('.cleaning').is(':visible');
 		var isVisiblecooking = $('.cooking').is(':visible');
 		var isVisiblegardening = $('.gardening').is(':visible');
 		if(isVisible)
 			{
 			if(!isVisiblecooking)
 				{
 				if(isVisiblecleaning)
 					{
 					$('.cleaning').slideUp("1000", function() { $('.cooking').slideDown("1000") });
 					}
 				else if(isVisiblegardening)
 					{
 					$('.gardening').slideUp("1000", function() { $('.cooking').slideDown("1000") });
 					}
 				}
 				else
 				{
 				$('.cooking').slideUp("1000");
 				}
 			}
 		else
 			{
 			$('.cooking').slideDown();
 			}
 	    });
 	$('.gardening-but').click(function ()
 		{
 		var isVisible = $('.menu-extend').is(':visible');
 		var isVisiblecleaning = $('.cleaning').is(':visible');
 		var isVisiblecooking = $('.cooking').is(':visible');
 		var isVisiblegardening = $('.gardening').is(':visible');
 		if(isVisible)
 			{
 			if(!isVisiblegardening)
 				{
 				if(isVisiblecooking)
 					{
 					$('.cooking').slideUp("1000", function() { $('.gardening').slideDown("1000") });
 					}
 				else if(isVisiblecleaning)
 					{
 					$('.cleaning').slideUp("1000", function() { $('.gardening').slideDown("1000") });
 					}
 				}
 				else
 				{
 				$('.gardening').slideUp("1000");
 				}
 			}
 		else
 			{
 			$('.gardening').slideDown();
 			}
 	    });
 	});

The first jQuery code is $(’.clear’).height(0);. This is used to set the height of the clearing div to 0. We added a clearing div to each of the expanded menu’s divs because all content inside them floats to the left, and would therefor cause the expanded menu div to collapse. By adding the clearing div we avoid that, but we also add 20 unnecessary pixels to the expanded menu’s height. We fix this problem with the code mentioned above.

Then, we have three different onclick functions. Each one does the same thing, but is triggered by a different element in the menu. I will explain the first one. $(’.cleaning-but’).click(function () is used to trigger clicking on the href tag that contains the link to cleaning menu. That link is identified by the cleaning-but class we added previously. When that link is clicked we don’t have just one behavior, so everything has to go inside a function.

var isVisible = $(’.menu-extend’).is(’:visible’); is used to check if there’s any menu currently expanded. The variable will hold either true or false values. Here, the expanded menu is identified by the general class used for it menu-extend. We will use the same process to check what expanded menu is in fact expanded, be it the one for cleaning category, or another one. We will identify those by their unique classes cleaning, cooking and gardening.

We first check if the menu is visible. if(isVisible) will return true if there’s an expanded menu, or false otherwise. If false, we will simply slide down the menu using $(’.cleaning’).slideDown(); located on the else side of the if. If there’s an expanded menu, we check to see if it is exactly the one we clicked. If it is the same one, we will slide it back up using $(’.cleaning’).slideUp(”1000″);. If it is another one, we slide up that div using a similar piece of code, then slide down the one needed. $(’.cooking’).slideUp(”1000″, function() { $(’.cleaning’).slideDown(”1000″) }); slides up the cooking expanded menu, and after that process is completed, it slides down the cleaning menu. The syntax for such a process is $(’identifier’).slideUp(duration, callback event – the one triggered after first one is completed);

Here’s a live demo version of the menu. Zip archive download will be available once we publish the second part of this article!

In the concept part we said that the contents of the expanded menu are in fact subcategories, and clicking on a subcategory will reveal the products located in that category. But that is another story and we will discuss it in the second part of the article.

Coming up next
Part 2: Displaying menu items using overlay

While compiling a proposal for internet marketing consulting, I knew I had a couple excel reports from a previous job that could be repurposed for this project. Unfortunately, I hadn’t opened the documents in a couple years and couldn’t remember or find the password. Obviously, contacting my previous company for the key was not an option.

Maybe Microsoft can offer an online service to securely store user passwords for documents? I’d love the ability to submit a “forgot password” request and receive a new one via email, much like every online login service in the industry. Oh well, until then we have to use utilities and cracks to access our forgotten files.

I ended up finding a good solution with step-by-step details and a free download for excel password recovery at Petri IT Knowledgebase. Their guide simply shows you how to use the utility’s two available options for recovery, and didn’t take more than a few minutes to complete. Give it a try if you ever find yourself in a similar (embarrassing) predicament as mine.

In 2009, Netflix awarded a $1 million USD contest prize to researchers who could significantly improve their proprietary recommendation engine. In theory, the more Netflix DVDs that customers add to their watch list, the longer that subscriber will remain with the service, since new movies will just keep coming. The prize may seem hefty, but Netflix was so impressed with the results that they granted the prize and immediately announce that there would be a sequel to the recommendation competition.

So how can a freelance web developer implement an enterprise-quality recommendation engine for your smaller e-retail clients? You may think that you’d have a tough time competing with Amazon or Netflix on functionality. However, low-priced service providers are now focused on enabling that process of discovery for small-site shoppers. These engines have low monthly costs, can be easily implemented in an afternoon, and work on the idea that you need to incorporate behavioral targeting in addition to monitoring a customer’s previous purchases.

Strands Recommender provides one of the low-cost recommendation engine options. Their engine suggests products of interest based on a specific customer’s purchases, visits, searches, wish lists, and other behavior. The system is quite flexible as well, with back-end capability to configure your recommendation display widgets. The retailer can also create rules and product filters for each widget, where results can be previewed prior to being applied to the site.

Click for more detailed information on Strands’ eCommerce solutions. They can help make your eCommerce clients successful, and strengthen your site proposals by creating additional ROI.

The timing might be good – the slide into recession for certain countries is making people think about moving abroad in an attempt to escape. Also, you can emigrate to countries perceived as offering a better quality of life and lower cost of living.

After scouring the web for more advice on working visas, I found quite a few services that assist independent workers in navigating the complexities of immigration and visa law. Global Visas is one firm, and they offer services for both private individuals and corporate organizations to acquire Canadian visa, UK or US visas. From their site, it looks like they’ve had some good press mentions, and they offer some free guidance on their site about qualifying for various country visas.

Feel free to comment below on your experiences with these companies, or offer any advice you may have for taking the leap into a foreign land.