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

Panel is showing as transparent instead of using skin

Expand Messages
  • chad_h_
    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
    Message 1 of 4 , Jan 30, 2008
    • 0 Attachment
      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
    • chad_h_
      I ve tried a few other changes and it still doesn t work :( If I make sure to include the css:
      Message 2 of 4 , Jan 31, 2008
      • 0 Attachment
        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
        >
      • Caridy Patiño Mayea
        Hello Chad, Check the SAM Skin Seletor in the page body: Best Regards, Caridy Patiño (caridy at gmail.com)
        Message 3 of 4 , Jan 31, 2008
        • 0 Attachment
          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
          > >
          >
        • 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 4 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.