Difference between revisions of "Team:SYSU-MEDICINE"

Line 66: Line 66:
 
         .navbar-inverse .navbar-nav>li>a {
 
         .navbar-inverse .navbar-nav>li>a {
 
             color: #fff;
 
             color: #fff;
−
             font-weight:600;
+
             font-weight:bold;
 
         }
 
         }
 
         .navbar-inverse .navbar-nav>li>a:hover {
 
         .navbar-inverse .navbar-nav>li>a:hover {
 
             color: #999;
 
             color: #999;
−
             font-weight:600;
+
             font-weight:bold;
 
         }
 
         }
 
         .navbar-nav>li{
 
         .navbar-nav>li{
Line 279: Line 279:
 
         .index-content .img-container .my-icon{
 
         .index-content .img-container .my-icon{
 
             position:relative;
 
             position:relative;
−
             width: 70px;
+
             width: 60px;
−
             height: 70px;
+
             height: 60px;
  
 
         }
 
         }
Line 297: Line 297:
 
             width: 500px;
 
             width: 500px;
 
             top: 25px;
 
             top: 25px;
−
             left: 30px;
+
             left: 25px;
−
             z-index: 1;
+
             z-index: 10;
 
         }
 
         }
 
         .index-content .img-container .my-card>img{
 
         .index-content .img-container .my-card>img{
 
             width: 100%;
 
             width: 100%;
−
            z-index: 1;
 
 
         }
 
         }
 +
        .index-content .img-container .my-card>.card-text{
 +
            position: relative;
 +
            left: 100px;
 +
            top: -72px;
  
 +
        }
 +
        .index-content .img-container .my-card>.card-text>a{
 +
            font-size: 20px;
 +
            color: dodgerblue;
 +
        }
 
         #icon-1{
 
         #icon-1{
 +
            left: 550px;
 +
            top: 110px;
 +
        }
 +
        #icon-2{
 +
            left: 20px;
 +
            top: 120px;
 +
        }
 +
        #icon-3{
 +
            left: 20px;
 +
            top: 120px;
 +
        }
 +
        #icon-4{
 +
            left: 20px;
 +
            top: 120px;
 +
        }
 +
        #icon-5{
 
             left: 550px;
 
             left: 550px;
 
             top: 100px;
 
             top: 100px;
 
         }
 
         }
−
 
+
        #icon-6{
 +
            left: 800px;
 +
            top: 530px;
 +
        }
 +
        #icon-7{
 +
            left: 480px;
 +
            top: 820px;
 +
        }
 +
        #icon-8{
 +
            left: 40px;
 +
            top: 730px;
 +
        }
 
     </style>
 
     </style>
 
     <script type="text/javascript">
 
     <script type="text/javascript">
Line 351: Line 386:
 
             });
 
             });
 
//            card display
 
//            card display
−
//            var containerTop = $(".img-container").offset().top;
+
            var containerTop = $(".img-container").offset().top;
−
//            var containerLeft= $(".img-container").offset().left;
+
            var containerLeft= $(".img-container").offset().left;
−
//            for (var i = 1; i <= 1; ++i) {
+
            var iconToCard = [];
−
//                var icon = $("#icon-" + i),
+
            for (var i = 1; i <= 8; ++i) {
−
//                        card = $("#card-" + i),
+
                var icon = $("#icon-" + i),
−
//                        left,
+
                        card = $("#card-" + i),
−
//                        top;
+
                        left,
−
//                if (typeof icon === "undefined") continue;
+
                        top;
−
//                left = icon.offset().left + icon.width() - containerLeft;
+
                iconToCard.push(card);
−
//                top = icon.offset().top - containerTop;
+
                left = icon.offset().left + icon.width() - containerLeft;
−
//                console.log("left: "+left+" top: "+top);
+
                top = icon.offset().top - containerTop;
−
//                card.css("left", left);
+
                console.log("left: "+left+" top: "+top);
−
//                card.css("top", top);
+
                if (left > 700) {
−
//            }
+
                    console.log(card);
 +
                    card.css("left", "auto");
 +
                    card.css("right", "470");
 +
                }
 +
            }
 
             $(".my-icon").mouseenter(function() {
 
             $(".my-icon").mouseenter(function() {
 
                 var id = $(this).attr("id");
 
                 var id = $(this).attr("id");
−
                 var num = id.split("-")[1];
+
                 var num = parseInt(id.split("-")[1]);
−
                 $("#card-"+num).css("display", "block");
+
                 $(this).children("img").css("z-index", "20");
 +
                iconToCard[num-1].css("display", "block");
 
             });
 
             });
 
             $(".my-icon").mouseleave(function() {
 
             $(".my-icon").mouseleave(function() {
 
                 var id = $(this).attr("id");
 
                 var id = $(this).attr("id");
−
                 var num = id.split("-")[1];
+
                 var num = parseInt(id.split("-")[1]);
−
                 $("#card-"+num).css("display", "none");
+
                 $(this).children("img").css("z-index", "2");
 +
                iconToCard[num-1].css("display", "none");
 
             });
 
             });
 
         });
 
         });
