Sliding overlay panel that works with bootstrap 3 css

Question

I endlessly searched for a sliding overlay panel using jquery that does not destroy my css boot file. But I can not find. I need a panel that looks like a form, has drop-down lists, selectable grids, input fields, etc., And everything I do on this menu bar will automatically update the content panel; but in my case it really does not count as a “menu”, its just a sliding or pop-up form that you can fill out.

I searched this site:

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

And not one gave me what I wanted. I need a sliding panel that goes to the left, filled with forms (for example, bootstrap accordion, select2 dropdown menu).

The first link gave exactly what I wanted, but rendering the contents of my bootstrap css came into a serious conflict and turned out to be useless.

The finest example I could find is here:

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

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

But using this library also contradicts the download. I tried 5 different libraries, it all ended in failure. It just seems like a simple idea like this could already have some kind of freedom of action.

If someone had any success, I would like to hear it. Otherwise, at the moment I have no options.

[Edit 6/17/2014] A big requirement for me is to have a button that remains static, it does not move using the sliding panel. I did not want the user to move the button every time the user pushed the panel. I also needed this feature to exist for ie7 +. I want to have more control over what is moving, I need moving, effects, that's all. Not full 100% glide.

Answer 1

After tormenting my brain and time in this, it turned out that most third-party applications for sliding panels do not support cross-browser very well. Some say that it is, but when you look at the demos, it clearly doesn't. So what I did was the project was replicated by including jquery.ui and just added to its functions.

http://jqueryui.com/toggle/

I used the switch, with drop selected. This simulates a sliding motion on the left side of the window. Works in IE7 + and chrome.

I made my content div "position: fixed"; for my purposes, I like it because I control whether I want to do an overlay or if I want my content to be clicked.

Then with this div content, I can add a jQuery animation function and put it in the right position.

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

Over time, I will create my own library that surpasses all others with a minimal CSS style. But for now, I just need to wrap my things.

EDIT: 6/17/2014 . This was implemented almost a few days after I posted the answer here. Here is my code that I implemented using jquery ui: remember that twitter bootstrap does not interfere with this code, since it is used purely as css at this point.

components used:

• Button to switch the sliding, I gave her id = "button".
• Div panel with id = "effectMenu"
  • This is responsible for the sliding and disappearing menu.
• Div panel with id = "effectContent" (shown next to the Menu effect)
  • When the menu slides and disappears, it moves to empty space
  • When the menu slides and returns, it moves and allows the menu to return
• Hidden input field with id = "positionOfEffect"
  • Used to determine where content should slide to
• Hidden input field with id = "didContentSlide"
  • Preserves a logical value: true if the content has been moved to a new position, false if it has returned to its 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 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 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; }); 

Answer 2

i ended up using the offcanvas plugin found here: https://jasny.imtqy.com/bootstrap/javascript/#offcanvas if that helps you.