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

10147Instantiating multiple panels

Expand Messages
  • rob_barics
    Mar 1, 2007
    • 0 Attachment
      Im having a problem in IE6 where I have a page with multiple panels.
      In IE only the last panel anchors to the element that calls the panel.
      The first two (there are 3) seem to pick up some extra spacing that
      knocks them down and away from their anchor point. In firefox it
      works as expected. I've included some of the code (not in full) that
      renders the panels. I'm still playing with the panels but would
      appreciate any help or guidance that someone might provide.

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

      <script type="text/javascript">

      /*BEGIN Yahoo panel*/
      //Failure message
      function init() {
      //instantiate panels
      YAHOO.widget.container.panel1 = new YAHOO.widget.Panel("panel1", {
      width:"300px", visible:false, draggable:false, modal:true,
      constraintoviewport:true, context: ["show1", "tl", "bl"] } );

      YAHOO.widget.container.panel2 = new YAHOO.widget.Panel("panel2", {
      width:"300px", visible:false, draggable:false, modal:true,
      constraintoviewport:true, context: ["show2", "tl", "bl"] } );

      YAHOO.widget.container.panel3 = new YAHOO.widget.Panel("panel3", {
      width:"300px", visible:false, draggable:false, modal:true,
      constraintoviewport:true, context: ["show3", "tl", "bl"] } );

      //Event Listener
      YAHOO.util.Event.addListener("show1", "click",
      YAHOO.widget.container.panel1.show, YAHOO.widget.container.panel1, true);
      YAHOO.util.Event.addListener("hide1", "click",
      YAHOO.widget.container.panel1.hide, YAHOO.widget.container.panel1, true);

      YAHOO.util.Event.addListener("show2", "click",
      YAHOO.widget.container.panel2.show, YAHOO.widget.container.panel2, true);
      YAHOO.util.Event.addListener("hide2", "click",
      YAHOO.widget.container.panel2.hide, YAHOO.widget.container.panel2, true);

      YAHOO.util.Event.addListener("show3", "click",
      YAHOO.widget.container.panel3.show, YAHOO.widget.container.panel3, true);
      YAHOO.util.Event.addListener("hide3", "click",
      YAHOO.widget.container.panel3.hide, YAHOO.widget.container.panel3, true);

      YAHOO.util.Event.addListener(window, "load", init);

      then the panel markup:

      #show1, #show2, #show3 {color:red; text-decoration: underline;
      #hide1, #hide2, #hide3 {color:red; text-decoration: underline;

      <div id="panel1" style="height:300px;">
      <div class="bd">
      <strong>Failure Message</strong>
      <hr style="height: 1px; color: #808080;"/>
      <p>Nullam in eros. Ut dictum dignissim urna. Aliquam erat
      volutpat. Maecenas at justo. Donec sit amet dui. Sed felis. Praesent
      blandit pede at libero. Cras massa lacus, tristique ut, vulputate sit
      amet, eleifend ut, enim. Ut quis velit et risus posuere ornare.
      Suspendisse at tortor sit amet lacus venenatis interdum.</p>
      <div class="fillerFive"> </div>
      <p>Duis sit amet purus. Suspendisse rhoncus. Fusce augue tortor,
      laoreet quis, rutrum et, vulputate et, nulla. Suspendisse dignissim
      orci id sapien. Fusce dictum magna quis felis rutrum convallis. Sed
      interdum dui vel urna. Aenean eros mi, facilisis ac, auctor</p>
      <hr style="height: 1px; color: #808080;"/>
      <a href="javascript:void(0);" class="redButton"
      title="Save">Save</a>  <span id="hide1"
      <div id="panel2" style="height:300px;">
      <span id="hide2">test</span>
      <div id="panel3" style="height:300px;">
      <span id="hide3">test</span>
    • Show all 2 messages in this topic