How to target separate dynamic div once Cluetip activates?

Question

I have a catalog of products. When you rollover the thumbnail - description of the product appears in tooltip (Cluetip). I need a shadow to appear around the related image when Cluetip is activated.

For that I created separate div with shadow around image and This is how I target div when Cluetip activates:

onActivate:   function() { $("#shadow").fadeIn(1000); }

But the problem is in my case CMS generates div's IDs dynamically, so they have names like #shadow6, #shadow8, #shadow17, etc.

My question is: How to target specific dynamic div's ID, once Cluetip is activated on it?

jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $('.thumbnail').cluetip({
            fx: {
                open: 'fadeIn',
                openSpeed: '2000'
            },

            showTitle: false,
            cursor: 'pointer',
            positionBy: 'auto',
            height: '210px',
            topOffset: 0,
            leftOffset: 20,
            local: true,
            sticky: true,
            mouseOutClose: true,

            onActivate: function () {
                $("#shadow").fadeIn(1000);
            },

            onHide: function () {
                $("#shadow").fadeOut(300);
            }
        });
    });
</script>

HTML/PHP (In the loop)

<div id="shadow{$obj_id}" style="position: absolute; display:none;     
    width:150px; height:190px;"></div>
<div class="thumbnail">
    <img src="/images/product.jpg" />
</div>

ACTUAL CODE

<div id="shadow1"></div>
<a href="/shoe-model-name.html">
    <span class="cm-template-box" template="common_templates/image.tpl" id="te3">
    <img class="cm-template-icon hidden" src="/skins/test/customer/images/icons/layout_edit.gif" width="16"     height="16" alt="" />
    <img class="thumbnail" rel="#popupz1" src="/images/product-tmb.jpg" width="150"     height="180" alt=""  /></span>
 </a>

Are the elements that trigger the tooltip somehow related to the shadow elements? What does your markup look like? — m90, Mar 30 '12 at 06:30
I want to achieve effect like here: [link](http://www.gucci.com/us/category/f/women_s_shoes) — Tim, Mar 30 '12 at 06:51
yes there's closing span in the end.. accidentally erased when pasted here. I tried ur solution with prev.. for some reason it doesn't work. Prev() suppose to hit the first element with the class "cluetip-shadow" or just any prev element(tag) ? — Tim, Mar 30 '12 at 07:38
That was just a suggestion for an alternate approach.... See my edit on how to deal with your actual markup. — m90, Mar 30 '12 at 07:44
I tried it already.. don't know why it doesn't work. As I understood it should target the previous div with class "cluetip-shadow', but it doesn't. — Tim, Mar 30 '12 at 07:45
`prev` assumes that the element is a "direct neighbour". If that's not the case you can use `prevAll`. See: http://api.jquery.com/prev/ I wrote that edit based on the *simplified* markup you wrote. — m90, Mar 30 '12 at 07:47
Maybe I should wrap whole link into another div put clue tip class on it and try prev. again. In this case the structure will be like in ur answer. — Tim, Mar 30 '12 at 07:51
It's all just a matter of knowing how your markup looks like and knowing how to traverse the DOM using jQuery. See: http://api.jquery.com/category/traversing/ The examples are really great! Good luck. — m90, Mar 30 '12 at 07:53

m90 · Accepted Answer · 2012-03-30T07:56:08.443

You should be able to refer to your shadow element using the Attribute Starts With Selector like:

$(this).closest('a').prev('div[id^="shadow"]');

This selects the previous element to the first anchor wrapping the cluetip-triggering .thumbnail (i.e $(this)) in case it a. is a div and b. its id starts with the String "shadow". Based on the markup you have shown this should be working.

i.e.:

onActivate: function(){
   $(this).closest('a').prev('div[id^="shadow"]').fadeIn(1000);                               
},

onHide: function(){ 
   $(this).closest('a').prev('div[id^="shadow"]').fadeOut(300);                               
}

See this working fiddle with your actual markup.

EDIT: Since you seem to have access to the PHP that generates the markup why don't you just use a class to refer to your shadow elements? In case you would have markup like:

<div id="shadow8" class="cluetip-shadow" style="position: absolute; display:none; width:150px; height:190px;" ></div>

<div class="thumbnail" >
   <img src="/images/product.jpg" />
</div>

You could just do:

$(this).prev('.cluetip-shadow').doSth();

Does not make to much of a difference in your case since it is rather simple, but it can get really helpful when things get bigger and more complex.

@Tim You should be able to use the `Attribute Starts With Selector` in any case. The only difference is that you do have to know how the elements really are related. In case you need help on that you will have to add the actual markup. — m90, Mar 30 '12 at 07:18

How to target separate dynamic div once Cluetip activates?

1 Answers1