ak47
1 post
|
Topic: Help/Bug /
windows in layouts
hi.
i have to build a layout which contains draggable windows as well as fixed ones. the latter are just “content boxes”, but they should look like their draggable pendants.
since they should look the same, i tried to use the prototype windows also for the fixed ones by setting them non-draggable, non-resizable, etc.
this works fine, but the problem is the layout. it’s not easy to explain, but i’ll give it a try ;)
i’m using setContent() with autoposition=true, this works fine. but the “new” layout-element(the window) is bigger than the tag used as content because the borders are drawn around the content.
of course i don’t want the windows to overlap anything else, instead i want them to integrate into the page’s layout.
i tried several things, but i can’t find a way to achieve it.
any ideas?
here’s the example code:
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/scriptaculous.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<link href="themes/default.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top_dings">
<h1>top</h1>
</div>
<div id="middle_dings">
<h1>middle</h1>
</div>
<div id="bottom_dings">
<h1>bottom</h1>
</div>
<script type="text/javascript">
top_win = new Window({
title: "The Top",
resizable: false,
draggable: false,
closable: false,
width:200,
height:60,
recenterAuto:false});
top_win.setContent("top_dings", false, true);
top_win.show();
middle_win = new Window({
title: "The Middle",
resizable: false,
draggable: false,
closable: false,
width:200,
height:60, recenterAuto:false});
middle_win.setContent("middle_dings", false, true);
middle_win.show();
bottom_win = new Window({
title: "The Bottom",
resizable: false,
draggable: false,
closable: false,
width:200,
height:60,
recenterAuto:false});
bottom_win.setContent("bottom_dings", false, true);
bottom_win.show();
</script>
</body>
</html>
|