CODEWITHSUNDEEP
javascriptjqueryhtmlcss
krischan
krischan

Reputation: 1426

Ignore clicks that fall upon :before part of header element (jQuery)

I'm working on a page that uses Chris Coyier's method for making hash tag links work correctly with a sticky nav. I'm extending the page to make headers of an FAQ clickable to show/hide their contents. I have the functionality working but with one fairly major problem.

The h2:before makes the clickable area of the header much larger than it should be making for unexpected behaviour when clicking in certain places. Here is a fiddle demonstrating the problem. I figure that there is a way to do this with the click co-ordinates but can't quite wrap my head around which ones I would need and from which elements.

This feels like a problem that has been solved before but I haven't been able to find anything through SO or Google, I'm working on it right now but any tips would be much appreciated.

EDIT: Many thanks for the answers, glad there is a way to do this with CSS. Going to test both approaches fully and will accept the one I use.

EDIT2: Sadly while all the solutions given on this page do solve the problem as isolated neither (nor any combination) preserve the anchor link/sticky nav behaviour. Really irritating! Krunal Panchal's pointer-event solution should work according to what the property does but won't unless combined with something that also breaks # links. I think I will have to solve this with Javascript, will post answer when I find one.

EDIT3: Have solved with my own solution. Thanks again for the help, it seems though that this particular problem cannot be solved with CSS alone (although it can in the fiddle).

Upvotes: 0

Views: 89

Answers (3)

krischan
krischan

Reputation: 1426

So whilst the solutions posted by Dániel Sebestyén and Krunal Panchal were very neat and worked on the jsfiddle examples they didn't work when I tried in production code. It seems that whatever property of the :before that makes it able to push down hash tag links also makes it clickable, neither of their solutions nor combinations of their solutions can have one effect without the other (it seems - would love to be proven wrong on this one).

So I've had to solve the problem using Javascript, as shown in this latest fiddle. It still needs some tweaks as it blocks some clicks that probably shouldn't that are alongside the header (as it interprets it as being a click directed at the header below) but at a basic level it's doing what I wanted and the sticknav/hash link effects are preserved.

This is the interesting bit of JS: 

mouseY = e.pageY;
lowerBound = e.target.offsetTop + 70;
upperBound = e.target.offsetTop + e.target.offsetHeight;    
if(mouseY > lowerBound && mouseY < upperBound) {
    // show/hide section
}

Upvotes: 0

Krunal Panchal
Krunal Panchal

Reputation: 788

Here is your solution

Use pointer-events : none To achieve this

CODE:

h2:before {
    display: block;
    content:" ";
    margin-top: -70px;
    height: 70px;
    visibility: hidden;
    pointer-events : none;
}

Fiddle http://jsfiddle.net/krunalp1993/XwM4b/4/

Cooler Way

Fiddle http://jsfiddle.net/krunalp1993/XwM4b/5/

Other solution for ie or old browsers

h2:before {   
    z-index : -1;
}

Fiddle http://jsfiddle.net/krunalp1993/XwM4b/6/

Hope it helps you :)

Upvotes: 2

D&#225;niel Sebesty&#233;n
D&#225;niel Sebesty&#233;n

Reputation: 361

The problem is in your css.. The :before and :after tags usually inherits the measures of the natural tag, mainly in chrome and the webkit based browsers.

I usually dealing with it by positioning;

h2{position:relative;}
h2:before,
h2:after{
 position:absolute;
 left:0;
 top:0;
}

Check out my update on your fiddle http://jsfiddle.net/XwM4b/3/

Upvotes: 0

Related Questions