在屏幕外添加/添加div？

Question

I'm trying to create a div that has two buttons: one to prepend a div of the same size to the right of the original without shifting the position of the original div and another button to append a div to the right of the original.

Appending to the left works fine, but prepending left shifts the whole container over shown here

code I'm using to add elements:

$(document).ready(function() {
  $("#back").on("click", function(e) {
    e.preventDefault();
    $("#center").before("<div id='back' class='inside'></div>");
  });
  $("#next").on("click", function(e) {
    e.preventDefault();
    $("#center").after("<div id='next' class='inside'></div>");
  });
});

How do I prepend the div left of the original so that it is "off screen" without shifting the position of the original div? Thanks in advance!

Answer 1

The solution to your problem is best solved using CSS.

Simply set display:none to the left DIV upon initial insertion.

Change this:

$("#center").before("<div id='back' class='inside'></div>");

To this:

$("#center").before("<div id='back' class='inside' style='display:none;'></div>");

And remove that CSS attribute when you want it visible:

$('#back').css('display', '');

However, the use of inline styling is, in most cases, bad practice. You should consider setting the display:none via a stylesheet assigned to the element ID #back . For maintainable code, you want to keep clear separation of style (CSS), structure (HTML) and UI functionality (JS).

Answer 2

try to set the following CSS for the containing div

div.whatever {
position:absolute;
overflow:hidden;
}