Search code examples
javascriptjquerycssjquery-ui-layout

jQuery UI Layout 'floating buttons'

I use the jQuery UI Layout plugin in my application, but users seems to have some problem with toggling the west and east panels. This because the toggler-buttons are relatively small.

Google has a nice 'flap' floating button (See image), I would like to achieve the same effect in jQuery UI Layout plugin; but I have a hard time doing so. I found out I can add custom buttons in the togglers (as seen in the example), but they are positioned in a div with overflow:hidden, so I can't make them wider than the 5 pixels that the border is wide.

Does anyone have a clue on how to recreate the Google-button-style in jQuery UI Layout?

enter image description here

Solution

  • I found out:

    I add extra divs for the buttons, like this:

            options["west__togglerContent_closed"] = '<div class="btnToggler close west"></div>';
        options["west__togglerContent_open"]   = '<div class="btnToggler open  west"></div>';

        options["east__togglerContent_closed"] = '<div class="btnToggler close east"></div>';
        options["east__togglerContent_open"]   = '<div class="btnToggler open  east"></div>';

        options["north__togglerContent_closed"] = '<div class="btnToggler close north"></div>';
        options["north__togglerContent_open"]   = '<div class="btnToggler open  north"></div>';

        options["south__togglerContent_closed"] = '<div class="btnToggler close south"></div>';
        options["south__togglerContent_open"]   = '<div class="btnToggler open  south"></div>';

    And add style:

    .btnToggler.north,
.btnToggler.south
{
    height:5px;
    width:50px;
    background-image: url("./arrow_up_down.png");
    background-size:contain;
    background-position:top center;
    background-repeat: no-repeat;
    background-color:white;
    transition:0.2s;
    border: 1px solid #ccc;
    opacity:0.8;

}

.btnToggler.west,
.btnToggler.east
{
    height:50px;
    width:7px;
    background-image: url("./arrow_left_right.png");
    background-size:contain;
    background-position:center left;
    background-repeat: no-repeat;
    transition:0.2s;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    opacity:0.8;

}

.btnToggler.south
{
    position:absolute;
    bottom:0px;
    left:0px;
    border-left: 1px solid #ccc;
}

.btnToggler.east
{
    position:absolute;
    right:0px;
    top:0px;
    border-left: 1px solid #ccc;
}

.btnToggler.east:hover,
.btnToggler.west:hover
{
    opacity:1;
    background-color:white;
    width:15px;
    transition:0.2s;
}
.btnToggler.north:hover,
.btnToggler.south:hover
{
    opacity:1;
    background-color:white;
    height:15px;
    transition:0.2s;
}