CODEWITHSUNDEEP
javascripthtmlcss
Tom
Tom

Reputation: 3034

Move overflowed elements to another div

I have a div with fixed height and another div below it with fixed height. I want elements (whole elements) that cannot fit within first div to move to another div. I don't want elements to be cut- just moved in whole and I want the order to be kept- so span2 will never be before (higher) than span1.

<div id="div1" style="height: 200px; width: 300px">
<span id="span1">Hello world<span>
<span id="span2">El 1</span>
</div>

<div id="div2" style="height:200px; width: 300px"></div>

Is this possible with just CSS? It doesn't really have to move from div1 to div2. I need just 2 containers of fixed height and moving elements between them. Can this be done with CSS columns? Or flex?

JS FIDDLE:

Upvotes: 2

Views: 1162

Answers (2)

Mayank
Mayank

Reputation: 1392

Try the FIDDLE.

Following code checks the DIV overflow status.

Javascript:

function IsDivOverFlow(div)
{
    if (div.outerHeight() < div.prop('scrollHeight') || div.outerWidth() < div.prop('scrollWidth')) {
        return true;
    } else {
        return false;
    }
}

Using the function on button click

var Count = 0;
$('button').click(function()
{
    var EditableContent = '<span contenteditable=true>'+(++Count)+' : TEST</span>';
    var oldHTML = $('#div1').html();
    $('#div1').append(EditableContent);
    if(IsDivOverFlow($('#div1'))){
        $('#div1').html(oldHTML);
        $('#div2').append(EditableContent);
    }
});

Hope it helps....

Upvotes: 2

Ionut Necula
Ionut Necula

Reputation: 11472

If you want to use css columns you can use something like this, but only using one div instead of two:

.your_class{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Upvotes: 0

Related Questions