current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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');
    });
share|improve this question
1  
what kind of map are you using? –  povilasp Dec 27 '12 at 17:53
2  
facility and work are invalid attributes, you should use data-facility and data-work instead. –  m90 Dec 27 '12 at 17:54
    
The map is an image that is part of the background setup in the css of map_container –  user1930741 Dec 27 '12 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 Dec 27 '12 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 Dec 27 '12 at 18:05
show 1 more comment

2 Answers

up vote 1 down vote accepted

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;
}
share|improve this answer
    
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. –  user1930741 Dec 27 '12 at 20:26
add comment
up vote 1 down vote

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');
 });
share|improve this answer
    
Will .toggleClass really work like this? –  m90 Dec 27 '12 at 17:58
    
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 Dec 27 '12 at 18:01
    
@user1930741 I have updated my answer with working example. –  Adil Dec 27 '12 at 18:08
    
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. –  user1930741 Dec 27 '12 at 18:26
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.