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/