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

});

so you want that>> when clicking X, it must return to same place? — Muath
– Muath, Commented Dec 2, 2013 at 20:17
Yes its doing this already. the problem is when you click the Opend blue box again it dose not go to the original position — Jan Ackermann
– Jan Ackermann, Commented Dec 2, 2013 at 20:20
So click a blue box with a bus. then it opens. then click the opend think again. then close it with the X then there is the bug hope you understand it — Jan Ackermann
– Jan Ackermann, Commented Dec 2, 2013 at 20:23

Nemesis02 · Accepted Answer · 2013-12-02 20:30:58Z

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);
    }


});

answered Dec 2, 2013 at 20:30

Nemesis02

2922 silver badges9 bronze badges

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

1 Comment

Jan Ackermann Over a year ago

thanks this works perfektly fine i did not accept your becouse the other guy fixed another bug but iwill mark that as a useful answer

Kevin Cittadini · Accepted Answer · 2013-12-02 20:27:04Z

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 )

Thanks works perfekt you even fixed a bug i did not ask for. Thanks for your work

melc · Accepted Answer · 2013-12-02 20:23:23Z

1

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

});

answered Dec 2, 2013 at 20:23

melc

11.7k3 gold badges39 silver badges42 bronze badges

1 Comment

Jan Ackermann Over a year ago

this dose not work for me maybe you did not understod what i meant

adamdama · Accepted Answer · 2013-12-02 20:38:53Z

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

Collectives™ on Stack Overflow

Jquery remove/add CSS class

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related