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

Panel never displays

Expand Messages
  • themidnightwill
    Hello, I m having problems getting a panel (essentially copied from Yahoo s example). I ve tried IE and Firefox without luck. Nothing shows up on the Firefox
    Message 1 of 3 , Sep 4, 2006
    • 0 Attachment
      Hello,

      I'm having problems getting a panel (essentially copied from Yahoo's
      example). I've tried IE and Firefox without luck.

      Nothing shows up on the Firefox JS console, and IE doesn't seem to
      generate any errors. The JS files load fine (they're not 404 errors).

      I have included the code below. I must be missing something obvious.
      Any comments would be appreciated.

      Thanks,

      -Will

      ....


      <script type="text/javascript" src="/y/yahoo/yahoo.js"></script>
      <script type="text/javascript" src="/y/dom/dom.js"></script>
      <script type="text/javascript" src="/y/event/event.js"></script>
      <script type="text/javascript" src="/y/animation/animation.js"></script>
      <script type="text/javascript" src="/y/dragdrop/dragdrop.js"></script>
      <script type="text/javascript" src="/y/container/container.js"></script>
      <script type="text/javascript">

      //The second argument passed to the
      //constructor is a configuration object:
      myPanel = new YAHOO.widget.Panel("win", {
      width:"400px",
      fixedcenter: true,
      constraintoviewport: true,
      underlay:"shadow",
      close:true,
      visible:false,
      draggable:true} );

      //If we haven't built our panel using existing markup,
      //we can set its content via script:
      myPanel.setHeader("The Panel Control");
      myPanel.setBody("Testing the body...");

      myPanel.render();

      </script>
      </head>

      <body>

      <form name="dialog">
      <input type="button" value="Test" onclick="myPanel.show()" />
      </form>


      ...
    • Bart King
      Hello, Try changing: myPanel.render(); To: myPanel.render(document.body); You may want to add in a myPanel.show() after the render call, just in case/for
      Message 2 of 3 , Sep 5, 2006
      • 0 Attachment
        Hello,

        Try changing:

        myPanel.render();

        To:

        myPanel.render(document.body);

        You may want to add in a myPanel.show() after the render call, just in
        case/for completeness. Also, make sure you have CSS styles defined for
        classes 'module, 'overlay' and 'mask' (and all the sub-classes thereof -
        check the assets in build\container\assets\container.css).

        Cheers,
        --
        Bart King
        http://www.bart666.com -- +44 781 219 5654


        -----Original Message-----
        From: ydn-javascript@yahoogroups.com
        [mailto:ydn-javascript@yahoogroups.com] On Behalf Of themidnightwill
        Sent: 05 September 2006 03:53
        To: ydn-javascript@yahoogroups.com
        Subject: [ydn-javascript] Panel never displays

        Hello,

        I'm having problems getting a panel (essentially copied from Yahoo's
        example). I've tried IE and Firefox without luck.

        Nothing shows up on the Firefox JS console, and IE doesn't seem to
        generate any errors. The JS files load fine (they're not 404 errors).

        I have included the code below. I must be missing something obvious.
        Any comments would be appreciated.

        Thanks,

        -Will

        ....


        <script type="text/javascript" src="/y/yahoo/yahoo.js"></script>
        <script type="text/javascript" src="/y/dom/dom.js"></script>
        <script type="text/javascript" src="/y/event/event.js"></script>
        <script type="text/javascript" src="/y/animation/animation.js"></script>
        <script type="text/javascript" src="/y/dragdrop/dragdrop.js"></script>
        <script type="text/javascript" src="/y/container/container.js"></script>
        <script type="text/javascript">

        //The second argument passed to the
        //constructor is a configuration object:
        myPanel = new YAHOO.widget.Panel("win", {
        width:"400px",
        fixedcenter: true,
        constraintoviewport: true,
        underlay:"shadow",
        close:true,
        visible:false,
        draggable:true} );

        //If we haven't built our panel using existing markup,
        //we can set its content via script:
        myPanel.setHeader("The Panel Control");
        myPanel.setBody("Testing the body...");

        myPanel.render();

        </script>
        </head>

        <body>

        <form name="dialog">
        <input type="button" value="Test" onclick="myPanel.show()" />
        </form>


        ...






        Yahoo! Groups Links
      • themidnightwill
        Hi Bart, Thanks so much for the response. I got it working, but with some additional edits. I had to put myPanel.render(document.body); after the tag.
        Message 3 of 3 , Sep 5, 2006
        • 0 Attachment
          Hi Bart,


          Thanks so much for the response. I got it working, but with some
          additional edits.

          I had to put myPanel.render(document.body); after the <body> tag.
          That seems to make sense to me. Then show() works fine.

          The final code (included whole doc):


          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
          Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
          transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
          1" />
          <title>Testing Dialog</title>
          <link rel="stylesheet" type="text/css"
          href="/y/container/assets/container.css" />
          <script type="text/javascript" src="/y/yahoo/yahoo.js"></script>
          <script type="text/javascript" src="/y/dom/dom.js"></script>
          <script type="text/javascript" src="/y/event/event.js"></script>
          <script type="text/javascript"
          src="/y/animation/animation.js"></script>
          <script type="text/javascript" src="/y/dragdrop/dragdrop.js"></script>
          <script type="text/javascript"
          src="/y/container/container.js"></script>
          <script type="text/javascript">

          //The second argument passed to the
          //constructor is a configuration object:
          myPanel = new YAHOO.widget.Panel("win", {
          width:"400px",
          fixedcenter: true,
          constraintoviewport: true,
          underlay:"shadow",
          modal: true,
          close:false,
          visible:false,
          draggable:false} );

          //If we haven't built our panel using existing markup,
          //we can set its content via script:
          myPanel.setHeader("Title");
          myPanel.setBody("testing.....");


          </script>
          </head>

          <body>
          <script type="text/javascript">myPanel.render(document.body);</script>

          <form name="dialog">
          <input type="button" value="Test" onclick="myPanel.show()" />
          </form>

          </body>
          </html>










          --- In ydn-javascript@yahoogroups.com, "Bart King" <bart@...> wrote:
          >
          > Hello,
          >
          > Try changing:
          >
          > myPanel.render();
          >
          > To:
          >
          > myPanel.render(document.body);
          >
          > You may want to add in a myPanel.show() after the render call, just
          in
          > case/for completeness. Also, make sure you have CSS styles defined
          for
          > classes 'module, 'overlay' and 'mask' (and all the sub-classes
          thereof -
          > check the assets in build\container\assets\container.css).
          >
          > Cheers,
          > --
          > Bart King
          > http://www.bart666.com -- +44 781 219 5654
          >
          >
          > -----Original Message-----
          > From: ydn-javascript@yahoogroups.com
          > [mailto:ydn-javascript@yahoogroups.com] On Behalf Of themidnightwill
          > Sent: 05 September 2006 03:53
          > To: ydn-javascript@yahoogroups.com
          > Subject: [ydn-javascript] Panel never displays
          >
          > Hello,
          >
          > I'm having problems getting a panel (essentially copied from Yahoo's
          > example). I've tried IE and Firefox without luck.
          >
          > Nothing shows up on the Firefox JS console, and IE doesn't seem to
          > generate any errors. The JS files load fine (they're not 404
          errors).
          >
          > I have included the code below. I must be missing something obvious.
          > Any comments would be appreciated.
          >
          > Thanks,
          >
          > -Will
          >
          > ....
          >
          >
          > <script type="text/javascript" src="/y/yahoo/yahoo.js"></script>
          > <script type="text/javascript" src="/y/dom/dom.js"></script>
          > <script type="text/javascript" src="/y/event/event.js"></script>
          > <script type="text/javascript"
          src="/y/animation/animation.js"></script>
          > <script type="text/javascript"
          src="/y/dragdrop/dragdrop.js"></script>
          > <script type="text/javascript"
          src="/y/container/container.js"></script>
          > <script type="text/javascript">
          >
          > //The second argument passed to the
          > //constructor is a configuration object:
          > myPanel = new YAHOO.widget.Panel("win", {
          > width:"400px",
          > fixedcenter: true,
          > constraintoviewport: true,
          > underlay:"shadow",
          > close:true,
          > visible:false,
          > draggable:true} );
          >
          > //If we haven't built our panel using existing markup,
          > //we can set its content via script:
          > myPanel.setHeader("The Panel Control");
          > myPanel.setBody("Testing the body...");
          >
          > myPanel.render();
          >
          > </script>
          > </head>
          >
          > <body>
          >
          > <form name="dialog">
          > <input type="button" value="Test" onclick="myPanel.show()" />
          > </form>
          >
          >
          > ...
          >
          >
          >
          >
          >
          >
          > Yahoo! Groups Links
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.