Difference between revisions of "Team:Tec-Monterrey/sandboxDavid"

m
 
(32 intermediate revisions by one other user not shown)
Line 458: Line 458:
 
         <div id="bacteria-nadando">
 
         <div id="bacteria-nadando">
 
         </div>
 
         </div>
−
 
 
     </div> <!-- scroll section ends -->
 
     </div> <!-- scroll section ends -->
  
Line 466: Line 465:
 
             width: 100%;
 
             width: 100%;
 
             height: auto;
 
             height: auto;
−
            background-color: navajowhite;
 
 
         }
 
         }
 
         #outer-dropzone {
 
         #outer-dropzone {
−
             height: 70vw;
+
             height: 60vw;
−
             width: 70vw;
+
             width: 60vw;
 
             left: 30vw;
 
             left: 30vw;
 
             touch-action: none;
 
             touch-action: none;
−
            background-color: aqua;
 
 
         }
 
         }
 
      
 
      
Line 491: Line 488:
 
         .drop-target {
 
         .drop-target {
 
             background-color: #29e;
 
             background-color: #29e;
−
            border-color: #fff;
 
 
             border-style: solid;
 
             border-style: solid;
 
         }
 
         }
Line 499: Line 495:
 
             height: 10vh;
 
             height: 10vh;
 
             width: 10vh;
 
             width: 10vh;
−
 
+
             z-index: 50;
−
             color: #fff;
+
−
            /*background-color: #29e;*/
+
−
            border: solid 2px #fff;
+
  
 
             -webkit-transform: translate(0px, 0px);
 
             -webkit-transform: translate(0px, 0px);
Line 515: Line 508:
 
             width: 100%;
 
             width: 100%;
 
             border-radius: 50%;
 
             border-radius: 50%;
 +
            z-index: 50;
 
         }
 
         }
  
Line 520: Line 514:
 
             color: #000;
 
             color: #000;
 
             /*background-color: #4e4;*/
 
             /*background-color: #4e4;*/
 +
            z-index: 50;
 
         }
 
         }
 
          
 
          
−
        #moleculeHolderLeft {
 
−
            height: 70vw;
 
−
            width: 10vw;
 
−
            position: relative;
 
−
            background-color: blue;
 
−
        }
 
−
       
 
−
        #moleculeHolderRight {
 
−
            height: 70vw;
 
−
            width: 10vw;
 
−
            position: relative;
 
−
            background-color: pink;
 
−
        }
 
 
          
 
          
 
         #backgroundHolder {
 
         #backgroundHolder {
−
             width: 70vw;
+
             width: 60vw;
−
             height: 70vw;
+
             height: 60vw;
 
             position: relative;
 
             position: relative;
 
             z-index: 1;
 
             z-index: 1;
Line 551: Line 533:
 
          
 
          
 
         #plasmidHolder {
 
         #plasmidHolder {
−
             width: 70vw;
+
             width: 60vw;
−
             height: 70vw;
+
             height: 60vw;
 
             position: absolute;
 
             position: absolute;
 
             z-index: 3;
 
             z-index: 3;
Line 565: Line 547:
 
          
 
          
 
         #colorsWrapper {
 
         #colorsWrapper {
−
             width: 80vw;
+
             width: 60vw;
−
             height: 80vw;
+
             height: 60vw;
 
             position: absolute;
 
             position: absolute;
 
             z-index: 2;
 
             z-index: 2;
Line 618: Line 600:
  
  
 +
        <div style="height: 10vh; width: 100%; background-color: black;"><p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">DRAG AND DROP!</p></div>
 +
        <div id="dropzoneWrapper" style="background-color: black">
 +
            <div id="gifDiv" style="height: 60vw; width: 60vw; background-color: black; position: absolute; z-index: 6; left: 20vw;">
 +
                <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Tec-Monterrey--giv_v3.gif" height="100%" width="100%">
 +
            </div>
 +
            <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; left: 0; ">
 +
                <div style="background-color: black; height: 50%; text-align: center;">
 +
                    <br>
 +
                    <br>
 +
                    <div id="alan" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tec-Monterrey--Foto_Alan.jpg"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pb</p>
 +
                </div>
 +
                <div style="background-color: black; height: 50%; text-align: center;">
 +
                    <div id="esteban" class="drag-drop" style="margin: auto;"> <img src="https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Foto_Esteban.jpg"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NO3</p>
 +
                </div>
  
−
<div id="dropzoneWrapper">
 
−
    <div style="height: 70vw; width: 15vw; background-color: orange; position: absolute; left: 0;">
 
−
        <div id="alan" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tec-Monterrey--Foto_Alan.jpg"> </div>
 
−
        <div id="esteban" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Foto_Esteban.jpg"> </div>
 
−
    </div>
 
−
    <div style="height: 70vw; width: 70vw; background-color: aquamarine; position: absolute; left: 15vw;">
 
−
    <div id="outer-dropzone" class="dropzone">
 
−
        <div id="backgroundHolder">
 
−
            <div id="colorsWrapper">
 
−
                <div id="color1"></div>
 
−
                <div id="color2"></div>
 
−
                <div id="color3"></div>
 
−
                <div id="color4"></div>
 
 
             </div>
 
             </div>
