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
});
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
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 )
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments