Skip to main content
drennan
drennan
Inspiring
February 8, 2012
Answered

jQuery DIV fadeIn (or rollover) within repeat region

  • February 8, 2012
  • 2 replies
  • 1537 views

Hey all. I've just started using repeat regions and am stuck creating a rollover effect. I have a database of products/images and am displaying thumb images within the repeat region using <img src="images/thumbs/<?php echo $row_Recordset1['productId']; ?>.png" and all is working fine. When users rollover the thumb I want a DIV containing an orange border to fade in using jQuery so I don't have to save a second image with a border for each thumbnail. Normally with static images I would say something like.. $("#thumbWrap").hover(function() { $("#border").fadeIn etc, but I have no idea how to implement this so the border DIV fades in independently for each thumb within the repeat region. Can anyone suggest the best way to accomplish this? thanks guys

This topic has been closed for replies.
Correct answer David_Powers

The jQuery code that you have posted here relies on ID selectors, but an ID can be used only once on a page. Instead use classes. Something like this might work:

$('.thumbWrap').hover(function() {
    $(this).parent('div').fadeIn();
});

2 replies

David_Powers
David_PowersCorrect answer
Inspiring
February 8, 2012

The jQuery code that you have posted here relies on ID selectors, but an ID can be used only once on a page. Instead use classes. Something like this might work:

$('.thumbWrap').hover(function() {
    $(this).parent('div').fadeIn();
});
drennan
drennanAuthor
Inspiring
February 9, 2012

Thanks David. I didn't think of this as an option as still learning. All working now

A
Anonymous
February 8, 2012

Add jquery and a unique id to each element nested inside the repeat region. Something like this:

<div id="border"></div>

do {

repeat stuff.

<div id="<?php echo $row_Recordset1['productId']; ?>">

<img src="images/thumbs/<?php echo $row_Recordset1['productId']; ?>.png">

</div>

jquery stuff

$("#<?php echo $row_Recordset1['productId']; ?>").hover(function() { $("#border").fadeIn

} while... repeat condition etc.

That should get you going. Notice the border is outside the repeated region to avoid multiple use of id in a page.

best,

Shocker

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices