Clever Geek Handbook

Onclick event not working with position: fixed

when i use position: fixed div onclick event doesn't work. and this event works with other values ​​like static, relative, etc. My code looks like this CSS:

  #dialog_window_minimized_container {
     position: fixed;  
    bottom: 0px;
    left: 0px;
}

JavaScript:

    <script>
var _init = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
    //Run the original initialization code
    _init.apply(this, arguments);

    //set some variables for use later
    var dialog_element = this;
    var dialog_id = this.uiDialogTitlebar.next().attr('id');
    //append our minimize icon
    this.uiDialogTitlebar.append('<a href="#" id="' + dialog_id + 
    '-minbutton" class="ui-dialog-titlebar-minimize ui-corner-all">'+
    '<span class="ui-icon ui-icon-minusthick"></span></a>');
    $('#dialog_window_minimized_container').append(
        '<div class="dialog_window_minimized ui-widget ui-state-default ui-corner-all" id="' + 
        dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() + 
        '<span class="ui-icon ui-icon-newwin"></div>');
    $('#' + dialog_id + '-minbutton').hover(function() {    
        $(this).addClass('ui-state-hover');
    }, function() {
        $(this).removeClass('ui-state-hover');
    }).click(function() {
        dialog_element.close();
        $('#' + dialog_id + '_minimized').show();
    });
  $('#' + dialog_id + '_minimized').click(function() {

        $('#' + dialog_id + '_minimized').hide();

          dialog_element.open();    

    });

};

</script>

JSP:

+3


source to share


3 answers


check if any other div element or element is above it when you keep the position of the element as fixed, then the first thing I check is to right click and check the element at the position where you click, if you see any then another element or div highlighted on the line that is displayed below, then another div or element covers your element. Hope it helps.



+3


source


Try giving a higher z-index value for the specific div and validation. There might be another division to your place: fixed DIV



+1


source


I had this problem. My element where I added click and mouseover events was not clickable. My element was inside a container div, which was positioned: fixed and positioned on top: 400px;

<div class="container" style="position: fixed; top: 400px">
    <div class="my-element">I have mouse events</div>
</div>

I found that when I removed the top positioning my mouse elements started working. For some reason, the fixed positioning of the parent div was not "lining up" with the hit area of ​​my element, if that makes sense. My solution was to pull the element out of the fixed-position container and place it on it.

<div class="my-element" style="position: fixed; top: 400px">I have mouse events</div>

Hope it helps.

0


source






More articles:


All Articles