Re: [jQuery] Layout plug-ins / Creating a Dashboard

[Dan G. Switzer, II]

David,

>Do you have a design comp that shows what you are trying to achieve?

Here's a quick dirty example (sorry, I didn't use jQuery--just cut-n-paste
into an html file.)

It defaults to display 5 widgets of various dimensions. If you click the
"Show Absolute Position" it'll show those same widgets laid out in a manor
that makes a little more sense.

What I'm looking for is something that would take those "Widgets" and
automatically calculate the best way to arrange them within the container.

Hopefully this makes sense.

-Dan

<style type="text/css">
        .widget {
                margin: 10px;
                padding: 10px;
                background-color: #cccccc;
                border: 1px solid black;
                text-align: center;
        }

        .float {
                float: left;
        }

        .absolute {
                position: absolute;
        }

        #container {
                width: 100%;
        }

        #container2 {
                width: 100%;
                display: none;
        }
</style>

<script type="text/javascript">
function showContainer(sId){
        if( sId == "container" ){
                document.getElementById("container").style.display =
"block";
                document.getElementById("container2").style.display =
"none";
        } else {
                document.getElementById("container2").style.display =
"block";
                document.getElementById("container").style.display = "none";
        }
}
</script>

<p>
        <a href="javascript:showContainer('container');">Show Float Left</a>
        <a href="javascript:showContainer('container2');">Show Absolute
Position</a>

</p>

<div id="container">
        <div class="widget float" style="width: 200px; height:
150px;">Widget 1</div>
        <div class="widget float" style="width: 400px; height:
350px;">Widget 2</div>
        <div class="widget float" style="width: 320px; height:
250px;">Widget 3</div>
        <div class="widget float" style="width: 200px; height:
150px;">Widget 4</div>
        <div class="widget float" style="width: 200px; height:
150px;">Widget 5</div>
</div>

<div id="container2">
        <div class="widget absolute" style="width: 200px; height:
150px;">Widget 1</div>
        <div class="widget absolute" style="top: 250px; width: 400px;
height: 350px;">Widget 2</div>
        <div class="widget absolute" style="top: 250px; left: 450px; width:
320px; height: 250px;">Widget 3</div>
        <div class="widget absolute" style="left: 285px; width: 200px;
height: 150px;">Widget 4</div>
        <div class="widget absolute" style="left: 570px; width: 200px;
height: 150px;">Widget 5</div>
</div>


_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/