CodeCall - Programming Forum

**BlaineSch** · #1 (**permalink**) 06-25-2009, 02:40 PM

Well I stole the graphics from codecall so I should atleast show you guys!

I just made a navigation using 2 images both of which I stole from here. Basically it just remembers where you go better. I think its kinda neat. Just thought I would share

Moving Nav

HTML Code:

<html>
<head>
<title>Moving Nav</title>
<style>
body {
	background: #abab9d;
	border: 0px;
	margin: 0px;
	padding:100px;
}
div.navigation {
	background: url('http://i41.tinypic.com/6ga2w8.gif') repeat-x;
	background-position: 6px 0px;
	width:750px;
	height:34px;
	border: 0px;
	padding: 0px;
}
div.navigation div.left {
	float:left;
	height:34px;
	width:8px;
	background:url('http://i40.tinypic.com/n3m8md.gif');
}
div.navigation div.right {
	float:right;
	height:34px;
	width:8px;
	background:url('http://i40.tinypic.com/n3m8md.gif') 8px 0px;
}
div.navigation div.active {
	background: #39789b;
}
div.navigation div.float {
	float:left;
	font-size: 10pt;
	color: 4a77a0;
	text-align:center;
}
a.nav, a.nav:link, a.nav:visited, a.nav:hover {
	color:white;
	display:block;
	margin-top: 8px;
	height:26px;
	width: 70px;
	text-decoration:none;
}
</style>
<script>
	var pos = 8; //put your offset here - for me it is 8px
	var inc = 20; //how often a move should happen
	var moves = 7; //how many moves you wish to make
	var width = 10; //this is how big each move is
	var saved = 0; //dont touch this one
	var time = 0; //dont touch this one
	/*
		NOTE: moves * width = link width; //in my case 7*10=70px!!!!
	*/
	function move(dir) {
		if(dir == "left") {
			pos -= width;
			document.getElementById('navigation').style.backgroundPosition = (pos)+"px 0px";
		} else {
			pos += width;
			document.getElementById('navigation').style.backgroundPosition = (pos)+"px 0px";
		}
		time -= inc;
		return true;
	}
	function change(i) {
		if(saved > i) {
			zero = 0;
			while(zero < moves*(saved-i)) {
				time += inc;
				setTimeout("move('left')",time);
				zero++;
			}
			saved = i;
		} else if(saved < i) {
			zero = 0;
			while(zero < moves*(i-saved)) {
				time += inc;
				setTimeout("move('right')",time);
				zero++;
			}
			saved = i;
		}
		return true;
	}
	change(2);
</script>
</head>
<body id="one">
<div class="navigation" id="navigation">
	<div class="left"> </div>
	<div class="float" onmouseover="change(0)"><a href="#" class="nav">Link1</a></div>

	<div class="float" onmouseover="change(1)"><a href="#" class="nav">Link2</a></div>
	<div class="float active" onmouseover="change(2)"><a href="#" class="nav">Link3</a></div>
	<div class="float" onmouseover="change(3)"><a href="#" class="nav">Link4</a></div>
	<div class="float" onmouseover="change(4)"><a href="#" class="nav">Link5</a></div>
	<div class="float" onmouseover="change(5)"><a href="#" class="nav">Link6</a></div>
	<div class="right"> </div>

</div>
</body>
</html>

This line changes the default background one

Quote:

change(2);

This is the active one should be the second if the one above is 2

Quote:

<div class="float active"

All the numbers in the links need to be in order.

I have added comments so you can easily set the width and speed and such.

**Jordan** · #2 (**permalink**) 06-25-2009, 02:57 PM

Very nice looking! I thought you were using the TP theme?

**BlaineSch** · #3 (**permalink**) 06-25-2009, 03:04 PM

What TP theme?

Glad you like it!

**Jordan** · #4 (**permalink**) 06-25-2009, 03:13 PM

At the very bottom, to the left of Contact Us, change the theme to TP Style. That is the Total Penguin Theme.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Clipboard Game	Jordan	Games	3471	Today 12:14 AM
CodeCall: April Newsletter, 09	Jordan	Announcements	13	09-06-2009 09:43 PM
CodeCall: A Month in Code, October	Jordan	Announcements	5	11-15-2008 01:08 AM
CodeCall Contest #3	Jordan	Announcements	3	09-10-2007 09:28 AM

CodeCall - Programming Forum

User

Quick Menu

Member Sites

Site Sponsors

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)