jQuery sensitivity to unrelated css selectors

Question

I have been working on a fork of this fiddle - all props go to the original author.

It is designed to work with ImageMapster to highlight an html list item when hovering over the image map, and vice-versa, highlight the appropriate image map when hovering the list item. As you would expect it works by adding and removing a class to and from the appropriate places.

I have been trying to use that code (and variations of) with Drupal 7 which adds plenty of classes of it's own to both the anchor of a menu item and its list item wrapper. That extra markup is causing issues with the above script, leaving me scratching my head.

Through a whole bunch of trial and error (I'm not very good at JS!) I have realised that specifically when Drupal adds a class of 'menu-depth-1' to the li, the script gets lost, and throws an error (from Chrome):

Uncaught Error: Syntax error, unrecognized expression: area[name=part-1 menu]

In this fork of the above script, all I have added is the markup which Drupal adds.

http://jsfiddle.net/PUncle/Tr4hE/32/

Changing the original script from:

<li class="menu-item-a"><a href="#">Part A</a></li>

To:

<li class="leaf menu-depth-1 menu-item-a"><a href="#">Part A</a></li

As far as I understand, the script is looking for a hyphenated selector, and when it encounters 'menu-depth-1' before it gets to the desired 'menu-item-a', its fails.

I think that it is specifically this part of the script which is at fault, but no matter what I try, I can't work out how to fix it.

function highlightArea(key) {
    $('area[name=part-' + key + ']').mouseenter();
    $('a').removeClass('hover');
    $('li.menu-item-' + key + ' a').addClass('hover');
}

What I need to do is 'harden' the script to make it very specifically target a particular selector and ignore anything else.

I did start going down the route of cleaning up Drupals excessive menu markup, but decided that clearing the way for 'blunt' code is probably not as effective as sharpening that code so that nothing else can affect it!

Any pointers would be greatly appreciated.

score 0 · Answer 1 · answered Jul 10 '13 at 13:17

0

try this

        $('a').hover(function () {
            var parts = $(this).closest('li').attr('class').split(' ');
            var parts1 = parts[1].split('-');
            var part = parts1[2];
            highlightArea(part);
        });

        //
        $('a').mouseleave(function () {
            var parts = $(this).closest('li').attr('class').split(' ');
            var parts1 = parts[1].split('-');
            var part = parts1[2];
            highlightAreaX(part);
        });

answered Jul 10 '13 at 13:17

sangram parmar

8,462
2
23
47

Thanks for this, it does solve the errors, but I can't seen to get the original functionality to work with those extra classes in there. It *should* highlight the correct area map when a menu item is rolled over. – PaperWeight Jul 11 '13 at 10:38

score 0 · Answer 2 · answered Jul 10 '13 at 13:25

0

The selector looks suspicious. Didn't you mean

area[name="part-1 menu"]

(I encountered problems with such selectors already myself, when without parentheses), or

area[name=part-1] menu

?

answered Jul 10 '13 at 13:25

Thanks @herby! Using `$('area[name="part-' + key + '"]').mouseenter();` did fix the errors, but like the other answer here, it still doesn't do what it should when those extra classes are there. – PaperWeight Jul 11 '13 at 10:44

jQuery sensitivity to unrelated css selectors

2 Answers2