December 8th, 2012, 07:44 PM
|
|
Contributing User
|
|
Join Date: Feb 2011
Posts: 306
Time spent in forums: 1 Day 18 h 23 m 55 sec
Reputation Power: 5
|
|
|
Pop up boxes in loop need different classes or ids??
Please see this page
http://dev.beckin.com/products.html?mode=list
I am running a loop with 10 different popup boxes being outputed on the each page. I was able to get the popup box working but when I hover over one it activates all 10 popup boxes. I know this is because I do not have a different id for each one. I know how to add a number to the end of the id popup-box by using $i++ in my loop but I dont know how to make the jquery script only activate that id. Any help or a better way of doing this would be helpful!
Here is my code:
Code:
<div class="container">
<a href="#" id="trigger"><img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>skin/frontend/fortis/default/images/zoomGlass.png" alt="<?php echo $_productNameStripped ?>" /></a>
<div class="actionpop" id="pop-up">
<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
</div>
</div>
Code:
<script type="text/javascript">
$(function() {
var moveLeft = 20;
var moveDown = 10;
$('a#trigger').hover(function(e) {
$('div#pop-up').show();
//.css('top', e.pageY + moveDown)
//.css('left', e.pageX + moveLeft)
//.appendTo('body');
}, function() {
$('div#pop-up').hide();
});
$('a#trigger').mousemove(function(e) {
$("div#pop-up").css('marginTop', -20).css('marginLeft', 60).css('z-index', 9999);
});
});
</script>
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
