From CGWiki

The standard script will display the comics in the dropdown in the order you have listed.

The randomizing list script will display the names of the comics in a random order. The number of comics shown can be limited.

Contents 1 The Standard Script 2 Standard Script Tutorial 2.1 Load up a new document in your text editor 2.2 Copy the intro of the script 2.3 Edit the script so that your dropdown's picture and link are present 2.4 Create the header entry for your dropdown 2.5 Create the lines for each one of the comics present on your dropdown 2.6 Finish this up with the last bit of code. 2.7 And that's all 2.8 Upload it to your CG site 2.9 All thats left, is to link it to your site 3 Randomizing List Script 4 Randomizing List Script Tutorial 4.1 Second verse same as the first 4.2 Enter in the comics 4.3 Finishing up 4.4 Limiting the number of comics shown

The Standard Script

//lines starting with two slashes are comments/instructions
//Keenspace dropdown developed by Steve Tonks, modified for educational use by Scott Maddix
// Web Site: gear.keenspace.com
//This code is freely distributable but is prohibited from being resold for profit
//DO NOT CHANGE LINES UNLESS INSTRUCTED

function goto_URL(object) {
window.location.href = object.options[object.selectedIndex].value;
}

//IMG SRC URL should point to the absolute URL of the dropdown graphic
//The HREF tag should show where clicking on the image should take you,
//usually to a sign-up spot

document.writeln('<FORM" SIZE="500"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0"><TR><TD align="center"><FORM><A HREF="YOUR DROPDOWN HOMEPAGE URL"><IMG SRC="PICTURE URL" border=0>');
document.writeln('<TR><TD align="center"><SELECT NAME="selectName" onChange="goto_URL(this.form.selectName)">');

//If nothing is inside the quotes, the text is not a link
//If there is a meta-character included in the name, precede the character
//with a backslach "\" to keep it from interfering with the script
//add new lines as needed, based on these

document.write('<OPTION VALUE="">YOUR DROP DOWN TITLE<\/OPTION>');
document.write('<OPTION VALUE="">-----<\/OPTION>');

document.write('<OPTION VALUE="WEBCOMIC 1 URL">WEBCOMIC 1 Title<\/OPTION>');
document.write('<OPTION VALUE="WEBCOMIC 2 URL">WEBCOMIC 2 TITLE<\/OPTION>');

