Seting up a Virtual Host in Apache 2.2

The following steps will help you setup a virtual domain on apache 2.2 on Windows. Steps are very similar for OS X, only the location of the files will change.

In these steps I’ve used cowabunga.localhost as a test. The .localhost TLD is reserved for testing, so you can be guaranteed it won’t interfere with any real websites. This is the best practice to follow, if you create a virtual host of cowabunga.com, you will not be able to reach the real version of that site.

1. Edit httpd.conf
2. Uncomment the line Include conf/extra/httpd-vhosts.conf. Right after # Virtual hosts
3. Add the following above # Virtual hosts (replace C:\www with the path to your web root). Close and save it when done.

<Directory "C:/www">
 Order Deny,Allow
 Allow from all
</Directory> 

1. We’ll setup the follow virtual host site.
   1. cowabunga (C:\www\cowabunga). We’ll access this in the browser as cowabunga.localhost.
2. Edit httpd-vhosts.conf (located in apache root/conf/etc/)
3. Add the following to the bottom of httpd-vhosts.conf. Close and save it when done.

<VirtualHost *:80>
DocumentRoot "C:/www/cowabunga"
ServerName cowagunga.localhost
</VirtualHost>

<VirtualHost *:80>
DocumentRoot "C:/www/"
ServerName localhost
</VirtualHost>

1. That’s it for apache configuration. It’s now ready to host the virtual domain. We just need to tell Windows to go to our virtual host, rather than looking up the DNS.
2. Edit your “hosts” file. Available in one of the following places
   1. Windows 95, 98, ME: Windows directory
   2. NT, 2000, XP, 2003, Vista, 7: Windows folder\system32\drivers\etc\
   3. Mac OS X, iOS: /private/etc/hosts or /etc/hosts
3. Add the following line to the end of hosts. Close and save it when done.

127.0.0.1    burgess.localhost
127.0.0.1    localhost

1. Restart apache from the GUI or the command prompt using:

apache -w -n "Apache" -k restart

Animated scroll to internal links in JavaScript

Usually, I’m a big fan of UI libraries like jQuery and YUI. Don’t really like to re-invent the wheel. This is a function that’s quite easy to do in either of those libraries.

Unfortunately, I’m working on a project right now with very strict guidelines on it’s code, so it turns out I am unable to use any JavaScript UI Libraries. So, I set forth on putting this together.

There were a few resources I used that came in handy to create this, and I’ve given credit to those folk at the end of this post.

Part one: setInternalLinks

Run this function on page load. I use Simon Willison’s addLoadEvent to do this. It will search for all internal links on your page, and add a click listener to the animation function scrollToYOffset.

/**
* setInternalLinks
* Searches the page for any internal links and converts them to animated automatic scrolls
*/
function setInternalLinks()
{
	// grab all anchor links on the page
	var anchors = document.getElementsByTagName('a');
 
	for (var i = 0; i < anchors.length; i++) {
		var a = anchors[i];
 
		if (a.href && a.href.indexOf("#") != -1  // href has #
		   && ((a.pathname == location.pathname) || ('/' + a.pathname == location.pathname)) // path name of url is same as current
		   && (a.search == location.search)) { // query string of url is same as current
			var aName = a.href.substr(1, a.href.length - 1);
			a.onclick = function (e) {
				// checks if the caller event e exists and grabs the target (mozilla + webkit). Grabs the IE equivalent if not.
				var target = e ? e.target : event.srcElement;
				// the anchor name
				var anchorName = target.hash;
				// cut out the hash mark
				anchorName = anchorName.substr(1, anchorName.length - 1);
				// grab all the anchors on the page again
				anchors = document.getElementsByTagName('a');
 
				for (var j = 0; j < anchors.length; j++) {
					if (anchors[j].name == anchorName) {
						// found the right anchor. scroll to it!
						scrollToYOffset(anchors[j].offsetTop);
					}
				}
			};
		}
	}
}

Part two: scrollToYOffset

The method below is called by an onclick handler added by the setInternalLinks method. It’s a time-based animation with sinusoidal easing. Smooth and quick.

/**
* scrollToOffset
*
* @param yOffset	The vertical offset to scroll to
*/
function scrollToYOffset(iTargetY)
{
	// if the target is negative set it to 0
	iTargetY = iTargetY < 0 ? 0 : iTargetY;
 
	var frameInterval = 20; // 20 milliseconds per frame
 
	var totalTime = 750;
	// current scroll position: checks if window.pageYOffset exists (webkit + mozilla). If not, set's it to the IE equivalent
	var startY = window.pageYOffset ? window.pageYOffset : window.document.body.scrollTop;
 
	var d = iTargetY - startY; // total distance to scroll
	var freq = Math.PI / (2 * totalTime); // frequency
	var startTime = new Date().getTime();
 
	var tmr = setInterval(
		function () {
			// check the time that has passed from the last frame
			var elapsedTime = new Date().getTime() - startTime;
 
			if (elapsedTime < totalTime) { // are we there yet?
				var f = Math.abs(Math.sin(elapsedTime * freq));
				window.scrollTo(0, Math.round(f*d) + startY);
			} else {
				clearInterval(tmr);
				window.scrollTo(0, iTargetY);
			}
		}
	, frameInterval);
}

Above code has been tested in Firefox 3.6.6, Safari 5 and IE 7.

Credit for some help: Sitepoint: Make Internal Links Scroll Smothly with JavaScript and Cross-Browser.com: Animation Techniques