Vertical scrollable menu script needed

[gibran]

Hi,

Can anybody help me modify the Scrollable Menu Links script found on dynamicdrive.com to make it a vertically scrollable menu. Please help since I am a newbie in DHTML/Javascript.

Thanks in advance.

[rangana]

See if changing the script helps ;)


<script type="text/javascript">

/***********************************************
* Scrollable Menu Links- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//configure path for left and right arrows
var goleftimage='pointer2.gif'
var gorightimage='pointer.gif'
//configure menu width (in px):
var menuwidth=300
//configure menu height (in px):
var menuheight=25
//Specify scroll buttons directions ("normal" or "reverse"):
var scrolldir="normal"
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
//specify menu content
var menucontents='<nobr><a href="http://www.dynamicdrive.com">Dynamic Drive</a> | <a href="http://www.javascriptkit.com">JavaScript Kit</a> | <a href="http://www.codingforums.com">CodingForums.com</a> | <a href="http://www.builder.com">Builder.com</a> | <a href="http://freewarejava.com">Freewarejava.com</a></nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
var leftdircode='onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"'
var rightdircode='onMouseover="moveright()" onMouseout="clearTimeout(righttime)"'
if (scrolldir=="reverse"){
var tempswap=leftdircode
leftdircode=rightdircode
rightdircode=tempswap
}
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
loadedyes=1
}
window.onload=fillup

function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.top)>(menuwidth-actualwidth)){
cross_scroll.style.top=parseInt(cross_scroll.style.top)-scrollspeed+"px"
}
else if (document.layers&&ns_scroll.top>(menuwidth-actualwidth))
ns_scroll.top-=scrollspeed
}
lefttime=setTimeout("moveleft()",50)
}

function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.top)<0)
cross_scroll.style.top=parseInt(cross_scroll.style.top)+scrollspeed+"px"
else if (document.layers&&ns_scroll.top<0)
ns_scroll.top+=scrollspeed
}
righttime=setTimeout("moveright()",50)
}


if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="2">')
write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>')
write('<td width="'+menuwidth+'px" valign="top">')
if (iedom){
write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a href="#" '+rightdircode+'>')
write('<img src="'+gorightimage+'"border=0></a>')
write('</td></table>')
}
}

</script>

[gibran]

Can somebody guide me in changing this script?

[rangana]

Why?...does the script I've provided in post#2 not what you've desired?

[gibran]

Why?...does the script I've provided in post#2 not what you've desired?

Thanks .... Can you help me to use the above script for the following lines of code ... I need to scroll up and down the list of menu items .... please help!

<html>
<head>
<style type="text/css" media="screen">

body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
#menu #defval, dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* Menu position that can be changed at will */
top: 0;
left: 0;
}
#menu {
position:absolute;
top:90px;
left:150px;
width: 130px;
color: gray;
}
#menu #defval {
cursor: pointer;
width: 190px;
height: 20px;
text-align: left;
font-size: 11;
font-weight: bold;
background-image: url(select.gif) ;
background-repeat: no-repeat;
}

#menu dd {
border: 0px solid gray;
}

#menu li {
text-align: center;
width: 130px;
background-color:#666666;
filter:alpha(opacity=40);
opacity:0.4;
}


#menu li a, #menu #defval a {
color: #212121;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu #defval a:hover {
background: #eee;
}

</style>
<script type="text/javascript">

window.onload=show;

if(window.addEventListener) {
window.addEventListener("load", show, false);
window.addEventListener("load", setDefVal, false);
}

function setDefVal() {
var lists=document.getElementsByTagName("ul");
var defVal=lists[0].childNodes[1].childNodes[0].innerHTML;
document.getElementById('defaultElement').innerHTML=defVal;
}

function show(id) {

var d = document.getElementById(id);

for (var i = 1; i<=10; i++){
if (document.getElementById('smenu'+i)) {
document.getElementById'smenu'+i).style.display='none';
}
}
if (d){
d.style.display='block';}
}

function getVal(obj) {
//alert("Obj:"+ obj.innerHTML);
var selValue = obj.innerHTML;
var defEle = document.getElementById('defaultElement');
alert("defEle = "+ defEle);
defEle.innerHTML=selValue;
show('');
}
</script>
</head>
<body>

<div id="menu">
<div id="defval" style="position:relative" onmouseover="javascript:show('smenu1');">
<span id="defaultElement"> </span>
<div id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
<ul>
<li><a href="#" onclick="getVal(this)">ant</a></li>
<li><a href="#" onclick="getVal(this)">antelope</a></li>
<li><a href="#" onclick="getVal(this)">bat</a></li>
<li><a href="#" onclick="getVal(this)">bear</a></li>
<li><a href="#" onclick="getVal(this)">cat</a></li>
<li><a href="#" onclick="getVal(this)">camel</a></li>
<li><a href="#" onclick="getVal(this)">cow</a></li>
<li><a href="#" onclick="getVal(this)">deer</a></li>
<li><a href="#" onclick="getVal(this)">dog</a></li>
<li><a href="#" onclick="getVal(this)">elephant</a></li>
<li><a href="#" onclick="getVal(this)">eagle</a></li>
<li><a href="#" onclick="getVal(this)">fox</a></li>
<li><a href="#" onclick="getVal(this)">lion</a></li>
<li><a href="#" onclick="getVal(this)">swan</a></li>
<li><a href="#" onclick="getVal(this)">tiger</a></li>
<li><a href="#" onclick="getVal(this)">turtle</a></li>
<li><a href="#" onclick="getVal(this)">yak</a></li>
<li><a href="#" onclick="getVal(this)">zoo</a></li>
</ul>
</div>
</div>
</div>

</body>
</html>