Recent Posts by ak47

Subscribe to Recent Posts by ak47 1 post found

Jul 28, 2008
Avatar 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>