Convert HTML Drop Downs to Java Script?

[Rat Boy]

Hello,

We have a forum at httr.cpnd.us

As you can see on that forum, we have drop down menus that are HTML coded. All was fine until we decided we wanted other pages outside of proboards as part of the site.

I would like to convert these drop downs to a java script and then call the file from the global header.

I have web hosting but am not sure on how to do the converting part.

Is there anyone that can and is willing to help?

[SubDevo]

Your dropdowns seem to be working fine with links outside of proboards.
Just use the complete URL in the value of the options and you should be fine.
If this isn't the issue, then please explain in more detail.

Regards,
SubDevo

[Rat Boy]

Hey SubDevo!

Thanks for responding.

I should have been a bit more clear, but I was on my iPhone and trying to be short.

These drop downs work great.

The problem is, if you go to our site, and then use the far right history drop down and go to one of those pages, I have built the header on my own from scratch to match the forum.

However, we currently have 18 pages like the one you chose in the History drop down.

So when I have to make a change to the drop downs, I have to manually edit 18 pages.

I saw the create page code in the code database, but I really don't want to go that route of coding 18 sub pages in my global header and having to load them all every time I visit a thread or whatever.

Make more sense?

I figured, if I could create these drop downs in one .js file, then upload to my host, then "call" that file from all the sub pages, then I could just edit that .js file when I need to make link changes instead of editing 18 html pages plus the global header.

Thanks in advance.

[Bennett 🚀]

Then put the Javascript in a file, save it, then call it
<script src="yourfile.js" type="text/javascript"></script>

[Rat Boy]

Right.

But how do I convert the HTML Drop Downs to Javascript?

I don't think I can just do a save as. ;D

[SubDevo]

Ok, this can be easily done.
Do you want ALL of your dropdowns (or just the "History") to load from a single js?
I have a feeling it would be nice to have all of your dropdown options loaded from the js...
Either way, to prepare, give each of your dropdowns a unique ID.
Just do this on the main page of your forum for right now. httr.cpnd.us/
We'll use this as the "test" page.
Because when we are done, you will have to edit ALL of your pages (18 of them?) that have the dropdowns on them.
(for the last time lol)

Regards,
SubDevo

[James [a_leon]]

Put this into a js file (just copy and paste). Call it something like nav.js, or whatever you'd like.
var dropMenu = [
   "Site Navigation/Help", [
      ["http://cpnd.us", "Home Page"],
      ["http://cpnd.us/pages/CPND_Forum_Rules.html", "Forum Rules"],
      ["http://cpnd.us/pages/CPND_Emoticons.html", "CPND Emoticons"],
      ["http://httr.cpnd.us/index.cgi?action=display&board=issues&thread=266&page=1#2296", "Posting Tutorials"]
   ],
   "Forums/Chat", [
      ["http://www.j7networks.com/chat", "Free Chat Room"],
      ["http://httr.cpnd.us/index.cgi", "Forum Lobby"],
      ["http://httr.cpnd.us/index.cgi?board=addiction", "CPND Addiction"],
      ["http://httr.cpnd.us/index.cgi?board=nfl", "Around the NFL"],
      ["http://httr.cpnd.us/index.cgi?board=cafe", "Monksters Cafe"],
      ["http://httr.cpnd.us/index.cgi?board=smack", "Air it Out"],
      ["http://httr.cpnd.us/index.cgi?board=sports", "Sports Talk"],
      ["http://httr.cpnd.us/index.cgi?board=fantasy", "Fantasy Sports"],
      ["http://httr.cpnd.us/index.cgi?board=issues", "Support Forum"]
   ],
   " Team/Useful Info", [
      ["http://httr.cpnd.us/index.cgi?action=calendarviewall", "Team Calendar"],
      ["http://cpnd.us/pages/Redskins_Coaching_Staff.html", "Coaching Staff"],
      ["http://cpnd.us/pages/Redskins_Depth_Chart.html", "Depth Chart"],
      ["http://www.the506.com/nflmaps/", "TV Coverage Map"]
   ],
   "PCinOZs Salary Info", [
      ["http://cpnd.us/pcinoz/New_Salary_cap_Site.htm", "Salary Cap Front Page"],
      ["http://cpnd.us/pcinoz/Salary_Cap_Position.htm", "Current Cap Position"],
      ["http://cpnd.us/pcinoz/Rule_of_51.htm", "Rule of 51"],
      ["http://cpnd.us/pcinoz/Contracts_Chart.htm", "Contract Details"],
      ["http://cpnd.us/pcinoz/Salaries_-_Detail.htm", "Cap Numbers-Details"],
      ["http://cpnd.us/pcinoz/Salaries_-_Summary.htm", "Cap Numbers-Summary"],
      ["http://cpnd.us/pcinoz/Deadcap_Chart.htm", "Dead Cap Numbers"],
      ["http://cpnd.us/pcinoz/Cut_Trade_Savings.htm", "Cut & Trade Savings"]
   ],
   "History", [
      ["http://cpnd.us/pages/Redskins_Historical_Coaches.html", "Coaches"],
      ["http://www.drafthistory.com/teams/redskins.html", "Draft History"],
      ["http://cpnd.us/pages/Redskins_Super_Bowls.html", "Super Bowls"],
      ["http://cpnd.us/pages/Redskins_Hall_of_Famers.html", "Hall of Famers"],
      ["http://cpnd.us/pages/Redskins_Record_Versus_Other_Teams.html", "Records vs. Other Teams"],
      ["http://cpnd.us/pages/Redskins_Single_Game_Records.html", "Single Game Records"],
      ["http://cpnd.us/pages/Redskins_Season_Records.html", "Season Records"],
      ["http://cpnd.us/pages/Redskins_Career_Records.html", "Career Records"]
   ]
];