Line 535: Line 576:
 
                 <img src="https://static.igem.org/mediawiki/2016/6/68/T--SYSU-MEDICINE--home-Card1.png">
 
                 <img src="https://static.igem.org/mediawiki/2016/6/68/T--SYSU-MEDICINE--home-Card1.png">
 
             </div>
 
             </div>
−
 
+
        </div>
 +
        <div class="my-icon" id="icon-2">
 +
            <img src="https://static.igem.org/mediawiki/2016/7/77/T--SYSU-MEDICINE--home-Button2.png">
 +
            <div class="my-card" id="card-2">
 +
                <img src="https://static.igem.org/mediawiki/2016/8/82/T--SYSU-MEDICINE--home-Card2.png">
 +
            </div>
 +
        </div>
 +
        <div class="my-icon" id="icon-3">
 +
            <img src="https://static.igem.org/mediawiki/2016/b/b5/T--SYSU-MEDICINE--home-Button3.png">
 +
            <div class="my-card" id="card-3">
 +
                <img src="https://static.igem.org/mediawiki/2016/e/ef/T--SYSU-MEDICINE--home-Card3.png">
 +
            </div>
 +
        </div>
 +
        <div class="my-icon" id="icon-4">
 +
            <img src="https://static.igem.org/mediawiki/2016/0/0e/T--SYSU-MEDICINE--home-Button4.png">
 +
            <div class="my-card" id="card-4">
 +
                <img src="https://static.igem.org/mediawiki/2016/b/b9/T--SYSU-MEDICINE--home-Card4.png">
 +
            </div>
 +
        </div>
 +
        <div class="my-icon" id="icon-5">
 +
            <img src="https://static.igem.org/mediawiki/2016/d/d3/T--SYSU-MEDICINE--home-Button5.png">
 +
            <div class="my-card" id="card-5">
 +
                <img src="https://static.igem.org/mediawiki/2016/2/2f/T--SYSU-MEDICINE--home-Card5.png">
 +
            </div>
 +
        </div>
 +
        <div class="my-icon" id="icon-6">
 +
            <img src="https://static.igem.org/mediawiki/2016/e/e6/T--SYSU-MEDICINE--home-Button6.png">
 +
            <div class="my-card" id="card-6">
 +
                <img src="https://static.igem.org/mediawiki/2016/d/d6/T--SYSU-MEDICINE--home-Card6.png">
 +
                <span class="card-text"><a href="#">Click to go to the details page ></a></span>
 +
            </div>
 +
        </div>
 +
        <div class="my-icon" id="icon-7">
 +
            <img src="https://static.igem.org/mediawiki/2016/e/e6/T--SYSU-MEDICINE--home-Button7.png">
 +
            <div class="my-card" id="card-7">
 +
                <img src="https://static.igem.org/mediawiki/2016/d/d3/T--SYSU-MEDICINE--home-Card7.png">
 +
            </div>
 +
        </div>
 +
        <div class="my-icon" id="icon-8">
 +
            <img src="https://static.igem.org/mediawiki/2016/b/ba/T--SYSU-MEDICINE--home-Button8.png">
 +
            <div class="my-card" id="card-8">
 +
                <img src="https://static.igem.org/mediawiki/2016/b/b9/T--SYSU-MEDICINE--home-Card8.png">
 +
            </div>
 
         </div>
 
         </div>
  

Revision as of 05:56, 13 October 2016

MSCavalry

-----MSCs of
next generation

Inflammatory diseases are an increasing cause of disability and even fatality. Currently, apart from common treatments, MSCs therapy is a promising candidate for curing inflammatory diseases. However, intravascular injected MSCs are criticized for its low homing efficiency and ambiguous distribution in human body.

This year, MSCavalry: MSCs of next generation is coming. SYSU-MEDICINE decide to engineer a set of MSCs (homo sapiens) with higher accuracy and we hope that our project can pave the way for future MSCs clinical application.