JSFiddle - React, Tailwind, and code Playground

by raam86

HTML

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    </head>
    <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>
        
        <div id="hiddenContainer">
            <div id="deck">
                <div id="card1"></div>
                <div id="card2"></div>
            </div>
        </div>
        
        <div id="tempHiddenContainer">
        </div>
        
        </body>
</html>

CSS

#pack1{
    margin-left: 20px;
    margin-top: 20px;
    height: 193px;
    width: 127px;
    background-image: url(http://tmp.mattfellows.me.uk/images/image1.png);
    background-size: 100% 100%;
    float: left;
    clear: both;
    -webkit-transfrom:scale(2.5);

    poistion:inherit;
}

#pack2{
    margin-right: 20px;
    margin-top: 20px;
    height: 193px;
    width: 127px;
    background-image: url(http://tmp.mattfellows.me.uk/images/image2.png);
    background-size: 100% 100%;
    float: right;

    poistion:static;
}

#pack3{
    margin-left: 20px;
    margin-top: 20px;
    height: 193px;
    width: 127px;
    background-image: url(http://tmp.mattfellows.me.uk/images/image3.png);
    background-size: 100% 100%;
    float: left;
    clear: both;
   
    position:static;
}

#pack4{
    margin-right: 20px;
    margin-top: 20px;
    height: 193px;
    width: 127px;
    background-image: url(http://tmp.mattfellows.me.uk/images/image4.png);
    background-size: 100% 100%;
    float: right;
  
}
#body,
.ui-page {
background-image: url(http://tmp.mattfellows.me.uk/images/bg.png);
background-size: auto 100%;
background-repeat: repeat-x;
}

#container {
margin: auto;
width: 310px;
height: 568px;
}

#hiddenContainer, #tempHiddenContainer {
    display: none;
}

JavaScript

$(document).ready(function() {
    // Set a timeout...
    setTimeout(function() {
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);

    $(".cardPack").each(function(i, cardPack) {
        var currentId = $(cardPack).attr("id");
        $(cardPack).click(function() {
            var left = $(cardPack).position().left;
            var top = $(cardPack).position().top;
            var width = $(cardPack).width();
            var height = $(cardPack).height();
            var contwidth = $("#container").width();
            var contheight = $("#container").height();
            console.log(left + ":" + top + ":" + contwidth + ":" + height);
            var oldPos = $(cardPack).position();
            console.log($(cardPack).position());
            $(cardPack).css("position", "absolute");
            $(cardPack).css("left", oldPos.left);
            $(cardPack).css("top", oldPos.top);
            $(cardPack).animate({
                width: '50%',
                height: '50%',

            }, 700, function() {
                $(cardPack).animate({
                    left: (contwidth - width * 1.5) / 2,
                    top: (contheight - (height+height/2) * 1.5) / 2
                }, 300);
            });



            setTimeout(function() {
                $(".screenItem").each(function(i, elem) {
                    console.log(currentId);
                    if ($(elem).attr("id") != currentId) {
                        $(elem).css("-webkit-transition", "none");
                        $(elem).css("-moz-transition", "none");
                        $(elem).css("-o-transition", "none");
                        $(elem).css("-ms-transition", "none");
                        $(elem).css("transition", "none");
                        $(elem).css("visibility", "hidden");
                    }
                });
                $(cardPack).css("opacity", "0");
            }, 2000);
        });
    });
});