Lazy Pirate’s Screen Navigator

I got addicted about infographics, that I made a blog just for them. You can check it out on tumblr.

Well, we know that these infographics are so big. Sometimes the size doubles your screen. So I created a navigator of some sort. Hope you’ll enjoy it

Feel free to change the logo in the center.

First of you need to add this script.

var scroll = {

/* http://blog.piratelufi.com/2011/11/lazy-pirates-screen-navigator/ */

	smooth : 1,
	delay : 1,
	to : function(x,y)
	{
		window.scrollBy(x,y);
		scroll.delay = setTimeout("scroll.to("+x+","+y+")",scroll.smooth);
	},
	stop : function()
	{
		clearTimeout(scroll.delay);
	}
}

The ‘smooth’ value declares the delay per pixel. For example, you want to scroll by 5 pixels. In every 1 millisecond, the page will scroll by 5 pixels. That is what smooth is for.

The ‘delay’ is a constant variable so don’t bother changing it.

Here is for the html part. Feel free to modify it.

<table id="lazy-navi">
<tr>
	<td class="corner top left" onMouseOver="scroll.to(-1,-1);" onMouseOut="scroll.stop();">&#x2196;</td>
	<td class="top" onMouseOver="scroll.to(0,-1);" onMouseOut="scroll.stop();">&uarr;</td>
	<td class="corner top right" onMouseOver="scroll.to(1,-1);" onMouseOut="scroll.stop();">&#x2197;</td>
</tr>
<tr>
	<td class="left" onMouseOver="scroll.to(-1,0);" onMouseOut="scroll.stop();">&larr;</td>
	<td class="middle"><a title="Lazy Pirate" href="http://blog.piratelufi.com/2011/11/lazy-pirates-screen-navigator/" target="_new"><img width="20px" src="http://i40.tinypic.com/a0xi8i.png" /></a></td>
	<td class="right" onMouseOver="scroll.to(1,0);" onMouseOut="scroll.stop();">&rarr;</td>
</tr>
<tr>
	<td class="corner bottom left" onMouseOver="scroll.to(-1,1);" onMouseOut="scroll.stop();">&#x2199;</td>
	<td class="bottom" onMouseOver="scroll.to(0,1);" onMouseOut="scroll.stop();">&darr;</td>
	<td class="corner bottom right" onMouseOver="scroll.to(1,1);" onMouseOut="scroll.stop();">&#x2198;</td>
</tr>
</table>

Just insert it inside the body. Here comes the cute part the CSS.

table#lazy-navi {
	position: fixed;
	bottom: 0; right: 0;
	cursor: pointer;
	color: white;
	font: bold 1em tahoma;
	text-align: center;
}

table#lazy-navi td {
	padding: 2px;
	background: #000;
	opacity:0.4;	filter:alpha(opacity=4);
}

table#lazy-navi td:hover {
	background: black;
	opacity:1; filter:alpha(opacity=100);
}

You can remove the opacity or improve it if you want. I think it isn’t the cross browser one. Finally, you can style it again using css. I added rounded corners.

.corner.top.left {
	border-radius: 0px;
	border-top-left-radius: 10px;
}

.corner.top.right {
	border-radius: 0px;
	border-top-right-radius: 10px;
}

.corner.bottom.left {
	border-radius: 0px;
	border-bottom-left-radius: 10px;
}

.corner.bottom.right {
	border-radius: 0px;
	border-bottom-right-radius: 10px;
}

.top {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.bottom {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.left {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.right {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

Here’s a screenie

Now all you need to do is hover and enjoy. Don’t forget to visit the infogfx blog!

lufi

the pirate geek

More Posts - Website