var html = "";
html += "<CENTER><table style=\"height: 28px;\" border=\"1\" bordercolor=\"#640324\" cellpadding=\"1\" cellspacing=\"0\"><tbody><tr bgcolor=\"#640324\">";

for (var a = 0, b = dropMenu.length; a < b; a ++)
{
   html += "<td align=\"center\"><select onchange=\"top.location=options[selectedIndex].value;\" style=\"font-size: 8pt; color: rgb(255, 255, 255); font-family: 'Arial'; background-color: rgb(100, 3, 36);\"><option selected=\"selected\" style=\"color: rgb(255, 255, 255); font-family: 'Arial';\">" + dropMenu + "</option>";
   a ++;

   for (var c = 0, d = dropMenu.length; c < d; c ++)
   {
      html += "<option value=\"" + dropMenu[c][0] + "\">" + dropMenu[c][1] + "</option>";
   }

   html += "</select></td>";
}

html += "</tr></tbody></table><br /></CENTER>";
document.write (html);

Replace your current nav menu with this.

<!-- BEGIN SITE NAVIGATION-->
<script type="text/javascript" src="url to your js file"></script>
<!-- END SITE NAVIGATION-->

That's the entire menu, unless you want a different menu for each page.

[SubDevo]

Well. I guess just ignore my post then, since James got it. lol

[Rat Boy]

Nope.

That is PERFECT!!!

Thanks a million James!!!

And also thanks to Sub for being willing to help!!

[James [a_leon]]

Jul 9, 2010 20:13:08 GMT -8 SubDevo said:

Well. I guess just ignore my post then, since James got it. lol

Sorry:P. I didn't want to commit to it, but started trying and didn't want to waste it.

Jul 9, 2010 20:22:55 GMT -8 Rat Boy said:

Nope.

That is PERFECT!!!

Thanks a million James!!!

And also thanks to Sub for being willing to help!!

Glad to hear it. And no problem at all.

[Bennett 🚀]

Rat Boy: "Thanks, !ErInUkI_bOx, for being awesome." xD

[Rat Boy]

Sorry !ErInUkI_bOx!, I did not mean to leave you out!

Thanks here, and for the help with the Photobucket code as well.

In fact, thanks to the whole ProBoard support STAFF for being awesome!!

Just brought the sight up a short bit ago and I have been very impressed with all the help found here at what seems like all hours of the day and night.

[Charles Stover]

Nobody here is staff.

[Bennett 🚀]

Geez Charles He can say what he wants about the staff (who are awesome)