6

So far, I have a div fixed to the bottom of the page, with the bottom margin set to a minus number, so as to hide most of it below the screen. I'd like to create a Jquery button that made it all slide up onto the page, but everything I have tried so far hasn't worked. I'm not so experienced with it, so I've probably been doing it worng.

Anyway, here's my CSS:

.foot {
    border-top: 1px solid #999999;
    position:fixed;
    width: 600px;
    z-index: 10000;
    text-align:center;
    height: 500px;
    font-size:18px;
    color: #000;
    background: #FFF;
    display: flex;
    justify-content: center; /* align horizontal */
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    bottom: -475px;
}

And my HTML:

<div class="foot">
Copyright 2014 &copy; Tom Gibbs web design. <div class="clocker">hi</div>
<br />
<br />
Line 1<br />
Line 2<br />
Line 3<br />
Line 4
</div>

Code I already tried. It just made the div slide down off the page:

<script>
$(document).ready(function(){
  $(".clocker").click(function(){
    $(".foot").slideUp(2000);
  });
});
</script>
5
  • 2
    Where is Jquery code?
    – Manwal
    Aug 7, 2014 at 4:28
  • Like I said, I couldn't get anything remotely close, but I added the code I already tried in an edit Aug 7, 2014 at 4:30
  • That was the only Jquery I tried so far. The rest were all CSS tricks that worked, but not very well. I'd rather use Jquery anyway Aug 7, 2014 at 4:31
  • @user3779981 Instead of sliding up to reveal the rest of the content within the footer, wouldn't it work better if there was a separate container/modal that would slide up? This way, you can leave the footer alone and slide the other container/modal up as needed.
    – srikarg
    Aug 7, 2014 at 4:41
  • Well, right now, I'm working on using the addClass function to add a class that removes the bottom margin on click. It works, but I can't get it to go back down again Aug 7, 2014 at 4:43

4 Answers 4

13

What if you had another class:

.slide-up
{
    bottom: 0px !important;
}

.slide-down
{
    bottom: -475px !important;
}

which you could add on click:

$(document).ready(function() {
  $('.foot').click(function() {
      if($('.foot').hasClass('slide-up')) {
        $('.foot').addClass('slide-down', 1000, 'easeOutBounce');
        $('.foot').removeClass('slide-up'); 
      } else {
        $('.foot').removeClass('slide-down');
        $('.foot').addClass('slide-up', 1000, 'easeOutBounce'); 
      }
  });
});

Make sure you have jQuery UI imported first.

Updated JSFiddle

4
  • That does work pretty well, thanks. Would it be difficult to get it to go down again if the user clicks again? Aug 7, 2014 at 4:57
  • @user3779981 Sure, fixed. Also, you can mess around with jQuery UI's different easing types, not just the bounce one
    – Senju
    Aug 7, 2014 at 5:08
  • I really did like the bounce effect. I've not actually used these Jquery UI effects before, but I sure am going to now! Aug 8, 2014 at 0:09
  • More shorter and $(function() { $('#dev-module-toolbar').click(function() { if($(this).hasClass('slide-up')) { $(this).toggleClass('slide-down', 'slide-up'); } else { $(this).toggleClass('slide-up', 'slide-down'); } }); });
    – ymakux
    Apr 12, 2017 at 14:06
5

I believe this is something you want: DEMO

$(document).ready(function(){
  $(".clocker").click(function(){
      $(".foot").animate({bottom:'300px'},1000);
  });
});

I have made some changes in your Css also:

.foot {
    border-top: 1px solid #999999;
    position:fixed;
    width: 600px;
    z-index: 10000;
    text-align:center;
    /*height: 500px;*/
    font-size:18px;
    color: #000;
    background: #FFF;
    display: flex;
    justify-content: center; /* align horizontal */
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    bottom: 0;
}

Update

If you want to close it also See Updated DEMO

$(document).ready(function(){
  $(".clocker").click(function(){
      if($(".foot").css('bottom') == '0px'){
          $(".foot").animate({bottom:'300px'},1000);
      }
      else
      {
          $(".foot").animate({bottom:'0px'},1000);
      }

  });
});
1
  • Your original demo could do with a <button class='clocker'>Click</button> in the html ;) Nov 26, 2014 at 3:20
0

Tris worked for me (coy and paste that in your code editor):

<!DOCTYPE html>
        <html>
        <head>
            <title>Slide Up</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        </head>

        <style type="text/css">
            .container {
                position: absolute;
                top:0px;
                left:0px;
                bottom:0px;
                right:0px;
                width:80%;
                height:600px;
                border:1px solid black;
                margin:auto;
            }

            .menuB{
                position:absolute;
                width:100%;
                height:0;
                left:0;
                bottom:0;
                /*transform-origin:100% 100%;*/
                background:#2196F3;
                opacity:0;
                overflow:hidden;
            }

            .clickMe{
                position: absolute;
                margin-top: 0;
                right: 0;
                width: 100%;
                height: 30px;
                background-color: #2196F3;
                color: white;
                text-align: center;
                cursor: pointer;
            }
        </style>
        <body>

            <div class="container">
                <div class="menuB">

                </div>

                <p class="clickMe">Click</p>
            </div>

            <script type="text/javascript">
                    var opacity_status = false;
                $('.clickMe').on('click', function () {
                    // body...
                    if (opacity_status === false) {
                        $('.menuB')
                           .animate({
                               opacity: 1
                           }, 100)
                           .animate({
                               height: '250px'
                           }, 1500 );
                        opacity_status = true;
                    }else{
                        $('.menuB')
                           .animate({
                              height : 0
                           }, 1500)
                           .animate({
                               opacity: 0
                           }, 2000 );
                        opacity_status = false;
                    }

                });
            </script>

        </body>
        </html>
0

Probably a bit late but I hope it will help somebody else. I've made this discovery completely by fluke so I take no credit for it, nor do I really understand it. Perhaps its a bug.

I was able to use the slideDown() method and change the direction that my context menu slides simply by changing the css absolute top/bottom property to:top: 0; or bottom: 0;, depending on which way I wanted to go.

There's also a js fiddle: Slide up or down polarity

$('.option').click(function(evObject) {

  $("#contextContainer").slideDown(2500);
});
#contextContainer {
  display: none;
  background-color: green;
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 10;
  opacity: 90%;
  padding: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="controlContainer">
  <div class="option">Click me</div>
</div>

<div id="contextContainer">Context menu!!</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.