GDev Resources.com

Top Navigation - Include

Home

Forums

Index

Terms

Developer Resources

DynamicScroller

Scripts

Javascripts
• Navigation
• Miscellaneous

DHTML
• Navigation
• Scrollers

Miscellaneous
Scripts-In-Action

MultiMedia

• Flash
• Music Loops

Recommends

• WebWiz Forums
• Macromedia HomeSite
• Jasc Paint Shop Pro
• Xara Products
• SWiSH

Shareware/Freeware

• Nonags
• Tucows
• ZDNet

Coding References

• ASCII Table
• CSS Property Table
• HTML Tag Attributes

Code Generators

• Cool Tools 1
• Cool Tools 2

NavSwap: IE4 Nav4 NS6
Created by: Ron Grafe
Version 1.0
Version Date: 6/14/2001

NavSwap is a space-saving site navigation tool. With NavSwap you can group like pages together for more organized page listings. Each page group is a single element in an array. NavSwap automatically adds or deletes a new line to the "Group Index" as you add or delete elements to the array. If the list of pages in any group is longer than the viewing window you can scroll down, scroll up, jump to the top, and start or stop the scroll.

DEMO: NavSwap

Step 1: Copy the following file into the same directory as your web page. File: Nsfunctions.js

Step 2: Select, Copy and paste the following code into the "HEAD" section of your HTML Page.

SELECT ALL

var titlearray = new Array()
titlearray[1]="MyMainPages"
titlearray[2]="MyTutorialPages"
titlearray[3]="MyExternalLinks"

var textarray = new Array()
textarray[1] = "<font type='times' size='2' style='color:black'>"
+ "<table width='140' align='left' border='0' bgcolor='white'>"
+ "<tr><td width='140' align='left' id='times'>"
+ "<table width='140' ><tr>"
+ "<td>•</td><td><a href='Javascript:myalert()'><font type='times' size='2' style='color:black'>Main Page 1</font></a></td></tr>"
+ "<td>•</td><td><a href='Javascript:myalert()'><font type='times' size='2' style='color:black'>Main Page 2</font></a></td></tr>"
+ "<td>•</td><td><a href='Javascript:myalert()'><font type='times' size='2' style='color:black'>Main Page 3</font></a></td></tr>"
+ "<td>•</td><td><a href='Javascript:myalert()'><font type='times' size='2' style='color:black'>Main Page 4</font></a></td></tr>"
+ "<td>•</td><td><a href='Javascript:myalert()'><font type='times' size='2' style='color:black'>Main Page 5</font></a></td></tr>"
+ "<td>•</td><td><a href='Javascript:myalert()'><font type='times' size='2' style='color:black'>Main Page 6</font></a></td></tr>"
+ "<td>•</td><td><a href='Javascript:myalert()'><font type='times' size='2' style='color:black'>Main Page 7</font></a></td></tr>"
+ "<td>•</td><td><a href='Javascript:myalert()'><font type='times' size='2' style='color:black'>Main Page 8</font></a></td></tr>"
+ "<td>•</td><td><a href='Javascript:myalert()'><font type='times' size='2' style='color:black'>Main Page 9</font></a></td></tr>"
+ "</table><br>"
+ "</td></tr></table></font>"

textarray[2] = "<font type='times' size='2' style='color:black'>"
+ "<table width='140' align='left' border='0' bgcolor='white'>"
+ "<tr><td width='140' align='left' id='times'>"
+ "<table width='140' ><tr>"
+ "<td>•</td><td><a href='Javascript:myalert()'><font type='times' size='2' style='color:black'>Tutorial Page 1</font></a></td></tr>"
+ "<td>•</td><td><a href='Javascript:myalert()'><font type='times' size='2' style='color:black'>Tutorial Page 2</font></a></td></tr>"
+ "<td>•</td><td><a href='Javascript:myalert()'><font type='times' size='2' style='color:black'>Tutorial Page 3</font></a></td></tr>"
+ "</table><br>"
+ "</td></tr></table></font>"

textarray[3] = "<font type='times' size='2' style='color:black'>"
+ "<table width='140' align='left' border='0' bgcolor='white'>"
+ "<tr><td width='140' align='left' id='times'>"
+ "<table width='140' ><tr>"
+ "These External links will open another window"
+ "<td>•</td><td><a href='http://www.builder.com/' target='_blank'><font type='times' size='2' style='color:black'>CNET Builder.com</font></a></td></tr>"
+ "<td>•</td><td><a href='http://www.WDVL.com/' target='_blank'><font type='times' size='2' style='color:black'>WDVL.com</font></a></td></tr>"
+ "<td>•</td><td><a href='http://www.webdeveloper.com/' target='_blank'><font type='times' size='2' style='color:black'>Webdeveloper.com</font></a></td></tr>"
+ "</table><br>"
+ "</td></tr></table></font>"
</script>

