|
Randomizing
Dropdown by Pillywiggin
Randomizing
Dropdown Template (Download)
RandomizingDropdown Tutorial
Before I begin I want to express the
awesomeness of Pillywiggin for coming up with this script. Its
something I think has been needed for sometime, and load times for
larger dropdowns has been a Burdon on keenspace dropdowns for sometime,
and its nice to have this dropdown available for free use and displayed
where people can can download this template. The template itself
as well as some of the description you will find in this tutorial come
from the author. so I think fan art for Pillywiggin is due to
anyone who finds use of this script.
At any rate like the original neat easy to follow numbers. taking
it slowly step by step. So lets get this started.
1) 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.
2)Copy the intro of the script.
This section is for the credits and a little
description marker so that people reading your script can understand it
a little better..
//lines
starting with two slashes are comments/instructions
//Keenspace dropdown developed by Pillywiggins modified slightly for
the dropdown directory by Phact0rri
// Web Site: http://togizoushi.keenspace.com/
//This code is freely distributable but is prohibited from being resold
for profit
//DO NOT CHANGE LINES UNLESS INSTRUCTED
|
3)Add all the sites included in the dropdown
In the first bit of code you will add every site
you want to ever appear on the dropdown. In the section below
eleven defaults are listed. however you can continue adding lines
following the pattern below. At the end of the section there is
also the place for the COMICTOTAL this is the total count of comic
lines featured in the dropdown. keep in mind that there is a "0"
place this needs to be counted as an interger. Everything that
needs to be replaced is marked in red.
don't change anything but what is marked in red.
// Add your
comics here, formatted like this:
// comic# = new Array("url","name of comic")
comic0 = new Array("http://a.keenspace.com","A")
comic1 = new Array("http://b.keenspace.com","B")
comic2 = new Array("http://c.keenspace.com","C")
comic3 = new Array("http://d.keenspace.com","D")
comic4 = new Array("http://e.keenspace.com","E")
comic5 = new Array("http://f.keenspace.com","F")
comic6 = new Array("http://g.keenspace.com","G")
comic7 = new Array("http://h.keenspace.com","H")
comic8 = new Array("http://i.keenspace.com","I")
comic9 = new Array("http://j.keenspace.com","J")
comic10 = new Array("http://k.keenspace.com","K")
// This should be the number of comics on your list.
comictotal = NUMBER
function goto_URL(object)
{
window.location.href =
object.options[object.selectedIndex].value; |
An example for comparison:
// Add your comics here,
formatted like this:
// comic# = new Array("url","name of comic")
comic0 = new Array("http://decypher.keenspace.com/","Decypher")
comic1 = new Array("http://mindmistress.keenspace.com","Mindmistress")
comic2 = new Array("http://oddities.keenspace.com/","Oddities")
comic3 = new Array("http://peacekeepers.keenspace.com/","Peace
Keepers")
comic4 = new Array("http://docbrown.keenspace.com/","AI
(Alien Life)")
comic5 = new Array("http://nightwarrior.keenspace.com/","Nightwarrior
Limited")
comic6 = new Array("http://blackbirdcomic.keenspace.com/","blackbird")
comic7 = new Array("http://ymmot.keenspace.com/","Ymmot")
comic8 = new Array("http://grimtidings.keenspace.com/","Many
Tidings Grimm")
comic9 = new Array("http://legostargalactica.keenspace.com/","Legostar
Galactica")
comic10 = new Array("http://sgsb.keenspace.com/","Soulgrind
Squeeze box")
comic11 = new Array("http://praetor.keenspace.com/","Praetor")
comic12 = new Array("http://triquetracats.keenspace.com/","Triquetra
Cats")
// This should be the number of comics on your list.
comictotal = 13
function goto_URL(object)
{
window.location.href = object.options[object.selectedIndex].value;
} |
4)Setting up your header, banner, and URL
location
In this section you will add in your apperance
settings. That is you will be adding the name of your dropdown
group (ala header), the full url for the banner (keep in mind not to
have this linked from your normal image directory on keenspace or it
will come up broken. an image service like photobucket would be
the best bet to insure stability and non-broken banners), and the full
URL for your homepage or thread on the forums. Everything that
needs to be replaced is marked in red.
don't change anything but what is marked in red.
// Sets the homepage, banner
and header
document.writeln('<FORM><TABLE BORDER="0" CELLSPACING="0"
CELLPADDING="0"><TR><TD align="center"><FORM><A
HREF="HOMPAGE"><IMG SRC="IMAGE
LOCATION" border=0>');
document.writeln('<TR><TD align="center"><SELECT
NAME="selectName"
onChange="goto_URL(this.form.selectName)">');
document.write('<OPTION VALUE="">HEADER
<\/OPTION>');
document.write('<OPTION VALUE="">-----<\/OPTION>');
|
an example for comparison
// Sets the homepage, banner
and header
document.writeln('<FORM><TABLE BORDER="0" CELLSPACING="0"
CELLPADDING="0"><TR><TD align="center"><FORM><A
HREF="http://slightlyschizophrenic.keenspace.com/scifispace.html"><IMG
SRC="http://decypher.keenspace.com/keendrop/images/scifispace2.jpg"
border=0>');
document.writeln('<TR><TD align="center"><SELECT
NAME="selectName" onChange="goto_URL(this.form.selectName)">');
document.write('<OPTION VALUE="">SCIFI SPACE<\/OPTION>');
document.write('<OPTION VALUE="">-----<\/OPTION>');
|
5)Specifying your Array
I know, you see Array and you get scared.
Its nothing to complicated. What it means is that we will be
adding the number of webcomics you want listed on every page
load. There is not very much typing involved just adding a number
to specify your the number on your list. Everything that needs to
be replaced is marked in red. don't
change anything but what is marked in red.
// 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;
}
for (var i=0; i<(COMICLISTTOTAL); i++)
{
showcomic=eval("comic"+randarray[i])
document.writeln('<OPTION
VALUE="',showcomic[0],'">',showcomic[1],'<\/OPTION>');
}
|
And once again for continuities sake here's an
example to measure by.
// 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;
}
for (var i=0; i<(9); i++)
{
showcomic=eval("comic"+randarray[i])
document.writeln('<OPTION
VALUE="',showcomic[0],'">',showcomic[1],'<\/OPTION>');
} |
6)Closing out your script.
Now finally just a little script you need to
close out your dropdown box. it includes a link to the dropdown
directory and the end commands for the javascript.
// Adds link to the Dropdown
Directory
document.write('<OPTION VALUE="">-----<\/OPTION>');
document.write('<OPTION
VALUE="http://decypher.keenspace.com/keendrop/directory.htm">Dropdown
Directory
3.0<\/OPTION>');
document.writeln('<\/SELECT><\/TD><\/TR><\/TD><\/TR><\/FORM><\/TABLE>');
|
7) And
thats all. Just close and save.
next you'll
need to save this text document as dropdown.js The dropdown can be what
ever you want it to be, I just use that for simplicities sake.
8) upload it
to your keenspace site.
once you ftp
your way into your keenspace site you can just upload the dropdown.js
file, into your public_html folder. I suggest making a new
directory called scripts and put the Js file in there. again so you
remember where it is on your keenspace site.
9)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. but once your ready to spread this script
around, and link it to your site, just put this little code where every
you want it on your Index_template.html
<script
language="javascript"
SRC="http://mysite.keenspace.com/scripts/dropdown.js">
</SCRIPT> |
10)
Give yourself a pat on the back.
Your dropdown
should be done and once you upload your Index_template.html with the
new script tag, to your workspace folder on the keenspace ftp, and
trigger a manual update your dropdown should be set and ready to go.
If you messed up somewhere or just want to full script, that we made
today. I've included it below. all the things you
need to change are of course still in red.
//lines
starting with two slashes are comments/instructions
//Keenspace dropdown developed by Pillywiggins modified slightly for
the dropdown directory by Phact0rri
// Web Site: http://togizoushi.keenspace.com/
//This code is freely distributable but is prohibited from being resold
for profit
//DO NOT CHANGE LINES UNLESS INSTRUCTED
// Add your comics here, formatted like this:
// comic# = new Array("url","name of comic")
comic0 = new Array("http://a.keenspace.com","A")
comic1 = new Array("http://b.keenspace.com","B")
comic2 = new Array("http://c.keenspace.com","C")
comic3 = new Array("http://d.keenspace.com","D")
comic4 = new Array("http://e.keenspace.com","E")
comic5 = new Array("http://f.keenspace.com","F")
comic6 = new Array("http://g.keenspace.com","G")
comic7 = new Array("http://h.keenspace.com","H")
comic8 = new Array("http://i.keenspace.com","I")
comic9 = new Array("http://j.keenspace.com","J")
comic10 = new Array("http://k.keenspace.com","K")
// 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 homepage, banner and header
document.writeln('<FORM><TABLE BORDER="0" CELLSPACING="0"
CELLPADDING="0"><TR><TD align="center"><FORM><A
HREF="HOMPAGE"><IMG SRC="IMAGE
LOCATION" border=0>');
document.writeln('<TR><TD align="center"><SELECT
NAME="selectName"
onChange="goto_URL(this.form.selectName)">');
document.write('<OPTION VALUE="">HEADER
<\/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;
}
for (var i=0; i<(COMICLISTTOTAL); i++)
{
showcomic=eval("comic"+randarray[i])
document.writeln('<OPTION
VALUE="',showcomic[0],'">',showcomic[1],'<\/OPTION>');
}
// Adds link to the Dropdown Directory
document.write('<OPTION VALUE="">-----<\/OPTION>');
document.write('<OPTION
VALUE="http://decypher.keenspace.com/keendrop/directory.htm">Dropdown
Directory
3.0<\/OPTION>');
document.writeln('<\/SELECT><\/TD><\/TR><\/TD><\/TR><\/FORM><\/TABLE>');
|
And hope this works out for you. And if it
does be sure to thank Pillywiggin, or better yet post on the forums and
let us know that it turned out great.
|
|