Difference between revisions of "Team:IIT Delhi/home"

 
(93 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
<html>
 
<html>
  
−
<style>
 
  
 +
<style>
  
−
/*--------------General end-----------------*/
 
  
−
/*--------------Global/content start----------------*/
 
−
#content { /*-- changes default wiki settings --*/
 
−
width: 100%;
 
−
height: 100%;
 
−
border: 0px;
 
−
background-color: #000;
 
−
margin: 0px;
 
−
padding: 0px;
 
  
−
}
 
  
  
−
/*--------------Global end------------------*/
 
  
  
−
body{
+
 
−
   margin:0;
+
#tourimg{
−
   padding:0;
+
   display:none;
−
}
+
   width:300px;
−
#wikiback{
+
   height:80px;
−
   width:100%;
+
   margin-top:2%;
−
   margin:0;
+
   margin-left:82.5%;
−
   padding: 0;
+
 
   position:absolute;
 
   position:absolute;
−
   z-index:-1;  
+
   z-index:9999;
 
}
 
}
  
−
#team{
+
ul.ldd_menu{
 +
  margin-top:-10px;
 +
        margin-left:15px;
 +
  padding:0;
 +
        position:absolute;
 +
  height:70px;
 +
        width:190px;
 +
  list-style:none;
 +
  font-family:Verdana, Geneva, sans-serif;
 +
        font-size:100%;
 +
  text-align: center;
 +
}
 +
 
 +
#spanimg{
 
   position:absolute;
 
   position:absolute;
−
   border:solid 2px white;
+
   margin-top:0%;
−
   border-radius:50px;
+
   margin-left:87%;
−
   margin-left:86.5%;
+
   height:15%;
−
   margin-top:3%;
+
   width:13%;
 +
  z-index:999;
 +
}
 +
ul.ldd_menu a{
 +
  text-decoration:none;
 +
}
 +
ul.ldd_menu > li{
 
   float:left;
 
   float:left;
−
   z-index:100;
+
   position:fixed;
−
   height:100px;
+
   width: 100%;
−
   width:100px;
+
   z-index: 9999;
 
}
 
}
−
#collaboration{
+
ul.ldd_menu > li > span{
 +
  float:right;
 +
  z-index:-1000;
 
   position:absolute;
 
   position:absolute;
−
   border:solid 2px white;
+
   margin-left:550px;
−
   border-radius:50px;
+
   width:190px;
−
   margin-left:90.5%;
+
   font-size:1px;
−
   margin-top:4%;
+
   color:green;
−
   float:left;
+
   opacity:0;
−
   z-index:100;
+
   background-color:white;
−
   height:100px;
+
   height:190px;
−
   width:100px;
+
       
 +
   line-height:50px;
 +
  cursor:default;
 +
  padding:0px 20px;
 +
  border-radius:0 0 0 190px;
 +
  text-shadow:0px 0px 1px #CCC;
 +
  }
  
 +
 +
.sub_wrap{
 +
  width: 2500px;
 +
  margin: 0 auto 0 auto;
 +
  background-color: #000;
 
}
 
}
−
#project{
+
 
 +
ul.ldd_menu ul{
 +
  list-style:none;
 +
  display: inline-block;
 +
  border-left:1px dotted #FFF;
 +
  margin-top: 20px;
 +
  margin-right: 0px;
 +
  margin-bottom: 10px;
 +
  margin-left: 20px;
 +
  padding-top: 10px;
 +
  padding-right: 5px;
 +
  padding-bottom: 10px;
 +
  padding-left: 10px;
 +
}
 +
 
 +
