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

Skinning a panel question

Expand Messages
  • dprusak@pacbell.net
    Hi all, I have a situation where I need to skin the panel in ways that s not described in the YUI examples. Example Panel:
    Message 1 of 2 , Jun 4, 2008
    • 0 Attachment
      Hi all,

      I have a situation where I need to skin the panel in ways that's not
      described in the YUI examples.

      Example Panel:
      http://www.prusak.net/dropshadow-blue.png

      The panel borders exists outside the dialog body. It's not part of
      the body.

      The header and footer dropshadow was simple enough to implement. The
      problem was getting the left and right borders to work for me.

      Now, I've implemented this by doing the following code:

      <div id="rightborder">
      <div id="leftborder">
      <div id="bd">
      </div>
      </div>
      </div>

      This works well for the visual.

      The problem I have now is that the container code cannot defined
      this.body. It's now null. It can't seem to find the id bd (maybe
      because it's now nested?)

      The problem that I'm having now is that I'm also using the YUI resize
      code. Because this.body is not defined, resize fails. I'm cheating
      by getting the elementbyid for 'bd', but it's not quite working out
      well. Firefox will only resize horizontally where as MSIE 7 gets
      confused what's really getting resized. All sorts of side effects
      are popping up.

      Any idea how I can accomplish the drop shadow borders so that bd
      isn't nested?

      --David
    • dprusak@pacbell.net
      Hi again, I found a solution and it seems to work with FF, MSIE 6, and MSIE 7. It s a bit hacky, so I thought to run it by all of you. Here s the code I ve
      Message 2 of 2 , Jun 5, 2008
      • 0 Attachment
        Hi again,

        I found a solution and it seems to work with FF, MSIE 6, and MSIE 7.
        It's a bit hacky, so I thought to run it by all of you.

        Here's the code I've come up with:

        'fastDocBody' is the div that contains the bd class.
        'popupFastDocResize' is the div that wraps hd, bd, and ft.

        ...
        resize.on('resize', function(args) {

        var panelHeight = args.height;
        var panelWidth = args.width;

        var panelHeight = panelHeight - 70;

        if (YAHOO.env.ua.ie == 6){
        var panelBody = document.getElementById('fastDocBody');
        YAHOO.util.Dom.setStyle(panelBody, 'height', panelHeight + 'px');
        YAHOO.util.Dom.setStyle(panelBody, 'width', panelWidth + 'px');
        } else {
        var panelBody = document.getElementById('fastDocBody');
        var panelWrapper = document.getElementById('popupFastDocResize');

        var wrapperWidth = panelWidth + 40;
        YAHOO.util.Dom.setStyle(panelBody, 'height', panelHeight + 'px');
        YAHOO.util.Dom.setStyle(panelBody, 'width', panelWidth + 'px');
        YAHOO.util.Dom.setStyle(panelWrapper, 'width', wrapperWidth
        + 'px');
        }
        ....

        It seems taht IE6 just needs the body resized, but FF/MSIE7 needs the
        body and the container wrapper resized.

        Does this look good? Any side effects? I'm not familiar with the
        container.js internals.

        --David

        --- In ydn-javascript@yahoogroups.com, "dprusak@..." <dprusak@...>
        wrote:
        >
        > Hi all,
        >
        > I have a situation where I need to skin the panel in ways that's
        not
        > described in the YUI examples.
        >
        > Example Panel:
        > http://www.prusak.net/dropshadow-blue.png
        >
        > The panel borders exists outside the dialog body. It's not part of
        > the body.
        >
        > The header and footer dropshadow was simple enough to implement.
        The
        > problem was getting the left and right borders to work for me.
        >
        > Now, I've implemented this by doing the following code:
        >
        > <div id="rightborder">
        > <div id="leftborder">
        > <div id="bd">
        > </div>
        > </div>
        > </div>
        >
        > This works well for the visual.
        >
        > The problem I have now is that the container code cannot defined
        > this.body. It's now null. It can't seem to find the id bd (maybe
        > because it's now nested?)
        >
        > The problem that I'm having now is that I'm also using the YUI
        resize
        > code. Because this.body is not defined, resize fails. I'm
        cheating
        > by getting the elementbyid for 'bd', but it's not quite working out
        > well. Firefox will only resize horizontally where as MSIE 7 gets
        > confused what's really getting resized. All sorts of side effects
        > are popping up.
        >
        > Any idea how I can accomplish the drop shadow borders so that bd
        > isn't nested?
        >
        > --David
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.