How to right align a slide out panel for all screen sizes?

Question

I am trying to right align the panel so it works with bootstrap, and so it works for all screen sizes. The left align works for all screen sizes. How can I make this work for the right align?

FIDDLE

Javascript

 $('#opener').on('click', function() {                          
                                var panel = $('#slide-panel');
                                if (panel.hasClass("visible")) {
                                                panel.removeClass('visible').animate({'margin-left':'100%'});
                                } else {
                                                panel.addClass('visible').animate({'margin-left':'90%'});
                                }             
                                return false;      
                });

CSS

#slide-panel {
    width:300px;
    height:300px;
    padding:10px;
    background:#eee;
    margin-left:100%;
}
#opener {
    float:left;
    margin:-10px -50px 0px -50px;
    border-radius:0;
}

HTML

<div id="slide-panel">
    <a href="#" class="btn btn-danger" id="opener"><i class="glyphicon glyphicon-align-justify"></i></a>
    Panel Content
</div>

Answer 1

Making a side panel can be done with the following steps:

• Make the panel position: absolute or position: fixed
• Make the panel be top: 0 and right: -N where N is the width of the panel
• To show the panel set right to 0
• To make it so there isn't a scrollbar, set overflow-x: hidden on the body and html

This only works if the width of the side panel is constant.

Here's the Fiddle: http://jsfiddle.net/acbabis/ZnNHk/