Pull out div from right of screen

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.

Answers


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/


May need to do:

body,html { overflow-x:hidden; }

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


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!


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>

Need Your Help

Java api to encode URL query parameter values?

java url encode query-parameters

I used URLEncoder but this seems URLEncoder does not cover everything of url query parameter encoding (escaped). I searched and someone used URLEncoder to encode whole url. For my case I iust wan...

Why is bootstrap css using box-sizing: border-box?

jquery html css twitter-bootstrap css-reset

I'm using only the bootstrap dropdown component but its css shrinked many of my existent layout elements and the page looks now a like damaged. After a closer look I found out what's causing this:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.