JavaScript - Vertical Sliding Menu - Incompatible With Firefox

I'm still very new to Javascript, like really new. I'm trying to use this sliding menu script, and I want to have multiple menus on the same page. Problem is, I can't get multiple ID's for the menus to work, so if I click one menu's slider button, then it will always only affect the first menu, regardless of which I click.

Here's where I think I need to modify the code, at the top:


Code:

<script type="text/javascript">

var sliderIntervalId = 0;
var sliderHeight = 232;
var sliding = false;
var slideSpeed = 10;
function Slide()

And where the ID value is defined:



Code:

function SlideUpRun()
{

slider = document.getElementById('exampleSlider'),


slider = document.getElementById('slider2');

if(sliderHeight <= 0)
{
sliding = false;
sliderHeight = 0;
slider.style.height = '0px';
clearInterval(sliderIntervalId);

Obviously, these are just snippets of the whole code, I didn't know if less/more is needed to be shwon.

Can anyone help on this? I just need to know how to separate it, so I can add multiple menus to the same page.

Hi
I need to make a vertical menu bar where the sub menu that flies out on the right always starts at the top rather than next to its parent. I used this script
http://www.javascriptkit.com/script/...icalmenu.shtml

at the moment lists look like this (bold is selected option)

1
2 1
3 2
4 3 1

what i want is this to happen

1 1 1
2 2
3 3
4

Alternatively, does anyone know how to get the vertical spry menubar from DW to work in Safari?
To get an idea of what I want, see this working version (not working in Safari though) in Firefox

http://www.photoshopcourselondon.com...0open%202.html

thanks

mikael

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

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

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

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 everyone,
While designing my www I used the tab view script made by Lyubinskiy found on javascript kit www. It works brilliant on mozzila and chrome. However when I tried on safari and IE, the tabs don't work.
Can anyone tell me how should I adjust the sript for it to work on IE and Safari?
Code:

function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }

thanks for any suggestions

Hi... I did the Cut & Paste CSS Vertical List Menu, but I have an issue with submenus... Appear behind other divs.

I attach a print screen. I include inside a div. Any idea?

Code:

<div id="sidebar1">
      
        <ul id="verticalmenu" class="glossymenu">
        <li><a href="http://www.javascriptkit.com/">JavaScript Kit</a></li>
        <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
        <li><a href="http://www.javascriptkit.com/">JavaScript Tutorials</a></li>
        <li><a href="#">References</a>
            <ul>
            <li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
            <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
            <li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
            </ul>
        </li>
        <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >DHTML/ CSS Tutorials</a></li>
        <li><a href="http://www.javascriptkit.com/howto/">web Design Tutorials</a></li>
        <li><a href="#" >Helpful Resources</a>
            <ul>
            <li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
            <li><a href="http://www.codingforums.com">Coding Forums</a></li>
            <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
            <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
            <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
            <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
            </ul>
        </li>
        </ul>

      </div>

I'm was working on show and hide drop down menu and this works fine on IE, Google Chrome, Safari but not firefox. Can anyone explain to me one this is?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;

function mopen(eid) {
	//cancel the timer
	cancelTimer();
	
	//if there is a existing menu close it
	if(menu) menu.style.display='none';
	
	//now go about opening the current one
	var menu = document.getElementById(eid);
	menu.style.display='block';

}

function mclose() {
	menu.style.display='none';
}

function startTimer() {
	closetimer = window.setTimeout(mclose, timeout);
}

function cancelTimer() {
	if(closetimer) {
	window.clearTimeout(closetimer);
	closetimer = null;
	}
}
</script>
<style type="text/css">
body,html {
	background:#2E2D3B;
	font-family:Arial;
	font-size:0.9em;
}
div#menu {
	width:120px;
	height:auto;
	display:none;
	border-top:1px solid #cccccc;
	border-right:1px solid #cccccc;
	border-left:1px solid #cccccc;
	overflow:hidden;
	position:relative;
	top:3px;
}

a {
	color:#f1f1f1;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

#menu a {
	color:#111111;
	text-decoration:none;
}

#menu a:hover {
	color:#FF0000;
}

#menu ul {
	margin: 0;
	padding: 0;
}

#menu li {
	list-style:none;
	list-style-position:inside;
	list-style-type:none;
	padding:5px;
	background:#ffffff;
	border-bottom:1px solid #cccccc;
}

#menu li:hover {
	background:#f1f1f1;
}
</style>
</head>
	<body>
	<a href="javascript:;" onmouseover="mopen('menu');" onmouseout="startTimer();">Show Menu</a>
	<div id="menu">
	<ul onmouseover="cancelTimer();" onmouseout="startTimer();">
	  <li><a href="#">Page</a></li>
	  <li><a href="#">Page 1</a></li>
	  <li><a href="#">Page 2</a></li>
	  <li><a href="#">Page 3</a></li>
	  <li><a href="#">Page 4</a></li>
	  <li><a href="#">Page 5</a></li>
	 </ul>
     </div>	 
	
	</body>

</html>

And you can view it he http://idigteck.com

Thanks,
Jon W

Hello, Firefox issue with Javascript or CSS here.

