Question

Building a site on CargoCollective, but it appears they use jQuery 1.4.2 which seems not to have the functionality I need.

So, the result I’m aiming for is this: http://jsfiddle.net/hendos43/a3hFh/1/

In case you can’t see that for some reason, it’s as follows, if you can, skip until after the code:

Aim:

Gallery of photos of employees which, when hovered over will display
bio (seperate div), which will not disappear onmouseOut (when mouse
stops hovering over image), but will stay there until another image is
hovered over, triggering the next mouseover event.

The code I have used is this:

JS:

 $(document).ready(function() {
    $('a[id^="link"]').mouseover(function() {
        $div = $('div#' + $(this).data('hide'));
        $div.siblings('[name^="people_bio"]').fadeOut(0).end().fadeIn(200, function() {
            if (!$div.is(':visible')) {
                $('nothing').fadeIn(40);
            }
        });
    });
});​

CSS:

#chris,
#patrick,
#jonathan,
#toby { position:absolute;
    left:285px;
    top:10px;
    border: 0px;
    background:none;
    padding: 5px; 
    width: 150px;
}

#holder { width:270px;
    position:absolute;
    top:10px;
    left:10px;}                

.hidden{
    display:none;
}
.shown{
    display:block;
}
​

HTML:

<div id="holder">
    <a id="link_chris" href="javascript:"  data-hide="chris"><img src="http://payload.cargocollective.com/1/2/77014/2272969/patrick%20crop.jpg"></a>
    <a id="link_patrick" href="javascript:"  data-hide="patrick"><img src="http://payload.cargocollective.com/1/2/77014/2272969/patrick%20crop.jpg"></a>
    <a id="link_jonathan" href="javascript:"  data-hide="jonathan"><img src="http://payload.cargocollective.com/1/2/77014/2272969/patrick%20crop.jpg"></a>
    <a id="link_toby" href="javascript:"  data-hide="toby"><img src="http://payload.cargocollective.com/1/2/77014/2272969/patrick%20crop.jpg"></a>
</div>

      <div name="people_bio" id="chris" class="hidden">chris' bio</div>
      <div name="people_bio" id="patrick" class="hidden">patrick's bio</div>
      <div name="people_bio" id="jonathan" class="hidden">jonathan's bio</div>
      <div name="people_bio" id="toby" class="hidden">toby's bio</div>
​

Unfortunately, this doesn’t seem to work, presumably because there were some changes to jQuery’s functioning on this feature in 1.4.4, and cargo uses 1.4.2?

Using the test options in jsFiddle, it works in 1.4.4, but not in 1.4.2, and linking up 1.7 in the custom HTML section appears to break the rest of the site, and make this feature work, but the divs ignore their CSS styled positioning anyway. Have also tried .hover with the same effects.

Anyone got any solutions, please?

(Please ignore that the images are the same, this is illustrative).

Answer 1

Instead of using data you could use rel

Demo working on 1.3.2