Is there any way to bind a click event to a div's left border in jquery?

Question

Is there any way to bind a click event to a div's left border in jquery?

11k views Asked by Sanjay Kumar N S At 09 June 2015 at 07:30

I have a div

<div id="preview">
</div>

Is there any way to bind a click event to this div's left border?

Thanks in advance.

Original Q&A

There are 5 answers

Maantje On 09 June 2015 at 07:33

I don't think there is but you can make your own border with another div and set a click event on that!

Here is a example:

HTML

<div id="preview">
<div id="leftborder"></div>
</div>

CSS

#preview{
width:200px;
height:200px;
background-color:black;
border: 5px solid blue;
border-left:0px;
}
#leftborder{
width:5px;
height:100%;
background-color: blue;
}

JS

$( "#leftborder" ).click(function() {
   alert( "Left border clicked!" );
});

the JS part is jquery so you gonna need to include that in your header first.

Sunil B N On 09 June 2015 at 07:36

Borders are not elements, and as such you cannot bind click event to it.If you wanted this type of functionality, you would need to place an element at the left edge of the div, and bind to that.

Praveen Kumar Purushothaman On 09 June 2015 at 07:36

You have have events only on elements. Borders are not elements. But you can make it look like elements by using pseudo elements.

$(document).ready(function () {
  $(".border:before").click(function () {
    alert("Hi");
  });
});

.border {border-left: 5px solid #99f; padding-left: 10px; position: relative;}
.border:before {content: " "; display: block; height: 5px; width: 5px; position: absolute; left: -5px; top: 0; background: #f00; height: 1em;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>

Or you can go with having a parent element surrounded.

$(function () {
  $(".outer").click(function () {
    alert("Hi");
  });
  $(".inner").click(function () {
    return false;
  });
});

.outer {background: #f00; padding-left: 5px;}
.inner {background: #fff; padding: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="outer"><div class="inner">Hi</div></div>

If you feel you should not add borders manually, already you will be adding the events with JavaScript. You can create an element on the fly and make it clickable.

$(function () {
  $(".border").wrap("<div class='outer' />");
  $(".outer").click(function () {
    alert("Hi");
  });
});

.border {border-left: 5px solid #f00; padding: 5px;}
.outer {padding-left: 5px; background: #f00;}
.outer .border {background: #fff; border: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>

Or the best way is to use the computed value and events.

$(document).ready(function () {
  $(".border").click(function (e) {
    if (e.offsetX < parseInt($(this).css("border-left-width").replace("px", "")))
      alert("Hi");
  });
});

.border {border-left: 5px solid #99f; padding-left: 10px; position: relative;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>

elcid9 On 09 June 2015 at 07:45

here is an simple example

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <style>
            .preview {
                background-color:#F5F5F5;
                width: 50%;
                height: 200px;
                padding:10px;
                border: 10px solid #FF0000;
            }
        </style>
    </head>
    <body>
        <div id="el" class="preview"></div>

        <!-- Script at the end -->
        <script type="text/javascript" >
            $('#el').click(function(e) {
                var $this = $(this);

                // Define the border with
                var border_width = 10;

                // Get the offset
                var offset = $this.offset();
                offset.left = e.pageX - offset.left;
                offset.top = e.pageY - offset.top;

                // Size can be used for calculate click on right border
                var size = {
                     'width' : $this.width()
                    ,'height' : $this.height()
                };

                if(offset.left <= border_width) {
                    console.info("border left clicked");
                }
            });
        </script>
    </body>
</html>

**Rino Raj** · Accepted Answer · 2015-06-09 07:42:45

div {
    height:100px;
    border:4px solid black;
    padding:10px;
}

Please try this method

$('div').click(function(e){
   if(  e.offsetX < 5){
        alert('clicked on the left border!');
    }
});

Edit - Better version

$('div').click(function(e){
    if(  e.offsetX <= parseInt($(this).css('borderLeftWidth'))){
       alert('clicked on the left border!');
    }
});

TechQA.

Is there any way to bind a click event to a div's left border in jquery?

There are 5 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CLICK

Popular Questions

Popular Tags

Trending Questions