Geek asks and answers

Extend the div to the right of the screen

Pull the div to the left. As easy as pie. Pull it on the right? Not so much.

I am looking for a div to hide off the screen, but connected to a small tag on the screen. When a user clicks on a tag, displays slides on the entire div. This is pretty simple on the left using jQuery and CSS. To the right, however, the user can simply scroll to see the “hidden” div!

This is what I want ( http://jsfiddle.net/yHPTv/ ), except that the div is partially hidden behind the scenes - Left, I want it to be partially hidden behind the scenes.

Here is what I have tried so far ( http://jsfiddle.net/LU8En/ ), and obviously it does not work, as you can just scroll right.

The problem with using animation (or slide or switch) is that I do not want the whole div to just disappear / appear, I want this little bit to be present.

+3
source share
4 answers

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

Note. The example below does not work with newer versions of jQuery, as shown below for the example.

$(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 change the div and text content.

Also, give body a overflow-x: hiddento prevent a horizontal scroll bar.

A few minor updates make 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/

+12
source

You may need:

body,html { overflow-x:hidden; }

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

0
source

: http://jsfiddle.net/yHPTv/ , #clickme #slideout.

<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 to the #slideout field to close it instead of the main #clickme button.

help is much appreciated!

Thank!

0
source

Please check below code and link, maybe this 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>
0
source

More articles:


All Articles