ul.ldd_menu .ldd_submenu{
 
   position:absolute;
 
   position:absolute;
−
   border:solid 2px white;
+
   top:50px;
−
  border-radius:50px;
+
   width:100%;
−
   margin-left:90.5%;
+
   display:none;
−
   margin-top:5%;
+
   opacity:0.90;
−
   float:left;
+
   font-size:10px;
−
   z-index:1;
+
   background-color: #fff;
−
   height:100px;
+
−
  width:100px;
+
 
}
 
}
−
#unknown1{
+
a.ldd_subfoot{
−
   border:solid 2px white;
+
   background-color:#f0f0f0;
−
   border-radius:50px;
+
   color:#444;
−
   margin-left:86.5%;
+
  display:block;
−
   margin-top:7%;
+
  clear:both;
−
   float:left;
+
  padding:15px 20px;
−
   z-index:1;
+
   font-family: Arial, serif;
−
   height:100px;
+
   font-size:10px;
−
   width:100px;
+
   text-shadow:0px 0px 1px #fff;
 +
   -moz-box-shadow:0px 0px 2px #777 inset;
 +
   -webkit-box-shadow:0px 0px 2px #777 inset;
 +
   -box-shadow:0px 0px 2px #777 inset;
 
}
 
}
−
#uk1{
+
 
−
   border:solid 2px white;
+
ul.ldd_menu ul li a{
−
  border-radius:50px;
+
   font-family: Arial, serif;
−
   margin-left:12.5%;
+
   font-size:12px;
−
   margin-top:3%;
+
   line-height:20px;
−
   float:left;
+
   color:#000;
−
   z-index:1;
+
   padding:1px 3px;
−
  height:100px;
+
}
−
   width:100px;
+
ul.ldd_menu ul li a:hover{
 +
   background:#FF3300;
 
}
 
}
−
#uk2{
 
−
  border:solid 2px white;
 
−
  border-radius:50px;
 
−
  margin-left:8.5%;
 
−
  margin-top:7%;
 
−
  float:left;
 
−
  z-index:1;
 
−
  height:100px;
 
−
  width:100px;
 
  
 +
li.ldd_heading a{
 +
  color:#fff !imporatant;
 
}
 
}
−
#uk3{
+
li.ldd_heading{
−
   border:solid 2px white;
+
   border:solid 1px black;
−
   border-radius:50px;
+
   border-radius:5px 0 8px 0;
−
   margin-left:11%;
+
   background-color:#0F93FC;
−
   margin-top:5%;
+
  font-family: Georgia, serif;
−
   float:left;
+
  color:white !important;
−
   z-index:1;
+
   margin-bottom:5px;
−
   height:100px;
+
   font-size: 13px;
−
   width:100px;
+
   font-style: italic;
 +
   color:#FF3300;
 +
  text-shadow:0px 0px 1px #B03E23;
 +
   padding:5px 0px 5px 0px;
 
}
 
}
  
−
#uk4{
+
 
−
  border:solid 2px white;
+
 
−
  border-radius:50px;
+
 
−
  margin-left:12.5%;
+
 
−
  margin-top:15%;
+
 
−
  float:left;
+
 
−
  z-index:1;
+
 
−
  height:100px;
+
 
−
  width:100px;
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/*--------------General end-----------------*/
 +
 
 +
/*--------------Global/content start----------------*/
 +
#content { /*-- changes default wiki settings --*/
 +
width: 100%;  
 +
height: 100%;
 +
border: 0px;
 +
margin: 0px;
 +
padding: 0px;
 +
 
 
}
 
}
−
.try{
+
 
−
   border:solid 2px red;
+
 
−
   margin-top:3%;
+
/*--------------Global end------------------*/
−
   margin-left:12.5%;
+
 
−
   margin-right:12.5%;
+
 
 +
body{
 +
   margin:0;
 +
   padding:0;
 +
   background-image:url("https://static.igem.org/mediawiki/2015/6/67/IITDwikipages_background.jpg");
 +
   background-size:100% 100%;
 +
 
 
}
 
}
−
#try1,#try2{
+
 
−
   border:solid 2px white;
+
.iconshome{
−
   border-radius:50px;
+
   position:absolute;
−
    float:left;
+
   width:7%;
−
   z-index:1;
+
  -webkit-transition: all 1s ease;
−
   height:100px;
+
   -moz-transition: all 1s ease;
−
   width:100px;
+
   -o-transition: all 1s ease;
 +
   transition all 1s ease:  
 
}
 
}
−
#try1{
+
.iconActive{
−
margin-right:70%;
+
  width:10%;
 
}
 
}
 +
 +
 
