Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 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:
    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:

    Code:
    #msgbox {
      background-color:blue;
      height: 5em;
      width: 5em;
      
    
      
      position:absolute;
      display:none;
      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
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    New Coder
    Join Date
    Jun 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry. Here's the functions I'm using:

    Code:
    function gWinHeight() {
      if( typeof( window.innerHeight ) == 'number' ) {
        //Non-IE
        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' ) {
        //Non-IE
        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);
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •