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

Re: Panel is showing as transparent instead of using skin

Expand Messages
  • chad_h_
    I ve tried a few other changes and it still doesn t work :( If I make sure to include the css:
    Message 1 of 4 , Jan 31, 2008
      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 2 of 4 , Jan 31, 2008
        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 3 of 4 , Jan 31, 2008
          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.