My sorority website was written several years ago (therefore I'm not thoroughly familiar with the foundations), and upon building a new page, I'd like to add it to the menu in my php header. So I did, however the formatting looks terrible in Firefox! The menu seems like it's not "wide" enough. Here's what it looks like:

(called in by http://skmit.com/header.incnew.php )


I added the officers link right between the social and nationals pages. Here's what it looked like befo

(called in by http://skmit.com/header.inc.php )


and here's what it SHOULD look like:

this screenshot was taken in safari, where it works beautifully!


I've searched through the CSS ( http://www.skmit.com/c/master.css ) and found no clues as to why this is going wrong, so I feel like it may be the javascript...however, my Javascript experience is limited and I don't know what I'm looking for or if even relates to the header! Here's the javascript that the header calls in:

http://skmit.com/c/nav.js
http://skmit.com/c/prototype.js

I'm not really sure what the issue is. I'm using Firefox 3.5 on Mac OS X. Safari shows it fine, I'm running it on browsershots.org right now to see which browsers have issues.

If you could offer me any advice, I'd be very grateful! Thanks so much!

Hi,
I was wondering why in mozilla firefox the same image menu has different way of transition on different sites.
If you use firefox and go to this link and then hover over different pictures you will get to know how it moves http://www.alohatechsupport.net/exam...ge-menu-2.html
after doing that go to this link http://bloghutsbeta.blogspot.com/201...ting-main.html and hover over images and see how it moves.

In both cases the transition effect is same but in one it is slow (hanging) while in other it is smooth. I didn't presented the Markup as the both are identical but still if you feel like let me know in comments I will edit it to provide you with as much relevant data as possible and required.

Hi All,

I'm sure I'm not the only one who has had this problem... In internet explorer I have no problems. I literally just taught myself flash so I am hoping there is an easy fix that I am not finding. I did not design or create the template for the original site, I am just upgrading and adding features to improve what was already there. I am trying to fix this as soon as possible so any help anyone could offer would be greatly appreciated!!

Here is the code for the flash banner:
Code:

    <td><div style="height:230px"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1090" height="230">
       <param name="movie" value="images/home/homeheader1.swf" />
       <param name="quality" value="high" />
       <embed src="images/home/homeheader1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1090" height="230"></embed>
     </object></div></td>
   </tr>

Here is the code for the nav bar:

Code:

<script type="text/javascript" src="/HerndonRecognition/navigation/navigation_m1_scr.js"></script>

<table id="m1mainSXMenu2" cellspacing="1" cellpadding="10"  style=";width:790px">
<tr style="text-align:center">
<td onmouseover="chgBg(m1,'m1tlm0',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm0',0,1)" id="m1tlm0" onmousedown="f58('m1tlm0a')" class="m1mit" ><a id="m1tlm0a" onmouseover="window.status='Home page';return true" onmouseout="window.status='';return true" class="m1CL0" href="home.php" target="_parent">Home</a></td>
<td onmouseover="chgBg(m1,'m1tlm1',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm1',0,1)" id="m1tlm1" onmousedown="f58('m1tlm1a')" class="m1mit" ><a id="m1tlm1a" onmouseover="window.status='About Us';return true" onmouseout="window.status='';return true" class="m1CL0" href="aboutus.php" target="_parent">About Us</a></td>
<td onmouseover="chgBg(m1,'m1tlm2',3);exM(m1,'m1mn1','m1tlm2',event)" onmouseout="chgBg(m1,'m1tlm2',0);coM(m1,'m1mn1')" id="m1tlm2" class="m1mit" ><a id="m1tlm2a" class="m1CL0" href="javascript:void(0);" >Programs</a></td>
<td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Getting Started';return true" onmouseout="window.status='';return true" class="m1CL0" href="contactus.php" target="_parent">Getting Started</a></td>

</tr>
</table>

I virtually know no javascript, but have been trying to create some sliding menus. 4 Menus along the bottom of the screen that on mouse over, a sub menu slides up from them.

I managed to get them to work to slide up, but then when I put the code in to slide back down again it started spazzing out!

Can anyone help at all? Here's my javascript code.

Code:

<script type="text/javascript">

var curVisible;
var oldObject;
var pusher;
var pushBack;
var inMotion = false;

function reveal(obj) {

	if(curVisible != null) {
		oldObject = curVisible;
	}

	if(!inMotion) {
		curVisible = obj;		
		pusher = -100;
		pushBack = 40;
		document.getElementById(obj).style.visibility = "visible";
		document.getElementById(obj).style.bottom = pusher+"px";
		animateOut();
		animateIn();
	}
}

function hide() {
	animateIn();
}


function animateIn() {
	if (pushBack > -100) {
		inMotion = true;
		pushBack -=4;
		document.getElementById(oldObject).style.bottom = pushBack+"px";
		setTimeout(animateIn, 20);
	} else {
		document.getElementById(oldObject).style.visibility = "hidden";
		inMotion = false;
	}
}


function animateOut() {
	
	if(pusher < 40) {
		inMotion = true;
		pusher += 4;
		document.getElementById(curVisible).style.bottom = pusher+"px";
		setTimeout(animateOut, 20);
	} else {
		inMotion = false;
	}
}

</script>

Thanks very much. Have tried loads, but just can't seem to get it to work. It's a lot more complicated than I first thought.

Dave

Hi all,

I am new to this forum and still fairly new to website design and coding.

My girlfriend is a fashion designer and I said I would build her a website (one of those things I said whilst watching the football).

I am trying to find if a script exists to have an image slide-show which moves to the right when the cursor moves to the right and so on for the left. We have managed to find someone else who has done exactly what she wants but it's in flash and I have no experience at all in flash. So I was wondering if anyone knows of a script which does the exact same thing?

Below is the link to the site where they have managed to do what we are looking for in Flash:
http://www.matthewwilliamson.com/collections.php

Any help would be greatly appreciated.

Cheers guys