Make content overflow

Question

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>

how can I make it so the new colours are overflowing, without doubling the width? --> like this ? jsfiddle.net/z41m29gs/8 — Temani Afif
– Temani Afif, Commented Mar 26, 2018 at 21:31
by the way did you know something called linear-gradient ? it can make your life easier — Temani Afif
– Temani Afif, Commented Mar 26, 2018 at 21:31
@TemaniAfif not really usefull for what I'm trying to achieve, about your fiddle though, when I run it, when there are no duplicates it isn't spread around the whole wrapper, which I'd like it to be. Edit: the first three have to be spread over the full width of the wrapper. — OrpheuZ
– OrpheuZ, Commented Mar 26, 2018 at 21:40
i simply update the width for testing you can make it 33% like this jsfiddle.net/z41m29gs/18 ... by the way can you show us a screenshot — Temani Afif
– Temani Afif, Commented Mar 26, 2018 at 21:43

tao · Accepted Answer · 2018-03-26 21:59:24Z

1

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...

edited Mar 26, 2018 at 21:59

answered Mar 26, 2018 at 21:32

tao

91.1k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

OrpheuZ Over a year ago

Making it land on a colour slowly is done by using a cubig-bezier. But I know I am not so good at explaining my issue as I'm not finding the correct words as my native language isn't english, but I made this image of what I want. i.imgur.com/iG9Px4j.png

OrpheuZ Over a year ago

No, I want it to to duplicate, and just add the divs, but then the duplicates divs should be invisible (they should be overflowing).

Temani Afif · Accepted Answer · 2018-03-26 22:55:22Z

0

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>

answered Mar 26, 2018 at 22:55

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

2 Comments

OrpheuZ Over a year ago

Okay, that seems to fit my needs, but what if I were to have it like scroll over the row ten times, not going back?

Temani Afif Over a year ago

@OrpheuZ adjust the animation ... i make it going back with alternate, but you are not obliged

Collectives™ on Stack Overflow

Make content overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related