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

Re: Instantiating multiple panels

Expand Messages
  • rob_barics
    Nevermind. Bonehead. Bonehead. Bonehead. Overlay markup needs to be at the end of the page for IE6 to be happy. Easy cheesy. ... true); ... true); ...
    Message 1 of 2 , Mar 1, 2007
    View Source
    • 0 Attachment
      Nevermind. Bonehead. Bonehead. Bonehead. Overlay markup needs to be
      at the end of the page for IE6 to be happy. Easy cheesy.


      --- In ydn-javascript@yahoogroups.com, "rob_barics" <rob_barics@...>
      wrote:
      >
      > 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"
      > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      >
      > <script type="text/javascript">
      >
      > /*BEGIN Yahoo panel*/
      > //Failure message
      > YAHOO.namespace("widget.container");
      > 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.panel1.render();
      >
      > 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.panel2.render();
      >
      > YAHOO.widget.container.panel3 = new YAHOO.widget.Panel("panel3", {
      > width:"300px", visible:false, draggable:false, modal:true,
      > constraintoviewport:true, context: ["show3", "tl", "bl"] } );
      > YAHOO.widget.container.panel3.render();
      >
      > //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);
      > </script>
      >
      >
      > then the panel markup:
      >
      > <style>
      > #show1, #show2, #show3 {color:red; text-decoration: underline;
      > cursor:pointer;}
      > #hide1, #hide2, #hide3 {color:red; text-decoration: underline;
      > cursor:pointer;}
      > </style>
      >
      > <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"
      > title="Cancel">Cancel</span>
      > </div>
      > </div>
      > <div id="panel2" style="height:300px;">
      > <span id="hide2">test</span>
      > </div>
      > <div id="panel3" style="height:300px;">
      > <span id="hide3">test</span>
      > </div>
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.