How to make Javascript from ALA/Suckerfish Menus work in IE

L

liunx

Guest
Hi Guys,
I know absolutely nothing about Javascript and would not even be trying to use it except for IE pays no attention to something I'm trying to do in CSS.

So, you may all have had this question before, but here it goes again.
I'm trying to get the ALA/Suckerfish (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/horizdropdowns/">http://www.alistapart.com/articles/horizdropdowns/</a><!-- m -->) CSS drop down menus to work in IE and am having no success altering the suggested Javascript to make it work.

Here is my CSS code for relevant ID changes

#sidebar {
float: left;
width: 150px;
border-right: 1px solid #5B87A9;
border-top: 15px solid #666;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
font-size: .8em;
font-weight: bold;
}

#sidebar a {
display: block;
padding: 12px 0 3px 30px;
background-color: #A6BE83;
width: 120px;
text-decoration: none;
height: 20px;
border-bottom: 1px solid #5B87A9;
}

#sidebar a:link, #sidebar a:visited {
color: #336699;
text-decoration: none;
}

#sidebar a:hover {
background-color: #369;
color: #fff;
}

#sidebar ul li {
position: relative;
}

#sidebar li ul {
position: absolute;
left: 151px;
top: 0;
display: none;
}

#sidebar ul li a {
display: block;
text-decoration: none;
}

#sidebar li:hover ul {
display: block;
}


and here is the "improved Javascript" found in the comments section of the article

function fnSetHoverClass(parentID, tag,_ hoverClass) {
var el = document.getElementById(parentID);
if (el) {
el = el.getElementsByTagName(tag);
for (var i=0; i < el.length; i++) {
el.onmouseover = function()_ {this.className += " "+ hoverClass;}
el.onmouseout = function()_ {this.className = this.className.replace_(new RegExp(" "+ hoverClass +"\\b"), "");}
}
}
}


I changed several "placeholder" attributes that seemed obvious but still can't seem to make it work. I'm sure I'm overlooking something. Maybe you can help.

Thanks,
Ianfunction fnSetHoverClass(parentID, tag,_ hoverClass) {
var el = document.getElementById(parentID);
if (el) {
el = el.getElementsByTagName(tag);
for (var i=0; i < el.length; i++) {
el.onmouseover = function(){this.className += " "+ hoverClass;}
el.onmouseout = function(){
this.className = this.className.replace(new RegExp(" "+ hoverClass +"\\b"), "");
};
};
};
};

in short: remove the underscores(I've indented my version to check that you hadn't deleted anything at the same time, but your code doesn't HAVE to be indented, it's just recomended).Yeah, sorry I had done that already.

But shouldn't I be changing things like


var el = document.getElementById(parentID);

to

var el = document.getElementById(sidebar);
?

Its these that I don't know how is the correct way to format
things like

this.className = this.className.replace(new RegExp(" "+ hoverClass

it seems that I should be changing "this.className." to something specific from my CSS? This is what I don't get.

Oh and thanks for the super quick response!the javascript is fine, don't go changing it.

do you have a link, it could be how you are calling the function.Well,
its currently on an intranet site. But if I need to I can post it outside.

Here's the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Sales Toolkit Home</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" type="text/css" />
<script language="JavaScript">

function fnSetHoverClass(parentID, tag, hoverClass) {
var el = document.getElementById(parentID);
if (el) {
el = el.getElementsByTagName(tag);
for (var i=0; i < el.length; i++) {
el.onmouseover = function(){this.className += " "+ hoverClass;}
el.onmouseout = function(){
this.className = this.className.replace(new RegExp(" "+ hoverClass +"\\b"), "");
};
};
};
};

</script>
</head>
<body>


<?php
require('header.html');
require('sidebar.php');
require('db.php');
$result = mysql_query("SELECT * FROM `News` WHERE `category`= 'General' ORDER BY `dateadded` DESC limit 5");
?>


<div id="main">

<div id="news">
<h2>News</h2>
<div class="box">
<ul>
<?php
while ($row = mysql_fetch_array($result)) {

echo('<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">' . $row['headline'] . '</a></li>');
}
?>
</ul>
</div>
</div>

<div id="spotlight">

</div>

<div id="bannerad">

</div>
<div id="dashboard">
<h2>My Dashboard</h2>
<div class="box">

</div>
</div>
</div>

</body>
</html>


and the CSS is already posted here

let me know if this helps, if you need to see it in action let me know.
Thanks again for the quick responses!how about showing us some of the HTML your PHP generates? that's much more helpfull than your PHP code, which doesn't have an object by the id sidebar as it's hidden in an include...Oh OK, I thought all you wanted was how the javascript function was being called. Here's the generated code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Sales Toolkit Home</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" type="text/css" />
<script language="JavaScript">

function fnSetHoverClass(parentID, tag, hoverClass) {
var el = document.getElementById(parentID);
if (el) {
el = el.getElementsByTagName(tag);
for (var i=0; i < el.length; i++) {
el.onmouseover = function(){this.className += " "+ hoverClass;}
el.onmouseout = function(){
this.className = this.className.replace(new RegExp(" "+ hoverClass +"\\b"), "");
};
};
};
};

</script>
</head>
<body>

<div id="header">
<div id="userpref">

<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"logout.php" id="logout">Log Out</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"userprefs.php" id="pref">Preferences</a></li></ul>
</div><div id="welcome">
<h2>Welcome: <em> </em></h2>
<p>You have <em>3</em> proposals to review.</p>

</div>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://172.23.8.123/home.php"><img src="http://172.23.8.123/images/STKtitle.jpg" class="floatright" /></a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://172.23.8.123/images/ipfb.gif" />
</div><div id="sidebar">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://172.23.8.123/home.php">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">item two</a></li>

<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">item three</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">item four</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://172.23.8.123/documents.php">Documents</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">item one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">item one</a></li>

<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">item one</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">item one</a></li>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://172.23.8.123/msgbrd/" target="_blank">Message Board</a></li>
</ul>
</div><div id="main">

<div id="news">
<h2>News</h2>
<div class="box">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Test three</a></li><li><a href="#">Test four</a></li><li><a href="#">Test two</a></li><li><a href="#">Test one</a></li></ul>
</div>

</div>
<div id="spotlight">

</div>
<div id="bannerad">

</div>
<div id="dashboard">
<h2>My Dashboard</h2>

<div class="box">

</div>
</div>
</div>

</body>
</html>your not calling the function.Oh! :D
well, I said I knew nothing about Javascript and I meant it. :rolleyes:

So, where do I call it?use the default javascript, the one your using works for mulitiple menu's, your only have one dropdown.

If you are adding multiple dropdowns then you'll have to give me a while sort things out.OK, thanks to a link provided by a friend this now works.

using the Javascript from this link (<!-- m --><a class="postlink" href="http://htmldog.com/articles/suckerfish/dropdowns/example/bones1.html">http://htmldog.com/articles/suckerfish/ ... ones1.html</a><!-- m -->) it now works in PC IE!

Thanks Scragar for the help.

This can be marked SOLVED
 
You must log in or register to reply here.
Back
Top