Position: Fixed element not passing through pointer-event click

Posted Jan 01, 1970 12:00 AM

I have a navbar that becomes fixed on scroll, when this happens part of it overlays a title that I still want to be clickable.

HTML

<div id="latestWrapper">
    <div id="lwBuff"></div>
    <div id="lwContainer">
        <div id="lwTitle"></div>
        <div id="lwMenu"></div>
    </div>
</div>

CSS

div#latestWrapper {
    height:50px;
    top:145px;
    width:100%;
    text-align:left;
    z-index:1000;
    position:fixed;
}
div#lwBuff {
    float:left;
    width:40px;
    min-height:100%;
}
div#lwContainer {
    min-height:100%;
    margin-left:40px;
}
div#lwTitle {
    float:left;
    height:50px;
    width:17%;
    position:relative;
    pointer-events:none; /* I want to click through this element */
    background-size: 100%;
    background:url('../images/transparent.png');
}
div#lwMenu {
    float:left;
    height:50px;
    width:83%;
    background:#fff;
}

I want to click through #lwTitle, when the element is fixed there's an anchor that I want to click.

Tagged pointer

Similar Topic Questions

Html canvas trap left click and allow right click to pass through (pointer-events)

The use case is that I have an html canvas on top of several html elements which listen for right click mouse events. I want to draw on the canvas using left mouse button, and at the same time interact...

Posted Dec 26, 2013 2:12 AM

Touch through an element in a browser (like pointer-events: none)

Clicking through an element can be done with this CSS: pointer-events: none; But it doesn't work on touch events. I'm having a hard time finding out how to do this in a mobile browser! I've got some rudimentary touch zoom...

Posted Dec 03, 2013 11:58 AM

JQuery UI draggable on a nested element with pointer-events: none

I have an iframe element that I'd like to make resizable and draggable. I'd also like for the user to be able to drag it around by clicking and dragging inside the iframe. Here is a jsfiddle: http://jsfiddle.net/asavin/t9DT8/8/ iframe element is wrapped into...

Posted Dec 04, 2013 3:29 AM

Prevent pointer events from firing on transparent parts of SVG image element

I have a raster image inside a SVG element using the tag. I want the mouse events to only fire on the non-transprent parts of the image. I am using a PNG file with transparent parts. I saw that SVG is supposed...

Posted Feb 03, 2014 10:25 AM

Passing a pointer to objects method safely to google.maps.event.addListener

When passing a method pointer to google.maps.event.addListener, google maps seems to overwrite it's this reference with an instance of google.maps.Map, therefore it renders it useless if the methods references any of its prototype memebers internally. The long story short, if I...

Posted Mar 16, 2014 7:05 AM

Allow pointer events to pass through a nested div

Assuming I have a container: <div id="click-on-this-100%-div-to-change-div-color"> <div id="wrapper" style="display:table;position:absolute;top:0px;"> <div id="nested1" style="display:table-cell"> </div> <div id="nested2" style="display:table-cell"> ...

Posted Jul 21, 2014 3:58 AM

Jquery best practice - add data to element or pass it with the event

Which is best practice for passing data from a DOM element to the attached event: var input = '<input type="text" class="myplugin-input">'; this.$el.append(input); var inputEl = this.$el.find('.myplugin-input'), inputData = { pluginObj :...

Posted Oct 17, 2014 1:09 AM

Pointer events on overlapping elements

Let's assume I have two overlapping divs, and the following jQuery snippet: $( "#div1" ).click(function() { console.log('click on div1'); }); $( "#div2" ).mousemove(function() { console.log('mousemove on div2'); }); As far as I understood, in this case only one div receives events - either...

Posted Oct 22, 2014 6:25 AM

Position an element at the bottom of the window, as long a line isn't passed

I have a slider div, which could be higher than the actual screen height. Now I want to provide an arrow-down button as a hint "there's more, you just need to scroll down", which scrolls down to the actual content...

Posted Jan 19, 2015 7:00 AM

Pointer-events fail when used on parent element :hover in IE11

Here is a snippet of a little navigation structure. If you hover the blue box, a menu will appear revealing new navigation options. This works in all major browsers except IE11. In IE11 the menu will close once you try to...

Posted Jan 19, 2015 6:44 AM

Touch event on position: fixed; element doesn't work correctly on iOS

This is a similar problem with IOS 5 (safari) bug with HTML touch events on "position:fixed" div Somebody said that this bug has been fixed. But, on iOS 8, I find it is only fixed when you tap and scroll the...

Posted Jan 22, 2015 5:28 AM

How to simulate pointer-events: none on an pseudo element in IE10?

I have styled a select with an own arrow above the normal arrow that shows the browser. The html: <div id="selectCountry"> <div class="selectContainer"> <select class="selectContent"> ...

Posted Jan 23, 2015 4:52 AM

How can I pass ONLY clicks through a SVG with pointer-events?

I have a SVG overlaying a div with a button. I know that i can pass mouse-events through the SVG by setting "pointer-events: none;" for my SVG. However when I do this the SVG wont recognize mouse-events anymore. <body> <div...

Posted Feb 02, 2015 5:00 AM

Youtube iframe not responding to clicks passed through image above with pointer-events: none

Http://jsfiddle.net/aintnobody/0L1yumpe/ vs the same code on http://www.aintnobodymusic.com/monkey The issue: On the fiddle, everything works as it should. The image above in all cases is ignored via pointer-events: none, and the click passes through to whatever is underneath. We can tell...

Posted Feb 09, 2015 2:42 AM

How to prevent an array from being being interpreted as the pointer to the first element when passed to a function?

I understand the implicit conversion into a pointer. Someone suggested something like this today in some other question: #include <iostream> void printArray(int (&a)[5]) { for (int i : a) { std::cout <<...

Posted Feb 22, 2015 6:03 AM

How to prevent an array from being interpreted as the pointer to the first element when passed to a function?

I understand the implicit conversion into a pointer. Someone suggested something like this today in some other question: #include <iostream> void printArray(int (&a)[5]) { for (int i : a) { std::cout <<...

Posted Feb 22, 2015 6:03 AM

Pointer-events: none doesn't apply to elements inside hyperlink when display is set to table-cell

Long story short, I want to disable a hyperlink in certain scenarios. My problem is that the hyperlink contains an image inside a span tag, and the span has it's display property set to table-cell. Whenever I disable the hyperlink, the...

Posted Feb 26, 2015 9:51 AM

How to make a SVG element only response to certain event but pass other event down to lower layers in D3 or jQuery

All: I am pretty new to D3 and jQuery event handling. Right now: var svg = d3.select("body svg") .style("border", function(){ ...

Posted Mar 10, 2015 9:54 AM

When I pass a pointer from fortran to c++ the value of the first element is lost

I am calling a Fortran function from C++ which allocates a vector and then it returns a pointer from c++ to that vector. The problem is that when I print the values in C++ using this pointer, the value of...

Posted Mar 19, 2015 7:38 AM

 
 
Email:

Username:

Password:


Register

Username:

Password:

Login


Forgot Password
Reset my password!