Treehouse: Grow your CSS skills. Land your dream job.

Anything Slider problems – Video controls and mouseover/highlight/link trouble

  • # August 22, 2012 at 4:45 pm

    On the example page:, the Anything Slider with slides containing videos and links works beautifully. However, on my site, in a list of videos, no matter which slide I’m on, only the last video starts or stops when I click on the embedded YouTube or Vimeo controls (so I opted for a more basic layout for my videos). Similarly, when viewing a series of slides that contain text and/or an image, no matter which slide in the series I am viewing, I can only highlight text or click on a link on the last slide in the series. It’s as if my mouse cursor doesn’t “see” the slides layered “on top” of the last slide in a list. Please see my website: to see what I mean. Any help would be appreciated. Not looking for design feedback (i.e. I know my footer graphic is monsterously huge on low-res or small screens, I’m working on a js css switch).

    # August 23, 2012 at 6:27 pm

    Hi adjmedia!

    I looked at your css and I noticed that the z-index was commented out… restore the z-index and the current panel will be positioned on top of all of the other slides:

    .anythingSlider .fade .activePage {
    opacity: 1;
    filter: alpha(opacity=100);
    /* z-index:2; */
    # August 24, 2012 at 4:52 pm

    Hi Mottie,

    Thanks for the reply!

    As I recall, I tried various z-indexes and this didn’t solve this particular issue. I’ll give it another shot, though.

    I commented this out because I wanted the footer graphic to slide over the slideshows. However, that does get confusing when the transparent part of the footer graphic is over the slideshow nav buttons as you can’t actually click on them. That footer graphic is causing lots of problems, I just was so excited about fixed footers when I designed the site.

    # August 24, 2012 at 5:10 pm

    Hi Mottie, again!

    You are absolutely right! Removing the commenting syntax does fix the problem I described, but the footer is now under the slideshow. However, I think I’ll finally do away with the footer graphic on all the pages except Home and then include either an automatic js screen size and/or resolution switch that turns off the footer graphic if the viewport is smaller than a certain size. Thanks so much!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.