Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

3 Column Layout #2

Closed
tsquillario opened this issue Apr 24, 2013 · 4 comments
Closed

3 Column Layout #2

tsquillario opened this issue Apr 24, 2013 · 4 comments

Comments

@tsquillario
Copy link

I'm looking to implement a 3 vertical column layout with your plugin. Similar to the vertical 2 column except with an additional 3rd vertical column.

I haven't had much success. Is this possible? How would the HTML look like? Thanks.
@shagstrom
Copy link
Owner

This can be achieved with nested Split Panes. An example follows below or check out http://dreamchain.com/static/split-pane/3-colums-fixed-left-and-right.html for a prettier example.

<!DOCTYPE html>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>3 colums</title>
<link rel="stylesheet" href="split-pane.css" />
<script src="jquery-1.8.2.js"></script>
<script src="split-pane.js"></script>

<style type="text/css">

    html, body {
        height: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
    }

    #left-component {
        width: 20em;
    }

    #my-divider {
        left: 20em;
        width: 5px;
    }

    #right-component {
        left: 20em;
        margin-left: 5px;
    }

    #inner-left-component {
        min-width: 10em;
        right: 10em;
        margin-right: 5px;
    }

    #inner-my-divider {
        right: 10em;
        width: 5px;
    }

    #inner-right-component {
        width: 10em;
    }


</style>

<script>
    $(function() {
        $('div.split-pane').splitPane();
    });
</script>

<div class="split-pane fixed-left">
    <div class="split-pane-component" id="left-component">
        <p>
            This split pane component is fixed: when re-sizing the browser window, it will
            keep the same width.
        </p>
    </div>
    <div class="split-pane-divider" id="my-divider"></div>
    <div class="split-pane-component" id="right-component">
        <div class="split-pane fixed-right">
            <div class="split-pane-component" id="inner-left-component">
                <p>This split pane component is dynamic: when re-sizing the browser window, the width will adjust.</p>
            </div>
            <div class="split-pane-divider" id="inner-my-divider"></div>
            <div class="split-pane-component" id="inner-right-component">
                <p>
                    This split pane component is fixed: when re-sizing the browser window, it will
                    keep the same width.
                </p>
            </div>
        </div>
    </div>
</div>

@tsquillario
Copy link
Author

Awesome! Works good. Thanks! I'll let you know if I end up sticking with your plugin.

Any plans on implementing jquery.cookie.js to save position on refresh?

@shagstrom
Copy link
Owner

Being able to keep divider position on refresh is a very good idea. I will definitely consider implementing that.

@tsquillario
Copy link
Author

I might try to implement it myself, I'll send you a pull request if I get it tested and working good. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@shagstrom @tsquillario