CODEWITHSUNDEEP
javascriptcssjsp
GMore
GMore

Reputation: 105

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:

Upvotes: 10

Views: 12618

Answers (3)

kenecaswell
kenecaswell

Reputation: 7598

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

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

I found when I removed the top positioning my element's mouse events 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 take my element out of the fixed positioned container and to position it on it's own.

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

Hope this helps.

Upvotes: 1

user3275109
user3275109

Reputation: 354

Try to give higher z-index value for the particular div and check . Might be other div covering over your position: fixed DIV

Upvotes: 11

Aameer
Aameer

Reputation: 1376

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

Upvotes: 14

Related Questions