GDev Resources.com - Grouped Pulldown

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

Grouped Pulldown: IE4 Nav4 NS6
Created by: Ron Grafe
Version 1.0
Version Date: 10/4/2001

A Pulldown list where you can manually 'Page' through the links. All you have to do is select 'Next Group' from the pulldown and it will go to the next group (group size is adjustable) of links. If you see a link you like just select it and you will automatically go to that page. There are two versions of this script, one that opens the new page in the existing window and one that opens the new page in a new window.

DEMO: Grouped Pulldown-(existing window) ( get code )
DEMO: Grouped Pulldown-(new window) ( get code )

Grouped Pulldown-(existing window)

Step 1: Select, Copy and paste the following code into the "HEAD" section of your HTML Page. Insert your own links/titles.

SELECT ALL

list1text[0] = "1) Website Abstraction"
list1value[0] = "http://www.wsabstract.com/"
list1text[1] = "2) Dynamic Drive"
list1value[1] = "http://www.dynamicdrive.com/"
list1text[2] = "3) Jeff Rule's DHTML"
list1value[2] = "http://www.ruleweb.com/dhtml/"
list1text[3] = "4) Builder.com"
list1value[3] = "http://www.builder.com"
list1text[4] = "5) WDVL.com"
list1value[4] = "http://www.wdvl.com"
list1text[5] = "6) WebDeveloper.com"
list1value[5] = "http://www.webdeveloper.com"
list1text[6] = "7) WebReference.com"
list1value[6] = "http://www.webreference.com"
list1text[7] = "8) Pageresource.com"
list1value[7] = "http://www.pageresource.com/"
list1text[8] = "9) W3C"
list1value[8] = "http://www.w3c.org"
list1text[9] = "10) Cool Tools 1"
list1value[9] = "http://builder.cnet.com/webbuilding/0-7701-8-4561792-1.html"
list1text[10] = "11) Cool Tools 2"
list1value[10] = "http://www.webreference.com/js/tools/"

</script>

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

SELECT ALL

<form name="lists" id="times">
<select name="list1" onChange="shortcut(this.form)" size="1">
<option selected value="noselect">Select a link or 'Next Group'</option>
<option value="next">Next Group</option>
</select>
</form>
<SCRIPT language="JavaScript" type="text/javascript">

// text of default option (not a link) - user can modify
	var defaultText="Select a link or 'Next Group'"

// Number of items displayed in pulldown list - user can modify 
	var displaycount=5

function genlist(){
listname.length = 0 
	listname.options[0]= new Option(defaultText,"noselect","","selected")
	listname.options[1]= new Option("Next Group","next")
	if(nextitem<list1text.length) {
		if(nextitem==0) {
			nextitem=nextitem+displaycount
		}
		for(var count=2;count<=displaycount; count++) {
			if(nextitem<list1text.length){
			listname.options[count]= new Option(list1text[nextitem],list1value[nextitem])
			}
			nextitem=nextitem+1
		}
		if(nextitem>=list1text.length) {
			listname.options[1].text="Start Over"
		}
	}else{
		nextitem=0
		for(var count=2;count<=displaycount; count++) {
			if(nextitem<list1text.length){
			listname.options[count]= new Option(list1text[nextitem],list1value[nextitem])
			}
			nextitem=nextitem+1
		}
	}
}

function shortcut(form){
var destsite
destsite=(form.list1.options[form.list1.selectedIndex].value)
	if(destsite=="next") {
		genlist()
	}else{
		if (destsite=="noselect"){
		alert("You must select a site for this to work!")
		}else{
		location.href=destsite
		} 
	}
}

var nextitem=0
var	listname=document.lists.list1
for(var count=2;count<=displaycount; count++) {
	if(nextitem<list1text.length){
		listname.options[count]= new Option(list1text[nextitem],list1value[nextitem])
	}
	nextitem=nextitem+1
}
</script>

Grouped Pulldown-(new window)

Step 1: Select, Copy and paste the following code into the "HEAD" section of your HTML Page. Insert your own links/titles.

SELECT ALL

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

SELECT ALL

// text of default option (not a link) - user can modify
	var defaultText="Select a link or 'Next Group'"

// Number of items displayed in pulldown list - user can modify 
	var displaycount=5

function openNewWin(destsite) {
		newWin=open(destsite,"","left=200,height=400,width=600,resizable,scrollbar,menubar,toolbar,status");
}

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