1

long time listener, first time caller.

I have a matrix of icons that can be navigated horizontally in a carousel, and vertically as categories (which are rows of icons) that are detached/appended as the app cycles through the categories with up/down arrows.

I want to make the lowest row of icons fade in opacity (I have a black background) from the native colors of the icons into blackness as you go from top to bottom, to indicate that there are subsequent rows beneath. The only way I have been able to determine how to do this is using background: -webkit-gradient, as indicated here:

CSS3 Transparency + Gradient

I apply this to a DIV which I overlay above my lowest row. Unfortunately, I lose clickability of the items behind the overlaid div. I have to use the overlay, however, because the property is a background property.

Is there any other way I can implement a gradient opacity on a row of clickable icons that fades to black without sacrificing the clickability? I don't want an overlay that only covers the lower 25%/whatever either... I need an all-or-nothing solution to this. So far it's looking like "nothing" is my only option.

Thank you very much in advance.

Community
  • 1
  • 1
Kees Briggs
  • 351
  • 3
  • 12

1 Answers1

1

Hmmm... two solutions come to mind.

First, you could use the overlay, and track mouse events on that element. Then, with some math, you could probably figure out what the underlying element is use jQuery to trigger the click of that element (ie. $("#icon14").click(); ).

The second option would be to draw out a companion transparent div with each icon you make in your matrix. Place it in exactly the same spot as the icon itself, but give it a css z-index that brings it above the overlay. This transparent div can now handle all the mouse events for you, and still live above the overlay.

If you go down this road, I'd look into using the .data() function that lets you quickly tack on variables to any jQuery object. You can set this companion div to be a property of the normal icons in the matrix, with something like $("#icon14").data('clickDiv', $("#icon14_click")); (though you'd probably want to assign these in a loop or something =)

Good luck!

Chazbot
  • 1,890
  • 1
  • 13
  • 23
  • much appreciated. I am going to give the second option a try, as I think it fits well with what I have. Thanks very much! – Kees Briggs Sep 23 '11 at 17:02
  • no prob. In thinking about it more, you might want to use data() in a different way; Instead of making a clickDiv property on the icon, make an myIcon property on the clickDiv. This way, when it's clicked, you can just say $(this).data('myIcon').click() – Chazbot Sep 23 '11 at 17:31