CODEWITHSUNDEEP
javascripthtmlcss
OrpheuZ
OrpheuZ

Reputation: 37

Make content overflow

I'm trying to make something where I need to duplicate all the entries (multiple times) and then later I would like to make it spin and land on a colour slowly, etc. I'm now just getting stuck at duplicating the colours, how can I make it so the new colours are overflowing, without doubling the width?

I want it so that the colours go out of the wrapper div. Now they are just distributing themselves.

Any ideas?

$(document).on("click", ".duplicate", function() {
  var $wrapper = $('.wrapper .inner');

  $wrapper.find('.color').each(function() {
    $wrapper.append($(this).clone());
  });
});
.wrapper {
  width: 75%;
  margin: 12px auto;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.wrapper .inner {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
}

.wrapper .color {
  width: 100%;
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="inner">
    <div class="color" style="background:red;width:231%"></div>
    <div class="color" style="background:purple;width:111%"></div>
    <div class="color" style="background:orange;width:91%"></div>
  </div>
</div>

<button class='duplicate'>
  Duplicate
</button>

Upvotes: 1

Views: 71

Answers (2)

Temani Afif
Temani Afif

Reputation: 272779

I guess you are simply over complicating this. All what you need is a reapeated linear-gradient like this:

.wrapper {
  width: 75%;
  margin: 12px auto;
  position: relative;
}

.wrapper .inner {
  width: 100%;
  height: 25px;
  display: flex;
  border-radius: 6px;
  
  overflow: hidden;
}

.wrapper .color {
  width: 100%;
  height: 100%;
}
.new {
  margin-top:5px;
  height:25px;
  border-radius: 6px;
  background-image:linear-gradient(to right,red,red 54%,purple 54%, purple 80%,orange 0);
  background-size:100% 100%;
  animation:change 5s linear infinite alternate;
}

@keyframes change {
  from {
    background-position:0 0;
  }
  to {
    background-position:-1000px 0;
  }

}
<div class="wrapper">
  <div class="inner">
    <div class="color" style="background:red;width:231%"></div>
    <div class="color" style="background:purple;width:111%"></div>
    <div class="color" style="background:orange;width:91%"></div>
  </div>
  <div class="new"></div>
</div>

Upvotes: 0

tao
tao

Reputation: 90048

In order to have two items in the same position in document flow you need to wrap them in a parent with position:relative and give one of them position:absolute; top:0;left:0. Also note that if your element doesn't have any content, you might need to define it's height and width. To make it same size as parent, you can give it top:0;bottom:0;left:0;right:0;.

Here's a demo started from your fiddle. You might want to inspect DOM after you press "Duplicate". I made it revert to original, so you can do it multiple times.

But do note your question is currently unclear. I'm afraid you lost me at "to make it spin and land on a colour slowly". It's truly poetic, but won't get you very far on SO...

Upvotes: 1

Related Questions