CODEWITHSUNDEEP
javascripthtmlclick
DearBee
DearBee

Reputation: 426

jQuery click on specific part of div

When link is clicked, I need jQuery to click on specific part of a div, lets say exactly 1px from its right side.

I'm familiar with jQuery, but I'm not sure how offsets really work in this case?

HTML

<div class="container">
  <div class="toBeClicked">Click the right side of me!</div>
</div>

EDIT: I've added JSfiddle for reference: https://jsfiddle.net/ebc59bah/1/

Upvotes: 2

Views: 2501

Answers (1)

liontass
liontass

Reputation: 740

Check this code.I create two color boxes.The red is the container and the aqua is the div that you want 1px right aside to have an event.I get the pageX position and via if condition I trigger the alert() method.Note the CSS setting specially the html and body because I don't want to have any margin in pixels that must adding to the if condition:

$('.container').on('click',function(e){
  var xPosition=e.pageX;  
  if(xPosition>01 && xPosition<150){
    alert('Click');
  }
});
html, body {
    margin: 0;
    padding: 0;
}

.container{  
   height: 150px;
   width: 250px;
   background-color:#FF0000;
}
.toBeClicked{
   position: inherit;
   font-size: 150%;
   height: 140px;
   width:  150px;   
   background-color: #00FFFF;
   word-break: keep-all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="toBeClicked">Click the right side of me!</div>
</div>

Upvotes: 1

Related Questions