−
             <div id="plasmidHolder" style="background-image:url('https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png')">
+
             <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; right: 0;">
 +
                <div style="background-color: black; height: 50%; text-align: center;">
 +
                    <br>
 +
                    <br>
 +
                    <div id="acebae" class="drag-drop" style="margin: auto"> <img src="https://static.igem.org/mediawiki/2018/2/2f/T--Tec-Monterrey--Foto_David.jpg"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PO4</p>
 +
                </div>
 +
                <div style="background-color: black; height: 50%; text-align: center;">
 +
                    <div id="sofi" class="drag-drop" style="margin:auto"> <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tec-Monterrey--Foto_Sofia.jpg"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;As</p>
 +
                </div>
 +
            </div>
 +
            <div style="height: 60vw; width: 60vw; background-color: black; position: absolute; left: 20vw;">
 +
                <div id="outer-dropzone" class="dropzone">
 +
                    <div id="backgroundHolder">
 +
                        <div id="colorsWrapper">
 +
                            <div id="color1"></div>
 +
                            <div id="color2"></div>
 +
                            <div id="color3"></div>
 +
                            <div id="color4"></div>
 +
                        </div>
 +
                        <div id="plasmidHolder" style="background-image:url('https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png')">
 +
                        </div>
 +
                    </div>
 +
                </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
    </div>
 
−
    </div>
 
−
    <div style="height: 70vw; width: 15vw; background-color: yellow; position: absolute; left: 85vw;">
 
−
        <div id="acebae" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/2/2f/T--Tec-Monterrey--Foto_David.jpg"> </div>
 
−
        <div id="sofi" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tec-Monterrey--Foto_Sofia.jpg"> </div>
 
−
    </div>
 
−
</div>
 
 
         <script>
 
         <script>
 +
           
 +
            $(document).on('scroll', function() {
 +
                if($(this).scrollTop()>=$('#gifDiv').position().top){
 +
                    $("#gifDiv").css("background-color: green;");
 +
                    setTimeout(function(){ $("#gifDiv").fadeOut(); }, 200);
 +
                }
 +
            });
 +
               
 +
                       
 +
        document.addEventListener("DOMContentLoaded", function(event) {
 
             // target elements with the "draggable" class
 
             // target elements with the "draggable" class
 
         interact('.draggable')
 
         interact('.draggable')
Line 651: Line 663:
 
                 // keep the element within the area of it's parent
 
                 // keep the element within the area of it's parent
 
                 restrict: {
 
                 restrict: {
−
                     restriction: "parent",
+
                     restriction: "#dropzoneWrapper",
 
                     endOnly: true,
 
                     endOnly: true,
 
                     elementRect: {
 
                     elementRect: {
Line 763: Line 775:
 
                 inertia: true,
 
                 inertia: true,
 
                 restrict: {
 
                 restrict: {
−
                     restriction: "parent",
+
                     restriction: "#dropzoneWrapper",
 
                     endOnly: true,
 
                     endOnly: true,
 
                     elementRect: {
 
                     elementRect: {
Line 777: Line 789:
 
                 onmove: dragMoveListener,
 
                 onmove: dragMoveListener,
 
             });
 
             });
 +
        });
 
     </script>
 
     </script>
 
     </section>
 
     </section>
Line 819: Line 832:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
 +
    <div class="slideshow">
 +
        <div class='right-arrow-pane'>
 +
            <div class='arrow'>
 +
                <div></div>
 +
            </div>
 +
        </div>
 +
        <div class='left-arrow-pane'>
 +
            <div class='arrow'>
 +
                <div></div>
 +
            </div>
 +
        </div>
 +
        <div class='bubbles'>
 +
        </div>
 +
        <div class='pauseBtn'>
 +
            <div class='bars'>
 +
                <div></div>
 +
                <div></div>
 +
            </div>
 +
            <div class='tri'>
 +
                <div></div>
 +
            </div>
 +
        </div>
 +
        <div class='content'>
 +
            <div class='slide'>
 +
                <video autoplay loop muted>
 +
                    <source src="https://static.igem.org/mediawiki/2018/4/45/T--Tec-Monterrey--HP_3_pH.mp4" type="video/mp4">
 +
                </video>
 +
            </div>
 +
            <div class='slide'>
 +
                <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg" />
 +
            </div>
 +
            <div class='slide'>
 +
                <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg" />
 +
            </div>
 +
            <div class='slide'>
 +
                <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg" />
 +
            </div>
 +
        </div>
 +
    </div>
  
 
         <script>
 
         <script>
Line 913: Line 966:
 
                 slideVideo();
 
                 slideVideo();
 
             });
 
             });
 +
           
 +
           
 
         </script>
 
         </script>
 
         <script type="text/javascript" src="https://2018.igem.org/Team:Purdue/JQuery/SlideShow?
 
         <script type="text/javascript" src="https://2018.igem.org/Team:Purdue/JQuery/SlideShow?

Latest revision as of 01:29, 18 October 2018


E. coding
Tec-Monterrey

DRAG AND DROP!



     Pb

     NO3



     PO4

     As

Contact Us

Av. Eugenio Garza Sada 2501

64849 Monterrey, Mexico

Sponsors