CODEWITHSUNDEEP
javascriptjquery
Eddy
Eddy

Reputation: 566

Toggle div in and out off screen

I am using the code below to toggle a div out of screen partially, and back in screen fully. This code tells how far "sidebar" is to move offscreen. But in my case this functionality has a problem, due to media queries applied to sidebar width. Therefore I need the code not to state how far over sidebar will move, but how much of sidebar will be left onscreen in pixels. The demo here (with the media queries).

$(document).ready(function () {
    $("#toggle").click(function () {
      if($(this).hasClass('active')){
        $(this).removeClass('active');
        $("#sidebar").animate({
          left: '0%'
        });
      } else {
        $(this).addClass('active');
        $("#sidebar").animate({
          left: '-55%'
        });
      }
  });
});

Upvotes: 1

Views: 654

Answers (3)

Eddy
Eddy

Reputation: 566

SOLVED!!

SEE DEMO HERE

    $(document).ready(function() {
  $("#togglebutton").click(function() {
    var $container = $('#myToggleDiv');
    $container.toggleClass('hide');
  });
});

Upvotes: 0

Dekel
Dekel

Reputation: 62636

Instead of setting negative left value in percentages, use the width of your element and set the left value according to the width of your element:

$("#sidebar").animate({
    left: '-' + ($("#sidebar").width()*0.55) + 'px'
});

Check this snippet: 

$(document).ready(function () {
  $("#toggle").click(function () {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
      $("#sidebar").animate({
        left: '0'
      });
    } else {
      $(this).addClass('active');
      $("#sidebar").animate({
        left: '-' + ($("#sidebar").width()*0.55) + 'px'
      });
    }
  });
});
html, body {
    width:100%;
    height: 100%;
}
#header {
    width: 100%;
    height: 20%;
    float: left;
    border: 1px solid;
}

#sidebar {
    width: 70%;
    height: 80%;
    position: relative;
    border: 1px solid;
}
#toggle {
    width: 10%;
    height: 40%;
    margin-right: 6.5%;
    margin-top: 3.5%;
    float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>

Upvotes: 2

AgataB
AgataB

Reputation: 647

Simple maths:

Say you want the side bar to have 40px left on the screen, and the rest hidden. So you want to move it left by (width - 40). I.e.

 $(document).ready(function () {
        $("#toggle").click(function () {
            if($(this).hasClass('active')){
                $(this).removeClass('active');
                $("#sidebar").animate({
                    left: '0%'
            });
        } else {
            $(this).addClass('active');
            $("#sidebar").animate({
                left: - ($("#sidebar").width() - 40)
            });
        }
    });
});
html, body {
    width:100%;
    height: 100%;
}
#header {
    width: 100%;
    height: 20%;
    float: left;
    border: 1px solid;
}

#sidebar {
    width: 70%;
    height: 80%;
    position: relative;
    border: 1px solid;
}
#toggle {
    width: 10%;
    height: 40%;
    margin-right: 6.5%;
    margin-top: 3.5%;
    float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>

Upvotes: 3

Related Questions