Re: Making Site Opaque -- This Strategy Feasible?

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Prisoner at War

    Re: Making Site Opaque -- This Strategy Feasible?


    Yeah, but that requires installing the Flash plug-in.

    If it's otherwise possible -- which it seems to be -- CSS/JavaScript
    is more powerful than I'd thought!


    Anyway, it's a technical question, not an "artistic" one....



    On Apr 26, 3:35 pm, "Jonathan N. Little" <lws4...@centra l.netwrote:
    >
    >
    This kind of nonsense is for Flash...
    >
    --
    Take care,
    >
    Jonathan
    -------------------
    LITTLE WORKS STUDIOhttp://www.LittleWorks Studio.com
  • Jonathan N. Little

    #2
    Re: Making Site Opaque -- This Strategy Feasible?

    Prisoner at War wrote:
    Yeah, but that requires installing the Flash plug-in.
    >
    If it's otherwise possible -- which it seems to be -- CSS/JavaScript
    is more powerful than I'd thought!
    >
    >
    Anyway, it's a technical question, not an "artistic" one....
    >
    What you want is old MS's proprietary fade transitions filter. When
    DHTML was the current "Web2.0" it was sort of popular. It would require
    JavaScript and be very messy to get it to work on more that one browser.
    ... More work that I would be willing to invest. Again, this "effect" is
    more in Flash's domain.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO

    Comment

    • VK

      #3
      Re: Making Site Opaque -- This Strategy Feasible?

      On Apr 26, 11:40 pm, Prisoner at War <prisoner_at_.. .@yahoo.com>
      wrote:
      Yeah, but that requires installing the Flash plug-in.
      >
      If it's otherwise possible -- which it seems to be -- CSS/JavaScript
      is more powerful than I'd thought!
      >
      Anyway, it's a technical question, not an "artistic" one....
      Technically it is perfectly cross-browser possible: but to write a
      stay alone working sample would require an hour of coding and cross-
      browser testing. I just don't have this spare time in my hand - though
      other may do or someone may have a working snippet ready. You may just
      take subModal script and re-adjust it for your needs if you can:

      Comment

      • Prisoner at War

        #4
        Re: Making Site Opaque -- This Strategy Feasible?

        On Apr 26, 3:53 pm, "Jonathan N. Little" <lws4...@centra l.netwrote:
        >
        >
        What you want is old MS's proprietary fade transitions filter. When
        DHTML was the current "Web2.0" it was sort of popular. It would require
        JavaScript and be very messy to get it to work on more that one browser.
        .. More work that I would be willing to invest. Again, this "effect" is
        more in Flash's domain.
        Yeah, but Flash requires a plug-in...besides, I'm still struggling
        with CSS/JavaScript! ^_^

        I know these effects sound silly, but I've got a legitimate use for
        them. And, mostly, it's an educational thing: even if I didn't have a
        good use for them it's nice to know what's possible. Part of my
        problem right now is that I don't even know the "scope" and "depth" of
        what's possible between CSS and JavaScript...I' ve come across sites
        that demonstrate neat tricks, but none really teach -- at best, they
        provide a brief outline for an already knowledgeable reader....

        I've bought the book "DOM Scripting"...I hope that will answer many
        questions....
        --
        Take care,
        >
        Jonathan
        -------------------
        LITTLE WORKS STUDIOhttp://www.LittleWorks Studio.com

        Comment

        • Prisoner at War

          #5
          Re: Making Site Opaque -- This Strategy Feasible?

          On Apr 26, 5:14 pm, VK <schools_r...@y ahoo.comwrote:
          >
          >
          Technically it is perfectly cross-browser possible: but to write a
          stay alone working sample would require an hour of coding and cross-
          browser testing. I just don't have this spare time in my hand - though
          other may do or someone may have a working snippet ready. You may just
          take subModal script and re-adjust it for your needs if you can:http://www.subimage.com/dhtml/subModal/

          Hey, cool!! I have **no idea what it is** but it looks fun! 8-)

          Thanks, I hope I can understand all this stuff soon...can you tell me,
          how did you (how did all of you people) learn this stuff??? I mean,
          I'm reading many different books and trying to integrate different
          concepts, but so far I've yet to come up with any original scripts of
          my own...what I'm somewhat successful at is "hacking" others' scripts
          to my own uses...but I'd like to be able to conceive of something and
          know how to go about making it so, without having to research others'
          similar implementations !

          So how did you all learn this stuff?? Is it just a matter of time??
          Ack, I'm spending so much time dealing with site "mechanics" I've
          stopped creating actual content altogether! =(

          But at least this diversion is quite fun! =) Even if often in a very
          frustrating way, like a hard-to-get woman! =\

          Comment

          • Jorge

            #6
            Re: Making Site Opaque -- This Strategy Feasible?

            Playing around : tested in Safari, Opera and FireFox. Simplified
            version that behaves more properly when/if the window is resized.

            <html>
            <head>
            <title>Demo</title>
            <style type="text/css">
            html {
            width: 100%;
            height: 100%;
            padding: 0px 0px;
            background-color: #DCDCDC;
            }

            body {
            width: 80%;
            height: 100%;
            margin: 0px auto;
            padding: 0.5em 2em;
            background-color: #FFFFFF;
            border-left: thin solid black;
            border-right: thin solid black;
            }

            p {
            font: 1em Georgia, serif;
            line-height: 1.4;
            }

            div#cover {
            visibility: hidden;
            position: absolute;
            background-color: black;
            opacity: 0.6;
            z-index: 1001;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            }

            div#popup {
            visibility: hidden;
            position: absolute;
            z-index: 1002;
            left: 0px;
            top: 0px;
            border: medium double black;
            padding: 10px 10px;
            background-color: white;
            }

            div#popup p {
            font: normal 0.8em Verdana, Geneva, sans-serif;
            text-align: center;
            }
            </style>

            <script>

            function $ (p) {
            return document.getEle mentById(p);
            };
            function lockScreen() {
            $('cover').styl e.visibility = 'visible';
            $('popup').styl e.visibility = 'visible';
            return false;
            };
            function releaseScreen() {
            $('cover').styl e.visibility = 'hidden';
            $('popup').styl e.visibility = 'hidden';
            };

            </script>

            </head>
            <body>
            <div id="cover"></div>
            <div id="popup">
            <p>Lorem Ipsum rulez!</p>
            <p><button type="button" onclick="releas eScreen()">Clos e</button>
            </div>
            <a href="noscript. html" onclick="return lockScreen()">A pply settings</
            a>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Quisque eu est. Morbi laoreet, diam at interdum pharetra,
            tellus pede posuere massa, fermentum scelerisque enim elit
            in felis. Donec auctor, libero non rhoncus mattis, dui sapien
            faucibus quam, ut pulvinar elit est ac tortor. Quisque molestie.
            Donec eu lorem. Integer semper suscipit ipsum. Phasellus et
            justo sed dolor blandit lobortis. Morbi a urna eu dolor bibendum
            fermentum. Phasellus adipiscing blandit nisi. Aenean urna est,
            adipiscing eu, pellentesque eget, egestas sit amet, nibh.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
            posuere cubilia Curae; Curabitur id mauris non elit consectetuer
            semper. Nam nec nunc. Nulla facilisi. Suspendisse nec nibh.
            Cras vitae felis.</p>
            <script>
            //Center the popup when/if the window is resized.
            window.onresize = window.onload = function () {
            var e = $('popup'), d = document.docume ntElement;
            e.style.left = ((d.clientWidth - e.offsetWidth)/2) + 'px';
            e.style.top = ((d.clientHeigh t - e.offsetHeight)/2) + 'px';
            };
            </script>
            </body>
            </html>

            Comment

            • Jorge

              #7
              Re: Making Site Opaque -- This Strategy Feasible?

              <html>
              <head>
              <title>Demo</title>
              <style type="text/css">
              html {
              width: 100%;
              height: 100%;
              padding: 0px 0px;
              background-color: #DCDCDC;
              }

              body {
              width: 80%;
              height: 100%;
              margin: 0px auto;
              padding: 0.5em 2em;
              background-color: #FFFFFF;
              border-left: thin solid black;
              border-right: thin solid black;
              }

              p {
              font: 1em Georgia, serif;
              line-height: 1.4;
              }

              div#cover {
              visibility: hidden;
              position: absolute;
              background-color: black;
              opacity: 0.6;
              z-index: 1001;
              left: 0px;
              top: 0px;
              width: 100%;
              height: 100%;
              }

              div#popup {
              visibility: hidden;
              position: absolute;
              z-index: 1002;
              left: 0px;
              top: 0px;
              border: medium double black;
              padding: 10px 10px;
              background-color: white;
              }

              div#popup p {
              font: normal 0.8em Verdana, Geneva, sans-serif;
              text-align: center;
              }
              </style>

              <script>
              //Playing around : tested in Safari, Opera and FireFox.
              //Simplified version that behaves better when/if the window is
              resized.

              function $ (p) {
              return document.getEle mentById(p);
              };
              function lockScreen() {
              $('cover').styl e.visibility = 'visible';
              $('popup').styl e.visibility = 'visible';
              return false;
              };
              function releaseScreen() {
              $('cover').styl e.visibility = 'hidden';
              $('popup').styl e.visibility = 'hidden';
              };

              //Center the popup when/if the window is resized.
              window.onresize = window.onload = function () {
              var e = $('popup'), d = document.docume ntElement;
              e.style.left = ((d.clientWidth - e.offsetWidth)/2) + 'px';
              e.style.top = ((d.clientHeigh t - e.offsetHeight)/2) + 'px';
              };

              </script>

              </head>
              <body>
              <div id="cover"></div>
              <div id="popup">
              <p>Lorem Ipsum rulez!</p>
              <p><button type="button" onclick="releas eScreen()">Clos e</button>
              </div>
              <a href="noscript. html" onclick="return lockScreen()">C lick to do it !
              </a>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
              Quisque eu est. Morbi laoreet, diam at interdum pharetra,
              tellus pede posuere massa, fermentum scelerisque enim elit
              in felis. Donec auctor, libero non rhoncus mattis, dui sapien
              faucibus quam, ut pulvinar elit est ac tortor. Quisque molestie.
              Donec eu lorem. Integer semper suscipit ipsum. Phasellus et
              justo sed dolor blandit lobortis. Morbi a urna eu dolor bibendum
              fermentum. Phasellus adipiscing blandit nisi. Aenean urna est,
              adipiscing eu, pellentesque eget, egestas sit amet, nibh.
              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
              posuere cubilia Curae; Curabitur id mauris non elit consectetuer
              semper. Nam nec nunc. Nulla facilisi. Suspendisse nec nibh.
              Cras vitae felis.</p>
              </body>
              </html>

              Comment

              • Jorge

                #8
                Re: Making Site Opaque -- This Strategy Feasible?

                Version 2 fades in/out... :-)
                Not for IE. Oh My !
                Safari, FireFox & Opera, ok.

                @Prisoner at War : a friendly advice :
                if you aren't doing so already :
                Use FireFox *2* + FireBug for debugging.
                It's handy as a learning tool, as well.


                <html>
                <head>
                <title>untitled </title>
                <meta name="generator " content="TextMa te http://macromates.com/">
                <meta name="author" content="Jorge Chamorro Bieling">
                <!-- Date: 2008-05-02 -->

                <title>Demo</title>

                <style type="text/css">
                html {
                width: 100%;
                height: 100%;
                padding: 0px 0px;
                background-color: #DCDCDC;
                }

                body {
                width: 80%;
                height: 100%;
                margin: 0px auto;
                padding: 0.5em 2em;
                background-color: #FFFFFF;
                border-left: thin solid black;
                border-right: thin solid black;
                }

                p {
                font: 1em Georgia, serif;
                line-height: 1.4;
                }

                div#cover {
                visibility: hidden;
                position: absolute;
                background-color: black;
                opacity: 0.6;
                z-index: 1001;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                }

                div#popup {
                visibility: hidden;
                position: absolute;
                z-index: 1002;
                left: 0px;
                top: 0px;
                border: medium double black;
                padding: 10px 10px;
                background-color: white;
                }

                div#popup p {
                font: normal 0.8em Verdana, Geneva, sans-serif;
                text-align: center;
                }
                </style>

                <script>

                function $ (p) {
                return document.getEle mentById(p);
                };

                function show (pID, pVisible, pTargetOpacity) {
                var kFaderSteps = 15,
                kFadermS = 500/kFaderSteps, //Half a second
                e = $(pID),
                step;

                if (pVisible) {
                if (e.style.visibi lity === 'visible') { return; }
                e.style.opacity = 0;
                e.style.visibil ity = 'visible';
                step = pTargetOpacity/kFaderSteps;
                (e.fader=functi on () {
                if (e.fader !== arguments.calle e) { return; }
                var currentOpacity = +e.style.opacit y;
                if (( currentOpacity += step ) >= pTargetOpacity ) {
                currentOpacity = pTargetOpacity;
                e.fader = undefined;
                } else { setTimeout(e.fa der, kFadermS); }
                e.style.opacity = currentOpacity;
                })();
                } else {
                //Will always fade to opacity=0.0;
                if (e.style.visibi lity === 'hidden') { return; }
                step = e.style.opacity/kFaderSteps;
                (e.fader=functi on () {
                if (e.fader !== arguments.calle e) { return; }
                var currentOpacity = +e.style.opacit y;
                if (( currentOpacity -= step ) <= 0.0 ) {
                currentOpacity = 0.0;
                e.style.visibil ity = 'hidden';
                e.fader = undefined;
                } else { setTimeout(e.fa der, kFadermS); }
                e.style.opacity = currentOpacity;
                })();
                }
                };

                function lockScreen() {
                show('cover', true, 0.6);
                show('popup', true, 1.0);
                return false;
                };

                function releaseScreen() {
                show('cover', false);
                show('popup', false);
                };

                //Center the popup when/if the window is resized.
                window.onresize = window.onload = function () {
                var e = $('popup'), d = document.docume ntElement;
                e.style.left = ((d.clientWidth - e.offsetWidth)/2) + 'px';
                e.style.top = ((d.clientHeigh t - e.offsetHeight)/2) + 'px';
                };

                </script>

                </head>
                <body>
                <div id="cover"></div>
                <div id="popup">
                <p>Lorem Ipsum rulez!</p>
                <p><button type="button" onclick="releas eScreen()">Clos e</button>
                </div>
                <a href="noscript. html" onclick="return lockScreen()">C lick to do it !
                </a>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Quisque eu est. Morbi laoreet, diam at interdum pharetra,
                tellus pede posuere massa, fermentum scelerisque enim elit
                in felis. Donec auctor, libero non rhoncus mattis, dui sapien
                faucibus quam, ut pulvinar elit est ac tortor. Quisque molestie.
                Donec eu lorem. Integer semper suscipit ipsum. Phasellus et
                justo sed dolor blandit lobortis. Morbi a urna eu dolor bibendum
                fermentum. Phasellus adipiscing blandit nisi. Aenean urna est,
                adipiscing eu, pellentesque eget, egestas sit amet, nibh.
                Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
                posuere cubilia Curae; Curabitur id mauris non elit consectetuer
                semper. Nam nec nunc. Nulla facilisi. Suspendisse nec nibh.
                Cras vitae felis.</p>
                </body>
                </html>

                Comment

                • Jorge

                  #9
                  Re: Making Site Opaque -- This Strategy Feasible?

                  <html>
                  <head>
                  <title>Demo</title>
                  <style type="text/css">
                  html {
                  width: 100%;
                  height: 100%;
                  padding: 0px 0px;
                  background-color: #DCDCDC;
                  }

                  body {
                  width: 80%;
                  height: 100%;
                  margin: 0px auto;
                  padding: 0.5em 2em;
                  background-color: #FFFFFF;
                  border-left: thin solid black;
                  border-right: thin solid black;
                  }

                  p {
                  font: 1em Georgia, serif;
                  line-height: 1.4;
                  }

                  div#cover {
                  visibility: hidden;
                  position: absolute;
                  background-color: black;
                  opacity: 0.6;
                  z-index: 1001;
                  left: 0px;
                  top: 0px;
                  width: 100%;
                  height: 100%;
                  }

                  div#popup {
                  visibility: hidden;
                  position: absolute;
                  z-index: 1002;
                  left: 0px;
                  top: 0px;
                  border: medium double black;
                  padding: 10px 10px;
                  background-color: white;
                  }

                  div#popup p {
                  font: normal 0.8em Verdana, Geneva, sans-serif;
                  text-align: center;
                  }

                  </style>
                  <script>
                  /*
                  Playing around : tested in Safari, Opera and FireFox.
                  Simplified version that behaves better when/if the window is
                  resized.
                  */
                  function $ (p) {
                  return document.getEle mentById(p);
                  };

                  function lockScreen() {
                  $('cover').styl e.visibility = 'visible';
                  $('popup').styl e.visibility = 'visible';
                  return false;
                  };

                  function releaseScreen() {
                  $('cover').styl e.visibility = 'hidden';
                  $('popup').styl e.visibility = 'hidden';
                  };

                  //Center the popup when/if the window is resized.
                  window.onresize = window.onload = function () {
                  var e = $('popup'), d = document.docume ntElement;
                  e.style.left = ((d.clientWidth - e.offsetWidth)/2) + 'px';
                  e.style.top = ((d.clientHeigh t - e.offsetHeight)/2) + 'px';
                  };
                  </script>
                  </head>
                  <body>
                  <div id="cover"></div>
                  <div id="popup">
                  <p>Lorem Ipsum rulez!</p>
                  <p><button type="button" onclick="releas eScreen()">Clos e</
                  button>
                  </div>
                  <a href="noscript. html" onclick="return lockScreen()">C lick to do
                  it !
                  </a>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                  Quisque eu est. Morbi laoreet, diam at interdum pharetra,
                  tellus pede posuere massa, fermentum scelerisque enim elit
                  in felis. Donec auctor, libero non rhoncus mattis, dui sapien
                  faucibus quam, ut pulvinar elit est ac tortor. Quisque molestie.
                  Donec eu lorem. Integer semper suscipit ipsum. Phasellus et
                  justo sed dolor blandit lobortis. Morbi a urna eu dolor bibendum
                  fermentum. Phasellus adipiscing blandit nisi. Aenean urna est,
                  adipiscing eu, pellentesque eget, egestas sit amet, nibh.
                  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
                  posuere cubilia Curae; Curabitur id mauris non elit consectetuer
                  semper. Nam nec nunc. Nulla facilisi. Suspendisse nec nibh.
                  Cras vitae felis.</p>
                  </body>
                  </html>

                  Comment

                  • Jorge

                    #10
                    Re: Making Site Opaque -- This Strategy Feasible?


                    /*
                    Playing around : tested in Safari, Opera and FireFox.
                    Simplified version that behaves better when/if the window is
                    resized.
                    */


                    <html>
                    <head>
                    <title>Demo</title>
                    <style type="text/css">
                    html {
                    width: 100%;
                    height: 100%;
                    padding: 0px 0px;
                    background-color: #DCDCDC;
                    }

                    body {
                    width: 80%;
                    height: 100%;
                    margin: 0px auto;
                    padding: 0.5em 2em;
                    background-color: #FFFFFF;
                    border-left: thin solid black;
                    border-right: thin solid black;
                    }

                    p {
                    font: 1em Georgia, serif;
                    line-height: 1.4;
                    }

                    div#cover {
                    visibility: hidden;
                    position: absolute;
                    background-color: black;
                    opacity: 0.6;
                    z-index: 1001;
                    left: 0px;
                    top: 0px;
                    width: 100%;
                    height: 100%;
                    }

                    div#popup {
                    visibility: hidden;
                    position: absolute;
                    z-index: 1002;
                    left: 0px;
                    top: 0px;
                    border: medium double black;
                    padding: 10px 10px;
                    background-color: white;
                    }

                    div#popup p {
                    font: normal 0.8em Verdana, Geneva, sans-serif;
                    text-align: center;
                    }

                    </style>
                    <script>

                    function $ (p) {
                    return document.getEle mentById(p);
                    };

                    function lockScreen() {
                    $('cover').styl e.visibility = 'visible';
                    $('popup').styl e.visibility = 'visible';
                    return false;
                    };

                    function releaseScreen() {
                    $('cover').styl e.visibility = 'hidden';
                    $('popup').styl e.visibility = 'hidden';
                    };

                    //Center the popup when/if the window is resized.
                    window.onresize = window.onload = function () {
                    var e = $('popup'), d = document.docume ntElement;
                    e.style.left = ((d.clientWidth - e.offsetWidth)/2) + 'px';
                    e.style.top = ((d.clientHeigh t - e.offsetHeight)/2) + 'px';
                    };
                    </script>
                    </head>
                    <body>
                    <div id="cover"></div>
                    <div id="popup">
                    <p>Lorem Ipsum rulez!</p>
                    <p><button type="button" onclick="releas eScreen()">Clos e</
                    button>
                    </div>
                    <a href="noscript. html" onclick="return lockScreen()">C lick to do
                    it !
                    </a>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Quisque eu est. Morbi laoreet, diam at interdum pharetra,
                    tellus pede posuere massa, fermentum scelerisque enim elit
                    in felis. Donec auctor, libero non rhoncus mattis, dui sapien
                    faucibus quam, ut pulvinar elit est ac tortor. Quisque molestie.
                    Donec eu lorem. Integer semper suscipit ipsum. Phasellus et
                    justo sed dolor blandit lobortis. Morbi a urna eu dolor bibendum
                    fermentum. Phasellus adipiscing blandit nisi. Aenean urna est,
                    adipiscing eu, pellentesque eget, egestas sit amet, nibh.
                    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
                    posuere cubilia Curae; Curabitur id mauris non elit consectetuer
                    semper. Nam nec nunc. Nulla facilisi. Suspendisse nec nibh.
                    Cras vitae felis.</p>
                    </body>
                    </html>

                    Comment

                    • Jorge

                      #11
                      Re: Making Site Opaque -- This Strategy Feasible?

                      Version 2 fades in/out... :-)
                      Not for IE. Oh My !
                      Safari, FireFox & Opera, ok.

                      @Prisoner at War : a friendly advice :
                      if you aren't doing so already :
                      Use FireFox *2* + FireBug for debugging.
                      It's handy as a learning tool, as well.

                      <html>
                      <head>
                      <title>untitled </title>
                      <meta name="generator " content="TextMa te http://macromates.com/">
                      <meta name="author" content="Jorge Chamorro Bieling">
                      <!-- Date: 2008-05-02 -->

                      <title>Demo</title>

                      <style type="text/css">
                      html {
                      width: 100%;
                      height: 100%;
                      padding: 0px 0px;
                      background-color: #DCDCDC;
                      }

                      body {
                      width: 80%;
                      height: 100%;
                      margin: 0px auto;
                      padding: 0.5em 2em;
                      background-color: #FFFFFF;
                      border-left: thin solid black;
                      border-right: thin solid black;
                      }

                      p {
                      font: 1em Georgia, serif;
                      line-height: 1.4;
                      }

                      div#cover {
                      visibility: hidden;
                      position: absolute;
                      background-color: black;
                      opacity: 0.6;
                      z-index: 1001;
                      left: 0px;
                      top: 0px;
                      width: 100%;
                      height: 100%;
                      }

                      div#popup {
                      visibility: hidden;
                      position: absolute;
                      z-index: 1002;
                      left: 0px;
                      top: 0px;
                      border: medium double black;
                      padding: 10px 10px;
                      background-color: white;
                      }

                      div#popup p {
                      font: normal 0.8em Verdana, Geneva, sans-serif;
                      text-align: center;
                      }
                      </style>

                      <script>

                      function $ (p) {
                      return document.getEle mentById(p);
                      };

                      function lockScreen() {
                      show('cover', true, 0.6);
                      show('popup', true, 1.0);
                      return false;
                      };

                      function releaseScreen() {
                      show('cover', false);
                      show('popup', false);
                      };

                      /*
                      Center the popup when/if the window is resized
                      */
                      window.onresize = window.onload = function () {
                      var e = $('popup'), d = document.docume ntElement;
                      e.style.left = ((d.clientWidth - e.offsetWidth)/2) + 'px';
                      e.style.top = ((d.clientHeigh t - e.offsetHeight)/2) + 'px';
                      };

                      function show (pID, pVisible, pTargetOpacity) {
                      var kFaderSteps = 20,
                      kFadermS = 500/kFaderSteps, //Half a second
                      e = $(pID),
                      step;

                      if (pVisible) {
                      if (e.style.visibi lity === 'visible') { return; }
                      e.style.opacity = 0;
                      e.style.visibil ity = 'visible';
                      step = pTargetOpacity/kFaderSteps;
                      (e.fader=functi on () {
                      if (e.fader !== arguments.calle e) { return; }
                      var currentOpacity = +e.style.opacit y;
                      if (( currentOpacity += step ) >= pTargetOpacity ) {
                      currentOpacity = pTargetOpacity;
                      e.fader = undefined;
                      } else { setTimeout(e.fa der, kFadermS); }
                      e.style.opacity = currentOpacity;
                      })();
                      } else {
                      //Will always fade to opacity=0.0;
                      if (e.style.visibi lity === 'hidden') { return; }
                      step = e.style.opacity/kFaderSteps;
                      (e.fader=functi on () {
                      if (e.fader !== arguments.calle e) { return; }
                      var currentOpacity = +e.style.opacit y;
                      if (( currentOpacity -= step ) <= 0.0 ) {
                      currentOpacity = 0.0;
                      e.style.visibil ity = 'hidden';
                      e.fader = undefined;
                      } else { setTimeout(e.fa der, kFadermS); }
                      e.style.opacity = currentOpacity;
                      })();
                      }
                      };

                      </script>

                      </head>
                      <body>
                      <div id="cover"></div>
                      <div id="popup">
                      <p>Lorem Ipsum rulez!</p>
                      <p><button type="button" onclick="releas eScreen()">Clos e</button>
                      </div>
                      <a href="noscript. html" onclick="return lockScreen()">C lick to do it !
                      </a>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                      Quisque eu est. Morbi laoreet, diam at interdum pharetra,
                      tellus pede posuere massa, fermentum scelerisque enim elit
                      in felis. Donec auctor, libero non rhoncus mattis, dui sapien
                      faucibus quam, ut pulvinar elit est ac tortor. Quisque molestie.
                      Donec eu lorem. Integer semper suscipit ipsum. Phasellus et
                      justo sed dolor blandit lobortis. Morbi a urna eu dolor bibendum
                      fermentum. Phasellus adipiscing blandit nisi. Aenean urna est,
                      adipiscing eu, pellentesque eget, egestas sit amet, nibh.
                      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
                      posuere cubilia Curae; Curabitur id mauris non elit consectetuer
                      semper. Nam nec nunc. Nulla facilisi. Suspendisse nec nibh.
                      Cras vitae felis.</p>
                      </body>
                      </html>

                      Comment

                      • VK

                        #12
                        Re: Making Site Opaque -- This Strategy Feasible?

                        On May 2, 6:41 pm, Jorge <jo...@jorgecha morro.comwrote:
                        Version 2 fades in/out... :-)
                        Not for IE. Oh My !
                        Safari, FireFox & Opera, ok.
                        Cool. I just would like to keep it as a learner's code as well, not
                        just a library - though it will be fully usable as it is.

                        This way I'd like to avoid "squeeze-script" to keep the algorithm
                        steps as obvious as possible. So without (wherever doable) anonymous
                        function expressions, nested functions, closures and stuff.

                        The final result - if reached - will also be free under the MIT
                        Licence.

                        Are you OK with it? I'll take a look around what can universally do
                        with the scrolling issues.

                        Comment

                        • Jorge

                          #13
                          Re: Making Site Opaque -- This Strategy Feasible?

                          On May 2, 8:50 pm, VK <schools_r...@y ahoo.comwrote:
                          Are you OK with it? I'll take a look around what can universally do
                          with  the scrolling issues.
                          Oh, my... yes, scrolling happens as well... !

                          Who writes a handler ? ...and posts it ? :-)

                          --Jorge.

                          Comment

                          Working...