</style> <!-- End of CSS -->
 
</style> <!-- End of CSS -->
 
<body>
 
<body>
 +
  <div id="homeWrapper">
 +
    <div id="homeContent">
  
−
<header></header>
 
−
<div id="back" style="margin:0;padding:0;">
 
−
<div style="margin:0;padding:0;">
 
−
<img id="wikiback" src="https://static.igem.org/mediawiki/2015/c/c1/Wikiback.jpg">
 
−
                </div>
 
−
        </div> 
 
  
 +
 +
 +
 +
 +
 +
 +
 +
 +
<!--------------------------------code for site map-------------------------------->
 +
<!---------------TOUR CANCELLED------------------------->
 +
 +
<div id="tour">
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/tour"><img id="tourimg" src="https://static.igem.org/mediawiki/2015/1/11/IITDigem_tour.png"></a>
 +
  </div>
 +
 +
<!---------------TOUR CANCELLED------------------------->
 +
<!-------------Span sitemap image--------->
 +
<img id="spanimg" src="https://static.igem.org/mediawiki/2015/1/1a/IITDsitemapfinal.png">           
 +
<!------------Span sitemap image---------->
 +
  <div class="box">
 +
    <ul id="ldd_menu" class="ldd_menu" style="position:absolute;">
 +
      <li>
 +
        <span>SiteMap</span>
 +
        <!---
 +
        <img id="spanimg" src="https://static.igem.org/mediawiki/2015/6/6b/IITDSitemap.png">         
 +
          -->
 +
          <div class="ldd_submenu">
 +
            <ul>
 +
      <li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/abstract">ABSTRACT</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/abstract#ourproject">OUR PROJECT</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/abstract#categories">CATEGORIES</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/abstract#sponsors">SPONSORS</a></li>
 +
              <li><a href="#"></a></li>
 +
              <li><a href="#"></a></li>
 +
          </ul>
 +
            <ul>
 +
      <li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/project_background">PROJECT</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/project#research">BACKGROUND</a></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/project#prototype">SOLUTION</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/project#conclusion">RESEARCH</a></li>
 +
            </ul>
 +
            <ul>
 +
      <li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/notebook_summary">NOTEBOOK</a></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/notebook#summary/">SUMMARY</a></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/notebook#timeline">TIMELINE</a></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/notebook#album">ALBUM</a></li>
 +
              <li><a href=""></a></li>
 +
              <li><a href=""></a></li>
 +
            </ul>
 +
            <ul>
 +
<li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/results_parts">RESULTS</a></li>
 +
<li><a href="https://2015.igem.org/Team:IIT_Delhi/result#parts">PARTS SUBMITTED</a></li>
 +
<li><a href="https://2015.igem.org/Team:IIT_Delhi/result#judging">JUDGING CRITERION</a></li>
 +
                <li><a href="https://2015.igem.org/Team:IIT_Delhi/result#attributions">ATTRIBUTIONS</a></li>
 +
                <li><a href="#"></a></li>
 +
                <li><a href="#"></a></li>
 +
    </ul>
 +
    <ul>
 +
      <li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/modelling_introduction">MODELLING</a></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/modelling#introduction">INTRODUCTION</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/modelling#mathematical">MATHEMATICAL MODEL</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/modelling#simulation">SIMULATION</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/modelling#interpretation">INTERPRETATION</a></li>
 +
              <li><a href="#"></a></li>
 +
    </ul>
 +
            <ul>
 +
      <li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/team_ourstory">TEAM<a/></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/team#ourstory">OUR STORY</a></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/team#mentors">MENTORS</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/team#members">MEMBERS</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/team#carpediem">CARPE DIEM</a></li>
 +
    </ul>
 +
            <ul>
 +
      <li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/collaboration_iiser">COLLABORATION</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/collaboration_iiser">IISER</a></li>
 +
      <li><a href="https://2015.igem.org/Team:IIT_Delhi/collaboration_enactus">ENACTUS</a></li>
 +
              <li><a href="https://2015.igem.org/Team:IIT_Delhi/collaboration_outreach">OUTREACH</a></li>
 +
              <li><a href="#"></a></li>
 +
              <li><a href="#"></a></li>
 +
    </ul>
 +
            <ul>
 +
