Sliding overlay panel that works with bootstrap 3 css

Question

I've been endlessly searching for a sliding overlay panel using jquery that doesn't destroy my bootstrap 3 css file. But I can't find any. I need a panel that is like a form, has dropdowns, selectable grids, input boxes, etc.. and anything I do on this menu panel will refresh the content panel automatically; but in my case it's not really considered a "menu", its just a sliding or pop-out form that you can fill out.

I've searched this site:

http://designhuntr.com/15-slide-panel-jquery-plugins/

And not a single one gave me what I wanted. I need a sliding panel that comes from the left, filled up with forms (like bootstrap accordion, select2 dropdown).

The first link gave exactly what I wanted, but rendering the content of my bootstrap css came into heavy conflict and was rendered useless.

The most perfect example I was able to find is located here:

http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/#

When you click the overlay button; it does exactly what I needed in terms of functionality.

But using this library also conflicts with bootstrap. I've tried 5 different libraries, all ending in failure. It just seems that a simple idea such as this could have had some kind of leeway by now.

If anyone has had any kind of success, I'd love to hear it. Otherwise I'm all out of options at this point.

[Edit 6/17/2014] A big requirement for me is to have a button that is kept static, it doesn't move with the sliding panel. I didn't want the user to move the button every time the user slid a panel out. I also needed this functionality to exist for ie7+. I want to have more control over what is moving, want is sliding, the effects, everything. Not a total 100% full slide.

Answer 1

After exhausting my brain and time into this, found out that most 3rd party apps for sliding panels doesn't do cross browser support very well. Some says they do, but when you check out the demos, it clearly doesn't. So what I did was replicated the project by including jquery.ui and simply added in the features myself.

http://jqueryui.com/toggle/

I used toggle, with "drop" selected. This mimics the sliding in from the left side of the window. Works in IE7+ and chrome.

I made my div content as "position:fixed"; for my purposes I like this because I have control over whether I want to do an overlay or if I want my content to be pushed.

Then with that div content in place, I can then add an jquery's "animate" function and have it slide to whatever position I want.

https://api.jquery.com/animate/

In time, I'll create my own library that beats out everyone else's with as little css styling as possible. But for now, I just need to wrap my stuff up.

EDIT: 6/17/2014 - This was implemented almost a few days after I posted the answer up here Here's my code I implemented using jquery ui: mind you, twitter bootstrap doesn't interfere with this code since its purely used as css at this point.

components used:

• A button for toggling the sliding, i gave it an id="button".
• A div panel with id="effectMenu"
  • This is responsible for the menu sliding and fading away
• A div panel with id="effectContent" (shown right next to effectMenu)
  • When the menu slides and fades, this slides into the empty space
  • When the menu slides and returns, this slides and allows the menu to come back
• A hidden input box with id="positionOfEffect"
  • Used for determining where the content should slide to
• A hidden input box with id="didContentSlide"
  • Holds a boolean value: true if content moved to new position, false if it went back to original state

So you get something like this:

<button type="button" id="button" class="btn btn-default btn-lg" />
<div class="row">
    <div id="effectMenu" class="col-md-4">
        ...
    </div>
    <div id="effectContent" class="col-md-4">
        ...
    </div>
</div>
<input id="positionOfEffect" type="hidden" />
<input id="didContentSlide" type="hidden" />

Now the jquery code:

$('body').on('click', '#button', function (e) {
    e.preventDefault();

    //position of the effect menu
    var positionOfEffectMenu = $("#positionOfEffectMenu").val();

    //gets the value of whether or not the content slide to the new position
    //true if it did, false if it returned back to the original position
    var didContentSlide = $("#didContentSlide").val();

    //starting position of everything, capture the current state at this point
    //this is the page load set up
    if (positionOfEffectMenu == "") {
        //mimic the behavior of md-col-4 (33.333333% of screen)
        $("#positionOfEffect").val((($(".row").width() * 0.33333333)));
        $("#didContentSlide").val(false);
        positionOfEffectMenu = $("#positionOfEffectMenu").val();
        didContentSlide = $("#didContentSlide").val();
    }

    /**
     *   How far we want the transition to occur for the sliding content.
     *   The divided by 2 means, we're only going to be moving half the 
     *   distance of the menu's width while the menu disappears.
     *   In my page, this makes a very space-friendly behavior
     *   originally the menu is all the way to the far right, and I have content
     *   next to it if I'm bringing the menu out, I dont want the content 
     *   page to swing all the way to where the menu is, I want it to move
     *   just a bit so that it can fill up the space and look good for the user
     *   to focus in on.
     */
    positionOfEffect = parseFloat(positionOfEffectMenu) / 2;
    didContentSlide = didContentSlide == "true"; //turns string to bool value

    //I disable my button as its sliding otherwise if the user frantically clicks
    //it will intercept the positions and hijack the animation
    //it gets re-enabled later in this code
    var $elt = $(this).attr('disabled', true);

    //begin the animation

    //Now.. move the effect content to the new position
    //or if it is already at the new position, move it back to where it was before
    $("#effectContent").animate({
        left: (!didContentSlide) ? "-=" + (positionOfEffect) + "px" : "+=" + (positionOfEffect) + "px"
    }, 500, function () {

    })
    //as the content is going in, drop the effectMenu out of the page
    //or if the content is going back out, bring the effectMenu into the page
    .queue(function () {
        $("#effectMenu").toggle("drop", {}, 500);
    }).dequeue();

    //this is for the button.. its re-enabled when everything stops moving
    setTimeout(function () {
        $elt.attr('disabled', false);
    }, 500);

    //update the value of whether or not the contents slid into the new position
    didContentSlide = (!didContentSlide);
    $("#didContentSlide").val(didContentSlide);

    //override the defaults of the button
    return false;
});