JavaScript - Cut & Paste Css Vertical List Menu Problem

Hi,

I would like to use the menu that is linked below. I implemented it on my website but I discovered that it can only go 2 levels deep. I would like it to go one more level and I think that would be done in the javascript but I can't tell for sure. Could someone steer me in the right direction?

http://www.javascriptkit.com/script/...icalmenu.shtml

Thanks!
Rob

Hello,

I am currently working on a menu and have a few questions and have one issue.

First:

How can I set the menu to automatically expand on mouse rollover instead of click? Here is the code as it stands right now:

Quote:
$(document).ready(function () {
$('img.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
});
});

Second Question:

For some reason, the menu is appearing behind a table row when it expands, thus hiding a good portion of the menu. Here it is:

http://gem-tech.com.mytempweb.com/store/pc/home.asp

Try clicking on 'Products & Services', and then clicking on "Centerfire Rifle Suppressors" from the dropdown menu. When it takes you to that category page, click the menu again and you will see that the menu hides behind the <h1> table row. How can I fix this?

Thank you very much

If you look at this test page, you see a vertical image menu. This menu is originally from http://www.byscripts.info/scripts/ja...accordion-menu (example 3)

But... how can you get it to 100% heigh?
Please, look at the source code

Thanks

Hi All,

My apologies if this is answered in a previous post but my searches didn't turn up a solution.

I need an expanding, vertical menu, virtually identical to:

http://www.dynamicdrive.com/dynamici...enu-glossy.htm

but with one change.

The menu subheaders, ie, "CSS Examples, CSS Drives" are currently just text and their background is defined in the CSS. I need to make these menu subheaders rollover graphics instead of text.

It is easy to replace the submenu items themselves with rollover graphics instead of text, but the menu subheaders have defeated me.

Is there a cunning solution to this?

Regards

Gary

I've added a Vertical Sliding Menu to my website that only seems to work in Internet Explorer. I have no idea what to do to get it to work in other browsers. If I could at least get it work in Firefox that would be great, but as I said, I'm a bit lost on how to do that. If anyone could help me I would gladly send them a box of chocolates.

The menu is made up of images that are partially recessed into the left of the page, except for a small section which remains visible. When that section is clicked the image slides all the way into view revealing more options. The links are all done with image maps, if that helps.

Here is the entire Javascript code that goes into the head tag:
Code:

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -


var Abouttop=124
var Newstop=195
var Profilestop=258
var Issuestop=351
var Extrastop=423
var Linkstop=499
var Forumtop=571
var menuleft=-118

var pace=14

var step
var direction
var pause=25

var thismenu
var vorzeichen=1
var vorzeiAbout=-1
var vorzeiNews=-1
var vorzeiProfiles=-1
var vorzeiIssues=-1
var vorzeiExtras=-1
var vorzeiLinks=-1
var vorzeiForum=-1

var menuismoving="no"

function gotourl(thisurl) {
    alert("\n\nThis is onlay a demonstration.\nYou will not be linked to "+thisurl+".html.")
}

function inite() {
	if (document.layers) {
        document.About.left=menuleft
        document.News.left=menuleft
        document.Profiles.left=menuleft 
        document.Issues.left=menuleft
        document.Extras.left=menuleft
        document.Links.left=menuleft
        document.Forum.left=menuleft
        document.About.top=Abouttop
        document.News.top=Newstop
        document.Profiles.top=Profilestop
        document.Issues.top=Issuestop
        document.Extras.top=Extrastop
        document.Links.top=Linkstop
        document.Forum.top=Forumtop
	}	
	if (document.all) {
        document.all.About.style.posLeft=menuleft
        document.all.News.style.posLeft=menuleft
        document.all.Profiles.style.posLeft=menuleft
        document.all.Issues.style.posLeft=menuleft
        document.all.Extras.style.posLeft=menuleft
        document.all.Links.style.posLeft=menuleft
        document.all.Forum.style.posLeft=menuleft
        document.all.About.style.posTop=Abouttop
        document.all.News.style.posTop=Newstop
        document.all.Profiles.style.posTop=Profilestop
        document.all.Issues.style.posTop=Issuestop
        document.all.Extras.style.posTop=Extrastop
        document.all.Links.style.posTop=Linkstop
        document.all.Forum.style.posTop=Forumtop
	}
}

