ansaurus

Question

Is there a way to have element behind a div (links) clickable in areas where the div is "transparent".

Answer 1

A:

As far as I know, the only way you could do that would be to handle the events on the covering <div>, and use the mouse coordinates in the event to figure out which link to trigger. It makes me uncomfortable to even think about doing that, but it might be possible. Long before I got close to trying that, I'd work hard on coming up with a better way of positioning the top layer so that the padding wasn't necessary.

Pointy 2010-05-01 12:40:16

Yea that's exactly how I feel. Doing something nasty that almost seems like exploiting HTML doesn't seem like a good solution.

Adam 2010-05-02 00:22:57

Answer 2

A:

Try making the covering div as small as possible.

Or more specifically, if the 'clear' sections are 'square' in shape than perhaps you could create the floating area from multiple smaller divs instead. This would make the 'transparent' areas actually 'div free' and so the links will be clickable in these areas.

I don't think it's possible to make links clickable through a div in any other way?

Matthew James Taylor 2010-05-01 12:45:47

Answer 3

+1 A:

The problem is your padding. The link at the top is still clickable because the margin on your content displaces it, meaning that your element is no longer covers your link when the user has scrolled to the correct place. With the padding-bottom the element is extended and the element covers the links at the bottom. The solution is therefore found when considering the problem: how do we extend where the page can scroll to without using #contentWrapper?

Here's one solution which works regardless of the height of your content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
  <head>
    <style>
    #top, #bottom {
        position: fixed;
        background-color: #00F;
        left: 100px;
        padding: 8px;
    }
    #top {
        top: 0;
    }
    #bottom {
        bottom: 0;
    }
    #contentWrapper {
        position: absolute;
        margin: 100px 0 0 0;
        width: 600px;
        z-index: 10000;
        overflow: visible;
    }
    #heightFix {
        position: absolute;
        bottom: -100px;
        height: 0;
        overflow: hidden;
        font-size: 0;
    }

    #content {
        background-color: #F00;
        height: 1000px;
    }
    </style>
  </head>
  <body>
    <div id="top"><a href="#">Top link</a></div>
    <div id="bottom"><a href="#">Bottom link</a></div>
    <div id="contentWrapper">
      <div id="heightFix"></div>
      <div id="content">Some content</div>
    </div>
  </body>
</html>

icio 2010-05-01 13:01:16

Thanks, I'd tried something similar, but creating an element after will work. Sadly the content size changes over the life of the page, but a setInterval on a half second timer can adjust the placement of the second fix block.

Adam 2010-05-02 00:27:45

That's a horrifying thought. JavaScript just to get your CSS to work? No thanks. Please, take this edit and second solution instead.

icio 2010-05-02 00:40:02

Ohh yes, Javascript is so not the way I wanted to, I abandoned it shortly after I tried it anyway, such a bad taste in my mouth.So yes this works perfectly! Thank you, thank you, thank you, I've spent too much time on this silly problem.I am a bit curious why this works though. Are nested absolute positioned elements positioned relative to their container?

Adam 2010-05-02 01:44:38

Yes, I believe that is the case: absolute positioning "Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static." [http://www.w3schools.com/css/pr_class_position.asp]

icio 2010-05-02 10:17:32

ansaurus

tags:

views:

answers:

Is there a way to have element behind a div (links) clickable in areas where the div is "transparent".

related questions