Add a scroll bar to drop down list

JavaScript
1

Hi,
Im using this simple drop down menu.

<form>
<select onChange=“if(options[selectedIndex].value)
window.location.href=(options[selectedIndex].value)” class=“select”>
<option value=“index.htm”>more…</option>
<option value=“#”>_</option>
<option value=“info.html”>INFO</option>
<option value=“info2.html”>INFO2</option>
<option value=“info3.html”>INFO3</option>
<option value=“info4.html”>INFO4</option>
</select>
</form>

With alot more options. How can I add a scrollbar so the result is like this:
http://www.anthonyburrill.com/menu.html

Thanks in advance

2

view source and copy/modify the code of your link

or perhaps


<select size="1" onChange="if(options[selectedIndex].value){ window.location.href=(options[selectedIndex].value); }" onclick="Size(this,4);" class="select" >
<option value="index.htm">more..</option>
<option value="#">_</option>
<option value="info.html">INFO</option>
<option value="info2.html">INFO2</option>
<option value="info3.html">INFO3</option>
<option value="info4.html">INFO4</option>
<option value="info.html">INFO</option>
<option value="info2.html">INFO2</option>
<option value="info3.html">INFO3</option>
<option value="info4.html">INFO4</option>
</select>
<script language="JavaScript" type="text/javascript">
<!--

function Size(obj,s){
 Obj=obj;
 obj.size=s;
 setTimeout('document.onclick=function(){ Obj.size=1; document.onclick=null; }',100);
}
3

I didn’t want to rip off his code. And I don’t understand it anyway.

Unfortunately the code you give dosent do anything :frowning:

Any other ideas?

4 

<select size="1" onChange = "if(options[selectedIndex].value) { window.location.href = (options[selectedIndex].value); }" onClick="Size(this.id, 4);" class="select" onMouseOut="cleanSize(this.id)">
<option value="index.htm">more..</option>
<option value="#">_</option>
<option value="info.html">INFO</option>
<option value="info2.html">INFO2</option>
<option value="info3.html">INFO3</option>
<option value="info4.html">INFO4</option>
</select>
<script language="JavaScript" type="text/javascript">
<!--

function Size(obj, s){
document.getElementById(obj).size = s;
}
function cleanSize(obj) {
document.getElementById(obj).size = 1;
}
</script>

cheers :slight_smile:

5

If you dont look and learn from other code you are not going to learn much

anyway the use of document write to populate the select box is a bit naff

code I posted had an obvious corruption

reminders modification uses mouseout in place if on click

your choise


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
</head>

<body>
<select size="1" onChange="if(options[selectedIndex].value){ window.location.href=(options[selectedIndex].value); }" onclick="Size(this,4);" class="select" >
<option value="index.htm">more..</option>
<option value="#">_</option>
<option value="info.html">INFO</option>
<option value="info2.html">INFO2</option>
<option value="info3.html">INFO3</option>
<option value="info4.html">INFO4</option>
<option value="info.html">INFO</option>
<option value="info2.html">INFO2</option>
<option value="info3.html">INFO3</option>
<option value="info4.html">INFO4</option>
</select>
<script language="JavaScript" type="text/javascript">
<!--

function Size(obj,s){
Obj=obj;
obj.size=s;
setTimeout('document.onclick=function(){ Obj.size=1; document.onclick=null; }',100);
}

//-->
</script>
</body>

</html>
6

vwphillips, Im not trying to learn Javascript, though sure I can learn this from looking at code, but the code on the site I posted is nothing like what I have or understand and like I said, I don’t want to rip it off.

The code you give me isn’t what I need. When I click to open the drop down it pushes the content below the drop down (in firefox atleast)

Reminders works perfect, however isn;t there a way to control the size of the drop down? It appears differently in IE and Firefox.

7

Both of the above dont work.

Anyone have a solution that works?:slight_smile: