Move a div horizontally by 100% using translateX, then bring it back into view by a specific number of pixels

Question

Move a div horizontally by 100% using translateX, then bring it back into view by a specific number of pixels

I am currently working on creating a custom push navigation system and I am using translateX to shift the content over to reveal the navigation menu.

However, I am facing an issue where I don't want the content to be completely pushed off screen, but instead have a small portion of it visible on the right side.

The challenge is that I can't set a fixed pixel value for this adjustment as it needs to adapt responsively. One idea I had was to translateX by 100% and then somehow bring it back by about 50px, but I'm struggling to implement this solution.

$(document).on('click','.wrapper span', function() {
  $('.wrapper').addClass('active');
});

html, body {
  height:100%;
}
.wrapper {
  background:red;
  height:100%;
}
.wrapper span {
  width:50px;
  height:50px;
  background:yellow;
}
.wrapper.active {
  transform:translateX(100%);
}
.navigation {
  position:absolute;
  background:#666666;
  color:#ffffff;
  top:0px;
  left:0px;
  bottom:0;
  z-index:-1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  i am a wrapper
  <span>click me</span>
</div>

<div class="navigation">
  i am a nav
</div>

DEMO

jquery html css transform

Answer 1

Answer №1

Have you considered utilizing the calc function for this task? (For browser compatibility information, see here)

Here is the relevant code snippet:

.wrapper.active {
  transform:translateX( calc(100% - 50px) );
}

Check out the complete example below:

$(document).on('click','.wrapper span', function() {
  $('.wrapper').addClass('active');
});

html, body {
  height:100%;
}
.wrapper {
  background:red;
  height:100%;
}
.wrapper span {
  width:50px;
  height:50px;
  background:yellow;
}
.wrapper.active {
  transform:translateX( calc(100% - 50px) );
}
.navigation {
  position:absolute;
  background:#666666;
  color:#ffffff;
  top:0px;
  left:0px;
  bottom:0;
  z-index:-1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  i am a wrapper
  <span>click me</span>
</div>

<div class="navigation">
  i am a nav
</div>

You can also concatenate transforms together in this manner:

.wrapper.active {
  transform:translateX(100%) translateX(-50px);
}

Complete example using this method:

$(document).on('click','.wrapper span', function() {
  $('.wrapper').addClass('active');
});

html, body {
  height:100%;
}
.wrapper {
  background:red;
  height:100%;
}
.wrapper span {
  width:50px;
  height:50px;
  background:yellow;
}
.wrapper.active {
  transform:translateX(100%) translateX(-50px);
}
.navigation {
  position:absolute;
  background:#666666;
  color:#ffffff;
  top:0px;
  left:0px;
  bottom:0;
  z-index:-1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  i am a wrapper
  <span>click me</span>
</div>

<div class="navigation">
  i am a nav
</div>

Answer 2

Have you considered utilizing the calc function for this task? (For browser compatibility information, see here)

Here is the relevant code snippet:

.wrapper.active {
  transform:translateX( calc(100% - 50px) );
}

Check out the complete example below:

$(document).on('click','.wrapper span', function() {
  $('.wrapper').addClass('active');
});

html, body {
  height:100%;
}
.wrapper {
  background:red;
  height:100%;
}
.wrapper span {
  width:50px;
  height:50px;
  background:yellow;
}
.wrapper.active {
  transform:translateX( calc(100% - 50px) );
}
.navigation {
  position:absolute;
  background:#666666;
  color:#ffffff;
  top:0px;
  left:0px;
  bottom:0;
  z-index:-1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  i am a wrapper
  <span>click me</span>
</div>

<div class="navigation">
  i am a nav
</div>

You can also concatenate transforms together in this manner:

.wrapper.active {
  transform:translateX(100%) translateX(-50px);
}

Complete example using this method:

$(document).on('click','.wrapper span', function() {
  $('.wrapper').addClass('active');
});

html, body {
  height:100%;
}
.wrapper {
  background:red;
  height:100%;
}
.wrapper span {
  width:50px;
  height:50px;
  background:yellow;
}
.wrapper.active {
  transform:translateX(100%) translateX(-50px);
}
.navigation {
  position:absolute;
  background:#666666;
  color:#ffffff;
  top:0px;
  left:0px;
  bottom:0;
  z-index:-1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  i am a wrapper
  <span>click me</span>
</div>

<div class="navigation">
  i am a nav
</div>

Answer 3

Answer №2

Utilizing negative margin can be a clever technique

.wrapper.active{
  position: relative;
  left: 100%;
  margin-left: -50px;
}

EDIT

Achieving the same effect without using relative positioning

.wrapper.active{
  margin-left: calc(100% - 50px);
  margin-right: calc(-100% + 50px);
}

$(document).on('click', '.wrapper span', function() {
  $('.wrapper').addClass('active');
});

html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  background: red;
  height: 100%;
}
.wrapper span {
  width: 50px;
  height: 50px;
  background: yellow;
}
.wrapper.active {
  margin-left: calc(100% - 50px);
  margin-right: calc(-100% + 50px);
}
.navigation {
  position: absolute;
  background: #666666;
  color: #ffffff;
  top: 0px;
  left: 0px;
  bottom: 0;
  z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  i am a wrapper
  <span>click me</span>
</div>

<div class="navigation">
  i am a nav
</div>

Answer 4

Utilizing negative margin can be a clever technique

.wrapper.active{
  position: relative;
  left: 100%;
  margin-left: -50px;
}

EDIT

Achieving the same effect without using relative positioning

.wrapper.active{
  margin-left: calc(100% - 50px);
  margin-right: calc(-100% + 50px);
}

$(document).on('click', '.wrapper span', function() {
  $('.wrapper').addClass('active');
});

html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  background: red;
  height: 100%;
}
.wrapper span {
  width: 50px;
  height: 50px;
  background: yellow;
}
.wrapper.active {
  margin-left: calc(100% - 50px);
  margin-right: calc(-100% + 50px);
}
.navigation {
  position: absolute;
  background: #666666;
  color: #ffffff;
  top: 0px;
  left: 0px;
  bottom: 0;
  z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  i am a wrapper
  <span>click me</span>
</div>

<div class="navigation">
  i am a nav
</div>

Answer 5

Answer №3

If you're looking to achieve this with jQuery, you can utilize the hide and show functions. Start by initializing the menu and content, but at the beginning (using document.ready()), hide the menu. Then, show it when clicked using onclick as shown below:

<div class="wrapper">
  i am a wrapper
  <span>click me</span>
</div>

<div class="navigation">
  i am a nav
</div>

The wrapper and navigation elements should be positioned side by side, starting with the navigation element.

$(document).ready(function() {
    $('.navigation').hide();
    $('.wrapper').click(function() {
        $('.navigation').show(100);
    });    
});

Using this method will ensure that the wrapper and navigation stay together and don't get separated.

Answer 6

If you're looking to achieve this with jQuery, you can utilize the hide and show functions. Start by initializing the menu and content, but at the beginning (using document.ready()), hide the menu. Then, show it when clicked using onclick as shown below:

<div class="wrapper">
  i am a wrapper
  <span>click me</span>
</div>

<div class="navigation">
  i am a nav
</div>

The wrapper and navigation elements should be positioned side by side, starting with the navigation element.

$(document).ready(function() {
    $('.navigation').hide();
    $('.wrapper').click(function() {
        $('.navigation').show(100);
    });    
});

Using this method will ensure that the wrapper and navigation stay together and don't get separated.

Move a div horizontally by 100% using translateX, then bring it back into view by a specific number of pixels

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing my CSS formatting from a linked style sheet to not be applied properly?

Text parsing with jQuery

Custom field data in WordPress

Incorporating an HTML Canvas element within a CSS grid design

Show the outcome of a mysql_query in PHP directly within MYSQL

Fixed Positioning Div to Stay at the Top while Scrolling

Are you transitioning from traditional scroll pagination to using ajax?

Enhance the appearance of your webpage by utilizing the Bootstrap round-circle class along with

Example using three.js showing issues with external resources failing to load on jsfiddle.net

Guide to opening a link in a new tab within the same webpage

Tips for populating two select tags with jQuery AJAX using a JSON document

Upon installation, the extension that replaces the new tab fails to detect the index.html file

Ensure data is validated before sending an ajax post request

Utilizing the Jquery Number Spinner for Updating Quantities in the Database

Fade out the jQuery message after a brief 2-second pause

Successful Ajax function utilizing the data-id parameter

Initiating the initial element in a list when implementing List with map function in React

What methods does Google use to catalogue web pages that load dynamically through jQuery?

Refreshing dynamically added rows through ajax updates

Using JavaScript/jQuery to Set a Timer for Animation with Google Maps Markers