Show only div of the product hovering in category grid with jQuery
- by Dane
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 :(.
