Difference between revisions of "Team:UCSC/Breakdown"

Line 333: Line 333:
 
@keyframes gear_2 { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } }  
 
@keyframes gear_2 { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } }  
  
 +
    .gear-container {
 +
        position: relative;
 +
        height: 630px;
 +
    }
 +
    .gear-node {
 +
        width: 180px;
 +
        height: 180px;
 +
        position: absolute;
 +
        cursor: pointer;
 +
    }
 +
    .gear-node .gear {
 +
        width: 180px;
 +
        height: 180px;
 +
    }
 +
    .profile-cont {
 +
        display: none;
 +
    }
 +
    .profile-cont.active {
 +
        display: block;
 +
    }
  
 
</style>
 
</style>
Line 392: Line 412:
  
 
<!-- team gear code -->
 
<!-- team gear code -->
−
<div align="left" >
+
<div class="container">
−
<div id="a" style="width: 180px; height: 180px;"><img class="a" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" style="position: realtive; top: 0px; left: -2px;"/></div>
+
    <div class="row">
−
<div id="b" class="right"></div>
+
        <div class="col-md-6 gear-container">
−
<div id="c"><img class="c" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" style="position: relative; top: -38px; left: 105px;" /></div>
+
            <div class="gear-node" data-node="1" style="top: 0px; left: -2px;"><img class="gear" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" /></div>
−
<div id="d" class="right"></div>
+
            <div class="gear-node" data-node="2" style="top: 38px; left: 105px;"><img class="gear" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" /></div>
−
<div id="e"><img class="a" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" style="position: relative; top: -55px; left: 170px;"/></div>
+
            <div class="gear-node" data-node="3" style="top: 55px; left: 170px;"><img class="gear" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" /></div>
−
<div id="f" class="right"></div>
+
            <div class="gear-node" data-node="4" style="top: 215px; left: 5px;"><img class="gear" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" /></div>
−
<div id="g"><img class="c" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" style="position: relative; top: -215px; left: -5px;" /></div>
+
            <div class="gear-node" data-node="5" style="top: 228px; left: 15px;"><img class="gear" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" /></div>
−
<div id="h" class="right"></div>
+
            <div class="gear-node" data-node="6" style="top: 385px; left: 185px;"><img class="gear" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" /></div>
−
<div id="i"><img class="a" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" style="position: relative; top: -228px; left: 15px;"/></div>
+
            <div class="gear-node" data-node="7" style="top: 630px; left: 340px;"><img class="gear" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" /></div>
−
<div id="j" class="right"></div>
+
        </div>
−
<div id="k" ><img class="c" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" style="position: relative; top: -385px; left: 185px;" /></div>
+
        <div class="col-md-6">
−
<div id="l" class="right"></div>
+
            <div class="profile-cont" data-node="1">
−
<div id="m"><img class="a" src="https://static.igem.org/mediawiki/2015/9/9c/UCSC_Profile_Gear.png" style="position: relative; top: -630px; left: 340px;" /></div>
+
                test 1
−
<div id="n" class="right"></div>
+
            </div>
 +
            <div class="profile-cont" data-node="2">
 +
                test 2
 +
            </div>
 +
            <div class="profile-cont" data-node="3">
 +
                test 3
 +
            </div>
 +
            <div class="profile-cont" data-node="4">
 +
                test 4
 +
            </div>
 +
            <div class="profile-cont" data-node="5">
 +
                test 5
 +
            </div>
 +
            <div class="profile-cont" data-node="6">
 +
                test 6
 +
            </div>
 +
            <div class="profile-cont" data-node="7">
 +
                test 7
 +
            </div>
 +
        </div>
 +
    </div>
 
</div>
 
</div>
  
Line 451: Line 491:
 
</div>
 
</div>
 
</body>
 
</body>
−
 
+
<script>
 +
    console.log('hi');
 +
    jQuery(document).ready(function() {
 +
        jQuery('.gear-node').on('mouseover', function() {
 +
            jQuery('.profile-cont').removeClass('active');
 +
            jQuery('.profile-cont[data-node="' + jQuery(this).attr('data-node') + '"]').addClass('active');
 +
        });
 +
    });
 +
</script>
 
</html>
 
</html>

Revision as of 05:34, 15 September 2015

Breakdown


test 1
test 2
test 3
test 4
test 5
test 6
test 7