I'm busy with a "top of the week"-box which is displayed on some homepage. A while ago an annoying little problem occured but my hope that it would just disappear, which sometimes happens, sunk to a low level.
See live example HERE.
Three sub items are shown on the left and after pageload every few seconds it will go to the next in the sequence (1->2, 2->3, 3->1). Initially item #1 is shown and item #2 + #3 are hidden and after click on thumb #2 -or- after a few seconds automatically, item #1 will disappear and item #2 will appear / slideIn / fadeIn / whatever...
Inside main item #1, #2 and #3 there is a DIV1 with text content showing information about that item.
The styling is set to 50 transparency. Because the transparency is set to a lower-than-100 value, the text sometimes is difficult to read. To solve that... when user clicks on DIV1 another DIV2, with a white background, is shown -behind- DIV1!
Now the text will be easier to read because the (combined) background transparency is lower.
Works OK directly after pageload (nav_to_slide2/3() not executed): click on DIV1 will show DIV2.
Works NOK when nav_to_slide1/2/3() has been executed: click on DIV1 will -not- show DIV2.
I guess this has something to do with z-index stuff, because this (or some.parent) was needed to change because of slide/fade effect?
I tried debugging but I can't find a fix. Note that alert =A=, =B= and =C= do always occur... even with NOK-case.
"Keep it simple stupid" is very much in place here...
Found a solution (on stackoverflow) using css:
div.box_slide_over_text, div.box_slide_over_text:hover {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
div.box_slide_over_text { opacity:0.45; filter:alpha(opacity=45); }
div.box_slide_over_text:hover { opacity:0.80; filter:alpha(opacity=80); }
Removed DIV2 with corresponding z-index's entirely.
Check live version for fixed version code.