Combo boxes (drop-down menus) are a convenient way of referencing a lot of links in a compact space. They are particularly useful for storing resource links on a particular subject. Dynamic HomePage will manage up to nine combo boxes. Each combo box can have:
an external title (outside the Combo box itself)
an internal title (the text which is displayed as default in the Combo box)
unlimited links (target URLs with linked text)
If the user has JavaScript turned off or unavailable in their browser, Dynamic HomePage will also output a "Go" button graphic to allow the user to initiate their selected link.
As a logged-in admin user, click the Home Page Admin link from the Home Page, and choose the Combo Admin option.
Choose the Combo box you want to alter, and click the corresponding Edit link.
Output each Combo box to users' browsers can be turned on and off.
Depending on whether your stylesheet uses the External title and if so where on the page it defines its display, the External title will display outside of the combo box itself.
The Internal title will be the top line of the Combo links, and the message the user will see by default on the combo box itself.
Updating combos is as simple
as entering the target URLs and link text, separated by a double semi-colon.
One link
is registered per line. Example:
http://www.yahoo.co.uk;;UK Yahoo
http://www.google.co.uk;;UK Google
http://www.altavista.com;;Altavista
Combos can be previewed before committing any changes you have made.
To confirm any changes you have made, click Update. (Clicking the Home Page or Home Page Admin links will also confirm your changes.) To cancel any changes you have made since the last update, click the Cancel Changes link.
These technical details are intended for web designers when setting up a stylesheet.
The sample HTML output below shows how combos are output both in browsers with JavaScript enabled and disabled. If customised output is required for your home page implementation, please contact the developers.
In the output Home Page, the area links functions are marked between the comments <!--Combos Part--> and <!--Combos Part end-->, each combo starts with a sequentially numbered form definition and a div containing the select definition with a class="combo" and a sequential numbered ID.
Since automatic initiation of combo links onChange requires JavaScript, where JavaScript is not enabled in the browser an initiation button is displayed.
The stylesheet example below shows a width attribute to the select element. This is recommended to prevent the combo width expanding to incorporate the longest entry
The stylesheet example also shows that the display attribute has been turned off for the first combo's external title. Of course the external title will still be output to the HTML if the field is populated in the admin interface.
<!-- Combos Part-->
<!-- Combo "1" -->
<form method="GET" action="http://mysite.com/redirect.php" name="combo_1">
<div class="combo" id="combo_1">
<span id="ct_1">Combo 1 External Title</span><br>
<select name="target" onChange="this.form.submit()">
<option value="" selected>Combo 1 Internal Title</option>
<option value="">____________________</option>
<option value="http://www.yahoo.co.uk">UK Yahoo</option>
<option value="http://www.google.com">UK Google</option>
<option value="http://www.altavista.com">Altavista</option>
</select>
<noscript>
<input type="image" src="http://mysite.com/images/combos/go_btn.gif"
border="0" width="20" alt="go!" height="12">
</noscript>
</div>
</form>
<!-- Combo "2" -->
<form method="GET" action="http://mysite.com/redirect.php" name="combo_2">
<div class="combo" id="combo_2">
<span id="ct_2">Combo 2 External Title</span><br>
<select name="target" onChange="this.form.submit()">
<option value="" selected>Combo 2 Internal Title</option>
<option value="">____________________</option>
<option value="http://news.yahoo.com">Yahoo News</option>
<option value="http://news.google.com">Google News</option>
<option value="http://news.bbc.co.uk">BBC News</option>
</select>
<noscript>
<input type="image" src="http://mysite.com/images/combos/go_btn.gif"
border="0" width="20" alt="go!" height="12">
</noscript>
</div>
</form>
<!-- Combos Part end-->
The stylesheet is individual to each implementation. The code below is just an illustration of how it may be implemented.
select {
color: #000;
background-color: #FFF;
font-family: arial, helvetica, sans-serif;
font-size: 10 px;
width: 150px;
}
#combo_1, #combo_2 {
position: absolute;
z-index: 1;
}
#combo_1 {
top: 100px;
left: 25px;
}
#ct_1 {
display: none;
}
#combo_2 {
top: 200px;
left: 25px;
}