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

Re: Panel is showing as transparent instead of using skin

Expand Messages
  • twocupcoffee
    Yeah, Caridy is right, One of the parent elements has to be of the class yui-skin-sam in order for the stylesheet to work correctly. Without setting the class,
    Message 1 of 4 , Jan 31, 2008
    • 0 Attachment
      Yeah, Caridy is right,

      One of the parent elements has to be of the class yui-skin-sam
      in order for the stylesheet to work correctly. Without setting the
      class, the skins will not show up properly

      - Andrew Kou

      --- In ydn-javascript@yahoogroups.com, Caridy Patiño Mayea
      <caridy@...> wrote:
      >
      > Hello Chad,
      >
      > Check the SAM Skin Seletor in the page body:
      >
      > <body class="yui-skin-sam">
      >
      > Best Regards,
      > Caridy Patiño (caridy at gmail.com)
      > http://www.bubbling-library.com/
      >
      > --- In ydn-javascript@yahoogroups.com, "chad_h_" <chad.horton@> wrote:
      > >
      > > I've tried a few other changes and it still doesn't work :(
      > >
      > > If I make sure to include the css:
      > > <link rel="stylesheet" type="text/css"
      > > href="/global/yui/build/container/assets/container.css">
      > >
      > > and now the panel shows, but there are some additional problems.
      > >
      > > I can't drag the panel around - it is locked in one location on the
      > > page. I have "draggable: true" set (corrected spelling error from
      > > original code posted), but it still isn't draggable. I've followed
      > > the examples on yui but to no avail.
      > >
      > > Also, the style I was wanting to use for the panel is the nice one
      > > used in the simple panel example on the yui site. But, I can't get
      > > that style/skin to display.
      > >
      > > Maybe it's how I've implemented the code?
      > >
      > > Help?
      > >
      > >
      > >
      > > --- In ydn-javascript@yahoogroups.com, "chad_h_" <chad.horton@> wrote:
      > > >
      > > > Hi,
      > > >
      > > > I have created a panel with a header and body content and when it
      > > > displays, it is showing up with just the text and doesn't
      display the
      > > > skin/style for the panel.
      > > >
      > > > Any help is appreciated. (I check that container.css is definitely
      > > there)
      > > >
      > > > I'm using:
      > > >
      > > > <link rel="stylesheet" type="text/css"
      > > > href="/global/yui/build/container/assets/skins/sam/container.css">
      > > > <script type="text/javascript"
      > > >
      src="/global/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      > > > <script type="text/javascript"
      > > > src="/global/yui/build/animation/animation-min.js"></script>
      > > > <script type="text/javascript"
      > > > src="/global/yui/build/container/container-min.js"></script>
      > > >
      > > >
      > > > and then to create the panel (thanks to caridyp and others for their
      > > > guidance):
      > > >
      > > > <script>
      > > > var obj = {};
      > > > var getAnnouncementCallback =
      > > > {
      > > > success:getAnnouncementSuccess,
      > > > failure:getAnnouncementFailure,
      > > > timeout:5000
      > > > };
      > > > function displayDialog (uri)
      > > > {
      > > >
      > > > // Build overlay based on markup
      > > > obj.announcementOverlay = new
      > > YAHOO.widget.Panel('announcementOverlay', {
      > > > visible:true,
      > > > constraintoviewport:true,
      > > > fixedcenter: false,
      > > > preventoverlap: true,
      > > > close: true,
      > > > dragable: true,
      > > > zindex:3000,
      > > > width:"500px",
      > > > height:"auto",
      > > > effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}
      > > > });
      > > >
      > > > obj.announcementOverlay.setHeader ('Announcement');
      > > > obj.announcementOverlay.setBody ('Loading,Please Wait...');
      > > > obj.announcementOverlay.setFooter (' ')
      > > > if (YAHOO.util.Dom.inDocument('announcementOverlay')) { // is the
      > > > panel is already in the DOM
      > > > obj.announcementOverlay.render();
      > > > } else {
      > > > obj.announcementOverlay.render(document.body);
      > > > }
      > > >
      > > > if(uri == '')
      > > > {
      > > > return false;
      > > > }
      > > > else
      > > > {
      > > > YAHOO.util.Connect.asyncRequest("GET", uri,
      getAnnouncementCallback)
      > > > }
      > > >
      > > > // Start the loading process to replace the innerHTML for the
      > element
      > > > //YAHOO.util.Dom.get('announcement-container')
      > > > // or use: obj.handleOverlay.setBody( newContent );
      > > > };
      > > >
      > > > function getAnnouncementSuccess(o)
      > > > {
      > > > obj.announcementOverlay.setBody( o.responseText );
      > > > };
      > > > function getAnnouncementFailure(o)
      > > > {
      > > > obj.announcementOverlay.hide();
      > > > return false;
      > > > };
      > > >
      > > > </script>
      > > > <a href="javascript:void(0);"
      > > > onClick="displayDialog('/index.php/myhome/getAnnouncement/6');">test
      > > > link</a>
      > > >
      > > > Thanks!
      > > > Chad
      > > >
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.