How to center a div generated dynamically?

Question

Hello There,

I generate a div for my javascript automated validation script. It is generated with below code:

var alertbox = document.createElement("div");

Now how do i center that div programatically both horizontally and vertically?

Note: Currently I am showing an alert box but once i know how to center a div, i will replace the alertbox with this dynamically generated div which will also provide some lightbox-like effect.

Thanks

Note: For reference, you can download latest version of this script here.

Please note that i dont want to use external css for this because this is validation script and it should be able to do it programatically. For example: using something like this can be helpful:

 alertbox.style.position: whatever
 ....

Answer 1

It's a matter of applying the same CSS rules as you would have with static content. Horizontal centering can be achieved as described in this article - basically you give the div a fixed with and set left and right margins to auto. Vertical centering is a bit trickier - a few approaches are discussed here and detailed in this this blog post.

The tidiest way is probably to define a CSS class that takes care of the centering and then apply that class to the dynamically generated element like this:

alertbox.className = "myCssClass";

Update: Since you are already using JavaScript for creating the div, you could of course use it for the centering as well (in combination with CSS absolute positioning) - that would actually probably be a cleaner solution (due to the hackishness of the CSS vertical centering). Exactly how you do this depends a bit on what tools you are using - it's probably much easier to achieve with a JS framework such as Prototype or jQuery than with "raw" JavaScript since browsers handle window/browser heights a bit differently.

Answer 2

If you are using jQuery, why not use the validation plugin?

You should be able to combine it with a modal window (like SimpleModal).

But if you don't want to change what you have already done, try something like this:

I would just apply some CSS rules to the div to position it (I've included an overlay which covers up the page and puts the alertbox on top):

Note: The reason the div is positioned to the far left is because you need to get the dimensions of the div with the contents inside. A hidden div will have a height and width of zero. Once the size is determined, it calculates the center of the page and positions the div.

CSS

#overlay {
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
 background: #000;
 opacity: 0.8;
 filter: alpha(opacity=80);
 z-index: 100;
}
#alertbox {
 background: #444;
 padding: 10px;
 position: absolute;
 left: -99999px;
 top: 0;
 z-index: 101;
}

Script

function alertBox(alertMsg){
 // Add overlay
 $('<div id="overlay"></div>')
  .hide()
  .appendTo('body')
  .fadeIn('slow');
// Add alert
 $('<div id="alertbox"></div>')
  .html(alertMsg)
  .appendTo('body');
// calculate & position alertbox in center of viewport
 var abx = $('#alertbox');
 var abxTop = ($(window).height() - abx.height())/2;
 var abxLft = ($(window).width() - abx.width())/2;
 abx
  .hide()
  .css({ top: abxTop, left: abxLft })
  .fadeIn('slow');
// add click to hide alertbox & overlay
  $('#overlay, #alertbox').click(function(){
   $('#overlay, #alertbox').fadeOut('slow',function(){
     $('#alertbox').remove();
     $('#overlay').remove();
   });
  })
}

Answer 3

For whatever reason, I have not been able to center a DIV using margin-right and margin-left. What I have found works better is to encapsulate them within a table (it's a bit globby code, but it works for me). And you can use the DOM style object to modify the margin as follows:

<table style="margin-left:auto;margin-right:auto;"><tr><td><div id="yourdiv"></div></td></tr></table>