Slide Out Panel with Bootstrap

Which slide out panel is compatible with bootstrap 3?

A bit of CSS and jQuery are enough to rebuild this function. Take a look at my jsfiddle.

jQuery Snippet

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

Full Example: http://jsfiddle.net/9Le8X/2/

bootstrap sliding panel from the bottom of the screen

You need to use position: fixed to keep the drawer at the bottom of the screen and visible, even on scroll.

See http://codepen.io/anon/pen/oxXowM for an example.

Sliding overlay panel that works with bootstrap 3 css

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

How to give the slide up /slide down effect to bootstrap tab-pane

Please try this. I have added some js for sliding effect.

$('.tabs').on('show.bs.tab', function (e) {       if (e.relatedTarget === undefined) {        $($(e.target).attr('href')).slideDown('slow');  }  else {    $($(e.relatedTarget).attr('href')).slideUp({ duration: 'fast', queue: true,      done: function() {        $($(e.target).attr('href')).slideDown('slow');      }    });  } });

.tab-pane{  background:#ccc;  padding:20px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<div class="tabs"><ul class="nav" id="myTab" role="tablist">  <li class="nav-item">    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>  </li>  <li class="nav-item">    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>  </li>  <li class="nav-item">    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>  </li>  <li class="nav-item">    <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>  </li></ul>
<div class="tab-content">  <div class="tab-pane active" id="home" role="tabpanel"  style="display: block;"><p>This Is good</p></div>  <div class="tab-pane " id="profile" role="tabpanel"  style="display: none;"><p>This is better</p></div>  <div class="tab-pane " id="messages" role="tabpanel" style="display: none;"><p>Thhis is excellent</p></div>  <div class="tab-pane " id="settings" role="tabpanel" style="display: none;"><p>This is poor</p></div>  </div></div>

Bootstrap : Slideup/ Slidedown or Accordion in Panel

You don't need to use timeout, it will be hard to match exactly the time it takes to slide. The slideUp() method has a callback function to call once the animation is complete, show your default content there

$('.show_hide_add_discount_panel').slideUp(function(){
   $('.add_discount_one_line_description').show();
});

https://jsfiddle.net/hbxqsxjp/2/

Slide row of images up inside bootstrap panel-body on a loop using CSS

Hiding the overflow

You can prevent seeing the extra images simply enough with CSS by setting a fixed height on div.slideup and hiding any overflow:

.slideup {
  overflow-y: hidden;
  height: 180px;
}
.slideup > div {
  position: relative;
  top: 0;
  height: 180px;
  padding: 0;
}
.slideup > div > img {
  height: 150px;
  padding: 0;
  margin: 15px;
}

Scrolling

The code for the scrolling is mostly quite simple: you just need to adjust the top value for the div.slideup element on an interval. Since we're using angular, I'd do this by setting it to be the value of $scope.offset:

$scope.offset = 0;
var interval = setInterval(function () {
    $scope.offset += -10;
    $scope.$apply();
},
200);

Making the scrolling continuous

The trickiest part is with the continuous scrolling. To do this, you have to remove the images once they are out of view, then add them again to the bottom of your $scope.entitities array. At this time, you'll also need to reset the value of $scope.offset. All of this can be achieved with angular's $scope.$watch:

$scope.$watch('offset', function(newValue, oldValue, scope) {
  if (newValue == -180) {
    $scope.offset = 0;
    var removed = scope.entities.splice(0, 12);
    removed.forEach(function (item) {
      scope.entities.push(item);
    });
  }
});

See the code snippet below to see this in action.

angular.module('app', []);angular.module('app').controller('ctrl', ['$scope',  function($scope) {    var placeholder10 = {      logoUrl: 'https://placehold.it/30x150'    };
    var placeholder20 = {      logoUrl: 'https://placehold.it/20x150'    };
    $scope.entities = [];    for (var i = 0; i < 18; i++) {      $scope.entities.push(angular.copy(placeholder10));    }    for (var i = 0; i < 18; i++) {      $scope.entities.push(angular.copy(placeholder20));    }
    $scope.offset = 0;
    $scope.$watch('offset', function(newValue, oldValue, scope) {      if (newValue == -180) {        $scope.offset = 0;        var removed = scope.entities.splice(0, 12);        removed.forEach(function (item) {          scope.entities.push(item);        });      }    });
    var interval = setInterval(function() {        $scope.offset += -10;        $scope.$apply();      },      100);
  }]);

.slideup {  overflow-y: hidden;  height: 180px;}.slideup > div {  position: relative;  top: 0;  height: 180px;  padding: 0;}.slideup > div > img {  height: 150px;  padding: 0;  margin: 15px;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="app" ng-controller="ctrl" class="panel-body">  <div class="slideup row">    <!--this results in 36 divs that have an image-->    <div ng-repeat="entity in entities" class="col-xs-1" ng-style="{'top': offset + 'px'}">      <img class="img-responsive" ng-src="{{ entity.logoUrl }}" />    </div>  </div></div>
<div class="panel-body">  Anything inside this panel gets covered by the 24 remaining images which should be invisible except when they're going through the visible "slideup" div in the panel-body above.</div>

---

Related Topics