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

Skinning YUI Panel for rounded transparent corners using schill method??

Expand Messages
  • athanasius815
    I am trying to skin my yui panel using one transparent png image that will be fairly fluid. The technique I am attempting to implement is here:
    Message 1 of 3 , Oct 29, 2008
    • 0 Attachment
      I am trying to skin my yui panel using one transparent png image that
      will be fairly fluid. The technique I am attempting to implement is
      here:
      http://www.schillmania.com/content/projects/even-more-rounded-corners/

      Schill uses the SMF (Standard Module Format) recommended by Nate Koechly:

      <div class="dialog" id="myYuiPanel">
      <div class="content" id="theContent">
      <div class="t"></div>
      <div class="hd"></div>
      <div class="bd"></div>
      <div class="ft"></div>
      </div>
      <div class="b"><div></div></div>
      </div>

      The problem is that when attempting to create a panel from the
      existing markup above, YUI Panel seems to want the 'bd' class to be a
      direct child of the main panel element and will in fact insert a new
      <div class="bd"> as a child of "myYuiPanel", ignoring the existing bd
      under "theContent" div.

      Can I get around this problem without using a different css technique?

      Thanks,
      Jason
    • Satyen Desai
      Hi, The panel should generate an equivalent double box markup, if you give it the DIV with id= theContent . It creates a wrapper DIV around the content DIV you
      Message 2 of 3 , Oct 29, 2008
      • 0 Attachment
        Hi,
        The panel should generate an equivalent double box markup, if you give it the DIV with id="theContent". It creates a wrapper DIV around the content DIV you provide it [ which is a replacement for the myYuiPanel DIV in your structure below ].

        So, if you just leave the DIV with id="theContent" on the page, instantiate a Panel with it, and then insert the decorator DIVs (class="b", class="t"), in a beforeRender or render listener, you should end up with the same structure. Something like:

        var panel = new YAHOO.widget.Panel("theContent", {underlay:"none", width:"10em"});

        panel.subscribe("beforeRender", function() {

        var outer = panel.element,
        inner = panel.innerElement,
        t, b, bn;

        t = document.createElement("div");
        t.className = "t";

        inner.insertBefore(t, inner.firstChild);

        b = document.createElement("div");
        b.className = "b";

        bn = document.createElement("div");

        panel.element.appendChild(b);
        b.appendChild(bn);
        });

        panel.render();

        Also, this way, your initial page markup doesn't need any of the additional elements required just to drive the look/feel. It just needs to deliver the content div.

        Hope that helps,
        Satyen
        ________________________________________
        From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of athanasius815
        Sent: Wednesday, October 29, 2008 1:06 PM
        To: ydn-javascript@yahoogroups.com
        Subject: [ydn-javascript] Skinning YUI Panel for rounded transparent corners using schill method??

        I am trying to skin my yui panel using one transparent png image that
        will be fairly fluid. The technique I am attempting to implement is
        here:
        http://www.schillmania.com/content/projects/even-more-rounded-corners/

        Schill uses the SMF (Standard Module Format) recommended by Nate Koechly:

        <div class="dialog" id="myYuiPanel">
        <div class="content" id="theContent">
        <div class="t"></div>
        <div class="hd"></div>
        <div class="bd"></div>
        <div class="ft"></div>
        </div>
        <div class="b">
        <div></div>
        </div>
        </div>

        The problem is that when attempting to create a panel from the
        existing markup above, YUI Panel seems to want the 'bd' class to be a
        direct child of the main panel element and will in fact insert a new
        <div class="bd"> as a child of "myYuiPanel", ignoring the existing bd
        under "theContent" div.

        Can I get around this problem without using a different css technique?

        Thanks,
        Jason
      • athanasius815
        Satyen, works great, thanks! Jason
        Message 3 of 3 , Nov 1, 2008
        • 0 Attachment
          Satyen, works great, thanks!

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