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

Re: [ydn-javascript] Re: DRAG PANEL NOT WORKING IN FIREFOX

Expand Messages
  • Satyen Desai
    Hi, You have a position:relative applied to the Panel wrapper DIV (panel.element), which is causing it to stretch to the width of the viewport (you can see
    Message 1 of 4 , Sep 11, 2009
    • 0 Attachment
      Hi,
      You have a position:relative applied to the Panel wrapper DIV
      (panel.element), which is causing it to stretch to the width of the
      viewport (you can see this in Firebug). By design that element is
      supposed to be absolutely positioned, which would cause it to shrink
      wrap.

      That combined with the constraintoviewport:true is stopping you from
      dragging the panel.

      I believe I've worked with you or one of your collegues before, on
      your attempt to use either statically or relatively positioned Panel's
      for a "portal" implementation, and provided this example...

      http://yuiblog.com/sandbox/yui/v270/examples/container/relativelyPositionedPanels.html

      ...which relies on the Grids column widths to constrain the width of
      the panels, so that they can be positioned relatively.

      Alternatively, you'd need to apply the required width to the Panel's
      wrapper DIV (panel.element). By design it's applied to
      panel.innerElement, based on the expectation that panel.element is
      absolutely positioned, and will therefore shrink-wrap.

      Hope that helps,
      Satyen

      On Sep 11, 2009, at 9:54 AM, bill78b wrote:

      > Hi Dav
      >
      > Thanks for your response ..
      >
      > I tried with the same way ...
      >
      > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/grids/grids-min.css
      > ">
      > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css
      > ">
      >
      > <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js
      > "></script>
      > <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js
      > " ></script>
      > <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container.js
      > "></script>
      >
      > But it is not working in FireFox and working in IE ..
      >
      > Thanks for your help ...
      >
      > Bill
      >
      > --- In ydn-javascript@yahoogroups.com, Dav Glass <davglass@...> wrote:
      > >
      > > Try putting the scripts in the proper order:
      > >
      > >
      > > <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js
      > "></script>
      > > <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js
      > " ></script>
      > > <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container.js
      > "></script>
      > >
      > > That should fix it..
      > >
      > > Dav
      > >
      > > On Fri, 11 Sep 2009, bill78b wrote:
      > >
      > > > HI ...
      > > >
      > > > I am having 4 panels in my web page ....
      > > >
      > > > I added the Drag Functionality to 4 panels ..
      > > >
      > > > I am able to drag elements in IE ..
      > > >
      > > > But IN Firefox i am not able to drag ...
      > > >
      > > > Any Idea ...
      > > >
      > > > Here is the Code ..
      > > >
      > > > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      > > > <html>
      > > > <head>
      > > >
      > > > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/grids/grids-min.css
      > ">
      > > > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css
      > ">
      > > > <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js
      > "></script>
      > > > <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container.js
      > "></script>
      > > >
      > > > <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js
      > " ></script>
      > > >
      > > > <style type="text/css">
      > > >
      > > > #hd h1 {
      > > > padding:10px;
      > > > text-align:center;
      > > > font-size:123.1%;
      > > > font-weight:bold;
      > > > }
      > > >
      > > > .yui-skin-sam .yui-panel-container {
      > > >
      > > > position:relative;
      > > > padding: 2px;
      > > >
      > > > }
      > > >
      > > > .yui-gb .yui-u {
      > > > margin-left: 1%;
      > > > }
      > > >
      > > > .yui-skin-sam .yui-overlay-hidden {
      > > > display:none;
      > > > }
      > > >
      > > >
      > > >
      > > > </style>
      > > >
      > > > <script>
      > > >
      > > > YAHOO.namespace("example.container");
      > > >
      > > > function init() {
      > > >
      > > >
      > > >
      > > >
      > > > // Instantiate a Panel from markup
      > > >
      > > > YAHOO.example.container.mostViewedCountPanel = new
      > YAHOO.widget.Panel("MostViewedCount",{constraintoviewport:
      > true,width:"49%"});
      > > > YAHOO.example.container.mostViewedCountPanel.render();
      > > >
      > > >
      > > >
      > > > YAHOO.example.container.mostRatedCountPanel = new
      > YAHOO.widget.Panel("MostRatedCount",{constraintoviewport:
      > true,width:"49%"});
      > > > YAHOO.example.container.mostRatedCountPanel.render();
      > > >
      > > >
      > > > YAHOO.example.container.documentSearchPanel = new
      > YAHOO.widget.Panel("DocumentSearch",{constraintoviewport:
      > true,width:"49%"});
      > > > YAHOO.example.container.documentSearchPanel.render();
      > > >
      > > >
      > > >
      > > >
      > > >
      > > > YAHOO.example.container.workQueuePanel = new
      > YAHOO.widget.Panel("workQueueDetails",{constraintoviewport:
      > true,width:"49%"});
      > > > YAHOO.example.container.workQueuePanel.render();
      > > >
      > > >
      > > > YAHOO.example.container.mostViewedCountPanel.show();
      > > > YAHOO.example.container.documentSearchPanel.show();
      > > > YAHOO.example.container.mostRatedCountPanel.show();
      > > > YAHOO.example.container.workQueuePanel.show();
      > > >
      > > >
      > > >
      > > > // Panel Configearation Properties
      > > >
      > > >
      > > >
      > > >
      > > >
      > YAHOO
      > .example
      > .container.mostViewedCountPanel.cfg.setProperty("draggable",true);
      > > >
      > YAHOO
      > .example
      > .container.documentSearchPanel.cfg.setProperty("draggable",true);
      > > >
      > YAHOO
      > .example
      > .container.mostRatedCountPanel.cfg.setProperty("draggable",true);
      > > >
      > YAHOO
      > .example.container.workQueuePanel.cfg.setProperty("draggable",true);
      > > >
      > > >
      > > >
      > > >
      > > >
      > > >
      > YAHOO
      > .example
      > .container.mostViewedCountPanel.cfg.setProperty("underlay","none");
      > > >
      > YAHOO
      > .example
      > .container.documentSearchPanel.cfg.setProperty("underlay","none");
      > > >
      > YAHOO
      > .example
      > .container.mostRatedCountPanel.cfg.setProperty("underlay","none");
      > > >
      > YAHOO
      > .example.container.workQueuePanel.cfg.setProperty("underlay","none");
      > > >
      > > > }
      > > >
      > > >
      > > >
      > > >
      > > >
      > > > YAHOO.util.Event.addListener(window, "load", init);
      > > >
      > > >
      > > >
      > > > </script>
      > > > </head>
      > > >
      > > > <body class="yui-skin-sam">
      > > > <FORM name="SubmissionForm" action="#" method="POST">
      > > > <input type="hidden" name="ActionType" value="">
      > > > <div id="doc3">
      > > > <div id="hd" ></div>
      > > > <div id="bd">
      > > >
      > > > <div class="yui-g">
      > > > <div class="yui-u first" id="MostViewedCount">
      > > > <div class="hd">MostViewedCount
      > > > </div>
      > > > <div class="bd" style="height:300px;width:
      > 100%;overflow:auto;padding: 0px;">
      > > >
      > > >
      > > > </div>
      > > >
      > > >
      > > >
      > > > </div>
      > > > <div class="yui-u" id="DocumentSearch" >
      > > > <div class="hd">Document Search</div>
      > > > <div class="bd" style="height:300px;width:
      > 100%;overflow:auto;padding: 0px;">
      > > > </div>
      > > > </div>
      > > > </div>
      > > >
      > > >
      > > > <div class="yui-g">
      > > > <div class="yui-u first" id="MostRatedCount" >
      > > > <div class="hd">MostRatedCount
      > > > </div>
      > > > <div class="bd" style="height:300px;width:
      > 100%;overflow:auto;padding: 0px;">
      > > > </div>
      > > > </div>
      > > > <div class="yui-u" id="workQueueDetails" >
      > > > <div class="hd">Work Queue Details</div>
      > > > <div class="bd" style="height:300px;width:
      > 100%;overflow:auto;padding: 0px;">
      > > >
      > > >
      > > > </div>
      > > > </div>
      > > > </div>
      > > >
      > > >
      > > > </div>
      > > > </div>
      > > >
      > > > </body>
      > > > </html>
      > > >
      > > > Thanks
      > > >
      > > > Bill
      > > >
      > > >
      > > >
      > >
      > > --
      > > Dav Glass
      > > davglass@...
      > > blog.davglass.com
      > >
      > >
      > > + Windows: n. - The most successful computer virus, ever. +
      > > + A computer without a Microsoft operating system is like a dog
      > > without bricks tied to its head +
      > > + A Microsoft Certified Systems Engineer is to computing what a
      > > McDonalds Certified Food Specialist is to fine cuisine +
      > >
      >
      >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.