JavaScript - Fancy Underling In Menu Following Mouse.

Hey, have another question. I've made a basic website template, which I'm still working on, but I'd like to make it compatible with IE before I go any further.

I'm having trouble with the drop down menu that is located in the top right section on the site...in the banner.

It seems to work fine in FireFox (which is what I've built it for), Safari, and Chrome, but it will not work in Internet Explorer. Problem is....it doesn't hide the links, or "il" section. I was able to get it to do so, but then it would not let you select any of them...they would disappear as soon as you moved your mouse off of the top section, or "ul" i believe it's called.

Here is the website link http://pmportfolio.net/tester
and here is the CSS sheet for the menu http://pmportfolio.net/tester/dropdown.css

I'm sure I'm probably missing some things as well as having things I don't need. I'm lost.

Here is the code for the menu:
Code:

<div id="rgbar">
	<div id="container">

		<div id="specialtext">
			<div id="gameselector">
				<div class="menu">
					<ul>

					 <li><a href="#">Drop Down Links
					  <ins>

						<table cellspacing="0" cellpadding="0"><tr><td>
							<ul>
							    <li><a href="#" rel="nofollow" target='_blank'>&nbsp;First One</a></li>
                        		<li><a href="#" rel="nofollow" target='_blank'>&nbsp;Second One</a></li>
                     		    <li><a href="#" rel="nofollow" target='_blank'>&nbsp;Third One</a></li>
                      		    <li><a href="#" rel="nofollow" target='_blank'>&nbsp;Fourth One</a></li>
							</ul>

						</td></tr></table>
					  </ins></a>					 </li>
					</ul>
				</div>
			</div>
		</div>
</div>

and here is the CSS
Code:

/*	#rgbar
	{
	position:absolute;
	top:8px;
	left:0px;
	width:1180px;
	height:80px;
	border:0px;
	display:block;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding:0px;
	margin:0px;
	*/

/* SPECIAL TEXT FORMATION */
	#rgbar #container #specialtext
	{
	width:190px;
	text-align:center;
	font-size:10px;
	color:#FFFFFF;
	padding:4px 0px 0px 0px; font-weight: bold;
	}
	#rgbar ins
	{
		text-decoration:none;
	}
	#rgbar a,
	#rgbar a:link,
	#rgbar a:visited,
	#rgbar a:active,
	#rgbar a:hover
	{
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:10px;
		color: #ccc
	}

	/* remove all the bullets, borders and padding from the default list styling */
	#rgbar #container #specialtext #gameselector .menu ul
	{
		padding:0;
		margin:0;
		list-style-type:none;
	}
	/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
	#rgbar #container #specialtext #gameselector .menu li
	{
		float:left;
		width:175px;
		position:relative;
		z-index:100; left:5;
	}
	/* style the links for the top level */
	#rgbar #container #specialtext #gameselector .menu a,
	#rgbar #container #specialtext #gameselector .menu a:visited
	{
		display:block;
		text-align:left;
		font-size:10px;
		text-decoration:none;
		color:#000000;
		width:169px;
		height:16px;
		padding-left:4px;
		line-height:16px;
		background-color: #c8c8c8; background-image: url("images/dropbg.png"); border: 1px solid #000000;

-moz-border-radius-topright: 2px; /* mozilla border radius */
-webkit-border-radius-topright: 2px; /* safari and chrome border radius */
border-radius-topright: 2px; /* opera border radius */

-moz-border-radius-topleft: 2px; /* mozilla border radius */
-webkit-border-radius-topleft: 2px; /* safari and chrome border radius */
border-radius-topleft: 2px; /* opera border radius */
		}
	/* a hack so that IE5.5 faulty box model is corrected */
	* html #rgbar #container #specialtext #gameselector .menu a,
	* html #rgbar #container #specialtext #gameselector .menu a:visited
	{
		width:175px;
		/* QUIRKS MODE */
		/* w\idth:175px; */
		/* VALID MODE */
		w\idth:173px;
	}
	/* IE 6 to OPERA Switch */
	html > body #rgbar #container #specialtext #gameselector .menu ul ul
	{
		p\osition:relative;
		d\isplay:none;
		top: 18px; left:-5;
	}
	/* style the table so that it takes no ppart in the layout - required for IE to work */
	#rgbar #container #specialtext #gameselector .menu table
	{
		position:absolute;
		top:0;
		left:0;
		border-collapse:collapse;
	}

	/* style the second level links */
	#rgbar #container #specialtext #gameselector .menu ul ul a,
	#rgbar #container #specialtext #gameselector .menu ul ul a:visited
	{
		text-align:left;
		background:#222;
		color:#bbb;
		height:auto;
		line-height:12px;
		padding:3px;
		width:167px;
		border:1px solid #000000;
		border-width:0 1px 1px 1px;
-moz-box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.8);
-webkit-box-shadow: inset 0 0 1em #000000;
box-shadow: inset 0 0 1em #000000;

-moz-border-radius: 0px; /* mozilla border radius */
-webkit-border-radius: 0px; /* safari and chrome border radius */
border-radius: 0px; /* opera border radius */
	}

	#rgbar #container #specialtext #gameselector .menu ul ul li.last,
	#rgbar #container #specialtext #gameselector .menu ul ul li.last:visited
	{
		text-align:left;
		background:#000000;
		color:#bbb;
		height:auto;
		line-height:12px;
		padding:0;
		width:171px;
		w\idth:173px;
		border:1px solid #555;
		border-width:0 1px 1px 1px;
		b\order-width:0 1px 1px 1px;
	}
	#rgbar #container #specialtext #gameselector .menu ul ul li.last a,
	#rgbar #container #specialtext #gameselector .menu ul ul li.last:visited a:visited
	{
		border: 0px;
		width: 173px;
		w\idth: 166px;
	}

	/* yet another hack for IE5.5 */
	* html #rgbar #container #specialtext #gameselector .menu ul ul a,
	* html #rgbar #container #specialtext #gameselector .menu ul ul a:visited
	{
		width:175px;
		/* QUIRKS MODE */
		/* w\idth:175px; */
		/* VALID MODE */
		w\idth:167px;
	}
	/* style the top level hover */
	#rgbar #container #specialtext #gameselector .menu ul a:hover
	{
		color:#000000;
		background-color: #c8c8c8;
	}
	#rgbar #container #specialtext #gameselector .menu ul ul a:hover
	{
		color:#FFF;
		background:#2a78c6;
	}
	#rgbar #container #specialtext #gameselector .menu :hover > a,
	#rgbar #container #specialtext #gameselector .menu ul ul :hover > a
	{
		color:#c8c8c8;
		background:#222;
	}
	/* make the second level visible when hover on first level list OR link */
	#rgbar #container #specialtext #gameselector .menu ul li:hover ul,
	#rgbar #container #specialtext #gameselector .menu ul a:hover ul
	{
		visibility:visible;
	}
	/* IE 6 to OPERA Switch */
	html > body #rgbar #container #specialtext #gameselector .menu ul li:hover ul,
	html > body #rgbar #container #specialtext #gameselector .menu ul a:hover ul
	{
		d\isplay:block;
	}

