Pull out div from right of screen

Question

Pull out a div from the left? Easy as pie. Pull it out from the right? Not so much.

I am looking for a div to be hidden offscreen but connected to a small tag on screen. When the user clicks the tag, out slides the whole div. This is pretty basic from the left using jQuery and CSS. From the right though, a user can just scroll over to see the "hidden" div!

Here is what I want (http://jsfiddle.net/yHPTv/) except instead of the div being partially hidden offscreen-left, I want it partially hidden offscreen-right.

Here is what I've tried so far (http://jsfiddle.net/LU8En/), and obviously it doesn't work since one can just scroll to the right.

The problem with using animate (or slide or toggle drop) is that I don't want the whole div to just disappear/appear, I want that little bit to be present.

Answer 1

http://jsfiddle.net/yHPTv/3/

Note, the example below does not work with newer versions of jQuery, read on below for an example that does.

$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
    }, function () {
        $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500});
    });
});

Change everything from left to right, then reposition the clickme div and the text content.

Also, give the body an overflow-x: hidden to prevent the horizontal scrollbar.

---

A few minor updates makes it compatible with the latest version:

$(function () {
    var rightVal = -280; // base value
    $("#clickme").click(function () {
        rightVal = (rightVal * -1) - 280; // calculate new value
        $(this).parent().animate({right: rightVal + 'px'}, {queue: false, duration: 500});
    });
});

http://jsfiddle.net/yHPTv/2968/

Answer 2

May need to do:

body,html { overflow-x:hidden; }

Just body without ",html" didn't work for me.

Answer 3

I am using the code from this link: http://jsfiddle.net/yHPTv/ I did some changes to it, the #clickme button is now outside the #slideout box.

<script>
        $(function () {
            $("#clickme").toggle(function () {
                $("#slideout").animate({left:'0px'}, {queue: false, duration: 500});
                $("#clickme").fadeOut( "slow", function() {
            });

            }, function () {
                $("#slideout").animate({left:'-100%'}, {queue: false, duration: 500});
            });
        });
    </script>

As you can see, I also added a fadeout effect to the click me button, because What i need to do is add a close button inside the #slideout box to close it back in instead of the main #clickme button.

help is much appreciated!

Thanks!

Answer 4

Please check below code and link as well might be it will help you.

http://jsfiddle.net/avinashMaddy/4bs3zp44/

<div id="slideout">
   <div id="slidecontent">
       Yar, there be dragonns herre!
   </div>
</div>
<div class="clickme">
    &nbsp;
</div>



<script>
  $(function () {
     $(".clickme").toggle(function () {
       $("#slideout").animate({left:'0px'}, {queue: false, duration: 500});
      }, function () {
    $("#slideout").animate({left:'-280px'}, {queue: false, duration: 500});
   });
  });
</script>