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:
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; .
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With