I'm ready to give up and just find another one online somewhere that will work.

Hi Exprts,

I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS.

Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all.

Please suggest me any solutions for this. Thank you in advance.

I have an assignemnt due next week and i am running into a problem of the webpage not sliding out the menus when the mouse is hovered over it. The directions were split up by each function code.

Open the slidingmenu.js file and insert a command to run the function makeMenus when the browser has completed loading the page.
Add the following three global variables to the file:
currentSlide- used to reference the sliding menu currently displayed in the document. Set its initial value to null.
timeID- used to reference timed interval commands. Set its initial value to null.
leftPosition- used to store the left coordinate of the active sliding menu. Set its initial value to 0.
Code:

window.onload = makeMenus;
var currentSlide = null;
var timeID = null;
var leftPosition = 0;

8. Add the makeMenus() function. The purpose of this function is to create a reference to all sliding menus in the document and to apply event handlers to objects in the document. Add the following commands to the function:
a. Create an instance of the array object named slideMenus.
b. Use the getElementsByTagName() method to store all of the elements in the document in an array named allElements.
c. Loop through the elements in the allElements array, pushing all of the elements belonging to the slideMenu class into the slideMenus array.
d. Loop through all of the items in the slideMenus array and apply the onmouseover event handler to those objects to run the showSlide() function. Also, for each object in the slideMenus array, reference the first ul element within that object and set the value of the ul elements left style property to 0px. This command moves all sliding menus (enclosed in unordered lists) to the far left of the page. That can be accomplished with this line of code, where j is the counter variable in a for loop:

