Creating a div that obscures content beneath it

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

    Creating a div that obscures content beneath it

    I'd be surprised if this isn't a FAQ; if it is, I must be searching on
    the wrong keywords because I can find a lot of stuff about "how do I
    make a div stick to the same area of the screen while the user scrolls
    around" but what I want to do should be substantially simpler. I hope.

    What I have so far works, but my new element just flows where it
    normally would if it were at the end of the BODY and I'd like to be
    able to get it to "float over" the rest of the page.

    <html>
    <head>
    <title></title>
    </head>

    <body>
    <script>
    function test() {
    var div = document.create Element('DIV')
    div.style.posit ion = 'absolute'
    div.style.left = div.style.typ = '20px'
    var h = document.create Element('H3')
    h.appendChild(d ocument.createT extNode('text') )
    div.appendChild (h)
    document.body.a ppendChild(div)
    }
    </script>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eu
    neque.
    Duis lacinia volutpat lacus. Sed rutrum, nulla ac nonummy venenatis,
    orci metus adipiscing ipsum, volutpat bibendum sapien nunc a purus.

    <p>
    <a href=javascript :test()>click here</a>
    </body>
    </html>

    -Jonathan

    Tags: None
    • Ivo
      #2
      Re: Creating a div that obscures content beneath it

      "Jonathan Ellis" wrote[color=blue]
      > div.style.left = div.style.typ = '20px'[/color]

      Here is my tip: change "typ" to "top".
      HTH
      --
      Ivo



        Comment

        • Jonathan Ellis
          #3
          Re: Creating a div that obscures content beneath it

          Jonathan Ellis wrote:[color=blue]
          > What I have so far works, but my new element just flows where it
          > normally would if it were at the end of the BODY and I'd like to be
          > able to get it to "float over" the rest of the page.[/color]

          One of my friends got this working in mozilla, but IE6 doesn't like it:

          function test() {
          var div = document.create Element('DIV')
          div.setAttribut e("style","posi tion:absolute; left:0px; top:0px;
          width:600px; z-index:10000; background-color:#ff6600;" );
          var h = document.create Element('H3')
          h.appendChild(d ocument.createT extNode('text') )
          div.appendChild (h)
          document.body.a ppendChild(div)
          }

          Any suggestions?

          -Jonathan

            Comment

            • Jonathan Ellis
              #4
              Re: Creating a div that obscures content beneath it

              Ok, that was a good tip, but it still doesn't work. :)

              *** Sent via Developersdex http://www.developersdex.com ***
              Don't just participate in USENET...get rewarded for it!

                Comment

                • Ivo
                  #5
                  Re: Creating a div that obscures content beneath it

                  "Jonathan Ellis" wrote[color=blue][color=green]
                  > > What I have so far works, but my new element just flows where it
                  > > normally would if it were at the end of the BODY and I'd like to be
                  > > able to get it to "float over" the rest of the page.[/color]
                  >
                  > One of my friends got this working in mozilla, but IE6 doesn't like it:
                  >
                  > function test() {
                  > var div = document.create Element('DIV')
                  > div.setAttribut e("style","posi tion:absolute; left:0px; top:0px;
                  > width:600px; z-index:10000; background-color:#ff6600;" );
                  > var h = document.create Element('H3')
                  > h.appendChild(d ocument.createT extNode('text') )
                  > div.appendChild (h)
                  > document.body.a ppendChild(div)
                  > }[/color]

                  Don't use setAttribute, but apply the styles directly:

                  div.style.posit ion="absolute";
                  div.style.left= "0";
                  div.style.top=" 0";
                  div.style.width ="600px";
                  div.style.zInde x="100";
                  div.style.backg roundColor="#ff 6600";

                  and IE will display it in the topleft corner.
                  --
                  Ivo
                  http://4umi.com/web/javascript/



                    Comment

                    Previous template Next
                    Working...