Forums

Board index » YUI 2.x: » General

Page 1 of 1   [ 3 posts ]
New Topic | Post Reply | Print view

Prateek

  • Offline
  • Profile
Tags:

Panel are overlapping on page load

Post Posted: Wed Nov 24, 2010 10:29 am
+0-
Hi Friends,

I am trying to create several panel in a page.
I wrote script to created 2 panels in page, on page load both a the panels are created but are overlapping on each other.

below is my multiplepanel.js file having java script code.
+++++++++++++++++++++++++++++++++++++++++++++++
YAHOO.namespace("example.container");
function init()
{
YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2",{width:"320px",visible: true,close:true, draggable:true,constraintoviewport:true});
YAHOO.example.container.panel2.setHeader("Test Panel2");
YAHOO.example.container.panel2.setBody("Dynamcaly generated");
YAHOO.example.container.panel2.setFooter("Panel Footer");
YAHOO.example.container.panel3.render("container");

YAHOO.example.container.panel3 = new YAHOO.widget.Panel("panel3",{width:"320px",visible: true,close:true, draggable:true,constraintoviewport:true});
YAHOO.example.container.panel3.setHeader("Test Panel3");
YAHOO.example.container.panel3.setBody("Dynamcaly generated");
YAHOO.example.container.panel3.setFooter("Panel Footer");
YAHOO.example.container.panel3.render("container");

}
YAHOO.util.Event.onDOMReady(init);

=========================================
panel.html file
++++++++++++++++++++++++++++++++++++++++
<html>
<head>
<title>Simple test for Panel</title>
<style type="text/css">
boby {
margin:0;
padding:0;
}
</style>
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.2r1/build/reset-fonts/reset-fonts.css&2.8.2r1/build/container/assets/skins/sam/container.css">
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.2r1/build/dragdrop/dragdrop-min.js&2.8.2r1/build/container/container-min.js"></script>
</head>
<body class="yui-skin-sam">
<h1> Simple Panel Example</h1>
<style type="text/css">
#container{height:15em;}
</style>
<script type="text/javascript" src="multiplepanel.js">

</script>
<div id="container">
<div id="panel2"></div>
<div id="panel3"></div>
</div>

</body>
</html>

please help me out because I need dragable feature and by using CSS it will not work. :(

Bret Levy

  • Username: BretLevy
  • Joined: Tue Jan 05, 2010 9:56 am
  • Posts: 34
  • Location: Atlanta, GA
  • Offline
  • Profile
Tags:

Re: Panel are overlapping on page load

Post Posted: Sat Nov 27, 2010 10:29 pm
+0-
try setting the x & y config parameters when you instantiate the panels. also, you don't need the "container" node name in the render call for stuff that's already in the dom (came from base doc text).

~~bret

Prateek

  • Offline
  • Profile

Re: Panel are overlapping on page load

Post Posted: Sun Nov 28, 2010 8:58 am
+0-
It worked thanx a ton Bret !! :)
Page 1 of 1   [ 3 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group