Once the above code is copied into the HEAD tag change the HTML content of each of the "textarray[ ]" elements to the group of links that you want displayed in the viewing window. Then change the "titlearray[ ]" elements to the corresponding titles for each group. CAUTION: Be careful to maintain 'double-quotes' at the beginning and end of each line and 'single-quotes' inside the beginning and end of each line of the textarray[ ] and titlearray[ ] elements.

Step 3: Select, Copy and paste the following code into any container tag within the BODY section of your HTML page.

SELECT ALL

<table width="156" height="278" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="150" bgcolor="#FFFFFF" id="times">
<table width="150" cellpadding="0" cellspacing="1" border="1">
<tr>
	<td width="150" bgcolor="#FFFFCC" align="center" valign="bottom" id="times">
	<table width="150" cellpadding="0" cellspacing="1" border="1">
	<tr>
	<td width="50" align="center" valign="bottom" id="times">
	<a href="Javascript:prevtext()" id="timesb">Prev</a>
	</td>
	<td width="50" align="center" valign="bottom" id="times">
	<a href="Javascript:nexttext()" id="timesb">Next</a>
	</td>
	<td width="50" align="center" valign="bottom" id="times">
	<a href="Javascript:shifttotop()" id="timesb">Top</a>
	</td>
	</tr>	
	<tr>
	<td width="50" align="center" valign="bottom" id="times">
	<a href="Javascript:scrolldown()" id="timesb">Down</a>
	</td>
	<td width="50" align="center" valign="bottom" id="times">
	<a href="Javascript:scrollup()" id="timesb">Up</a>
	</td>
	<td width="50" align="center" valign="bottom" id="times">
	<a href="Javascript:stopall()" id="timesb">Stop</a>
	</td>
	</tr>	
	<tr>
	<td width="100%" align="center" valign="bottom" colspan="4" id="times">
	<script language="Javascript">
	if(isNav){
		document.write("<ilayer id='titlecontainerns' clip='0,0,150,14'><layer id='titlens'></layer></ilayer>")
	}else{
		document.write("<DIV id='title' style='position:relative; width:30; height:14'></DIV>")
	}
	</script>
	</td>
	</tr>	
	</table>
	</td>
</tr>
<tr>
	<td width="150" height="180" valign="top" align="left" id="times">
	<script language="Javascript">
	if(isNav){
		document.write("<ilayer id='textcontainerns' clip='0,0,142,180'><layer id='textns'></layer></ilayer>")
	}else{
		document.write("<DIV id='textcontainer' style='position:absolute;clip:rect(0 142 180 0)'><DIV id='text' style='position:absolute; width:142; height:180'></DIV></DIV>")
	}
	</script>
	</td>
</tr>
<tr>
	<td width="150" align="center" valign="top" bgcolor="#FFFFCC" id="timesb">
	GROUP INDEX
	<table width="150" cellpadding="0" cellspacing="0" border="1" bgcolor="#FFFFCC">
		<script language="Javascript">
		for(var i=1;i<textarray.length;i++) {
			document.write("<tr><td align='center' width='150' id='times'><a href='javascript:void(0)' onclick='nexttext("+i+");'>"+titlearray[i]+"</a></td></tr>")
		}
		</script>
	</table>
	</td>
</tr>
</table>
</td></tr></table>

Step 4: Type the event onLoad="setobjects()" into your BODY tag. Example: <BODY onLoad="setobjects()">

Site Generated and Maintained using Macromedia Homesite

• HtmlCodeTutorial.com
• DevGuru.com
• Builder.com
• WDVL.com
• WebDeveloper.com
• WebReference.com
• Pageresource.com
• W3C

Javascript Resources

• Website Abstraction
• JavaScript.com
• JavaScript Source

DHTML Resources

• Website Abstraction
• Dynamic Drive
• Jeff Rule's DHTML

Java Resources

• JavaBoutique.com
• Sun Download Center

ASP Resources

• ASP101
• LearnASP
• PowerASP
• ASPZone

ScriptKingdom.com
Script repository
and resource site

www.hotscripts.com