Posts Tagged ‘navigation’

Enhanced Navigation

Monday, August 16th, 2010

This is a project I’m working on for my current employer, Storefront Consulting. The client requested we modify the core Magento category filtering to allow for several features unavailable in the core version of Magento Enterprise. They wanted to be able to apply multiple options under the same filter, and make the options available throughout the site, not just in the catalog module.

Here are some screen shots from the demo version with test products.

Here’s the template for non-catalog pages:
Site Wide

And here’s the template for catalog pages and the “view all” category page:
View All

Circle Navigation

Thursday, April 15th, 2010

This is the model for what was supposed to be an information site sort of like a wiki but in which the information is updated every couple years at most.  The project is currently on hold and hopefully will not include such a silly navigation system.  Nonetheless I wanted to share the model and how I implemented it here because of the unusual nature.

Naturally I could have made it an image map or use flash (gross to both) but I wanted to keep it simple and accessible, so I used javascript and math.

jQuery(document).ready(function(){
	$("#circle").mousemove(function(e){
		var center = $(this).offset();
		center.left += 242;
		center.top += 242;
		var mouse = {'left': e.pageX, 'top': e.pageY};
		var distance = Math.sqrt(Math.pow(mouse.left - center.left, 2) + Math.pow(mouse.top - center.top, 2));
		var angle = Math.atan2( mouse.left - center.left, mouse.top - center.top ) *(180/Math.PI) + 180;
		var debug;
		if(distance < 60){
			debug = "self management";
		} else if(distance < 90){
			debug = "nps universal";
		} else if(distance < 197){
			if(angle > 325 || angle < 35){
				debug = "i";
			} else if(angle < 325 & angle > 252){
				debug = "ii";
			} else if(angle < 252 & angle > 180){
				debug = "iii";
			} else if(angle < 180 & angle > 107){
				debug = "iv";
			} else if(angle > 35 & angle < 107){
				debug = "v";
			}
		} else if(distance < 228){
			debug = "supervision etc";
		}
		console.log(debug);
	});
})

It's more of a proof of concept because the project is on hold, but I found the solution fairly elegant.