I have a series of divs on my page. Each div has a background image and is arranged in a grid formation. There are an abitrary number of divs on my page. The page is constrained to a size using <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I want to be able to click on a div, have it scale to a specific scale, and center.
My markup:
<body id="body">
<div id="container" style="position: relative">
<div id="pack1" class="screenItem cardPack"></div>
<div id="pack2" class="screenItem cardPack"></div>
<div id="pack3" class="screenItem cardPack"></div>
<div id="pack4" class="screenItem cardPack"></div>
</div>
</body>
my css:
#pack1{
margin-left: 20px;
margin-top: 20px;
height: 193px;
width: 127px;
background-image: url(../images/image1.png);
background-size: 100% 100%;
float: left;
clear: both;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#pack2{
margin-right: 20px;
margin-top: 20px;
height: 193px;
width: 127px;
background-image: url(../images/image2.png);
background-size: 100% 100%;
float: right;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#pack3{
margin-left: 20px;
margin-top: 20px;
height: 193px;
width: 127px;
background-image: url(../images/image3.png);
background-size: 100% 100%;
float: left;
clear: both;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#pack4{
margin-right: 20px;
margin-top: 20px;
height: 193px;
width: 127px;
background-image: url(../images/comingSoon.png);
background-size: 100% 100%;
float: right;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#body,
.ui-page {
background-image: url(../images/bg.png);
background-size: auto 100%;
background-repeat: repeat-x;
}
#container {
margin: auto;
width: 310px;
height: 568px;
}
I have a fudge which almost works:
$(cardPack).click(function() {
var left = $(cardPack).position().left;
var top = $(cardPack).position().top;
$(cardPack).css("-webkit-transform", "scale(2.5,2.5)");
$(cardPack).css("-webkit-transform-origin", (3*(left/4)) + " " + (3*(top/4)));
});
But I think that's more of a coincidence and luck. My brain is not working to the point where I can workout where to set the transform-origin
so that the image will end up in the center of the screen, regardless of its start point.
I am happy to consider alternatives to transform-origin
to make this happen.
EDIT: A "not quite acting the same as it does locally" jsfiddle: http://jsfiddle.net/a7Cks/9/
.offset
rather than.position
as that is the offset relative to the document, whereas.position
is relative to the parent. – Explosion Pills Dec 5 '12 at 14:58