Question

I have make this: This In the right you see a red button. When you click on the red button. The content screen with the text is coming. But i have a question of this. Can i make this with a other animation. If you hold your mouse. Then you can slide open. With your mouse button to left. Then the content box open. Do you understand it? I hope you can help me.

You can see the code on jsfiddle. And you can change it there. I hope you can help me. I am a starting javascripter. And how And have no idea how I can make this.

Answer 1

To implement dragging, you can make use of mousedown/mouseup/mousemove like this: http://jsfiddle.net/pimvdb/25y4K/8/.

$(function () {
    "use strict";
    var box = $(".what-is-delicious"),
        button = $(".what-is-delicious > a");

    var mouseDown = false,
        grabbed   = 0,
        start     = -303;

    button.mousedown(function(e) {
        mouseDown = true;
        $('*').bind('selectstart', false); // prevent selections when dragging
        grabbed = e.pageX; // save where you grabbed
        $("body").append('<div class="background-overlay"></div>');
    });

    $('body').mouseup(function() {
        mouseDown = false;
        $('*').unbind('selectstart', false); // allow selections again
        $(".background-overlay").remove();
        start = parseInt(box.css('right'), 10); // save start for next time
                                                // (parseInt to remove 'px')

    }).mousemove(function (e) {
        if(mouseDown) { // only if you are dragging
            // set right to grabbed - pageX (difference) + start 'right' when started
            // dragging. And if you drag too far, set it to 0.
            box.css("right", Math.min(grabbed - e.pageX + start, 0));
        }
    });
});