Web Analytics Made Easy -
StatCounter Center Dynamic Content - CodingForum


No announcement yet.

Center Dynamic Content

  • Filter
  • Time
  • Show
Clear All
new posts

  • Center Dynamic Content

    I need to center (horizontally as well as vertically) a div on screen. It will be in front of everything else on the page and will include dynamic HTML content. (radio buttons, text input, etc.) Essentially it's an in-page popup. (Don't call me evil, this is for a game I'm making.) So far I can get FF to center it with this code:
    function ShowBox(str,MsgBox){
      MsgBox.innerHTML = str;
      var style = gStyle(MsgBox,null);
      var h = parseFloat(style.height);
      var w = parseFloat(style.width);
      MsgBox.style.left = (gWinWidth() - w) / 2 + "px";
      MsgBox.style.top = (gWinHeight() - h) / 2 + "px";
      MsgBox.style.display = "block";
    Where gStyle is a cross-browser alias for getComputedStyle, str is the message I want displayed in the box, and MsgBox is the div that acts as the popup.

    And here is the CSS I'm applying to MsgBox:

    #msgbox {
      height: 5em;
      width: 5em;
      border: 0.15em solid navy;
      text-align: center;
      font-family: sans-serif;
      font-size: 5em;
      overflow: hidden;
    Unfortunately, IE gets this totally messed up; it says that h and w are 5, while FF says 400.

    Also, in IE the text is not displayed at all, in FF only the bottom half is shown, any idea how I can fix that?

  • #2
    Please show us where gStyle() is defined.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.


    • #3
      Sorry. Here's the functions I'm using:

      function gWinHeight() {
        if( typeof( window.innerHeight ) == 'number' ) {
          return window.innerHeight;
        } else if( document.documentElement && document.documentElement.clientHeight ) {
          //IE 6+ in 'standards compliant mode'
          return document.documentElement.clientHeight;
        } else if( document.body && document.body.clientHeight ) {
          //IE 4 compatible
          return document.body.clientHeight;
      function gWinWidth() {
        if( typeof( window.Width ) == 'number' ) {
          return window.innerWidth;
        } else if( document.documentElement && document.documentElement.clientWidth ) {
          //IE 6+ in 'standards compliant mode'
          return document.documentElement.clientWidth;
        } else if( document.body && document.body.clientWidth ) {
          //IE 4 compatible
          return document.body.clientWidth;
      function gStyle(node,mode){ //rhymes!
        if (node.currentStyle) return node.currentStyle;
        else if (getComputedStyle) return getComputedStyle(node,mode);