Show only div of the product hovering in category grid with jQuery

Posted by Dane on Stack Overflow See other posts from Stack Overflow or by Dane
Published on 2011-11-15T15:18:39Z Indexed on 2011/11/15 17:51 UTC
Read the original article Hit count: 172

Filed under:
|
|
|
|

On Magento, I'm trying to get avalable attributes per product in a new div (show/ hide onmouseover) as soon as I hover a product. Unfortunately, my jQuery code opens every div with the same name. I think, I need to do it with jQuery(this) but I tried it in a 1000 different ways, and it won't work. Maybe, somebody here can help me with a better code.

jQuery(function() {
    jQuery('.slideDiv').hide().data('over', false);
    jQuery('#hover').hover(function() {
      jQuery('.slideDiv').fadeIn(); 
    }, function() {
      // Check if mouse did not go over .dialog before hiding it again
      var timeOut = setTimeout(function() {
        if (!jQuery('.slideDiv').data('over')) {
          jQuery('.slideDiv').fadeOut();
          clearTimeout(timeOut);
         }
       }, 100);
    });

    // Set data for filtering on mouse events for #hover-here
    jQuery('.slideDiv').hover(function() {
      jQuery(this).data('over', true);
    }, function() {
      jQuery(this).fadeOut().data('over', false);
    });
});

The PHP just prints the attributes needed.

<a href="#" id="hover">Custom Attributes</a>
    <div class="slideDiv">                            
<?php
$attrs  = $_product->getTypeInstance(true)->getConfigurableAttributesAsArray($_product);
foreach($attrs as $attr) {
    if(0 == strcmp("shoe_size", $attr['attribute_code'])) {
        $options    = $attr['values'];
        print "Größen:<br />";
        foreach($options as $option) {
            print "{$option['store_label']}<br />";
        }
    }
}
?>
</div>

I added the script to [new link] http://jsfiddle.net/xsxfr/47/ so you can see there, that it is not working like this right now :(.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about magento