Forums

leehughes

Hi,

Am having trouble getting my drop down menu to work in IE.. am trying to validate it and I have 2 errors on the drop down..

Line 112, Column 100: Attribute "onMouseOver" is not a valid attribute. Did you mean "onmouseover"?

Line 112, Column 139: Attribute "onClick" is not a valid attribute. Did you mean "onclick"?

only problem is is that I can't find this is the code.. am using wordpress and it uses different files like header, sidebar etc i have looked and it's not in any of them..

Also, could this be the reason why it's not working in ie? It was made to work in IE and did before I added the flash fade..

Thanks

blue642

Do you have a link so we can help diagnose the problem?

leehughes

Ahhh sorry..

www.leehughes.co.uk

It should be in m header code right ?

This is my header code...

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" <?php language_attributes(); ?>>
<head profile=\"http://gmpg.org/xfn/11\">
<meta http-equiv=\"Content-Type\" content=\"<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>\" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link href=\"<?php bloginfo('stylesheet_url'); ?>\" rel=\"stylesheet\" type=\"text/css\" />
<link rel=\"pingback\" href=\"<?php bloginfo('pingback_url'); ?>\" />
<link rel=\"alternate\" type=\"application/rss+xml\" title=\"RSS 2.0 Feed for Posts from my site (the main feed)\" href=\"<?php bloginfo('rss2_url'); ?>\" />
<link rel=\"alternate\" type=\"application/atom+xml\" title=\"Atom 0.3 - <?php bloginfo('name'); ?> \" href=\"<?php bloginfo('atom_url'); ?>\" />
<link rel=\"alternate\" type=\"application/rss+xml\" title=\"Comments Feed - for all the comments on this site\" href=\"<?php bloginfo('comments_rss2_url'); ?>\" />

<!--[if IE]>
	<link rel=\"stylesheet\" type=\"text/css\" href=\"<?php bloginfo('template_directory'); ?>/ie.css\" />
<![endif]-->
        
        <!--[if IE 6]>
