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

Passing a pointer to an array of structs in C

I hope the title did not discourage a lot of people. So, what I am trying to do is to pass to a function the address of an array of structs, so I can later modify the items within the struct,...

Posted Nov 20, 2013 8:40 AM

Can you define an array on the stack and pass the pointer to a global variable?

I'm programming C on a microchip that doesn't support any memory allocation commands, but it does like pointers (of course). So my question is: Is there a way to define an array within a function, and pass the pointer to that...

Posted Nov 20, 2013 9:53 AM

Positioning of element changes when page is refreshed...?

This is an issue I've only with noticed with Google Chrome (31.0.1650.57). Here's how I want my site to display: however, occasionally, it displays like this, with the navigation menu pushed outside of the header tag. This then pushed the floated #quick_login...

Posted Nov 21, 2013 4:13 AM

Passing a pointer from function C++

I have a text file in which I read into a 2D array like this: 153 62 328 71 0.998263 0 0 0 0 0 0 0 0 0 160 58 335 67 0.99699 0 0 0 0 0 0...

Posted Nov 24, 2013 9:50 AM

When will pointer-events become valid CSS?

I get an error when using http://jigsaw.w3.org/css-validator/ I was wondering if there would come a time when they are allowed by W3? According to this somewhat random link I found on Google, it will become a standard in CSS 4 http://lists.w3.org/Archives/Public/www-validator-css/2012Nov/0033.html Here is some info....

Posted Nov 25, 2013 5:25 AM

Relative positioned HTML elements overlapping parent

I have some quite specific requirements for elements (at the moment these elements are spans, but this is not important for my question) that have to be displayed inside a web page. The basic problem is that elements which are...

Posted Nov 26, 2013 6:14 AM

D3: position text element dependent on length of element before

I'm stuck in d3 (or JavaScript in general). I want to make a legend with d3. The position of the 9 items should be dependent on each other. More specifically: This is my simplified array: var dataset = ["Africa","Asia", "Caribbean", "Central America", "Europe",...

Posted Nov 26, 2013 12:02 PM

Vertical centred and horizontal top-aligned position fixed element

I am coming up with a jQuery notification system for a website I am building and I need the notification banner to be top aligned horizontally and vertically centered on the page. I figured out the top alignment, but I can't...

Posted Nov 28, 2013 1:08 AM

Horizontally centre position fixed element

I have a notification system I am building in jquery and I am trying to horizontally center the notification's container div. I've tried left:50%;, margin:0 auto;, and `left:50%; and right:50%;' none of which work. So I resorted to estimating the centre ...

Posted Nov 28, 2013 11:29 AM

Centre position:fixed element horizontally

I'm trying to horizontally centre a position fixed element in all viewports. Here's what I've tried: margin:0 auto;, left:50%;, left:50%; and right:50%;, $('.notification').css('marginLeft', -$('.notification').outerWidth/2); , and .notification-board.center{ left: 50%; -ms-transform:translateX(-50%); -moz-transform:translateX(-50%); ...

Posted Nov 28, 2013 1:58 AM

CSS position arrow elements - Jquery cycle

I am trying to position two arrow elements in the following code. They should be to the direct left and right of the quotes, and I will be wanting to hook them into the jQuery cycle to move things...

Posted Nov 28, 2013 6:14 AM

 
 
Email:

Username:

Password:


Register

Username:

Password:

Login


Forgot Password
Reset my password!