|
|
| (39 גרסאות ביניים של 2 משתמשים אינן מוצגות) |
| שורה 1: |
שורה 1: |
| − | <html><head> | + | <div class="container" id="{{{2|}}}"> |
| − | <meta http-equiv="content-type" content="text/html; charset=UTF-8">
| + | {{{1}}} |
| − | <title>Shapeshift Simple - jsFiddle demo</title>
| |
| − |
| |
| − | <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
| |
| − | <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
| |
| − |
| |
| − | <link rel="stylesheet" type="text/css" href="/css/result-light.css">
| |
| − |
| |
| − |
| |
| − | <script type="text/javascript" src="http://mcpants.github.io/jquery.shapeshift/core/jquery.shapeshift.min.js"></script>
| |
| − |
| |
| − |
| |
| − | <style type="text/css">
| |
| − | .container {
| |
| − | border: 0px dashed #ccc;
| |
| − | position: relative;
| |
| − | max-width:650px;
| |
| − | }
| |
| − | | |
| − | .container > div {
| |
| − | background: transparent;
| |
| − | height: 150px;
| |
| − | position: absolute;
| |
| − | width: 150px;
| |
| − | }
| |
| − | | |
| − | .container > div[data-ss-colspan='4'] { width: 150px; }
| |
| − | .container > div[data-ss-colspan='2'] { width: 309px; height:309px; background: #CCC;}
| |
| − | | |
| − | .container .ss-placeholder-child {
| |
| − | background: #000;
| |
| − | opacity:0.1; a
| |
| − | } | |
| − | | |
| − | /* flip */
| |
| − | .panel {
| |
| − | margin: 0 auto;
| |
| − | width: 130px;
| |
| − | height: 130px;
| |
| − | position: relative;
| |
| − | font-size: .8em;
| |
| − | -webkit-perspective: 600px;
| |
| − | -moz-perspective: 600px;
| |
| − | } | |
| − | .panel .front {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | z-index: 900;
| |
| − | width: inherit;
| |
| − | height: inherit;
| |
| − | text-align: center;
| |
| − | } | |
| − | .panel .back {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | z-index: 800;
| |
| − | width: inherit;
| |
| − | height: inherit;
| |
| − | }
| |
| − | | |
| − | .panel {
| |
| − | margin: 0 auto;
| |
| − | width: 130px;
| |
| − | height: 130px;
| |
| − | position: relative;
| |
| − | font-size: .8em;
| |
| − | -webkit-perspective: 600px;
| |
| − | -moz-perspective: 600px;
| |
| − | }
| |
| − | /* -- make sure to declare a default for every property that you want animated -- */
| |
| − | /* -- general styles, including Y axis rotation -- */
| |
| − | .panel .front {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | z-index: 900;
| |
| − | width: inherit;
| |
| − | height: inherit;
| |
| − | text-align: center;
| |
| − | -webkit-transform: rotateX(0deg) rotateY(0deg);
| |
| − | -webkit-transform-style: preserve-3d;
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | -moz-transform: rotateX(0deg) rotateY(0deg);
| |
| − | -moz-transform-style: preserve-3d;
| |
| − | -moz-backface-visibility: hidden;
| |
| − | /* -- transition is the magic sauce for animation -- */
| |
| − | -o-transition: all .4s ease-in-out;
| |
| − | -ms-transition: all .4s ease-in-out;
| |
| − | -moz-transition: all .4s ease-in-out;
| |
| − | -webkit-transition: all .4s ease-in-out;
| |
| − | transition: all .4s ease-in-out;
| |
| − | }
| |
| − | .panel.flip .front {
| |
| − | z-index: 900;
| |
| − | -webkit-transform: rotateY(180deg);
| |
| − | -moz-transform: rotateY(180deg);
| |
| − | }
| |
| − | .panel .back {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | z-index: 800;
| |
| − | width: inherit;
| |
| − | height: inherit;
| |
| − | -webkit-transform: rotateY(-180deg);
| |
| − | -webkit-transform-style: preserve-3d;
| |
| − | -webkit-backface-visibility: hidden;
| |
| − |
| |
| − | -moz-transform: rotateY(-180deg);
| |
| − | -moz-transform-style: preserve-3d;
| |
| − | -moz-backface-visibility: hidden;
| |
| − | /* -- transition is the magic sauce for animation -- */
| |
| − | -o-transition: all .4s ease-in-out;
| |
| − | -ms-transition: all .4s ease-in-out;
| |
| − | -moz-transition: all .4s ease-in-out;
| |
| − | -webkit-transition: all .4s ease-in-out;
| |
| − | transition: all .4s ease-in-out;
| |
| − | }
| |
| − | .panel.flip .back {
| |
| − | z-index: 1000;
| |
| − | -webkit-transform: rotateX(0deg) rotateY(0deg);
| |
| − | -moz-transform: rotateX(0deg) rotateY(0deg);
| |
| − | }
| |
| − | | |
| − | #artitle {
| |
| − | | |
| − | background: #ccc;
| |
| − | background-repeat: no-repeat;
| |
| − | background-position: center center;
| |
| − | background-attachment:fixed;
| |
| − | height: 150px;
| |
| − | position: absolute;
| |
| − | width: 150px;
| |
| − | }
| |
| − | | |
| − | #artitle2 {
| |
| − | | |
| − | vertical-align:middle;
| |
| − | background: #CCC;
| |
| − | height: 150px;
| |
| − | position: absolute;
| |
| − | width: 150px;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | | |
| − | | |
| − | <script type="text/javascript">//<![CDATA[
| |
| − | $(window).load(function(){
| |
| − | $(".container").shapeshift({
| |
| − | minColumns: 4
| |
| − | });
| |
| − | | |
| − | $(document).ready(function(){
| |
| − | // set up hover panels
| |
| − | // although this can be done without JavaScript, we've attached these events
| |
| − | // because it causes the hover to be triggered when the element is tapped on a touch device
| |
| − | $('.hover').hover(function(){
| |
| − | $(this).addClass('flip');
| |
| − | },function(){
| |
| − | $(this).removeClass('flip');
| |
| − | });
| |
| − | });
| |
| − | });//]]> | |
| − | | |
| − | </script>
| |
| − | | |
| − | | |
| − | </head>
| |
| − | <body></html>
| |
| − | <div class="container shapeshifted_container_v1xxq88h0k9 ui-droppable" style="height: 650px;">
| |
| − | | |
| − | <div class="hover panel ss-active-child" style="left: 10px; top: 10px;">
| |
| − | <div class="front">
| |
| − | <div class="pad">
| |
| − | <div id="artitle">המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="back">
| |
| − | <div class="pad"><div id="artitle2">{{:המשגה}}</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="hover panel ss-active-child" style="left: 170px; top: 10px;">
| |
| − | <div class="front">
| |
| − | <div class="pad">
| |
| − | <div id="artitle">המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="back">
| |
| − | <div class="pad"><div id="artitle2"> המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="hover panel ss-active-child" style="left: 330px; top: 10px;">
| |
| − | <div class="front">
| |
| − | <div class="pad">
| |
| − | <div id="artitle">המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="back">
| |
| − | <div class="pad"><div id="artitle2"> המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div><div data-ss-colspan="2" class="ss-active-child" style="left: 10px; top: 170px;"></div>
| |
| − | <div class="hover panel ss-active-child" style="left: 490px; top: 10px;">
| |
| − | <div class="front">
| |
| − | <div class="pad">
| |
| − | <div id="artitle">המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="back">
| |
| − | <div class="pad"><div id="artitle2"> המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="hover panel ss-active-child" style="left: 330px; top: 170px;">
| |
| − | <div class="front">
| |
| − | <div class="pad">
| |
| − | <div id="artitle">המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="back">
| |
| − | <div class="pad"><div id="artitle2"> המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="hover panel ss-active-child" style="left: 490px; top: 170px;">
| |
| − | <div class="front">
| |
| − | <div class="pad">
| |
| − | <div id="artitle">המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="back">
| |
| − | <div class="pad"><div id="artitle2"> המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="hover panel ss-active-child" style="left: 330px; top: 330px;">
| |
| − | <div class="front">
| |
| − | <div class="pad">
| |
| − | <div id="artitle">המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="back">
| |
| − | <div class="pad"><div id="artitle2"> המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="hover panel ss-active-child" style="left: 490px; top: 330px;">
| |
| − | <div class="front">
| |
| − | <div class="pad">
| |
| − | <div id="artitle">המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="back">
| |
| − | <div class="pad"><div id="artitle2"> המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div> <div class="hover panel ss-active-child" style="left: 10px; top: 489px;">
| |
| − | <div class="front">
| |
| − | <div class="pad">
| |
| − | <div id="artitle">המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="back">
| |
| − | <div class="pad"><div id="artitle2"> המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="hover panel ss-active-child" style="left: 170px; top: 489px;">
| |
| − | <div class="front">
| |
| − | <div class="pad">
| |
| − | <div id="artitle">המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="back">
| |
| − | <div class="pad"><div id="artitle2"> המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="hover panel ss-active-child" style="left: 330px; top: 490px;">
| |
| − | <div class="front">
| |
| − | <div class="pad">
| |
| − | <div id="artitle">המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="back">
| |
| − | <div class="pad"><div id="artitle2"> המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="hover panel ss-active-child" style="left: 490px; top: 490px;">
| |
| − | <div class="front">
| |
| − | <div class="pad">
| |
| − | <div id="artitle">המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="back">
| |
| − | <div class="pad"><div id="artitle2"> המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה המשגה</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | | |
| | </div> | | </div> |
| − | | + | __NOTOC__ |
| − |
| |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | </body>
| |