Runboard.com
You're welcome.
Runboard Extra Chat Room Support Search Facebook





Runboard.com       Sign up learn about it | Sign in lost password?

 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

Head of Runboard staff

Registered: 11-2005
Posts: 1895
Karma: 83 (+86/-3)
Forum Jump


Put this in your HTML header or footer....

<form id="jump" action="#">
<select size="1" onchange="location=options[selectedIndex].value;">
<option>Forum Jump…</option>
<optgroup label="==Category Name==">
<option value="/f1">Forum Name</option>
<option value="/f2">Forum Name</option>
</optgroup>
<optgroup label="==Category Name==">
<option value="/f3">Forum Name</option>
<option value="/f4">Forum Name</option>
</optgroup>
</select>
</form>


Change the forum # to the forum you're linking to, change "Forum Name" to each forum's name, and change "Category Name" to each category name. For example, if you were putting a dropbox on this board, the link to Extra's Q&A forum would be:

<option value="/f3">Q&A</option>

You can style that form in your Custom CSS....
(This will look ugly, so work it out on a test board before putting it on your real board)

/* FORUM JUMP */
#jump { text-align: center; margin: 0; }
#jump select { font-size: 12px; background: #cccccc; color: #ff0000; }
#jump optgroup { background: #000000; color: #ffffff; }
#jump option { background: #dddddd; color: #0000cc; }


Just like anything else, you can add or change background colors, font size, font color, etc. Note that IE is a little more limited on how you can style these things than other browsers like FF, but IE will just ignore anything it doesn't like.


How this works:


#jump refers to the <form> itself (notice the id="jump" in the <form> tag). Since forms are block-level elements (it's all on its own line) with a top and bottom margin by default, I added margin:0 in my sample CSS above. You can also change this to an inline element (occurring in line with other text, images, etc) like this:

#jump { display: inline; }

#jump select refers to all the <select> tags within the #jump form.
#jump optgroup refers to the <optgroup> tags within the #jump form.
#jump option refers to the <option> tags within the #jump form.

By looking at the HTML for the form to see what's what, this info should help you with styling it. Of course, just ask in the Q&A forum if you need more help. emoticon


Want your links to open in a new window?


Change this part inside the <form> tag:

onchange="location=options[selectedIndex].value;"

to this:

onchange="window.open(options[selectedIndex].value);"


Previous edit by Lesigner Girl, 4/8/2008, 11:56 pm

Latest edit to reflect newer board URLs.


Last edited by Lesigner Girl, 1/15/2013, 11:25 pm


---
Runboard Knowledge Base
Website Creation Tutorials
7/21/2007, 12:29 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 


You are not logged in (login)