Pull out div from right of screen

css, hidden, html, jquery, slide

Solution

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/

Problem

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.

Original source