unable to click hyperlinks/buttons because of the floating div

Question

I have a chat area that I am trying to bind with knockoutJS. This chat area will be floating with position fixed using css

.floatingDiv
{
width: auto;
float: right;
position: fixed;
top: 58%;
height: 255px;
z-index:0;
}

There are few anchor tags and buttons present on the page and in few cases are moved behind the chatarea. When this happens I am unable to click on the anchor tags/buttons.

Below is the sample where I am unable to click link "google redirection"

                <!DOCTYPE html>
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title></title>
            </head>
            <body>
                <script src="Scripts/jquery-2.1.4.js"></script>
                <script src="Scripts/knockout-3.3.0.js"></script>
                <style>

            .floatingDiv
            {
                width: auto;
                float: right;
                position: fixed;
                top: 58%;
                height: 255px;

                z-index:0;
            }
            .labelBox
            {
                float: right;
                background: white;
                border: 1px solid gray;
                margin-right: 30px;
                margin-left:30px;
                height: 280px;
                width: 250px;
            }
             .labelBoxHeaderColor {
                background-color:#0094ff;
              }
                </style>
                <script type="text/javascript">
                    function MyViewModel(){
                        var self =this;
                        self.list = ko.observableArray(['1', '2', '3']);
                    }
                    $(document).ready(function(){
                        var vm = new MyViewModel();
                        ko.applyBindings(vm);
                    });

                </script>
                <div>

                    Hello world<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    <br /><br /><br /><br /><br /><br /><br />
                   <a href="http://www.google.com">Google Redirection</a>
                </div>

                <div class="floatingDiv">
                 <!-- ko foreach: list -->
               <table class="labelBox" data-bind="attr:{id: 'index' +$index() }" >
                     <tbody>
                         <tr   data-bind="attr:{id: 'header' +$index() }" ">
                             <th class="labelBoxHeaderColor"> 
                                 <table width="100%">
                                     <tbody>
                                         <tr>
                                             <td style="width: 5%;"> <span width="1" height="1"  data-bind="text: 'label' + $index()">
                                            </td>
                                         </tr>
                                     </tbody>
                                 </table>  
                             </th>
                         </tr>
                         <tr>
                             <td> 
                                 <div style="height: 215px; overflow: auto;"> 
                                     <table  data-bind="attr:{id: 'mainArea' +$index() }"  >
                                         <tbody>
                                             <tr>
                                                 <td></td>
                                                 <td></td>
                                             </tr>
                                         </tbody>
                                     </table>
                                 </div> 
                             </td> 
                         </tr> 
                     </tbody>
                 </table>
                  <!-- /ko -->
                    </div>
            </body>
            </html>

I tried setting z-index for links more than z-index for the floatingDiv but that didnt help me. Can someone suggest on how I can make all the links/buttons present behind the chat area clickable in any scenario? Note: I even have clicks on the chat area boxes.

`float:right` does nothing in combination with `position: fixed`, [see here](http://jsfiddle.net/y66sc5n1/) — , Jun 27 '15 at 19:20
@TinyGiant.. I tried the fiddle. But that didnt help me out :( The reason is its not just limited to 3-4 boxes but many such.. And couldnot change the alignment of link :( — G_S, Jun 28 '15 at 14:10

Jose Rui Santos · Answer 1 · 2015-06-27T19:32:06.597

3

Use pointer-events to ignore mouse events on your .floatingDiv:

.floatingDiv {
  pointer-events: none;
}

Here is one simple example. You can see that the mouse events are ignored on the fixed red div, but they bubble down to elements below, in this case a button.

The result, is that you can click the button, even if the button is not the immediate target for the mouse event.
If you remove the pointer-events:none from the div, you will not be able to click the button.

div  {
    background-color: rgba(255,0,0,.5);
    position: fixed;
    top: 0;
    pointer-events: none;
}

<button>button below</button>
<div>I am on top,<br>but you can click the button underneath</div>

edited Jun 27 '15 at 19:32

answered Jun 27 '15 at 19:26

Jose Rui Santos

15,009
9
58
71

1

@TinyGiant If you need to target IE 10 and below, you can use another technique that is: 1-hide the `.floatingDiv`; 2-Read if there is some element underneath, if there is one, trigger that element `click` event; 3-show again the `.floatingDiv`. This is done on every floatingDiv mousemove, and is so fast that produces no noticeable flickering. To see it in action, checkout this other [answer](http://stackoverflow.com/a/17819021/607874) – Jose Rui Santos Jun 27 '15 at 19:57
You could also do like I suggested in my comment on the question, and just fix the formatting issues, then there's no problem, and no need for extra javascript – Jun 27 '15 at 20:31
@TinyGiant That's also correct, but all depends on the viewport width and content width. Even if the floating is done all the way to right, that does not guarantee that will not overlap content underneath. There are other simple solutions as well, such making the floating div draggable. – Jose Rui Santos Jun 27 '15 at 20:53
I loved pointer-events option. But I had to support even IE9,10. Tried http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie link also. But didnt help me. – G_S Jun 28 '15 at 14:16
@G_S Take a look at the link I provided in the second comment above. It works for IE 10 and below. – Jose Rui Santos Jun 28 '15 at 15:26
@JoseRuiSantos, Thanks for the update. I saw the link. But I am unable to identify how can I change it to work for my situation. Moreover it does not support IE11 :( (May be pointer-events supports IE11) This is the link that I am trying to modify http://jsfiddle.net/G_sh/Gkgrx/7/ – G_S Jun 28 '15 at 17:08
Also using pointer-events, if I have clicks on the boxes, they are not working :( – G_S Jun 28 '15 at 17:45

score 0 · Accepted Answer · answered Jul 01 '15 at 18:28

0

Finally made it work..

Removed floatingDiv div and added style (left position) to each label box. This way it allowed me to click even the links between two label boxes.

answered Jul 01 '15 at 18:28

G_S

7,068
2
21
51

unable to click hyperlinks/buttons because of the floating div

2 Answers2