document.write('<OPTION VALUE="">-----<\/OPTION>');
document.write('<OPTION VALUE="'''http://cgwiki.comicgenesis.com/index.php/List_of_Dropdowns'''">Dropdown Directory 4.0<\/OPTION>');

document.writeln('<\/SELECT><\/TD><\/TR><\/TD><\/TR><\/FORM><\/TABLE>');

Standard Script Tutorial

Tutorial written by phactorri

Load up a new document in your text editor

Use a text editor ONLY. That is programs like Notepad and Simple text that do not add anything to the text. Do no not use a word processsor like MS Word, or Corel Word Perfect.

Copy the intro of the script

This section deals with everything from the credits of the drop down as well as the first part of the Java Script.

//lines starting with two slashes are comments/instructions
//Keenspace dropdown developed by Steve Tonks, modified for educational use by Scott Maddix
// Web Site: gear.keenspace.com
//This code is freely distributable but is prohibited from being resold for profit
//DO NOT CHANGE LINES UNLESS INSTRUCTED

function goto_URL(object) {
window.location.href = object.options[object.selectedIndex].value;
}

//IMG SRC URL should point to the absolute URL of the dropdown graphic
//The HREF tag should show where clicking on the image should take you,
//usually to a sign-up spot

Edit the script so that your dropdown's picture and link are present

In this section of the code there are two section in which you will need to edit to present your image and link. These sections are bolded. You need to include the full URL's for both the image and the link to your dropdowns's homepage or forum.

document.writeln('<FORM" SIZE="500"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0"><TR><TD align="center"><FORM><A HREF="YOUR DROPDOWN HOMEPAGE URL"><IMG SRC="PICTURE URL" border=0>');
document.writeln('<TR><TD align="center"><SELECT NAME="selectName" onChange="goto_URL(this.form.selectName)">');

//If nothing is inside the quotes, the text is not a link
//If there is a meta-character included in the name, precede the character
//with a backslach "\" to keep it from interfering with the script
//add new lines as needed, based on these

The bold sections in are where you should replace the script with your own information. Do not change anything but what is bolded. Here's an example.

document.writeln('<FORM" SIZE="500"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0"><TR><TD align="center"><FORM><A HREF="http://decypher.comicgen.com/keendrop/index.htm"><IMG SRC="http://decypher.comicgen.com/keendrop/keendroplogo.jpg" border=0>');
document.writeln('<TR><TD align="center"><SELECT NAME="selectName" onChange="goto_URL(this.form.selectName)">');

Create the header entry for your dropdown

In the next section of your script you will need to create the header in your dropdown. That is the first option entry or what the dropdown will say when you first load up the page. Again only change what is bolded.

//If nothing is inside the quotes, the text is not a link
//If there is a meta-character included in the name, precede the character
//with a backslach "\" to keep it from interfering with the script
//add new lines as needed, based on these

document.write('<OPTION VALUE="">YOUR DROP DOWN TITLE<\/OPTION>');
document.write('<OPTION VALUE="">-----<\/OPTION>');

For continuity sake here again is an example

document.write('<OPTION VALUE="">Keenspace Dropdown Directory<\/OPTION>');
document.write('<OPTION VALUE="">-----<\/OPTION>');

Create the lines for each one of the comics present on your dropdown

Now in this section things change a little bit. The code below shows example code for two comics. but you will probably want more than that. you will notice everything in the two lines are identical except the bolded parts. You can copy this snippet of code and use it list -EACH- comic you want listed. remember to change the title and urls to match each comic on your dropdown.

document.write('<OPTION VALUE="WEBCOMIC 1 URL">WEBCOMIC 1 Title<\/OPTION>');
document.write('<OPTION VALUE="WEBCOMIC 2 URL">WEBCOMIC 2 TITLE<\/OPTION>');

Here's an example:

document.write('<OPTION VALUE="http://decypher.comicgen.com">Decypher<\/OPTION>');
document.write('<OPTION VALUE="http://orion.comicgenesis.com">Beyond Reality<\/OPTION>');
document.write('<OPTION VALUE="http://pele.comicgenesis.com">Deity Permit<\/OPTION>');
document.write('<OPTION VALUE="http://angrymonkey.comicgenesis.com">Angry D. Monkey<\/OPTION>');
document.write('<OPTION VALUE="http://pimpette.comicgenesis.com">Pimpette and Associates<\/OPTION>');

Finish this up with the last bit of code.

Now that you are almost done there's only the last bit of code. One is to show people where you got the code to do this (and to give props to the dropdown directory) and the last is to close the script.

document.write('<OPTION VALUE="">-----<\/OPTION>');
document.write('<OPTION VALUE="http://cgwiki.comicgenesis.com/index.php/List_of_Dropdowns">Dropdown Directory 4.0<\/OPTION>');

document.writeln('<\/SELECT><\/TD><\/TR><\/TD><\/TR><\/FORM><\/TABLE>');

And that's all

Just close and save the text document as whateveryouwantyourfilenametobe.js

Upload it to your CG site

Once you ftp your way into your CG site upload the whatever.js file into your public_html folder. It's recommended to make a new directory called scripts and put the js file in there so you can remember where it is.

All thats left, is to link it to your site

You've probably seen this little html tag around, specially if you are on other dropdowns. Once you're ready to spread this script around put the code whereever you want it on your webpage.

<script language="javascript" SRC="http://mysite.comicgenesis.com/scripts/dropdown.js"> </SCRIPT>

Now give yourself a pat on the back.

Randomizing List Script

//lines starting with two slashes are comments/instructions
//This code is freely distributable but is prohibited from being resold for profit
//DO NOT CHANGE LINES UNLESS INSTRUCTED

// comic list
// comic# = new Array("url","name of comic")

comic0 = new Array("http://a.comicgen.com","A")
comic1 = new Array("http://b.comicgen.com","B")
comic2 = new Array("http://c.comicgen.com","C")
comic3 = new Array("http://d.comicgen.com","D")
comic4 = new Array("http://e.comicgen.com","E")
comic5 = new Array("http://f.comicgen.com","F")

// This should be the number of comics on your list.

comictotal=NUMBER

function goto_URL(object) {
window.location.href = object.options[object.selectedIndex].value;
}

// Sets the signup page, banner and subheading

document.writeln('<FORM" SIZE="500"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0"><TR><TD align="center"><FORM><A HREF="YOUR DROPDOWN HOMEPAGE URL"><IMG SRC="PICTURE URL" border=0>');
document.writeln('<TR><TD align="center"><SELECT NAME="selectName" onChange="goto_URL(this.form.selectName)">');

document.write('<OPTION VALUE="">YOUR DROP DOWN TITLE<\/OPTION>');
document.write('<OPTION VALUE="">-----<\/OPTION>');

// Create an array equal to the number of comics

var randarray=new Array()

for (i=0; i<comictotal; i++) { randarray[i]=i }

// Randomize the array

var i,r,tmp;

for (i=0; i<(comictotal); i++) { r=Math.floor(Math.random()*(comictotal)) temp = randarray[r] randarray[r] = randarray[i] randarray[i] = temp; }

// Display the comics

for (var i=0; i<(comictotal); i++) { showcomic=eval("comic"+randarray[i]) document.writeln('<OPTION VALUE="',showcomic[0],'">',showcomic[1],'<\/OPTION>'); }

document.write('<OPTION VALUE="">-----<\/OPTION>');
document.write('<OPTION VALUE="http://cgwiki.comicgenesis.com/index.php/List_of_Dropdowns">Dropdown Directory 4.0<\/OPTION>');

document.writeln('<\/SELECT><\/TD><\/TR><\/TD><\/TR><\/FORM><\/TABLE>');

Randomizing List Script Tutorial

Second verse same as the first

Complete steps 1 - 4 of the standard script tutorial.

Enter in the comics

You'll have a series of lines with the following pattern:

comic# = new Array("WEBSITE URL","COMIC NAME")
comic# = new Array("WEBSITE URL","COMIC NAME")
comic# = new Array("WEBSITE URL","COMIC NAME")
.
.
.
comictotal=NUMBER

Began numbering the comics at zero, not one. After all of the comics have been added there is a line where you input the number of comics listed. Note that because the comic numbers started with zero the comictotal will be larger then the last number listed.

Example:

comic0 = new Array("http://mindmistress.comicgenesis.com","Mindmistress")
comic1 = new Array("http://junkriot.comicgen.com","junkRIOT")
comic2 = new Array("http://blackaby.comicgenesis.com","Blackaby")
comic3 = new Array("http://nanda.comicgen.com","Ugly Girl")
comic4 = new Array("http://kudasai.comicgen.com","Shonen-ai Kudasai!")

comictotal=5

Finishing up

Complete steps 6 - 9 of the standerd script tutorial.

Limiting the number of comics shown

With the randomizing script, you have the option of limiting the number of comics show at one time. This is mainly useful for larger dropdowns. You need to replace the variable comictotal with a number. Make sure that the number is smaller than comictotal.

// Display the comics

for (var i=0; i<(comictotal); i++) { showcomic=eval("comic"+randarray[i]) document.writeln('<OPTION VALUE="',showcomic[0],'">',showcomic[1],'<\/OPTION>'); }

Example: the following code would pick a random 25 comics out from the total list.

for (var i=0; i<(25); i++) { showcomic=eval("comic"+randarray[i]) document.writeln('<OPTION VALUE="',showcomic[0],'">',showcomic[1],'<\/OPTION>'); }

.