Jquery remove/add CSS class

Question

There are 5 tiles if i click on one of them it opens them (width 100%) and when i click the X on the top right it close it that works fine. but when it is opened and i click the blue box again it will override the global vars and the onclick Close dose not know the old position anymore.

Fiddle Here FIDDLE

HTML

<div class="tile" id="tp1">
    <img class="bus" src="http://s14.directupload.net/images/131130/4gzq9oaz.png" />
    <div class="close">x</div>
</div>

CSS

.tile, .tile_open {
    position: absolute;
    background-color:#0090db;
}

/*//////////////////////////////////////
        Tile Width And Location eddid here
///////////////////////////////////////*/
#tp1{
    width: 100px;
    height: 50px;       
}
/*//////////////////////////////////////
                IMG SIZE
///////////////////////////////////////*/
img {
    width: 100%;
    height: 100%;
}

/*//////////////////////////////////////
           Close Button
///////////////////////////////////////*/
.close {
    display: none;
    background-color:#C85051;
    position: absolute;
    top: 0;
    right: 5px;
    width: 50px;
    height: 25px;
    text-align: center;
}

.open .close {
    display: block;
}

Jquery

var posL , posT;

$(".tile").on("click", function (e) { 
    var pos= $(this).position();
         posL = $(this).css('left'),
         posT = $(this).css('top');

    e.stopPropagation();
    if(!$(this).hasClass('open') ) {
        $(this).animate({
            "top": pos.top - pos.top,
            "left":pos.left - pos.left,
            "width": "100%",
            "height": "100%"
        }, 1000).addClass('open')
        $(this).removeClass('tile').addClass('tile_open'); //<-- This was my try to get it to work
    }


});



$(".close").on("click", function (e) {
    e.stopPropagation();
    $(this).parent().stop().animate({
        "left" : posL,
        "top" : posT,
        "width": "100px",
        "height": "50px"
    }, 1000).removeClass('open')
    $(this).removeClass('tile_open').addClass('tile');//<-- This was my try to get it to work

});

Answer 1

The main problem of your script is that when you click the blue img it sets the original position and that's fine.

BUT If you click it again when it's big, it sets it again and THAT'S WRONG.

That's wrong because you store the position in those vars BEFORE you check if the div is actually already full screen or not

DEMO

So you have to change this:

$(".tile").on("click", function (e) { 
var pos= $(this).position();
     posL = $(this).css('left'),
     posT = $(this).css('top');

e.stopPropagation();
if(!$(this).hasClass('open') ) {

to this

$(".tile").on("click", function (e) { 
e.stopPropagation();
if(!$(this).hasClass('open') ) {
    var pos= $(this).position();
     posL = $(this).css('left'),
     posT = $(this).css('top');

And it's only the main problem. You also need to increase the element z-index when it gets full page and decrease it when it goes to the original state, or it'll stay under the other blue divs. Check my demo. In my demo i also put margin:0 to the body ( just to be more precise in the animation ) and used this

var pos= $(this).offset();
     posL = pos.left,
     posT = pos.top;

instead of this

var pos= $(this).position();
     posL = $(this).css('left'),
     posT = $(this).css('top');

Just to be more precise again. ( I don't know the full structure of your page and offset it's better because offset the position of the element relatively to the document )

Answer 2

In your example it is needed to do the following,

1.restore the class name value by properly removing tile_open

2.use offset() function to retrieve the top position

http://jsfiddle.net/2jnM2/

var posL , posT;

$(".tile").on("click", function (e) { 
    var pos= $(this).position();
         posL = $(this).css('left'),
         //posT = $(this).css('top');
             posT = $(this).offset().top;

    e.stopPropagation();
    if(!$(this).hasClass('open') ) {
        $(this).animate({
            "top": pos.top - pos.top,
            "left":pos.left - pos.left,
            "width": "100%",
            "height": "100%"
        }, 1000).addClass('open')
        $(this).removeClass('tile').addClass('tile_open'); //<-- This was my try to get it to work
    }


});



$(".close").on("click", function (e) {
    e.stopPropagation();
    $(this).parent().stop().animate({
        "left" : posL,
        "top" : posT,
        "width": "100px",
        "height": "50px"
    }, 1000).removeClass('open').removeClass('tile_open').addClass('tile');//<-- This was my try to get it to work

});

Answer 3

Your problem is scope. When you click the first picture, it opens and stores the x, y, but when you click the next picture, it overwrites the previous x, y coordinates so you need to change the scope of your values.

Here's an example of your JS properly scoped. http://jsfiddle.net/Nemesis02/2Zx3m/23/

$(".tile").on("click", function (e) { 
    var pos= $(this).position(),
        posL = $(this).css('left'), posT = $(this).css('top');

    var closeFunction = function (e) {
        e.stopPropagation();
        $(this).parent().stop().animate({
            "left" : posL,
            "top" : posT,
            "width": "100px",
            "height": "50px"
        }, 1000).removeClass('open')
        $(this).removeClass('tile_open').addClass('tile');//<-- This was my try to get it to work
        $(this).unbind('close', closeFunction)
    };

    e.stopPropagation();
    if(!$(this).hasClass('open') ) {
        $(this).animate({
            "top": pos.top - pos.top,
            "left":pos.left - pos.left,
            "width": "100%",
            "height": "100%"
        }, 1000).addClass('open')
        $(this).removeClass('tile').addClass('tile_open'); //<-- This was my try to get it to work
        $(this).find(".close").on("click", closeFunction);
    }


});

Answer 4

You could try storing the position data on each image and then retrieve it from that image later:

    $(".tile").on("click", function (e) { 
    var $this = $(this),
        pos = $this.position();

    $this.data({
        posL: $this.css('left'),
        posT: $this.css('top')
    });

    e.stopPropagation();
    if(!$this.hasClass('open') ) {
        $this.animate({
            "top": pos.top - pos.top,
            "left":pos.left - pos.left,
            "width": "100%",
            "height": "100%"
        }, 1000).addClass('open')

    }

});



$(".close").on("click", function (e) {
    var $parent = $(this).parent();
    e.stopPropagation();
    $parent.stop().animate({
        "left" : $parent.data('posL'),
        "top" : $parent.data('posT'),
        "width": "100px",
        "height": "50px"
    }, 1000).removeClass('open');


});

FIDDLE