<script type=\"text/javascript\">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
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 (window.attachEvent) window.attachEvent(\"onload\", sfHover);
</script>

<style type=\"text/css\">
#outer {
width:1000px; /* Fallback width if javascript is off */
width: expression( 
(document.documentElement.clientWidth > 1152)? \"1150px\" : 
(document.documentElement.clientWidth < 702) ? \"700px\" : 
    \"auto\");}	  
</style>
<![endif]-->
        
<?php wp_head(); ?>

		
</head>

<body>
<div id=\"container\">
  <div id=\"header\">
    <div id=\"blog-name\"><h1><a href=\"<?php echo get_option('home'); ?>/\"><?php bloginfo('name'); ?></a></h1></div>
  <div id=\"navigation\">
<ul id=\"nav\">
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>    </div>
  </div>
  <div id=\"header-image\">
  <?php
include (ABSPATH.\"wp-content/flashfader/flashfaderhtml.txt\");
?>


  </div>

Many thanks

blue642

<div id=\"navigation\">
<ul id=\"nav\">
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>    </div>

This code is what generates your menu, specifically <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
In firebug, I see that each link that has child pages has some javascript attributes "onclick" and "onmouseover" like the two in your error message, but they are all lowercase as the error suggests. I also don;t get the error you do in IE7 here at work, the dropdown does not work and when I check the log I get a syntax error about line 2, characters 1 and 3 ( I can't copy and paste sadly...)

From the code you posted, I don't see what is injecting the javascript attributes into the navigation links.
the only onmouseover function I see in the header file is in the suckerfish JS


        <!--[if IE 6]>
<script type=\"text/javascript\">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
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 (window.attachEvent) window.attachEvent(\"onload\", sfHover);
</script>

which appears to be possibly the IE6 version of the javascript. and I don't see any other javascript calls.

I'll have to firebug it in a bit (at work now) to see if I can help further diagnose it. but this update is an fyi to see if other's can help as well...

leehughes

Hi mate..

I think I know what is causing javascript to be inserted into the navigation links.. Am using a plugin called page list plus which uses javascript to be able to unlink my parent pages. I couldn't figure out a way to disable them using wordpress so I used this plugin which also is the reason for my extra home parent cat on the right.. :(

The drop down doesn't work in any I.E since I added the flash fade so am looking to move that down below the header image now.. av spent too long doing that drop down menu and getting it to work in IE. I did it, then added the flash fade now it doesn't work again so am gonna move that below the header image now

thanks for helping :)

leehughes

Ahhh... figured it out..

I just disabled the plugin and checked my validation again and those two errors where now fixed..

So I need to figure out a way of disabling the parent links without using that plugin now :)

blue642

Hey!

I got home and took a look at this again, glad you got it solved, for the most part.

since you are using jquery, this should work...

<script type=\"text/javascript\">

$(document).ready(function () {

	$(\"li:has(ul)\").hover(function () {
		$(this).children(\"a\").click(function () {
			return false;
		});
	});

});


</script>

I am not in any capacity great at Jquery, but decided I'd try to tackle this as it seemed simple enough.
It looks for the user to hover over a list item that contains an unordered list (your drop-down markup is built this way)

Then when it finds that this happens, and the user clicks the anchor link associated with the list item it returns false, (same thing the plug-in did to deactivate the link)

Let me know if there's any problems with it, my quick and dirty test worked well.

EDIT: I also noticed the rollovers/dropdown don't work for me in Firefox.... any clue why?

leehughes

Hi,

Thanks for you help.. Does this mean that i can disable my parent links now?

Is there any way of me picking which ones I could do?

The drop down doesn't work for anything on a windows based browser.. Works fine on mac... It's since I added the flashfade to it.. am in the process of trying to move the drop down under the header image now so there is no conflict.. it's givin me too much a of headache

blue642

The script I posted will disable your parent links, as far as choosing which ones, I'd have to rethink the code.

If you can tell me which ones you don;t want disabled I can take a shot.

leehughes

Hi,

Multimedia, expeditions, charity, miscellaneous all need to have their links disabled..

Where would I place this code? In the header?

Many thanks

blue642

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" <?php language_attributes(); ?>>
<head profile=\"http://gmpg.org/xfn/11\">
<meta http-equiv=\"Content-Type\" content=\"<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>\" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link href=\"<?php bloginfo('stylesheet_url'); ?>\" rel=\"stylesheet\" type=\"text/css\" />
<link rel=\"pingback\" href=\"<?php bloginfo('pingback_url'); ?>\" />
<link rel=\"alternate\" type=\"application/rss+xml\" title=\"RSS 2.0 Feed for Posts from my site (the main feed)\" href=\"<?php bloginfo('rss2_url'); ?>\" />
<link rel=\"alternate\" type=\"application/atom+xml\" title=\"Atom 0.3 - <?php bloginfo('name'); ?> \" href=\"<?php bloginfo('atom_url'); ?>\" />
<link rel=\"alternate\" type=\"application/rss+xml\" title=\"Comments Feed - for all the comments on this site\" href=\"<?php bloginfo('comments_rss2_url'); ?>\" />

<!--[if IE]>
   <link rel=\"stylesheet\" type=\"text/css\" href=\"<?php bloginfo('template_directory'); ?>/ie.css\" />
<![endif]-->
       
        <!--[if IE 6]>
<script type=\"text/javascript\">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
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 (window.attachEvent) window.attachEvent(\"onload\", sfHover);
</script>

<style type=\"text/css\">
#outer {
width:1000px; /* Fallback width if javascript is off */
width: expression(
(document.documentElement.clientWidth > 1152)? \"1150px\" :
(document.documentElement.clientWidth < 702) ? \"700px\" :
    \"auto\");}    
</style>
<![endif]-->
       
<?php wp_head(); ?>

<script type=\"text/javascript\">

$(document).ready(function () {

   $(\"li:has(ul)\").hover(function () {
      $(this).children(\"a\").click(function () {
         return false;
      });
   });

});


</script>
      
</head>

<body>

You could post it as in the above example, after

wp_head();

and before the

</head>

tag.

I'll work on disabling only those links. May take a bit as I am new to jQuery

leehughes

Hi,

Thanks for this.. I added the code where you said but my parent links are still linking.. Not to sure if am doing something wrong or what..

leehughes

website has the code in it...

www.leehughes.co.uk

:)

