Recent Topics
  1. b2evolution CMS Support Forums
  2. b2evolution Support
  3. Templates, skins, XHTML and CSS
  4. [1.10.x] Suckerfish menus IE javascript

[1.10.x] Suckerfish menus IE javascript

1 Oct 24, 2007 11:14    

My b2evolution Version: 1.10.x

Anyone know why my skin doesn't work the same way all my other pages do?

I'm using a Suckerfish styled pull-down menu (http://www.alistapart.com/articles/dropdowns/) throughout my site and as part of the custom skin in B2E. The CSS uses a list :hover effect to get the different menu parts to drop down when you mouse over them. The Suckerfish code includes an extra Javascript to get the hover funtionality working in IE, since this browser doesn't support the :hover CSS functionality on anything but basic links.

I don't know why the javascript doesn't work when I add it to _main.php. Why isn't my menu working? Any help would be appreciated!

Here's the javascript:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (document.all&&document.getElementById) window.onload=sfHover;

//--><!]]></script>

Here's the CSS:

.nav, .nav ul { /* all lists */
	margin: 0;
	list-style: none;
	font-size: 12px;
	font-family: san-serif;
}

.nav a {
	display: block;
	text-align: center;
	width: 125px;
	w\idth: 123px;
	padding: 5px 0 5px 0;
	color: #000099;
	text-decoration: none;
	z-index:100;
}

.nav li { /* all list items */
	float: left;
	width:125px;
	z-index:100;
	background: #FFFFCC;
	text-align:left;
	border-top: 1px solid #FFCC66;
	border-bottom: 1px solid #FFCC66;
}

.nav li li { /* all list items */
	float: left;
	z-index:100;
	width: 123px; /* width needed or else Opera goes nuts */
	line-height:13px;
	margin:0;
	border-top: 0px solid #FFCC66;
	border-bottom: 1px solid #FFCC66;
	border-left: 1px solid #FFCC66;
	border-right: 1px solid #FFCC66;
}

.nav li ul { /* second-level lists */
	position: absolute;
	z-index:100;
	margin-top:1px;
	background: #FFFFCC;
	w\idth: 125px;
	border-color:#FFCC66;
	border-style: solid;
	border-width: 0px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

.nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	z-index:100;
}

.nav li:hover, #nav li {
	background: #FFCC66;
	z-index:100;
}

And, finally, here is my site: www.en-now.com
And the blog: www.en-now.com/blog/index.php

[/code]

Back to top

2 Oct 29, 2007 14:25

The obvious answer to your question is: 'I don't know'. But we can try to find the solution together.

First: try the same code in the blog as the code you used in the main page:

<script src="scripts/menuScript.js"></script>


Second: try the javaScript without the comments:

<script type="text/javascript">


in stead of:

<script type="text/javascript"><!--//--><![CDATA[//><!--


and

</script>


in stead of:

//--><!]]></script>

Please report back to this topic.
Good luck

Back to top

3 Nov 01, 2007 19:49

On your main page (programs htm) you call the script with this

<script src="scripts/menuScript.js"></script>

It provides this code:

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}

if (document.all&&document.getElementById) window.onload=sfHover;

However, on your blog main.php, you don't use the script source (js file) link, but instead attempt to post the script (from that script file) directly on the page. That should work ok (normally), but it appears that the script you have on the page has commented out a major part of the code (see the highlights in red on the example following). Plus, that "CDATA" thing seems extraneous as well:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls

.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>[/quote]

Hopefully, some comparisons will reveal the problems (if what I have mentioned doesn't give a clue).

I think maybe this might show your problem... and the solution perhaps will be apparent.

Back to top

4 Nov 02, 2007 02:34

Thanks guys, but those suggestions didn't seem to work. Still no IE drop downs on the menu.

Could it have anything to do with text encoding?

The code in the page is as follows:

<script type="text/javascript">
	
sfHover = function() { 
var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
for (var i=0; i<sfEls.length; i++) { 
sfEls[i].onmouseover=function() { 
this.className+=" sfhover"; 
} 
sfEls[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
} 
} 
} 
if (document.all&&document.getElementById) window.onload=sfHover;
	
</script>

Back to top

5 Nov 02, 2007 02:55

hi,

A quick reply:
if javaScript is case sensitive, try changing LI in line 3 into li.
Both samredman and I hoped the code worked the way you put in your last post.

If you don't succeed I ask you to put a zipfile on your server with the complete skin (the folder and it's contents) so I can have a play with it.

Good luck

Back to top


Form is loading...