CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chris
Chris

Reputation: 13

How to limit the elements a div can contain? HTML

I'll try to be super specific with this.

I have a div that contains images that I'm moving to another div (called select) using jquery (primarily the .appendTo() function). However, I only want select to hold a maximum of 5 images and if any are added after the 5 it removes the last added element. So, for example, if my image div contains 6 elements:

<div id= "images">
  <img src="Slices/images/1.png">
  <img src="Slices/images/2.png"> 
  <img src="Slices/images/3.png">
  <img src="Slices/images/4.png">
  <img src="Slices/images/5.png">
  <img src="Slices/images/6.png">
</div>

and I move 5 to select with jquery:

<div id= "select">
  <img src="Slices/images/1.png">
  <img src="Slices/images/2.png"> 
  <img src="Slices/images/3.png">
  <img src="Slices/images/4.png">
  <img src="Slices/images/5.png">
</div>

then select can hold no more than this and if another image is added it removes the 5th image and replaces it with the 6th:

<div id= "select">
  <img src="Slices/images/1.png">
  <img src="Slices/images/2.png"> 
  <img src="Slices/images/3.png">
  <img src="Slices/images/4.png">
  <img src="Slices/images/6.png">
</div>

This has been puzzling me for a while and I can't seem to find an answer anywhere. I checked the jquery methods but none seem to limit how many elements a div can hold. Maybe this has to be done with html/javascript? I'm later going to export these to a file so it's important that they're no greater than 5. It's very similar to this: http://jsfiddle.net/8VrdE/109/ which I got from another question here ( How to move an element into another element? ). I slightly edited the code though for simplicity.

edit: my code does no limiting at all...I can't really figure out how. I can post the script that handles the selecting. The images div is very similar to the one I posted.

<script>
$.fn.animateTo = function(appendTo, destination, duration, easing, complete) {
if(appendTo !== 'appendTo'     &&
 appendTo !== 'prependTo'    &&
 appendTo !== 'insertBefore' &&
 appendTo !== 'insertAfter') return this;
 var target = this.clone(true).css('visibility','hidden')[appendTo](destination);
 this.css({
 'position' : 'relative',
 'top'      : '0px',
 'left'     : '0px'
 }).animate({
 'top'  : (target.offset().top - this.offset().top)+'px',
 'left' : (target.offset().left - this.offset().left)+'px'
  }, duration, easing, function() {
 target.replaceWith($(this));
 $(this).css({
  'position' : 'static',
  'top'      : '',
  'left'     : ''
 });
 if($.isFunction(complete)) complete.call(this);
 });
 }
 $(document).ready(function()
 {
    $("#images").find("img").click(function() 
    {
            if ($(this).parent().attr("id") =="images")
            {
                $(this).animateTo('appendTo', '#select');
                i++;
            }
            else 
            {
                $(this).animateTo('prependTo', '#images');
            }       
    });
});
</script>

Upvotes: 1

Views: 2453

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

You need to see how many child elements are already in the target first then kill off the excess one if needed.

Using that sample you referenced (limit of 3 set): http://jsfiddle.net/TrueBlueAussie/8VrdE/110/

function moveButton(elem){
    var $selected = $('#selected');
    var $kids = $selected.children();
    if ($kids.length >= 3)
    {
        $kids.last().remove();
    }
    $(elem).detach().appendTo('#selected');
}

Upvotes: 1

Related Questions