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

40122RE: [ydn-javascript] Skinning YUI Panel for rounded transparent corners using schill method??

Expand Messages
  • Satyen Desai
    Oct 29, 2008
      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");



      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,
      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

      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 class="b">

      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?

    • Show all 3 messages in this topic