slideMenus[j].getElementByTagName("ul")[0]style.left="0px";

e. Add onclick event handlers to the elements with ID values of head and main, running the closeSlide function.

Code:

function makeMenus() {
    var slideMenus = new Array();
    var allElements = document.getElementsByTagName("*");
    for (var i = 0; i < allElements; i++) {
        if (allElements[i].className == "slideMenu") slideMenus.push(allElements[i]);
    }
    for (var i = 0; i < slideMenus.length; i++) {
        slideMenus[i].onmouseover = showSlide;
        slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";
    }

    document.getElementById("head").onclick = closeSlide;
    document.getElementById("main").onclick = closeSlide;
}

9. Add the showSlide() function to the file. The purpose of this function is to display a sliding menu on the Web page. In the first line of the function, create a variable named slideList that stores an object reference to the first ul element nested within the current object (as referenced by the this keyword).
slideList=this.getElementByTagName("ul")[0];
10. Add an if statement to the showSlide() function. The purpose of the if statement is to test whether a sliding menu is currently displayed on the page. If the currentSlide object is equal to null OR the ID of the currentSlide is not equal to the ID of the slideList variable, then do the following:
. Run the closeSlide() function.
a. Set the currentSlide variable equal to the slideList variable.
b. Set the display style of the currentSlide variable to block.
c. Run the moveSlide() function repeated at intervals of 1 millisecond. Store the ID of the timed function in timeID.

Code:

function showSlide() {
    var slideList = this.getElementsbyTagName("ul")[0];
    if ((currentSlide = null) || (currentSlide != slideList)) {
        closeSlide();
        currentSlide = slideList;
        currentSlide.style.display = "block";
        timeID = setInterval("moveSlide()", 1);
    }
}

11. Add the closeSlide() function. The purpose of this function is to close any active sliding menu. Use object detection to confirm that the currentSlide variable is not equal to null and then run the following commands:
. Clear the timed function referenced by the timeID variable.
a. Set the left style of the currentSlide object to 0px and set the display style to none.
b. Set the value of currentSlide to null

Code:

function closeSlide() {
    if (currentSlide) {
        currentSlide.style.display = "none";
        currentSlide = null;
    }
    clearInterval(timeID);
    currentSlide.style.left = "0px";
    currentSlide.style.display = "none";
    currentSlide = null;
}

12. Add the moveSlide() function. The purpose of this function is to move a sliding menu horizontally across the page until the left coordinate of the menu exceeds 220 pixels. Add the following commands to the function:
. Increase the value of the leftPosition variable by 5.
a. If the value of the left position of the currentSlide object is less than or equal to 220:

if parseInt((currentSlide.style.left) <=220) {

then set the left style of that object to the coordinates leftPositionpx where leftPosition is the value of the leftPosition variable.
b. Otherwise, clear the timed function referenced by the timeID variable and reset the value of the leftPosition variable to 0.
Code:

function moveSlide() {
    leftPosition = leftPosition + 5;
    if (parseInt(currentSlide.style.left) <= 220) {
        object.style.left = leftPosition + "px";
    } else {
        clearInterval(timeID);
        leftPosition = 0;
    }
}

Where did i go wrong? The website is hosted here.

Using onclick=window.open function in js to open a pdf file link in a new popup window.

Works fine to display the file onscreen, but not if the user wants to save the file client-side to their computer.

The right-hand-button context menu for the mouse will allow the user to download, but the file saved will be a html dump file for the webpage
and the name of the file will be that for the webpage.
Of course I can use the easy <a href> method for download links and the mouse context menu options will be as expected,
but I can only use target="-blank" or target="_self" .
I need a popup window to open.

Could use :
oncontextmenu="alert('Left click the link to open, and then SAVE from with the pdf viewer')
to advise users how to save the file, and could use
"javascript: void(0)"
to eliminate most mouse context menu options, so the user won't bother try.

So how can I get a link to a file which can be viewed in a popup window and downloaded using mouse right-hand context menu?

Any advice massively appreciated!