jQuery bind hover and click functions

Question

I have a map with individual numbered facilities marked with a dot that changes color when hovered or selected. When selected, text in a separate container changes content depending on which facility is selected.

I also have a legend of the numbers under the map. When the legend text is clicked, it also changes the text content of the container. Clicking on either the dot or legend individually works fine changing the color of the hovered and selected dots or legend text.

Now I'm trying to combine the effect of hovering over/clicking the dot to trigger the associated legend text to hover/become selected and vice-versa.

This is my very first attempt at jQuery so please be understanding! I've only been at this about a day. Reading as much as I can -- this is probably an easy solution, but I'm not seeing it. I tried making a new variable combining the dot and legend text and linking them through the shared facility name and that didn't work. I thought the on (bind) command would link the actions together, but that didn't work either. Any suggestions would be so greatly appreciated. Thanks in advance!

code

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="map_container">
<a class="dot" style="left: 315px; top: 189px;" facility="bldg4" work="bldg4work"></a>
<a class="dot" style="left: 514px; top: 188px;" facility="bldg7" work="bldg7work"></a>
<div class="legend">
4. <a class="legt" facility="bldg4" work="bldg4work">Primary Clarifiers - West</a><br />
7. <a class="legt" facility="bldg7" work="bldg7work">Secondary Clarifiers</a><br />
</div>
</div>
<script>
$("a.dot, a.legt").on({click: function(){
$("a.dot").removeClass("selected");
$(this).addClass("selected");
$("a.legt").removeClass("selected");
$(this).addClass("selected");
var work = ".work_detail#" + $(this).attr("work");
var htmlCode = $(work).html();
$(".detail_container").fadeOut(500, function(){
$(".detail_container .work_detail").html(htmlCode);
$(".detail_container").fadeIn(500);
});
}
});
</script>
</body>
</html>

css
.map_container a.dot {
display: block;
height: 20px;
width: 20px;
background-image: url(../images/dots.png);
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
position: absolute;
}
.map_container a.dot:hover {
background-position: 0px -20px;
}
.map_container a.dot.selected {
background-position: 0px -40px;
}   
.map_container a.legt {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #F00;
font-weight: bold;
text-decoration: none;
}
.map_container a.legt:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #FF0;
font-weight: bold;
background-color: #630;
text-decoration: none;
}
.map_container a.legt.selected {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #0F0;
background-color: #630;
}

I tried this for the hover -- I know the syntax is probably not correct, but am I close?

    $('a.dot[facility*]').hover(function(){
    $('a.legt[facility*]').toggleClass('a.legt.hover');
    });

facility and work are invalid attributes, you should use data-facility and data-work instead. — m90
– m90, Commented Dec 27, 2012 at 17:54
The map is an image that is part of the background setup in the css of map_container — user1930741
– user1930741, Commented Dec 27, 2012 at 17:55
m90 -- being new at this I'm not quite sure what you mean by using data-facility and data-work. Do I rename them this way or is data used for something else in jQuery. I'm trying to investigate that now. — user1930741
– user1930741, Commented Dec 27, 2012 at 18:03
The best (valid) way to use custom attributes on HTML elements is by prefixing them with data-, read about it here — m90
– m90, Commented Dec 27, 2012 at 18:05

Syon · Accepted Answer · 2012-12-27 19:31:57Z

If you need to change the hover state of two elements at the same time, then you'll need to remove the pseudo-class :hover and let jQuery handle that for you. I turned your :hover into a .hover class. Then on mouse-enter I apply the class to the dot and the legend and mouse-leave remove the class from both. I created a fiddle with the example (had to change your background colors on the dot to see it working, you can delete out that part). Also, for custom attributes you'll want to use data- attributes as mentioned in the comments. Here's a jsFiddle Example

HTML

<div class="map_container">
    <a class="dot" style="left: 315px; top: 189px;" data-facility="bldg4" data-work="bldg4work"></a>
    <a class="dot" style="left: 514px; top: 188px;" data-facility="bldg7" data-work="bldg7work"></a>
    <div class="legend">
        4. <a class="legt" data-facility="bldg4" data-work="bldg4work">Primary Clarifiers - West</a><br />
        7. <a class="legt" data-facility="bldg7" data-work="bldg7work">Secondary Clarifiers</a><br />
    </div>
</div>

jQuery

$('a.dot, a.legt').on({
    mouseenter : function(){
        var facility = $(this).data('facility');
        $('a[data-facility='+facility+']').addClass("hover");
    },
    mouseleave : function(){
        var facility = $(this).data('facility');
        $('a[data-facility='+facility+']').removeClass("hover");
    },
    click: function() {
            var $this = $(this),
            facility = $this.data('facility'),
            work = $this.data('work'),
            htmlCode = $('.work_detail#'+work).html(),
            $detailContainer = $('.detail_container');

        $('a.dot, a.legt').removeClass('selected');
        $('a[data-facility='+facility+']').addClass("selected");

        $detailContainer.fadeOut(500, function() {
            $detailContainer.find(".work_detail").html(htmlCode).end().fadeIn(500);
        });
    }
});

CSS

.map_container a.dot.hover {
    background-position: 0px -20px;
}
.map_container a.legt.hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #FF0;
    font-weight: bold;
    background-color: #630;
    text-decoration: none;
}

Thank you and m90 for the tips! It works in the fiddle so I'll be able to apply it. Thanks for educating me. I appreciate your time and expertise.

Adil · Accepted Answer · 2012-12-27 18:07:16Z

1

Assuming your need bldg as starting value of facility attribute. You also have to add href to your anchor and add text for anchor tags as well.

Live Demo

 $('a.dot[facility^=bldg]').hover(function(){
    $('a.legt[facility^=bldg]').toggleClass('a.legt.hover');
 });

edited Dec 27, 2012 at 18:07

answered Dec 27, 2012 at 17:54

Adil

148k25 gold badges217 silver badges207 bronze badges

2 Comments

user1930741 Over a year ago

Adil, I tried that and still didn't work. I'm putting this code in the document.ready and before the click function, if that matters.

user1930741 Over a year ago

Thanks, but that toggles all the legend text, not the specific legend text associated with the dot I hover over, and it only works one way. I want to be able to hover over dot 4 and have legend 4 text change to hover and then click dot 4, have that change to the selected state and legend 4 text change to selected as well and also work in reverse. If I hover/click on legend 4 text I want the dot 4 to change as well. I can't figure out how to link the 2 together.

Collectives™ on Stack Overflow

jQuery bind hover and click functions

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related