Css overlapperd click

Question

I'm building a strange div shaped structure and I need a hint to resolve a clicking problem.

This is a jsfiddle to show you the issue. The structure for each element is:

    <div class="views-row">
       <div class="diamonds-container">  
          CONTENT
       </div>
   </div>

I have a onclick() event on .diamonds-container but the .views-row div of the next element [with red or blue background..] go over the container and stop the click event on it.

I tryed to play with the z-index but I didn't have the expected result.

How can I achieve this structure with a correct click event on diamonds-containers ?

I think I can track the .views-row click with javascript and trigger manually a click on the previous diamonds-container but this will be my final option.

How can I achieve this without javascript?

UPDATE:

I have to position my diamonds like this
enter image description here
so I can't use the @matewka code because I will have the overlaping vertically instead of orizzontally..

Now it's complete.. Does some admin want to move this question on SO? Or I have to insert this question there too? — Shyghar, Nov 06 '13 at 11:34
Are these blue and red spaces in the jsfiddle neccesary? Or they're just for the problem visualization? — matewka, Nov 06 '13 at 12:12
They are here just to show you where views-rows go over the diamonds-containers. In my layout only the diamond shaped container are visible. — Shyghar, Nov 06 '13 at 12:16
tbh I think I'd probably go for the javascript route,trying to detect clicks on strangely shaped overlapping elements sounds a bit hairy / possibly ending up with different behaviour in different browsers too? — StackExchange What The Heck, Nov 06 '13 at 12:49

score 0 · Answer 1 · answered Nov 06 '13 at 12:54

0

There is more than one route for this kind of problem.

If you use the rotation transform anyway, why not rotate the .views-row element to get the bounding box out of the way?

For recent browsers and IE11 there are pointer events. See this updated fiddle.

.views-row {
    z-index: 1;
    pointer-events: none;
}

.diamonds-container {
    z-index: 9;
    pointer-events: auto;
}

answered Nov 06 '13 at 12:54

MildlySerious

8,750
3
28
30

Hi, to answer to your 'why not rotate the .views-row element?' question I had update the question. I will have the same problem il I rotate the views-row. This is a good fix but I must write a javascript for IE 10-9-8 anyway.. if I will find a more compatible solution is better but I think this is the only 'only css' solution. – Shyghar Nov 06 '13 at 15:21

matewka · Answer 2 · 2013-11-06T19:47:55.753

Here is my approach. I'm not sure if nesting two divs inside each other was for rotating purpose or had some other meaning. Anyway, I did it this way:

.views-row {
    width: 130px;
    height: 130px;
    -webkit-transform: rotate(45deg);
}
.views-row-first {
    -webkit-transform-origin: 195px center;
}
.views-row-even {
    -webkit-transform-origin: center center;
}
.views-row-odd {
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: -65px center;
}

Each .views-row is rotated and the transform origins are all pointed to the center of the middle div. Notice that the transform-origin values are multiplicities of the half of the width (130px / 2).
See the updated FIDDLE for the complete CSS. I also added a :hover property for .diamonds-container so you can see that they're all clickable.

UPDATE

With the picture you added the problem became much more complicated. But I figured it out.
Hint: If you can't wait for the fiddle - you'll find it at the bottom of the answer.

The idea:

Square boxes are nested twice. Each 2 .diamond boxes are wrapped with the .pair-wrapper div. That div is rotated 45deg and it is repeated few times along its container. Each even .pair-wrapper has increased width to position its right-hand neighbour properly.

A bunch of .pair-wrappers are wrapped with the .line-wrapper. You can add as much .line-wrappers and .pair-wrapper as you want (remember - .pair-wrappers will break into the new line if they don't fit).

Finally, each .line-wrapper has fixed height and hidden overflow to restrict its children area from the top and the bottom. Each .pair-wrapper is positioned relatively and has negative top value.

The solution is based mostly on fixed values, both I could figure out a better idea.

The code

Example HTML markup looks like this:

<div class="line-wrapper line-wrapper-odd">
    <div class="pair-wrapper pair-wrapper-odd">
        <div class="diamond-box"></div>
        <div class="diamond-box"></div>
    </div>
    <div class="pair-wrapper pair-wrapper-even">
        <div class="diamond-box"></div>
        <div class="diamond-box"></div>
    </div>
    <div class="pair-wrapper pair-wrapper-odd">
        <div class="diamond-box"></div>
        <div class="diamond-box"></div>
    </div>
</div>
<div class="line-wrapper line-wrapper-even">
    <div class="pair-wrapper pair-wrapper-odd">
        <div class="diamond-box"></div>
        <div class="diamond-box"></div>
    </div>
    .....
</div>
.....

And the most important parts from CSS (complete CSS in the fiddle):

.line-wrapper {
    height: 170px;
    overflow: hidden;
}
.line-wrapper-even {
    margin-left: -92px;
}
.pair-wrapper {
    width: 130px;
    position: relative;
    top: -26px;
    -webkit-transform: rotate(45deg);
}
.pair-wrapper-odd {
    -webkit-transform-origin: 65px 65px;
}
.pair-wrapper-even {
    -webkit-transform-origin: 92px 131px;
    width: 239px;
}
.diamond-box {
    width: 130px;
    height: 130px;
}

The fiddle

http://jsfiddle.net/N3V6J/3/

Hi, thank you for this solution but I can't use it. I updated the question to explain you why — Shyghar, Nov 06 '13 at 15:03
@Shyghar, please see my update. I hope this time it will help. — matewka, Nov 06 '13 at 19:48
I will implement and test it on different browser. I will know you ^^ — Shyghar, Nov 07 '13 at 10:00

Css overlapperd click

2 Answers2

UPDATE

The idea:

The code

The fiddle