PROBLEM
we have a div that has background:transparent, along with border. Under this div, we have more elements.
Currently, we able to click the underlying elements when we click outside of the overlay div. then
It was unable to click the underlying elements when we directly click on overlay div
.we need to click through this div tag Then only we can able to click on the underlying elements.
SOLUTION 1:
Using pointer-events: none along with CSS conditional statement for IE11.
Using AlphaImageLoader, you can even set transparent .PNG/.GIFs in the overlay div and clicks through a DIV elements below.
[pastacode lang=”css” manual=”pointer-events%3A%20none%3B%0Abackground%3A%20url(‘your_transparent.png’)%3B%0A” message=”css code” highlight=”” provider=”manual”/]
[ad type=”banner”]
[pastacode lang=”css” manual=”filter%3Aprogid%3ADXImageTransform.Microsoft.AlphaImageLoader(src%3D’your_transparent.png’%2C%20sizingMethod%3D’scale’)%3B%0Abackground%3A%20none%20!important%3B%0A” message=”css code” highlight=”” provider=”manual”/]
SOLUTION 2:
Here we can use elementFromPoint method.
Attach a click to the div you want to be clicked through
Hide it
Determine what element the pointer is on
Fire the click on the element there.
[pastacode lang=”css” manual=”var%20range-selector%3D%20%24(%22%22)%0A%20%20%20%20.css(%22position%22%2C%20%22absolute%22).addClass(%22range-selector%22)%0A%20%20%20%20.appendTo(%22%22)%0A%20%20%20%20.click(function(e)%20%0A%7B%0A%20%20%20%20%20%20%20%20_range-selector.hide()%3B%0A%20%24(document.elementFromPoint(e.clientX%2Ce.clientY)).trigger(%22click%22)%3B%0A%7D%0A)%3B%0A%0A” message=”css code” highlight=”” provider=”manual”/]
This works on IE8/9, Safari Chrome and Firefox.
SOLUTION 3:
Hide overlaying the element
Determine cursor coordinates
Get element on those coordinates
Trigger click on element
Show overlaying element again
[pastacode lang=”javascript” manual=”%24(‘%23elementontop).click(function%20(e)%20%0A%7B%0A%20%20%20%20%20%20%20%20%24(‘%23elementontop).hide()%3B%0A%20%20%20%20%20%20%20%20%24(document.elementFromPoint(e.clientX%2C%20e.clientY)).trigger(%22click%22)%3B%0A%20%20%20%20%20%20%20%20%24(‘%23elementontop’).show()%3B%0A%7D)%3B%20%0A%0A” message=”javascript code” highlight=”” provider=”manual”/]
[ad type=”banner”]
SOLUTION 4:
Using jQuery-click through a div to underlying elements:
[pastacode lang=”javascript” manual=”%24(‘.overlay’).click(function(e)%0A%7B%0A%20%20%20%20var%20left%20%3D%20%24(window).scrollLeft()%3B%0A%20%20%20%20var%20top%20%3D%20%24(window).scrollTop()%3B%0A%0A%20%20%20%20%2F%2Fhide%20the%20overlay%20for%20now%20so%20the%20document%20can%20find%20the%20underlying%20elements%0A%20%20%20%20%24(this).css(‘display’%2C’none’)%3B%0A%20%20%20%20%2F%2Fuse%20the%20current%20scroll%20position%20to%20deduct%20from%20the%20click%20position%0A%20%20%20%20%24(document.elementFromPoint(e.pageX-left%2C%20e.pageY-top)).click()%3B%0A%20%20%20%20%2F%2Fshow%20the%20overlay%20again%0A%20%20%20%20%24(this).css(‘display’%2C’block’)%3B%0A%7D)%3B%0A” message=”javascript code” highlight=”” provider=”manual”/]
SOLUTION 5:
Absolute positioning for underlying elements:
[pastacode lang=”java” manual=”%23overlay%20%0A%7B%0A%20%20position%3A%20absolute%3B%0A%20%20top%3A%20-79px%3B%0A%20%20left%3A%20-60px%3B%0A%20%20height%3A%2080px%3B%0A%20%20width%3A%20380px%3B%0A%20%20z-index%3A%202%3B%0A%20%20background%3A%20url(fake.gif)%3B%0A%7D%0A%0A%3Cdiv%20id%3D%22overlay%22%3E%3C%2Fdiv%3E%0A” message=”java code” highlight=”” provider=”manual”/]
SOLUTION 6:
By adding pointer-events: none; to the absolute block.
[pastacode lang=”css” manual=”body%20%0A%7B%0A%20%20margin%3A%200%3B%0A%20%20padding-left%3A%2010px%3B%0A%20%20font%3A%2020px%20Arial%2C%20sans-serif%3B%0A%20%20line-height%3A%2030px%3B%0A%7D%0Aa%3Ahover%20%0A%7B%20%20color%3A%20blue%3B%0A%7D%0A%23overlay-blocking%2C%0A%23overlay-passing%0A%7B%0A%20%20position%3A%20absolute%3B%0A%20%20height%3A%2040px%3B%0A%20%20width%3A%2010em%3Bleft%3A%200%3B%0A%7D%0A%23overlay-blocking%20%0A%7B%0A%20%20top%3A%2030px%3B%0A%20%20background%3A%20rgba(0%2C100%2C0%2C%20.2)%3B%20%20%20%20%0A%20%20pointer-events%3A%20none%3B%0A%7D%0A%23overlay-passing%20%0A%7B%20%0Atop%3A%200%3B%0A%20%20background%3A%20rgba(100%2C0%2C0%2C%20.2)%3B%20%20%20%20%0A%7D%0A%3Ca%20href%3D%22%23%22%3ELink%20blocked%3C%2Fa%3E%3Cbr%3E%0A%3Ca%20href%3D%22%23%22%20title%3D%22hoverable%22%3ELink%20available%3C%2Fa%3E%3Cbr%3E%0A%3Ca%20href%3D%22%23%22%20title%3D%22hoverable%22%3ELink%20available%3C%2Fa%3E%3Cbr%3E%20%20%20%20%0A%3Cdiv%20id%3D%22overlay-blocking%22%3E%3C%2Fdiv%3E%0A%3Cdiv%20id%3D%22overlay-passing%22%3E%3C%2Fdiv%3E%0A” message=”css code” highlight=”” provider=”manual”/]
[ad type=”banner”]
SOLUTION 7:
Using Tags to click through a div to underlying elements:
[pastacode lang=”css” manual=”%3Ca%20href%3D%22%2Fcategories%2F1%22%3E%0A%20%20%20%20%3Cimg%20alt%3D%22test1%22%20class%3D%22img-responsive%22%20src%3D%22%2Fassets%2Fphoto.jpg%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22caption%20bg-orange%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test1%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fa%3E%0A” message=”css code” highlight=”” provider=”manual”/]
SOLUTION 8:
Using array to underlying elements
[pastacode lang=”javascript” manual=”var%20clickarray%3D%5B%5D%3B%0Afunction%20getcoo(thatdiv)%0A%7B%0A%20%20%20%20%20%20%20%20%20thatdiv.find(%22.link%22).each(function()%0A%7B%0A%20%20%20%20%20%20%20%20%20%20var%20offset%3D%24(this).offset()%3B%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20clickarray.unshift(%5B(offset.left)%2C%0A%20%20%20%20%20%20%20%20%20%20(offset.top)%2C%0A%20%20%20%20%20%20%20%20%20%20(offset.left%2B%24(this).width())%2C%0A%20%20%20%20%20%20%20%20%20%20%20(offset.top%2B%24(this).height())%2C%0A%20%20%20%20%20%20%20%20%20%20%20(%24(this).attr(‘name’))%2C%0A%20%20%20%20%20%20%20%20%20%201%5D)%3B%0A%7D)%3B%0A%7D%0A” message=”javascript code” highlight=”” provider=”manual”/]
[pastacode lang=”javascript” manual=”%24(%22body%22).click(function(event)%0A%7B%0A%20%20%20%20%20%20%20%20%20%20event.preventDefault()%3B%2F%2Fif%20it%20is%20a%20a-tag%0A%20%20%20%20%20%20%20%20%20%20var%20x%3Devent.pageX%3B%0A%20%20%20%20%20%20%20%20%20%20var%20y%3Devent.pageY%3B%0A%20%20%20%20%20%20%20%20%20%20var%20job%3D%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20for(var%20i%20in%20clickarray)%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(x%3E%3Dclickarray%5Bi%5D%5B0%5D%20%26%26%20x%3C%3Dclickarray%5Bi%5D%5B2%5D%20%26%26%20y%3E%3Dclickarray%5Bi%5D%5B1%5D%20%26%26%20y%3C%3Dclickarray%5Bi%5D%5B3%5D%20%26%26%20clickarray%5Bi%5D%5B5%5D%3D%3D1)%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20job%3Dclickarray%5Bi%5D%5B4%5D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20clickarray%5Bi%5D%5B5%5D%3D0%3B%2F%2Fset%20to%20allready%20clicked%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%7D%0A%7D%0A%20%20%20%20%20%20%20%20%20%20if(job.length%3E0)%0A%7B%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20–do%20some%20thing%20with%20the%20job%20–%0A%7D%0A%7D)%3B%0A” message=”javascript code” highlight=”” provider=”manual”/]
SOLUTION 9:
pseudo html code to click through a div
[pastacode lang=”markup” manual=”%3Cdiv%20class%3D%22listContainer%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22listRow%22%20id%3D%22listRow1%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22listItemName%22%3EList%20item%20%231%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22listItemIcon%22%3E%3Cimg%20src%3D%22images%2Ficon.png%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22listRow%22%20id%3D%22listRow2%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22listItemName%22%3EList%20item%20%232%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22listItemIcon%22%3E%3Cimg%20src%3D%22images%2Ficon.png%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A” message=”html code” highlight=”” provider=”manual”/]
[ad type=”banner”]
[pastacode lang=”javascript” manual=”%24(%22div.listRow%22).click(function()%0A%7B%0A%20%20%20%20%24(this).toggleClass(%22selected%22)%3B%0A%7D%0A)%0A” message=”javascript code” highlight=”” provider=”manual”/]
SOLUTION 10:
Using a combination of the applying a :hover selector on parent div and the pointer-events: none directive on the child div.
[pastacode lang=”markup” manual=”%3Cdiv%20class%3D%22container%22%3E%0A%3Cdiv%20class%3D%22clickthrough%22%3EMouseover%3C%2Fdiv%3E%0A%20%3Cbutton%20onClick%3D%22alert(‘click!’)%3B%22%3EClick%20me%3C%2Fbutton%3E%0A%3C%2Fdiv%3E%0A” message=”html code” highlight=”” provider=”manual”/]
[pastacode lang=”css” manual=”.container%20%0A%7B%0A%20%20%20%20position%3A%20relative%3B%0A%7D%0A.clickthrough%20%0A%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%7D%0A.container%3Ahover%20.clickthrough%20%0A%7B%0A%20%20%20%20opacity%3A%200.25%3B%0A%20%20%20%20pointer-events%3A%20none%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]