Javascript/ jQuery plugin

Question

It is not a real jQuery plugin, but for my problem i didn't know what title was appropriate.

This is the "Plugin" --> http://jsfiddle.net/djrikyx/GuumY/9/

There are 3 Youtube player, with the possibility of Pop out them into draggable DIVs and also minimize them to the right.

I can't explain my problem only with words, you have to see it to better understand.

First, popout all 3 players, then minimize them, they will go on the right, each one below the previous.

Then if you try to Close, or Maximize the one in the middle or the last, you will see that all will go up for 30px.

I know that now is doing that, because i wrote to do that in the function maximizePlayer() and popinPlayer() using

var countMP = $('.uiVideoHandleMin').length;
uVC.removeClass('uiVideoContainerMin');
if(countMP > 0){
    $('.uiVideoHandleMin').each(function(){
        var top = parseInt($(this).css('top'), 10);
        top = top-30;
        $(this).css({top:top});
    });
}

I don't want that. I want so the first one must be always at 50px from top, and the other just below. So if i close the middle one, the first will stay in position, and the last will go up, and if i close the last, nothing happen.

But i really don't know how i can do what i want, so i'm here asking for a tip/solution.

Answer 1

I changed it to this http://jsfiddle.net/Klors/GuumY/11/ which seems to work?

There is a line in your function popinPlayer(elem) { that reduces the css top by 30, but doesn't check to see if it's 0 (or below the removed handle) first.

So I changed top = top-30; to top = top > thisTop ? top-30: top; and added in var thisTop = parseInt($uVH.css("top"), 10); before you reset top on $uVH, which seems to work.