• 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.

  • 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.
  • CSS:
css code 
pointer-events: none;
background: url('your_transparent.png');
[ad type=”banner”]
  • IE11 conditional:
css code 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

  • 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.
css code 
var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) 
{
        _range-selector.hide();
 $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
}
);
  • This works on IE8/9, Safari Chrome and Firefox.

  • Hide overlaying the element
  • Determine cursor coordinates
  • Get element on those coordinates
  • Trigger click on element
  • Show overlaying element again
javascript code 
$('#elementontop).click(function (e) 
{
        $('#elementontop).hide();
        $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
        $('#elementontop').show();
});
[ad type=”banner”]

  • Using jQuery-click through a div to underlying elements:
javascript code 
$('.overlay').click(function(e)
{
    var left = $(window).scrollLeft();
    var top = $(window).scrollTop();

    //hide the overlay for now so the document can find the underlying elements
    $(this).css('display','none');
    //use the current scroll position to deduct from the click position
    $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
    //show the overlay again
    $(this).css('display','block');
});

  • Absolute positioning for underlying elements:
java code 
#overlay 
{
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}

<div id="overlay"></div>

  • By adding pointer-events: none; to the absolute block.
css code 
body 
{
  margin: 0;
  padding-left: 10px;
  font: 20px Arial, sans-serif;
  line-height: 30px;
}
a:hover 
{  color: blue;
}
#overlay-blocking,
#overlay-passing
{
  position: absolute;
  height: 40px;
  width: 10em;left: 0;
}
#overlay-blocking 
{
  top: 30px;
  background: rgba(0,100,0, .2);    
  pointer-events: none;
}
#overlay-passing 
{ 
top: 0;
  background: rgba(100,0,0, .2);    
}
<a href="#">Link blocked</a><br>
<a href="#" title="hoverable">Link available</a><br>
<a href="#" title="hoverable">Link available</a><br>    
<div id="overlay-blocking"></div>
<div id="overlay-passing"></div>
[ad type=”banner”]

  • Using Tags to click through a div to underlying elements:
css code 
<a href="/categories/1">
    <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
        <div class="caption bg-orange">
            <h2>
                test1
            </h2>
        </div>
</a>

  • Using array to underlying elements
javascript code 
var clickarray=[];
function getcoo(thatdiv)
{
         thatdiv.find(".link").each(function()
{
          var offset=$(this).offset();           
          clickarray.unshift([(offset.left),
          (offset.top),
          (offset.left+$(this).width()),
           (offset.top+$(this).height()),
           ($(this).attr('name')),
          1]);
});
}
  • Using array
javascript code 
$("body").click(function(event)
{
          event.preventDefault();//if it is a a-tag
          var x=event.pageX;
          var y=event.pageY;
          var job="";
          for(var i in clickarray)
{
              if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1)
{
                 job=clickarray[i][4];
                 clickarray[i][5]=0;//set to allready clicked
                 break;
}
}
          if(job.length>0)
{   
             // --do some thing with the job --
}
});

  • pseudo html code to click through a div
html code 
<div class="listContainer">
    <div class="listRow" id="listRow1">
        <div class="listItemName">List item #1</div>
        <div class="listItemIcon"><img src="images/icon.png"></div>
    </div>
    <div class="listRow" id="listRow2">
        <div class="listItemName">List item #2</div>
        <div class="listItemIcon"><img src="images/icon.png"></div>
    </div>
</div>
[ad type=”banner”]
  • jQuery code:
javascript code 
$("div.listRow").click(function()
{
    $(this).toggleClass("selected");
}
)

  • Using a combination of the applying a :hover selector on parent div and the pointer-events: none directive on the child div.
  • HTML:
html code 
<div class="container">
<div class="clickthrough">Mouseover</div>
 <button onClick="alert('click!');">Click me</button>
</div>
  • CSS:
css code 
.container 
{
    position: relative;
}
.clickthrough 
{
    position: absolute;
}
.container:hover .clickthrough 
{
    opacity: 0.25;
    pointer-events: none;
}

Categorized in:

CSSHTML

Tagged in:

, , , , , , , , , , , , , , , , , , , , , , ,