Go Back   CodeCall Programming Forum > Software Development > Classes and Code Snippets
Register Blogs Search Today's Posts Mark Forums Read

Classes and Code Snippets Post your source code and classes here

Reply
 
LinkBack Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old 06-25-2009, 02:40 PM
BlaineSch's Avatar
Code Warrior
 
Join Date: Apr 2009
Location: Trapped in my own little world.
Age: 19
Posts: 2,169
BlaineSch is a glorious beacon of lightBlaineSch is a glorious beacon of lightBlaineSch is a glorious beacon of lightBlaineSch is a glorious beacon of lightBlaineSch is a glorious beacon of lightBlaineSch is a glorious beacon of light
Send a message via MSN to BlaineSch
Javascript CodeCall Navigation!

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.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #2 (permalink)  
Old 06-25-2009, 02:57 PM
Jordan's Avatar
Administrator
 
Join Date: Nov 2005
Location: Hendersonville, NC
Posts: 24,556
Jordan is a name known to allJordan is a name known to allJordan is a name known to allJordan is a name known to allJordan is a name known to allJordan is a name known to all
Send a message via ICQ to Jordan Send a message via AIM to Jordan Send a message via MSN to Jordan Send a message via Yahoo to Jordan
Re: Javascript CodeCall Navigation!

Very nice looking! I thought you were using the TP theme?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #3 (permalink)  
Old 06-25-2009, 03:04 PM
BlaineSch's Avatar
Code Warrior
 
Join Date: Apr 2009
Location: Trapped in my own little world.
Age: 19
Posts: 2,169
BlaineSch is a glorious beacon of lightBlaineSch is a glorious beacon of lightBlaineSch is a glorious beacon of lightBlaineSch is a glorious beacon of lightBlaineSch is a glorious beacon of lightBlaineSch is a glorious beacon of light
Send a message via MSN to BlaineSch
Re: Javascript CodeCall Navigation!

What TP theme?

Glad you like it!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #4 (permalink)  
Old 06-25-2009, 03:13 PM
Jordan's Avatar
Administrator
 
Join Date: Nov 2005
Location: Hendersonville, NC
Posts: 24,556
Jordan is a name known to allJordan is a name known to allJordan is a name known to allJordan is a name known to allJordan is a name known to allJordan is a name known to all
Send a message via ICQ to Jordan Send a message via AIM to Jordan Send a message via MSN to Jordan Send a message via Yahoo to Jordan
Re: Javascript CodeCall Navigation!

At the very bottom, to the left of Contact Us, change the theme to TP Style. That is the Total Penguin Theme.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply



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

Advanced Search
Display Modes


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


All times are GMT -5. The time now is 10:35 AM.


vBulletin v3.8.0 ©2010, Jelsoft Enterprises Ltd.


no new posts

LinkBacks Enabled by vBSEO 3.1.0