HOW: Center this popup message on screen.

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Blue®
    #1

    HOW: Center this popup message on screen.

    The page below creates a popup message on the screen. It printed the
    popup box 30 pixels from the left:

    document.getEle mentById("dwind ow").style.left ="30px"

    How do I modify it so that the popup box is always centered on the
    screen regardless of the monitor resolution of the users?

    I do not know JS and I have been testing without success. Anybody can
    help? Thanks.

    =============== =============== =============== ===========
    <html>

    <head>

    <script>

    var dragapproved=fa lse
    var minrestore=0
    var initialwidth,in itialheight
    var ie5=document.al l&&document.get ElementById
    var ns6=document.ge tElementById&&! document.all

    function iecompattest(){
    return (!window.opera && document.compat Mode &&
    document.compat Mode!="BackComp at")? document.docume ntElement : document.body
    }

    function drag_drop(e){
    if (ie5&&dragappro ved&&event.butt on==1){
    document.getEle mentById("dwind ow").style.left =tempx+event.cl ientX-offsetx+"px"
    document.getEle mentById("dwind ow").style.top= tempy+event.cli entY-offsety+"px"
    }
    else if (ns6&&dragappro ved){
    document.getEle mentById("dwind ow").style.left =tempx+e.client X-offsetx+"px"
    document.getEle mentById("dwind ow").style.top= tempy+e.clientY-offsety+"px"
    }
    }

    function initializedrag( e){
    offsetx=ie5? event.clientX : e.clientX
    offsety=ie5? event.clientY : e.clientY
    document.getEle mentById("dwind owcontent").sty le.display="non e" //extra
    tempx=parseInt( document.getEle mentById("dwind ow").style.left )
    tempy=parseInt( document.getEle mentById("dwind ow").style.to p)

    dragapproved=tr ue
    document.getEle mentById("dwind ow").onmousemov e=drag_drop
    }

    function loadwindow(url, width,height){
    if (!ie5&&!ns6)
    window.open(url ,"","width=widt h,height=height ,scrollbars=1")
    else{
    document.getEle mentById("dwind ow").style.disp lay=''
    document.getEle mentById("dwind ow").style.widt h=initialwidth= width+"px"
    document.getEle mentById("dwind ow").style.heig ht=initialheigh t=height+"px"
    document.getEle mentById("dwind ow").style.left ="30px"
    document.getEle mentById("dwind ow").style.top= ns6?
    window.pageYOff set*1+30+"px" : iecompattest(). scrollTop*1+30+ "px"
    document.getEle mentById("cfram e").src=url
    }
    }

    function maximize(){
    if (minrestore==0) {
    minrestore=1 //maximize window
    document.getEle mentById("maxna me").setAttribu te("src","resto re.gif")
    document.getEle mentById("dwind ow").style.widt h=ns6?
    window.innerWid th-20+"px" : iecompattest(). clientWidth+"px "
    document.getEle mentById("dwind ow").style.heig ht=ns6?
    window.innerHei ght-20+"px" : iecompattest(). clientHeight+"p x"
    }
    else{
    minrestore=0 //restore window
    document.getEle mentById("maxna me").setAttribu te("src","max.g if")
    document.getEle mentById("dwind ow").style.widt h=initialwidth
    document.getEle mentById("dwind ow").style.heig ht=initialheigh t
    }
    document.getEle mentById("dwind ow").style.left =ns6?
    window.pageXOff set+"px" : iecompattest(). scrollLeft+"px"
    document.getEle mentById("dwind ow").style.top= ns6?
    window.pageYOff set+"px" : iecompattest(). scrollTop+"px"
    }

    function closeit(){
    document.getEle mentById("dwind ow").style.disp lay="none"
    }

    function stopdrag(){
    dragapproved=fa lse;
    document.getEle mentById("dwind ow").onmousemov e=null;
    document.getEle mentById("dwind owcontent").sty le.display="" //extra
    }

    </script>
    </head>
    <body>

    <div id="dwindow"
    style="position :absolute;curso r:hand;left:0px ;top:0px;displa y:none"
    onMousedown="in itializedrag(ev ent)" onMouseup="stop drag()"
    onSelectStart=" return false">
    <div align="right" style="backgrou nd-color:gray"><im g src="max.gif"
    id="maxname" onClick="maximi ze()"><img src="close.gif"
    onClick="closei t()"></div>
    <div id="dwindowcont ent" style="height:1 00%">

    <table width="100%" cellpadding="5" cellspacing="5"
    style="border-collapse: collapse; border: 1px solid #000000"
    bordercolor="#1 11111" id="AutoNumber1 ">

    <tr>
    <td>This is the popup message. This is the popup message.</td>
    </tr>
    </table>
    </div>
    </div>

    <script>
    //Use below code to load DHTML Window as page loads
    if (ns6) window.onload=n ew Function('loadw indow("",350,15 0)')
    else
    loadwindow("",3 50,250)
    </script>


    </body>
    </html>
    Tags: None
    • Stephen Poley
      #2
      Re: HOW: Center this popup message on screen.

      On Wed, 09 Nov 2005 18:09:17 +0800, Blue® <superbaby@myja ring.net>
      wrote:
      [color=blue]
      >The page below creates a popup message on the screen. It printed the
      >popup box 30 pixels from the left:
      >
      >document.getEl ementById("dwin dow").style.lef t="30px"
      >
      >How do I modify it so that the popup box is always centered on the
      >screen regardless of the monitor resolution of the users?
      >
      >I do not know JS and I have been testing without success. Anybody can
      >help? Thanks.[/color]

      A few thoughts:

      a) Are you sure your readers want pop-up messages? Many don't.

      b) Are you sure you want it centred on the screen? What if the active
      browser window only occupies, say, the right half of the screen?

      c) If you don't yet know the difference between a script and a
      stylesheet, you probably shouldn't be worrying about this at all. But if
      you must, try comp.lang.javas cript.

      --
      Stephen Poley

      Web Matters - Main Page
      http://www.xs4all.nl/~sbpoley/webmatters/

        Comment

        • Blue®
          #3
          Re: HOW: Center this popup message on screen.

          > a) Are you sure your readers want pop-up messages? Many don't.

          *** Yes, some of my customers asked for it. They want a popup (on the
          contact page) that says they are out of office and response will be slow.
          [color=blue]
          > b) Are you sure you want it centred on the screen? What if the active
          > browser window only occupies, say, the right half of the screen?[/color]

          *** Yes, most people will surf the internet full screen.
          [color=blue]
          > c) If you don't yet know the difference between a script and a
          > stylesheet, you probably shouldn't be worrying about this at all. But if
          > you must, try comp.lang.javas cript.[/color]

          *** I have searched through the internet by still can't have my problem
          solved.

          *** I know the difference between a javascript and a stylesheet. But
          that is less important to me. I just want to have my problem solved. I
          have a deadline to meet.

          *** I posted this under comp.lang.javas cript and the people there asked
          me to come here.

            Comment

            • Alan J. Flavell
              #4
              Re: HOW: Center this popup message on screen.

              On Wed, 9 Nov 2005, Blue® wrote:
              [color=blue][color=green]
              > > a) Are you sure your readers want pop-up messages? Many don't.[/color]
              >
              > *** Yes, some of my customers asked for it.[/color]

              No, their readers don't want pop-ups.
              [color=blue]
              > They want a popup (on the contact page) that says they are out of
              > office and response will be slow.[/color]

              So go implement it, and stop wasting our time - this is a stylesheets
              group. Fortunately, modern browsers allow the reader to overrule such
              nonsense.
              [color=blue][color=green]
              > > browser window only occupies, say, the right half of the screen?[/color]
              >
              > *** Yes, most people will surf the internet full screen.[/color]

              Says you.
              [color=blue][color=green]
              > > c) If you don't yet know the difference between a script and a
              > > stylesheet, you probably shouldn't be worrying about this at all.
              > > But if you must, try comp.lang.javas cript.[/color][/color]
              [color=blue]
              > *** I know the difference between a javascript and a stylesheet.[/color]

              You've shown no evidence of it yet.
              [color=blue]
              > But that is less important to me. I just want to have my problem
              > solved. I have a deadline to meet.[/color]

              Waster. *plonk*

                Comment

                • 'sNiek
                  #5
                  Re: HOW: Center this popup message on screen.

                  Blue® schreef:[color=blue]
                  > I have a deadline to meet.[/color]

                  So do we.


                  --
                  Niek

                    Comment

                    • Jim Moe
                      #6
                      Re: HOW: Center this popup message on screen.

                      Blue® wrote:[color=blue]
                      > The page below creates a popup message on the screen. It printed the
                      > popup box 30 pixels from the left:
                      >
                      > document.getEle mentById("dwind ow").style.left ="30px"
                      >[/color]
                      The left of what? The left edge of the browser's viewport? Or the
                      actual screen itself?
                      [color=blue]
                      > How do I modify it so that the popup box is always centered on the
                      > screen regardless of the monitor resolution of the users?
                      >[/color]
                      The usual way is: left = (screen_width - popup_width) / 2. Similarly
                      for the height.
                      Although I do not know how one would get those dimensions.

                      --
                      jmm (hyphen) list (at) sohnen-moe (dot) com
                      (Remove .AXSPAMGN for email)

                        Comment

                        • Stephen Poley
                          #7
                          Re: HOW: Center this popup message on screen.

                          On Wed, 09 Nov 2005 18:57:32 +0800, Blue® <superbaby@myja ring.net>
                          wrote:
                          [color=blue][color=green]
                          >> a) Are you sure your readers want pop-up messages? Many don't.[/color]
                          >
                          >*** Yes, some of my customers asked for it. They want a popup (on the
                          >contact page) that says they are out of office and response will be slow.
                          >[color=green]
                          >> b) Are you sure you want it centred on the screen? What if the active
                          >> browser window only occupies, say, the right half of the screen?[/color]
                          >
                          >*** Yes, most people will surf the internet full screen.
                          >[color=green]
                          >> c) If you don't yet know the difference between a script and a
                          >> stylesheet, you probably shouldn't be worrying about this at all. But if
                          >> you must, try comp.lang.javas cript.[/color]
                          >
                          >*** I have searched through the internet by still can't have my problem
                          >solved.
                          >
                          >*** I know the difference between a javascript and a stylesheet. But
                          >that is less important to me. I just want to have my problem solved. I
                          >have a deadline to meet.
                          >
                          >*** I posted this under comp.lang.javas cript and the people there asked
                          >me to come here.[/color]

                          <noses around archive> Well, I guess Thomas Lahn will be flattered at
                          being referred to with the royal plural. Maybe you were counting his
                          ears.

                          I'll grant you his answer is not one of the clearest ever made on
                          Usenet. On the other hand it shouldn't require an advanced degree in
                          linguistic analysis to realise that he was telling you to use a
                          CSS-styled element instead of a pop-up window.

                          --
                          Stephen Poley

                          Web Matters - Main Page
                          http://www.xs4all.nl/~sbpoley/webmatters/

                            Comment

                            Previous template Next
                            Working...