Target individual items- Product listing page

[novastar]

ZC version: 1.3.9h

This question might have been asked before but I think my case might be a little bit different.
On the product listing page I have a div that I want to appear over the image of a product when the mouse is over that product. I managed to do this however when I hover over ANY of the items on the product listing page the div that I want to appear only appears on the first product. I would like this div to appear over the product that the mouse is currently on.
This may sound vague but in short I want to know how I can target individual products on the products listing page, since the all have the same id and class name. (any way if there is another way but preferably through 'includes/modules/products_listing.php')

[novastar]

Can anyone offer any solutions to this problem?

[gjh42]

Not without more information on what you did to get the div to show in the first place. Seeing it live would also help.

[novastar]

Absolutely, I didn't see this post. This is what I did, on line 275 I have this, <code>$lc_text = '<div id="quickShop" class="quickView"><div id="quickView" class="quickView" style="width:500px;height:500px;"></div><a id="quick_view_link" class="quick_view_links" style="visibility:hidden;" rel="facebox" onclick"showstuff(quickView)" href="#quickView">Quick View</a></div>';</code>

and on line 304 (right after the line that says, $lc_text = implode('', $product_contents); ) I have this
<code>
$list_box_contents[$rows][$column] = array('params' => 'class="centerBoxContentsProducts centeredContent back" onmouseout="document.getElementById(\'' . quick_view_link . '\').style.visibility = \'' . hidden . '\';" onmouseover="document.getElementById(\'' . quick_view_link . '\').style.visibility = \'' . visible . '\';"' . ' ' . 'style="width:' . $col_width . '%;"',
'text' => $lc_text);
$column ++;
</code>

[novastar]

See an example in my signature.

[gjh42]

You give all items the same id

<a id="quick_view_link" class="quick_view_links"

so the js finds the first instance of that id on the page. You need to tweak it something like

<a id="quick_view_link' . $listing->fields['products_id'] . '" class="quick_view_links"

which will give an id of #quick_view_link23 for product id 23.
You also need the

onmouseout="document.getElementById(\'' . quick_view_link . '\')

to handle the id the same way, looking for the specific one being processed.

Treat all cases of ids in this section the same, so that none of the ids is repeated on other products (which is a CSS/HTML no-no).

[novastar]

Soo sweet, thank you. I had an idea of what to do it just wasn't concrete. I think you see by now what I want to do. Can you tell me how I can make those links pull up a div with information about the product inside. At least the best way you feel to get it done?

[novastar]

Soo sweet, thank you. I had an idea of what to do it just wasn't concrete. I think you see by now what I want to do. Can you tell me how I can make those links pull up a div with information about the product inside. At least the best way you feel to get it done?

I tried to use facebox but I'm not really familiar with it so I'm not sure if I'm over simplifying it. But I'd like to see if it can work before I move to the next solution.

[gjh42]

Several people have recently been developing "quick look" or "quick view" mods. rbarbour's solution is CSS-based, while others require javascript. Look at those before reinventing the wheel.

[novastar]

That is great, didn't know someone else was working on it. I looked for it and didn't find it anywhere. I think would of gotten there eventually but I wouldn't even have started if I had seen that. Do you know if it been packaged yet?

Thanks for the tip/s.