blue642

jQuery is conflicting, I'll be right back, with a fix....


<script type=\"text/javascript\">
var $j = jQuery.noConflict();
     
  $j(document).ready(function () {

               $j(\"li:has(ul)\").hover(function () {
                      $j(this).children(\"a\").click(function () {
                             return false;
                        });
               });

});
 
</script>

try that instead.

leehughes

Wow.. i don't know if that's for the custom one for Multimedia, etc from what i can see it works for all choosen buttons except multimedia..

have a look :)

www.leehughes.co.uk :)

Thanks spud :)

blue642

Ooh, just noticed what you meant by certain links disabled.

That's already what the script does, it only disables the links that have drop down items. and the 4 you mentioned are all of the drop-downs.

I thought you meant that you waned one drop down that ALSO was click-able (say charity for example.)

Outside of all of the code issues, I wanted to wish you luck on your journey. It seems like a very ambitious plan, and sounds like it could be a lot of fun! I always wanted to go to Alaska, but I'm stuck here in Florida....

blue642

"leehughes" said:
Wow.. i don't know if that's for the custom one for Multimedia, etc from what i can see it works for all choosen buttons except multimedia..

have a look :)

http://www.leehughes.co.uk :)

Thanks spud :)

I didn't change it excpet to put it into no conflict mode, I built it that way to begin with as I thoughts that is what you meant, which apparently it is.

I tested it and it didn't work for multimedia, then refreshed and it workd fine, maybe just a cache issue...

leehughes

Thanks :)

What part of the code tells which parent page to disable? Just incase I wanna add more parent pages in future ;) I don't see any reference to certain pages.. quite confused how it's only picking the pages I requested.. code is an amazing thing :)

Cheers :)

p.s You're never stuck in Florida ;)

leehughes

Ohh i get it now..

It has disabled the links with drop down menus..

Ahhhhhhhhh clever ;)

blue642

I took an extra step and validated your code,

You need to fix a few things.

<h2><a href=\"http://feeds.feedburner.com/leehughes\">Subscribe via   <img src=\"http://www.leehughes.co.uk/wp-content/uploads/2009/09/feed-icon.gif\" alt=\"feed-icon\" title=\"feed-icon\" width=\"48\" height=\"48\" class=\"aligncenter size-full wp-image-150\" />[b]</a>[/b]</h2>

add the bolded part, you forgot to close the link.

 <br/><small>[b]</small>[/b]</div>

Again forgot to close the small tag... (why is there even a small tag here?

also this is the last,

<form role=\"search\" method=\"get\" id=\"searchform\" action=\"http://www.leehughes.co.uk/\" >

role is not an attribute for a form tag, what exactly was it for? I'm confused.

leehughes

on another note, will this script work if i move the drop drop under the header image?

due to conflicts with IE I have to move the drop down menu.. Just thought you might have written it for the position the drop down was in (i know nothing about jQUERY you see)

:)

leehughes

"blue642" said:
I took an extra step and validated your code,

You need to fix a few things.
<h2><a href=\"http://feeds.feedburner.com/leehughes\">Subscribe via   <img src=\"http://www.leehughes.co.uk/wp-content/uploads/2009/09/feed-icon.gif\" alt=\"feed-icon\" title=\"feed-icon\" width=\"48\" height=\"48\" class=\"aligncenter size-full wp-image-150\" />[b]</a>[/b]</h2>
add the bolded part, you forgot to close the link.
 <br/><small>[b]</small>[/b]</div>
Again forgot to close the small tag... (why is there even a small tag here?

also this is the last,
<form role=\"search\" method=\"get\" id=\"searchform\" action=\"http://www.leehughes.co.uk/\" >
role is not an attribute for a form tag, what exactly was it for? I'm confused.

Too kind :)

Thanks for the tips, validation does my head in.. Av only just started web design (as you might have guessed) and validation was just an extra kick in the nuts for me after IE headaches :D

blue642

"leehughes" said:
Thanks :)

What part of the code tells which parent page to disable? Just incase I wanna add more parent pages in future ;) I don't see any reference to certain pages.. quite confused how it's only picking the pages I requested.. code is an amazing thing :)

Cheers :)

p.s You're never stuck in Florida ;)

Here's a quick breakdown of how it works.

Your navigation is built as an unordered list (ul element) with list items (li element) that are your actual links....

<ul >
<li><a href=\"http://www.leehughes.co.uk/sponsorship/\">Sponsorship</a></li>
<li><a href=\"http://www.leehughes.co.uk/miscellaneous/\">Miscellaneous</a></li>
<li class=\"page_item page-item-41\"><a href=\"http://www.leehughes.co.uk/blog/\">Blog</a></li>
<li class=\"page_item page-item-36\"><a href=\"http://www.leehughes.co.uk/charity/\">Charity</a></li>
<li class=\"page_item page-item-15\"><a href=\"http://www.leehughes.co.uk/expeditions/\">Expeditions</a></li>
<li class=\"page_item page-item-25\"><a href=\"http://www.leehughes.co.uk/multimedia/\">Multimedia</a></li>
<li class=\"page_item page-item-9\"><a href=\"http://www.leehughes.co.uk/route/\">Route</a></li>
<li class=\"page_item page-item-4 current_page_item\"><a href=\"http://www.leehughes.co.uk\">Home</a></li>
</ul>

Inside of certain list items you have another list of links, such as,


<li><a href=\"http://www.leehughes.co.uk/miscellaneous/\">Miscellaneous</a>
<ul>
	<li><a href=\"http://www.leehughes.co.uk/miscellaneous/links/\">Links</a></li>
	<li><a href=\"http://www.leehughes.co.uk/miscellaneous/facts-and-stats/\">Facts and stats</a></li>
        <li><a href=\"http://www.leehughes.co.uk/miscellaneous/faqs/\">FAQs</a></li>
	<li><a href=\"http://www.leehughes.co.uk/miscellaneous/equipment/\">Equipment</a></li>
	<li><a href=\"http://www.leehughes.co.uk/miscellaneous/permaculture/\">Permaculture</a></li>
</ul>
</li>

The code searches for a user to mouseover a list item that has another list stacked inside of it, and if they click the link, it directs them nowhere.

speaking of this, you should change the first line to this:


$j(\"#nav li:has(ul)\").hover(function () {

that way it only searches this navigation system for this, If not, if you ever created a second navigation, it would disable those parent links also, (unless you want that)

leehughes

Ahh makes alot of sense now :)

Thanks :)

blue642

"leehughes" said:

Too kind :)

Thanks for the tips, validation does my head in.. Av only just started web design (as you might have guessed) and validation was just an extra kick in the nuts for me after IE headaches :D

Lol, no problem at all, and I know how you feel, I'm still new myself.

As for moving the dropdown, it should work anywhere you move it.

as for the validation, they were easy mistakes to make, and easy mistakes to correct, so no big worries. sometimes its just hard to understand what the heck they mean on the page (so much tech mumbo jumbo.) We need an easier validator, that says "Hey stupid, close this tag!" or more politely as is the new trend... "Oops! Excuse me, you forgot to close this tag, you should do that A.S.A.P...."

@Chris Coyier, you listening? I think this should be your next web service project ;D

leehughes

Agreed :P

leehughes

"blue642" said:

jQuery is conflicting, I'll be right back, with a fix....


<script type=\"text/javascript\">
var $j = jQuery.noConflict();
     
  $j(document).ready(function () {

               $j(\"li:has(ul)\").hover(function () {
                      $j(this).children(\"a\").click(function () {
                             return false;
                        });
               });

});
 
</script>

try that instead.

am not sure why but this isn't working anymore..

it's still in my code but not working..

treehouse : what would you like to learn today?

Forums

[Solved] Validating WordPress dropdown