<li class="ldd_heading"><a style="color:white;" href="https://2015.igem.org/Team:IIT_Delhi/ethics_orientation">ETHICS</a></li>
 +
                <li><a href="https://2015.igem.org/Team:IIT_Delhi/ethic_orientation">ORIENATION</a></li>
 +
<li><a href="https://2015.igem.org/Team:IIT_Delhi/ethics_openhouse">OPEN HOUSE</a></li>
 +
                <li><a href="https://2015.igem.org/Team:IIT_Delhi/ethics_tryst">TRYST</a></li>
 +
<li><a href="https://2015.igem.org/Team:IIT_Delhi/ethics_surveys">SURVEYS</a></li>
 +
                <li><a href="#"></a></li>
 +
    </ul>
 +
<a class="ldd_subfoot" href="">Click here for Site-Map image</a>
 +
    </div>
 +
  </li>
 +
</ul>
 +
      </div>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  <img style="position:absolute;width:100%;z-index:-5;" src="https://static.igem.org/mediawiki/2015/6/68/IITDwikihome_background1.jpg">
 +
  <nav style="border:solid 1px black;">
 +
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/abstract"><img class="iconshome iconsl" id="icon1" style="margin-top:4%; margin-left:10%;" src="https://static.igem.org/mediawiki/2015/6/6a/IITDabstract.png"></a>
 +
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/modelling_introduction"><img class="iconshome" id="icon2" style="margin-top:4%; margin-left:83%;" src="https://static.igem.org/mediawiki/2015/b/b9/IITDmodelling1.png"></a>
 +
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/project_background"><img class="iconshome iconsl" id="icon3" style="margin-top:14%; margin-left:6%;" src="https://static.igem.org/mediawiki/2015/2/2f/IITDproject1.png"></a>
 +
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/team_ourstory"><img class="iconshome" id="icon4" style="margin-top:14%; margin-left:87%;" src="https://static.igem.org/mediawiki/2015/0/01/Team1iitd.png"></a>
 +
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/notebook_summary"><img class="iconshome iconsl" id="icon5" style="margin-top:25%; margin-left:6%;" src="https://static.igem.org/mediawiki/2015/e/ee/Notebook_iitd.png"></a>
 +
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/human_practices"><img class="iconshome" id="icon6" style="margin-top:25%; margin-left:86.5%;" src="https://static.igem.org/mediawiki/2015/2/27/IITDhp.png"></a>
 +
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/results_parts"><img class="iconshome iconsl" id="icon7" style="margin-top:36%; margin-left:10%;" src="https://static.igem.org/mediawiki/2015/0/0b/Results1_iitd.png"></a>
 +
 +
    <a href="https://2015.igem.org/Team:IIT_Delhi/ethics_orientation"><img class="iconshome" id="icon8" style="margin-top:36%; margin-left:82%;" src="https://static.igem.org/mediawiki/2015/5/51/Ethics1_iitd.png"></a>
 +
  </nav>
 +
    </div>
 +