function getmenuname(clickedmenu) {
    if (menuismoving=="no") {
	    if (document.layers) {
            thismenu=eval("document."+clickedmenu)
	    }	
	    if (document.all) {
            thismenu=eval("document.all."+clickedmenu+".style")
	    }
        step=pace
        checkdirection()
	    movemenu()
    }
}

function checkdirection() {
	if (document.layers) {    
        if (thismenu==document.About){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
        if (thismenu==document.News){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
        if (thismenu==document.Profiles){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
        if (thismenu==document.Issues){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
        if (thismenu==document.Extras){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
        if (thismenu==document.Links){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
        if (thismenu==document.Forum){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}     
	}	
	if (document.all) {
        if (thismenu==document.all.About.style){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
        if (thismenu==document.all.News.style){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
        if (thismenu==document.all.Profiles.style){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
        if (thismenu==document.all.Issues.style){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
        if (thismenu==document.all.Extras.style){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
        if (thismenu==document.all.Links.style){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
        if (thismenu==document.all.Forum.style){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}   
	}
    menuismoving="yes"
}

function movemenu() {
	if (document.layers) {
        if (step>=0) {
            thismenu.left+=step*vorzeichen
            step--
            var movetimer=setTimeout("movemenu()",pause)  
	    }
        else {
            menuismoving="no"
            clearTimeout(movetimer)
        }
	}	   
	if (document.all) {
        if (step>=0) {
            thismenu.posLeft+=step*vorzeichen
            step--
            var movetimer=setTimeout("movemenu()",pause)  
	    }
        else {
            menuismoving="no"
            clearTimeout(movetimer)
        }
    }
}
// - End of JavaScript - -->
</SCRIPT>

Code:

This is the CSS code that also goes into the head tag:

<style type="text/css">
	#About {position:absolute;left:-1000px;}
    #News {position:absolute;left:-1000px;}
    #Profiles {position:absolute;left:-1000px;}
    #Issues {position:absolute;left:-1000px;}
    #Extras {position:absolute;left:-1000px;}
    #Links {position:absolute;left:-1000px;}
    #Forum {position:absolute;left:-1000px;}
	.baseline {
		position:absolute;
		left:250px;
		top:100px;
    	font-family:Arial;
    	font-size:9pt;
		color:000000;
	}
</STYLE>

And I'm not sure if this is needed or not, but just in case, here is everything between the body tags
Code:

<body onLoad="inite()" topmargin="0" leftmargin="0"> 

<DIV ID="About">
<IMG SRC="images/main/menu_tab_about2.gif" USEMAP="#Aboutdec99.gif" WIDTH=150 HEIGHT=71 BORDER=0>
<MAP NAME="Aboutdec99.gif">
<AREA SHAPE=RECT COORDS="128,3,143,67" HREF="javascript:getmenuname('About')">
<AREA SHAPE=RECT COORDS="30,4,113,20" HREF="about_nw.asp">
<AREA SHAPE=RECT COORDS="88,21,113,34" HREF="siteinfo.asp">
<AREA SHAPE=RECT COORDS="35,35,113,51" HREF="contributions.asp">
<AREA SHAPE=RECT COORDS="65,52,113,66" HREF="contact.asp">
</MAP></DIV>

<DIV ID="News"><IMG SRC="images/main/menu_tab_news2.gif" USEMAP="#Newsdec99.gif" WIDTH=150 HEIGHT=63 BORDER=0>
<MAP NAME="Newsdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,58" HREF="javascript:getmenuname('News')">
<AREA SHAPE=RECT COORDS="30,14,113,31" HREF="news.asp">
<AREA SHAPE=RECT COORDS="30,33,113,48" HREF="news_archive.asp">
</MAP></DIV>

<DIV ID="Profiles"><IMG SRC="images/main/menu_tab_profiles2.gif" USEMAP="#Profilesdec99.gif" WIDTH=150 HEIGHT=93 BORDER=0>
<MAP NAME="Profilesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,89" HREF="javascript:getmenuname('Profiles')">
<AREA SHAPE=RECT COORDS="26,11,113,26" HREF="char_current.asp">
<AREA SHAPE=RECT COORDS="66,30,113,46" HREF="char_inactive.asp">
<AREA SHAPE=RECT COORDS="65,48,113,66" HREF="char_villains.asp">
<AREA SHAPE=RECT COORDS="90,68,113,82" HREF="char_all.asp">
</MAP></DIV>

<DIV ID="Issues"><IMG SRC="images/main/menu_tab_issues2.gif" USEMAP="#Issuesdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Issuesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,67" HREF="javascript:getmenuname('Issues')">
<AREA SHAPE=RECT COORDS="53,9,113,25" HREF="issues_uc.asp">
<AREA SHAPE=RECT COORDS="30,28,113,43" HREF="issues.asp">
<AREA SHAPE=RECT COORDS="52,48,113,63" HREF="issues_past.asp">
</MAP></DIV>

<DIV ID="Extras"><IMG SRC="images/main/menu_tab_extra2.gif" USEMAP="#Extrasdec99.gif" WIDTH=150 HEIGHT=76 BORDER=0>
<MAP NAME="Extrasdec99.gif">
<AREA SHAPE=RECT COORDS="128,6,143,71" HREF="javascript:getmenuname('Extras')">
<AREA SHAPE=RECT COORDS="47,10,113,27" HREF="wallpapers.asp">
<AREA SHAPE=RECT COORDS="65,29,113,45" HREF="avatars.asp">
<AREA SHAPE=RECT COORDS="36,48,113,64" HREF="merch.asp">
</MAP></DIV>

<DIV ID="Links"><IMG SRC="images/main/menu_tab_links2.gif" USEMAP="#Linksdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Linksdec99.gif">
<AREA SHAPE=RECT COORDS="128,10,143,64" HREF="javascript:getmenuname('Links')">
<AREA SHAPE=RECT COORDS="13,5,113,19" HREF="http://www.newwarriors.com">
<AREA SHAPE=RECT COORDS="74,21,113,34" HREF="http://newwarriors.wordpress.com" alt="New Warriors Continuity Conundrum">
<AREA SHAPE=RECT COORDS="32,37,113,51" HREF="http://infinitytitans.anycities.com/warriorsmix.html">
<AREA SHAPE=RECT COORDS="19,53,113,67" HREF="http://www.novaprimepage.com">
</MAP></DIV>

<DIV ID="Forum"><IMG SRC="images/main/menu_tab_forum2.gif" usemap="#menu_tab_test.jpg" width="150" height="69" border=0>
<map name="menu_tab_test.jpg"> 
<AREA shape=rect COORDS="128,5,143,66" HREF="http://www.newwarriors.net/forum">
</map></DIV>
</body>

And in case anyone wants to see what I'm talking about, here is the link to the page so that you can see the menu bar and how it functions. Make sure you are viewing it in IE though. lol.
http://www.newwarriors.net

I hope that's all of the information that is needed. I just don't have a clue what to do. I really like the menu and want to keep it. Thanks so much!

I am looking for something that works like this list/menu.
Code:

<html>
<head>
<title>
trial
</title>

<script type="text/javascript">

function go(a)
{
c=document.getElementById("hidden").value;

if(c!="")
{
document.getElementById(c).className="black";
}

b=document.getElementById(a).value;

document.getElementById(b).className="red";
document.getElementById("hidden").value=b;
}

</script>

<style type="text/css">

.black {color: #000000;}
.red {color: #c00;}

</style>
</head>


<body>

<select id="blue" onchange="go(this.id)">
<option value="1" id="1">1</option>
<option value="2" id="2">2</option>
<option value="3" id="3">3</option>
<option value="4" id="4">4</option>
<option value="5" id="5">5</option>
<option value="6" id="6">6</option>
</select>

<input type="hidden" id="hidden" value="">

</body>
</html>

This code does not work "correctly" in IE
It does work "correctly" in Firefox
I need something that will work "correctly" in IE and Firefox
I have looked high and low but have come up with nothing....
Also I don't know if it is possible but I would like to find something that changes the font color of every previous selection that has been made not just the last one. Has any one seen anything like that????

I wanted a custom look for my list menu.
Here is what I came up with...
http://schrene.web44.net/List-Menu.html
I created it using divs with text overflow to get the scroll bar.
Here is my code
Code:

<div id="colorList">
<center>
<div class="mySelect" onClick="myFunction()">Abalone</div>
<div class="mySelect" onClick="myFunction()">Acorn</div>
<div class="mySelect" onClick="myFunction()">Adobe</div>
<div class="mySelect" onClick="myFunction()">Allspice</div>
<div class="mySelect" onClick="myFunction()">Antarctica</div>
<div class="mySelect" onClick="myFunction()">Anthracite</div>
<div class="mySelect" onClick="myFunction()">Aqualite</div>
<div class="mySelect" onClick="myFunction()">Arctic Blueberry</div>
<div class="mySelect" onClick="myFunction()">Arctic Ice</div>
<div class="mySelect" onClick="myFunction()">Arctic Lime</div>
<div class="mySelect" onClick="myFunction()">Cilantro</div>
<div class="mySelect" onClick="myFunction()">Cinnabar</div>
<div class="mySelect" onClick="myFunction()">Clam Shell</div>
<div class="mySelect" onClick="myFunction()">Clove</div>
<div class="mySelect" onClick="myFunction()">Cobalt</div>
<div class="mySelect" onClick="myFunction()">Cocoa Brown</div>
<div class="mySelect" onClick="myFunction()">Concrete</div>
<div class="mySelect" onClick="myFunction()">Copperite</div>
<div class="mySelect" onClick="myFunction()">Cottage Lane</div>
<div class="mySelect" onClick="myFunction()">Designer White</div>
<div class="mySelect" onClick="myFunction()">Doeskin</div>
<div class="mySelect" onClick="myFunction()">Dove</div>
<div class="mySelect" onClick="myFunction()">Earth</div>
</center>
</div>

It worked great but it loses the scroll bar on iPhone.
I want something that works for mobile web as well as traditional..
Does anybody have any ideas how to create a list menu like this???
Any help would greatly be appreciated

i need help on designing a drop down list menu. this rolls down and shows other list of options to click on. i work in dreamweaver so javascripts and others can be incorporated.
thanks all

I've ran the entire code through a javascript debugger a few times and I believe I weeded out the obvious errors. Also I believe I fixed some of the more hidden errors that one can't find with even the best debuggers..

Still it doesn't perform like it should? I found other scripts that do the same thing, but it defeats the purpose of me fixing it if I just write up a new code, even if it's easier.

What make it hard for me to digest is it is somewhat complex compared to other codes that do the exact same thing.

Any help?

Also attached a zip file for those who want to see it externally..

Code section
Code:

<script type="text/javascript">
/* <![CDATA[ */
var sortItems = 1;
function move(sourceList,targetList) {
	for(var i=0; i<sourceList.options.length; i++) {
		if(sourceList.options[i].selected && sourceList.options[i].value != "") {
			var no = new Option();
			no.value = sourceList.options[i].value;
			no.text = sourceList.options[i].text;
			targetList.options[targetList.options.length] = yes;
			sourceList.options[i].value = "";
			sourceList.options[i].text = "";
		}
	}
	moveUp(sourceList);
	if (sortItems)
		doSort(targetList);
}
function moveUp(curOptionList)  {
	for(var i=0; i<curOptionList.options.length; i++) {
		if(curOptionList.options[i].value == "")  {
			for(var j=i; j<curOptionList.options.length-1; j++)  {
			curOptionList.options[j].value = curOptionList.options[j+1].value;
			curOptionList.options[j].text = curOptionList.options[j+1].text;
		}
		var curLine = 0;
		break;
	   }
	}
	if(curLine < curOptionList.options.length)  {
		curOptionList.options.length -= 1;
		moveUp(curOptionList);
	}
}
function doSort(curOptionList)  {
	var newOptions = new Array();
	var tempOptions = new Object();
	for(var i=0; i<curOptionList.options.length; i++)  {
		newoptions[0] = curOptionList.options[0];
	}
	for(var x=0; x<newOptions.length-1; x++)  {
		for(var y=(x+1); y<newOptions.length; y++)  {
			if(newOptions[x].text > newOptions[y].text)  {
				tempOptions = newOptions[x].text;
				newOptions[x].text = newOptions[y].text;
				newOptions[y].text = tempOptions;
				tempOptions = newOptions[x].value;
				newOptions[x].value = newOptions[y].value;
				newOptions[y].value = tempOptions;
			}
		}
	}
	for(var i=0; i<curOptionList.options.length; i++)  {
		curOptionList.options[i].value = newoptions[i].value;
		curOptionList.options[i].text = newoptions[i].text;
	}
}
/* ]]> */
</script>

Form section
Code:

<body>
<form action="" method="get" enctype="application/x-www-form-urlencoded">
<table border="0">
<tr>
<td><select multiple="multiple" size="5" name="list1">
<option value="11">iPod Nano</option>
<option value="12">iPod Shuffle</option>
<option value="13">iPod Classic</option>
</select></td>
<td>
<input type="button" value="   &rsaquo;&rsaquo;   " onclick="move(list1,list2)" name="B1" />
<br />
<input type="button" value="   &lsaquo;&lsaquo;   " onclick="move(list2,list1)" name="B2" />
</td>
<td><select multiple="multiple" size="5" name="list2">
<option value="21">MacBook</option>
<option value="22">MacBook Pro</option>
<option value="23">MacBook Air</option>
</select></td>
</tr>
</table>
</form>
</body>
</html>

Hi Everyone,

I have a small doubt in jsp coding..I want to disable certain links on user login.These links come under a menu list.
Clarifying more on this..I have created a web application which has got a login page..After login it redirects me to my home page..now when an administrator logs in he/she should be able to view all links on the menu list whereas when an user logs in he/she should only view a certain number of links based on his/her privileges..how can i write this code.
Can anyone help me?? Its really really urgent!!!!!!!!!!
please................

Hi Chaps,

I have a dynamic list menu:
PHP Code:
    <?php $currentCat = '';       
    $first = true
    ;?>
    <ul>  
        <?php   
        do {       
        if ($currentCat != $row_rsCategory['catname']) {            
        if (!$first) {                 
        echo "\n</ul>\n</li>\n";            
        }            
        $currentCat = $row_rsCategory['catname'];            
        ?>      
            <li><?php echo $row_rsCategory['catname']; ?>       
                <ul>      
                <?php }?>          
                    <li><?php echo $row_rsCategory['galleryname']; ?></li>          
                <?php $first = false;  
                } while ($row_rsCategory = mysql_fetch_assoc($rsCategory));  
                ?>   
                </ul>   
            </li>   
    </ul>

I've tried looking for a show/hide script, to toggle category names/gallery names, but could only find ones that have static menu options, and have failed to edit existing code to fit....any help or guidence would be appreciated!

I am hoping you guys can help me with this issue. What I am trying to do is fairly simple, depending on what option you select in the menu I want the picture to change to different picture. The code that I posted below works perfectly except for one problem. I need the option value to display the color name, and not have the image code in it. I have researched ways to do this without having to use "value" but I just can't find one that works. Can someone please help me?

Thanks in advance for any help given!


Code:

function changeimg(){
document.getElementById('colors').src=document.getElementById('color_dropdown_options').value
}

Code:

 <label>
<select name="color" class="dropdown_options" id="color_dropdown_options" onchange="changeimg()">
<option value="/images/thumbnails/image1.jpg">White</option>
<option value="/images/thumbnails/image2.jpg">Blue</option>
<option value="/images/thumbnails/image3.jpg">Green</option>
</select>
</label>

Code:

<div id="display"><img src="/images/thumbnails/image1.jpg" width="270" height="382" alt="" id="colors" />

For some reason after I modified the events.js script for my events, the events.js is not being read. I have reloaded the page, cleared the cache, and reinstalled the .js file.

What is wrong?

I am trying to use the cut and paste OnMouseover Slideshow that is featured at the JavascriptKit.com. I'm getting a line error code which reads "Line:81 Error: Expected ';'

I have tried everything I can think of to eliminate this error...seems I know just enough to be dangerous, not enough to debug.

Can someone please help me? Or at least tell me if there's someplace specific in between the script tags or elsewhere that I need to look?

Killing me in Kentucky,
Pam