0

I am designing a flyout panel mechanism like that of Microsoft Azure's online portal. Anyway the portal has this flyout panel mechanism which it uses for menus. If I open a new submenu, it comes out from left to right. The panel container is aligned left on the page.

So far so good. However, I need my panels on the right of my screen. I already came up with a solution but my only problem is that when I add a new flyout panel, it aprubtly repositions it's neighbor and then slides out using the show() function.

https://jsfiddle.net/9ogn0kx4/1/

Basically, I need for the new panel to ease it's neighbor out as it slides into view. I hope you can understand my blabbering.

HTML:

<div id="flyoutcontainer" class="parentflyout">
    <div class="childflyout" style="display:block;">
        <button onclick="openNewFlyout('#flyoutcontainer')">OpenNew</button>  
        <button onclick="closePanel('#flyoutcontainer')">Close</button>
    </div>
</div>

CSS 

/*Temp*/
body, html{height: 100%;}
.parentflyout{
    height:100%;
}
.childflyout:first-of-type{
    width:200px;
}
.childflyout:nth-of-type(2){
    overflow:hidden;
}
.childflyout{
    border:1px solid black;
    width: 340px;
    float:right;
    height:100%;
    display: none;
}

JQuery

function openNewFlyout(containerid){     
    var newFlyout = $('<div class="childflyout"></div>');
    var appended = $(containerid).prepend(newFlyout);
    newFlyout.show('slide', {direction: 'right'}, 800);
}
function closePanel(containerid){
    $(containerid + ' .childflyout:first-of-type').remove();
}

EDIT:

Here's what I basically mean. The "animation" in the red box is how it currently works. But I need for it to work like illustrated in the green box.

enter image description here

LeonidasFett
  • 3,052
  • 4
  • 46
  • 76
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. Although you have provided a [**link to an example or site**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. – Paulie_D Jun 22 '16 at 16:13
  • I think you are trying to animate the `display` property...and you can't do that. – Paulie_D Jun 22 '16 at 16:14
  • I rather want to animate the position property. The first div from right always re-positions itself according to the width of the new div. But it does so instantly. I want to ease it out according to the speed the new div is being "pushed out". – LeonidasFett Jun 22 '16 at 16:18
  • 1
    Perhaps - http://stackoverflow.com/questions/521291/jquery-slide-left-and-show – Paulie_D Jun 22 '16 at 16:21
  • I cannot fully understand what is being done on that answer, but I will look into it. for clarification, I have added a little graphic to illustrate what I mean more clearly. – LeonidasFett Jun 22 '16 at 17:29

1 Answers1

0

Ok after looking into the animate function, I came up with a working solution. Instead of

function openNewFlyout(containerid){     
    var newFlyout = $('<div class="childflyout"></div>');
    var appended = $(containerid).prepend(newFlyout);
    newFlyout.show('slide', {direction: 'right'}, 800);
}

I needed this

 function openNewFlyout(containerid) {
   var newFlyout = $('<div class="childflyout"></div>');
   var appended = $(containerid).prepend(newFlyout);
   newFlyout.animate({width:'toggle'},350); // This is different
 }

You can also check my jsfiddle link in my question, I updated it with the working code.

If Pauli_D would like the credit, he can answer my question and I will accept his answer. Otherwise I will just accept this one once I can.

LeonidasFett
  • 3,052
  • 4
  • 46
  • 76