</div>
 +
     
 +
  <script>
 +
    $(document).ready(function(){ 
 +
$("#icon1").hover(
 +
        function(){
 +
          $(this).css("margin-top","2.5%");
 +
          $(this).css("margin-left","8.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
 +
          $(this).css("margin-top","4%");
 +
          $(this).css("margin-left","10%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
     
 +
$("#icon2").hover(
 +
        function(){
 +
          $(this).css("margin-top","2.5%");
 +
          $(this).css("margin-left","81.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","4%");
 +
          $(this).css("margin-left","83%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
$("#icon3").hover(
 +
        function(){
 +
          $(this).css("margin-top","12.5%");
 +
          $(this).css("margin-left","4.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","14%");
 +
          $(this).css("margin-left","6%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
$("#icon4").hover(
 +
        function(){
 +
          $(this).css("margin-top","12.5%");
 +
          $(this).css("margin-left","85.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","14%");
 +
          $(this).css("margin-left","87%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
 +
$("#icon5").hover(
 +
        function(){
 +
          $(this).css("margin-top","23.5%");
 +
          $(this).css("margin-left","4.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","25%");
 +
          $(this).css("margin-left","6%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
$("#icon6").hover(
 +
        function(){
 +
          $(this).css("margin-top","23.5%");
 +
          $(this).css("margin-left","85%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","25%");
 +
          $(this).css("margin-left","86.5%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
 +
$("#icon7").hover(
 +
        function(){
 +
          $(this).css("margin-top","34.5%");
 +
          $(this).css("margin-left","8.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","36%");
 +
          $(this).css("margin-left","10%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
$("#icon8").hover(
 +
        function(){
 +
          $(this).css("margin-top","34.5%");
 +
          $(this).css("margin-left","80.5%");
 +
          $(this).addClass("iconActive");
 +
        },
 +
        function(){
 +
          $(this).css("margin-top","36%");
 +
          $(this).css("margin-left","82%");
 +
          $(this).removeClass("iconActive");
 +
        }
 +
      );
 +
    });
 +
  </script>         
 +
     
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
<script>
 +
$(document).ready(function(){
 +
console.log("hi2");
 +
/**
 +
* the menu
 +
*/
 +
var $menu = $('#ldd_menu');
 +
 +
/**
 +
* for each list element,
 +
* we show the submenu when hovering and
 +
* expand the span element (title) to 510px
 +
*/
 +
$menu.children('li').each(function(){
 +
var $this = $(this);
 +
var $span = $this.children('span');
 +
$span.data('width',$span.width());
 +
 +
$this.bind('mouseenter',function(){
 +
$menu.find('.ldd_submenu').stop(true,true).hide();
 +
$span.stop().animate({'width':'10%'},200,function(){
 +
$this.find('.ldd_submenu').slideDown(400);
 +
});
 +
}).bind('mouseleave',function(){
 +
/**$this.find('.ldd_submenu').stop(true,true).hide(); */
 +
$span.stop().animate({'width':$span.data('width')+'px'},300);
 +
$this.find('.ldd_submenu').slideUp(400);
 +
});
 +
});
 +
            });
 
 
−
<!--  Navigation bar of the left side -->
+
//ipad and iphone fix
−
<div class="try">
+
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
−
  <img id="try1" " src="https://static.igem.org/mediawiki/2015/3/32/Team.png">
+
    $(" #ldd_menu li a").click(function(){
−
  <img id="try2" " src="https://static.igem.org/mediawiki/2015/3/32/Team.png">
+
        //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
−
</div>       
+
        //strange
−
  <img id="uk1" " src="https://static.igem.org/mediawiki/2015/3/32/Team.png">
+
    });
−
  <img id="uk2" src="https://static.igem.org/mediawiki/2015/3/32/Team.png">
+
}
−
  <img id="uk3" src="https://static.igem.org/mediawiki/2015/3/32/Team.png">
+
</script>
−
  <img id="uk4" src="https://static.igem.org/mediawiki/2015/3/32/Team.png">
+
 
 +
 
 +
 
  
  
−
<!--  Navigation bar of the Right side -->
 
  
−
  <img id="team" " src="https://static.igem.org/mediawiki/2015/3/32/Team.png">
 
−
  <img id="collaboration" src="https://static.igem.org/mediawiki/2015/0/09/Collaboration.png">
 
−
  <img id="project" src="https://static.igem.org/mediawiki/2015/6/67/Projectdelhi.png">
 
−
  <img id="unknown1" src="https://static.igem.org/mediawiki/2015/6/67/Projectdelhi.png">
 
  
  
−
                     
 
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 00:31, 17 September 2015