How to center a div generated dynamically? - php

Question

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>