Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

onclick event not working with position:fixed

when i uses position:fixed the div's onclick event is not working. and this event is working with other values like static,relative etc. My code is like below: 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:

like image 287
GMore Avatar asked Nov 07 '14 05:11

GMore


People also ask

Is position fixed responsive?

The problem with position: fixed is that it takes the element out of the document 'flow' so it wont respect the padding applied to its parent. This works to an extent! It is responsive, but obviously I would have to remove the position: fixed; .

What does position fixed do?

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

What does position absolute mean?

Absolute positioning defines the position of a given bounding box from the top and left side margins of the web page. This not only allows objects to be placed in an exact location, it also allows objects to be placed one on top of another.


1 Answers

check if some other div or element is coming over it when you keep your element position as fixed, that's the first thing I would check for do a right click and inspect element on the position where you are clicking if you see some other element or div highlighted in the bar which shows up below then, some other div or element is covering your element. Hope it helps

like image 119
Aameer Avatar answered Oct 01 '22 09:10

Aameer