Question

I have just inherited some code and part of that code is to show a floating div and center it.

Here is the code:

function showFloatingDialog(element) {
  removeMessage();
  var height, width;
  var offsetY = $(document).scrollTop();

  if (offsetY == undefined) {
    offsetY = 0;
  }

  var dialog = $('#' + element);

  dialog.show();

  height = (($(window).width() - dialog.width()) / 2);
  width = ($(window).height() - dialog.height()) / 2;
  width = width + offsetY;

  height = height - 195;
  width = width - 130;

  dialog.css('position', 'absolute');
  dialog.css('left', height + 'px');
  dialog.css('top', width + 'px');
}

In its defense, it works perfectly but I the following lines look like a hack:

  width = width + offsetY;

  height = height - 195;
  width = width - 130;

Is there a better and neater way of getting the same result than this.

Answer 1

The question seems to have an awful lot of code to do what I thought was relatively simple. Live example: http://jsfiddle.net/LHSDU/1/

var width = ($(window).width() - dialog.width()) / 2;
var height = ($(window).height() - dialog.height()) / 2;

dialog.css({'position' : 'absolute' , 'left' : width + 'px', 'top' : height + 'px'});