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;
});
