Loading ...
Sorry, an error occurred while loading the content.

Container panel transparency in 0.11.3

Expand Messages
  • Michael Price
    hi, I ve been using popup panels as enlarge image window on a website we re developing. On 0.11.2 the background goes semi-transparent as expected. On 0.11.3
    Message 1 of 6 , Sep 5, 2006
    • 0 Attachment
      hi,
      I've been using popup panels as "enlarge image" window on a website
      we're developing. On 0.11.2 the background goes semi-transparent as
      expected. On 0.11.3 this does not happen - the background goes grey but
      images with no transparency still shine through and it looks - well - a
      bit messy.

      I'm running a combined Javascript of YAHOO / DOM / Event / Connection /
      Animation / Drag Drop / Calendar / Container (in that order) - all the
      other modules are 0.11.3 but Container is still 0.11.2 until I figure
      out what caused this.

      Mike
    • Steven Peterson
      Mike, Are you using the latest CSS (0.11.3)? Also, can you provide an example where this is happening (what browser, etc.)? I don t see this issue in Firefox
      Message 2 of 6 , Sep 6, 2006
      • 0 Attachment

        Mike,

         

        Are you using the latest CSS (0.11.3)? Also, can you provide an example where this is happening (what browser, etc.)? I don’t see this issue in Firefox on Windows XP when I’m looking at the YUI examples.

         

        Thanks!

        Steven Peterson

        Web Developer, Platform Engineering

        Yahoo!

         

         

         

        From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Michael Price
        Sent: Tuesday, September 05, 2006 8:57 AM
        To: ydn-javascript@yahoogroups.com
        Subject: [ydn-javascript] Container panel transparency in 0.11.3

         

        hi,
        I've been using popup panels as "enlarge image" window on a website
        we're developing. On 0.11.2 the background goes semi-transparent as
        expected. On 0.11.3 this does not happen - the background goes grey but
        images with no transparency still shine through and it looks - well - a
        bit messy.

        I'm running a combined Javascript of YAHOO / DOM / Event / Connection /
        Animation / Drag Drop / Calendar / Container (in that order) - all the
        other modules are 0.11.3 but Container is still 0.11.2 until I figure
        out what caused this.

        Mike

      • Mike Price
        ... hi Steven, Sorry for my delay in replying to this - I ve had to go back to Container 0.11.3 as it resolves a HTTPS issue which came up and now I m back to
        Message 3 of 6 , Sep 14, 2006
        • 0 Attachment
          > Are you using the latest CSS (0.11.3)? Also, can you provide an example
          > where this is happening (what browser, etc.)? I don't see this issue in
          > Firefox on Windows XP when I'm looking at the YUI examples.

          hi Steven,
          Sorry for my delay in replying to this - I've had to go back to
          Container 0.11.3 as it resolves a HTTPS issue which came up and now
          I'm back to having this problem again.

          I can't provide an example at the moment as the site in question is on
          lockdown but curiously, we are using similar panel popups within a
          subpage of the site where they seem to be working perfectly. Perhaps a
          conflict in either JS or CSS on the page in question?
        • Michael Price
          Another update :) Managed to figure out that it had something to with position: relative; on our DIVs - we were using this sort of CSS: position: relative;
          Message 4 of 6 , Sep 14, 2006
          • 0 Attachment
            Another update :)

            Managed to figure out that it had something to with position: relative;
            on our DIVs - we were using this sort of CSS:

            position: relative;
            left: 50%;
            margin-left: -385px;

            to centre our content on the page. Those DIVs and anything in them were
            not being masked under Container 0.11.3 - they WERE on 0.11.2. Setting
            body to text-align: center; and these DIVs to margin: TOP auto BOTTOM
            auto; with text-align: left; seems to get round it.

            Regards,
            Michael Price
          • cmollerman
            Steven, I think what the problem might actually be is the position style of the elements in his page... If not, this is a separate problem, but it does not
            Message 5 of 6 , Sep 19, 2006
            • 0 Attachment
              Steven,

              I think what the problem might actually be is the position style of
              the elements in his page... If not, this is a separate problem, but it
              does not affect the examples that come with YUI so that explains why
              you didn't see this problem.

              All you need to do in order to duplicate the problem is set SOMETHING,
              most likely a <div> to have absolute positioning and then when you use
              a modal dialog, the div will show through the background and you can
              still interact with it. This did not occur in the last version, but
              does in 0.11.3. In order to fix it, all the person needs to do is set
              the z-index of the offending element to be something like "1" and then
              it will be "below" the background. (or any one of a number of other
              methods such as changing it to relative positioning, etc...)

              Here is the Aqua sample that comes with YUI that will demonstrate this
              problem. Just place it in the same directory as the original Aqua
              sample and try it out... When you show the panel you will see how the
              div below shows through the background. The only changes were:
              1. Absolutely position the div
              2. set modal to true

              Let me know if this helps...
              -C

              ---[BEGIN CODE]----
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd">
              <html>
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
              <title>YAHOO.widget.Panel - Aqua Panel Example</title>

              <script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
              <script type="text/javascript" src="../../build/event/event.js" ></script>
              <script type="text/javascript" src="../../build/dom/dom.js" ></script>
              <script type="text/javascript" src="../../build/dragdrop/dragdrop.js"
              ></script>
              <script type="text/javascript"
              src="../../build/animation/animation.js" ></script>

              <link rel="stylesheet" type="text/css"
              href="../../build/fonts/fonts.css" />
              <link rel="stylesheet" type="text/css" href="css/example.css" />

              <link rel="stylesheet" type="text/css"
              href="../../build/container/assets/container.css" />
              <script type="text/javascript"
              src="../../build/container/container.js"></script>

              <link rel="stylesheet" type="text/css" href="css/panel-aqua.css" />

              <script language="javascript">
                  YAHOO.namespace("example.aqua");

                  function init() {
                      YAHOO.example.aqua.panel = new YAHOO.widget.Panel("win", {
              effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25},
              width:"30em", fixedcenter: true, constraintoviewport: true,
              underlay:"none", close:true, visible:false, draggable:true, modal:true
              } );
                      YAHOO.example.aqua.panel.render();
                  }

                  YAHOO.util.Event.addListener(window, "load", init);
              </script>
              </head>
              <body>
                  <div class="box" id="bodyMain" style="position:absolute;">
                      <div class="hd">
                          <h1>Aqua Panel Example</h1>
                      </div>
                      <div class="bd">
                          <p>Some custom CSS allows Panel to be rendered with a familiar skin.
                          </p>

                          <button onclick="YAHOO.example.aqua.panel.show()">Show the
              Panel</button>
                          <select>
                              <option>This is a &lt;select&gt; element, helpul for testing the
              IFRAME shim</option>
                          </select>
                      </div>
                  </div>

              <div id="win">
                      <div class="hd"><div class="lt"></div><span>Sprockets!</span><div
              class="rt"></div></div>
                      <div class="bd">
                          <img src="http://static.flickr.com/7/6301565_7123909f10_t.jpg"
              alt="sprockets!" style="float:left;margin:0 5px 5px"/>
                          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
              in risus. Vestibulum a nibh tincidunt elit iaculis laoreet. In pede
              metus, tristique non, consectetuer a, vestibulum vel, enim. Curabitur
              neque magna, pulvinar sit amet, lobortis viverra, porta non, dui.
              Donec tempor, arcu quis interdum pellentesque, dui dolor gravida pede,
              in iaculis justo tortor venenatis ligula. Cras non pede vel risus
              egestas faucibus. Nam pulvinar lobortis nisi. In vehicula venenatis
              sapien.</p>

                          <p style="margin-bottom:0px">Cum sociis natoque penatibus et magnis
              dis parturient montes, nascetur ridiculus mus. Etiam et risus ut est
              adipiscing congue. Praesent ut justo. Proin hendrerit urna eget eros.
              Curabitur condimentum tempor diam. Pellentesque tortor odio,
              sollicitudin eget, pellentesque ut, ullamcorper a, justo. Nam tellus
              pede, fermentum ac, sollicitudin sed, mollis vel, turpis. Fusce
              pulvinar nibh et erat. Praesent purus nibh, fermentum ac, imperdiet
              vel, aliquet eu, mi. Praesent non nisi ac mauris tempor ultricies.
              Nulla mollis tellus porta leo. Nunc accumsan dapibus tellus. Nunc nec
              nunc.</p>
                      </div>
                  </div>
              </div>


              </body>
              </html>

            • cmollerman
              ... Sorry, I screwed that up... What I should have said was that you need to set the z-index of the mask (in the container stylesheet) to something higher...
              Message 6 of 6 , Sep 19, 2006
              • 0 Attachment
                --- In ydn-javascript@yahoogroups.com, "cmollerman" <cmollerman@...>
                > does in 0.11.3. In order to fix it, all the person needs to do is set
                > the z-index of the offending element to be something like "1" and then
                > it will be "below" the background. (or any one of a number of other
                > methods such as changing it to relative positioning, etc...)

                Sorry, I screwed that up... What I should have said was that you need
                to set the z-index of the mask (in the container stylesheet) to
                something higher...

                You get the idea. :)

                -CM
              Your message has been successfully submitted and would be delivered to recipients shortly.