Team:KIT-Kyoto/Test

From 2014.igem.org

(Difference between revisions)
 
(87 intermediate revisions not shown)
Line 28: Line 28:
<div id="topmenu">
<div id="topmenu">
<div class="timg">
<div class="timg">
-
<a href="javascript:void(0);">
+
<div class="show">
-
<img class="show" src="/wiki/images/6/6b/Kit_Welcome.png">
+
<a href="javascript:void(0);"><img src="/wiki/images/6/6b/Kit_Welcome.png"></a></div>
-
<img class="hide" src="/wiki/images/3/3f/Kit_Welcome_on_c.jpg">
+
 
-
</a>
+
<div class="hide">
 +
<a href="javascript:void(0);"><img src="/wiki/images/3/3f/Kit_Welcome_on_c.jpg" width="1920"></a></div>
</div>
</div>
 +
<div class="timg">
<div class="timg">
-
<a href="/Team:KIT-Kyoto/About">
+
<div class="show">
-
<img class="show" src="/wiki/images/b/bf/Kit_Abou_Us.png">
+
<a href="/Team:KIT-Kyoto/About"><img src="/wiki/images/b/bf/Kit_Abou_Us.png" width="1920">
-
<img class="hide" src="/wiki/images/8/8e/Kit_Abou_Us_on_c.jpg">
+
</a>
</a>
 +
</div>
 +
<div class="hide">
 +
<a href="/Team:KIT-Kyoto/About"><img src="/wiki/images/8/8e/Kit_Abou_Us_on_c.jpg" width="1920">
 +
</a>
 +
</div>
</div>
</div>
<div class="timg">
<div class="timg">
-
<a href="/Team:KIT-Kyoto/Project">
+
<div class="show">
-
<img class="show" src="/wiki/images/c/c2/Kit_Projectmenu.png">
+
<a href="/Team:KIT-Kyoto/Project"><img src="/wiki/images/c/c2/Kit_Projectmenu.png" width="1920">
-
<img class="hide" src="/wiki/images/1/11/Kit_Project_on_c.jpg">
+
</a>
</a>
</div>
</div>
 +
<div class="hide">
 +
<a href="/Team:KIT-Kyoto/Project"><img src="/wiki/images/1/11/Kit_Project_on_c.jpg" width="1920">
 +
</a>
 +
</div>
 +
</div>
 +
<div class="timg">
<div class="timg">
-
<a href="/Team:KIT-Kyoto/HumanPractice">
+
<div class="show">
-
<img class="show" src="/wiki/images/7/7e/Kit_PP.png">
+
<a href="/Team:KIT-Kyoto/HumanPractice"><img src="/wiki/images/7/7e/Kit_PP.png" width="1920">
-
<img class="hide" src="/wiki/images/e/e6/Kit_PP_on_c.jpg">
+
</a>
</a>
</div>
</div>
 +
<div class="hide">
 +
<a href="/Team:KIT-Kyoto/HumanPractice"><img src="/wiki/images/e/e6/Kit_PP_on_c.jpg" width="1920">
 +
</a>
 +
</div>
 +
</div>
 +
<div class="timg">
<div class="timg">
-
<a href="/Team:KIT-Kyoto/Achievement">
+
<div class="show">
-
<img class="show" src="/wiki/images/8/82/Kit_Achievement.png">
+
<a href="/Team:KIT-Kyoto/Achievement"><img src="/wiki/images/8/82/Kit_Achievement.png" width="1920">
-
<img class="hide" src="/wiki/images/6/6d/Kit_Achievement_on_c.jpg">
+
</a>
</a>
 +
</div>
 +
<div class="hide">
 +
<a href="/Team:KIT-Kyoto/Achievement"><img src="/wiki/images/6/6d/Kit_Achievement_on_c.jpg" width="1920">
 +
</a>
 +
</div>
</div>
</div>
<div class="timg">
<div class="timg">
-
<a href="/Team:KIT-Kyoto/Labnote">
+
<div class="show">
-
<img class="show" src="/wiki/images/1/17/Kit_LN.png">
+
<a href="/Team:KIT-Kyoto/Labnote"><img src="/wiki/images/1/17/Kit_LN.png" width="1920">
-
<img class="hide" src="/wiki/images/1/1b/Kit_LN_on_c.jpg">
+
</a>
</a>
 +
</div>
 +
<div class="hide">
 +
<a href="/Team:KIT-Kyoto/Labnote"><img src="/wiki/images/1/1b/Kit_LN_on_c.jpg" width="1920">
 +
</a>
 +
</div>
</div>
</div>
Line 101: Line 125:
<style style="text/css">
<style style="text/css">
#kitfooter-box{
#kitfooter-box{
-
background-color:rgba(100,100,100,0.7);
+
background-color:rgba(100,100,100,0);
 +
z-index:1;
 +
}
 +
#fkit a{
 +
color:#fff;
}
}
#bodyContent{
#bodyContent{
Line 109: Line 137:
margin:14px 0px 0px 250px;
margin:14px 0px 0px 250px;
min-height:100%;
min-height:100%;
-
width:100%;
 
position:relative;
position:relative;
 +
background-color:rgba(0,0,0,0.7);
}
}
Line 124: Line 152:
}
}
-
.show{
+
.timg{
 +
position:relative;
 +
margin:0;
 +
}
 +
.show,.hide{
 +
width:100%;
 +
height:100%;
position:absolute;
position:absolute;
top:0;
top:0;
left:0;
left:0;
 +
marign:0;
 +
}
 +
.show{
z-index:3;
z-index:3;
}
}
-
 
.hide{
.hide{
-
position:absolute;
 
-
left:0;
 
z-index:2;
z-index:2;
}
}
Line 140: Line 174:
$(function(){  
$(function(){  
var topimg = function(){
var topimg = function(){
-
var w = $("#kitfooter-box").width;
+
var w = $("#container").width();
-
$(".topmenu img").css({width:w});
+
$(".timg,.timg a img").css({width:w});
-
var _h = $(".show").height();
+
var imgh = $('.show img').height();
-
$(".topmenu li,.topmenu a").css({height:_h});
+
$(".timg").css({height:imgh});
}
}
$(function(){
$(function(){
Line 149: Line 183:
$(window).resize(topimg);
$(window).resize(topimg);
});
});
-
 
+
topimg();
 +
$('.hide').css('opacity','0');
 +
$('.show a,.hide a').hover(function(){
 +
var tnum = $('.show a').index(this);
 +
$('.show').eq(tnum).stop().animate({opacity:'0'},400);
 +
$('.hide').eq(tnum).stop().animate({opacity:'1'},400);
 +
},
 +
function(){
 +
var tnum = $('.show a').index(this);
 +
$('.show').eq(tnum).stop().animate({opacity:'1'},400);
 +
$('.hide').eq(tnum).stop().animate({opacity:'0'},400);
 +
}
 +
);
    
    
-
var ua = navigator.userAgent;
+
var slide = function(){
 +
                        $("#SideMenu").animate({left:'0px'},500,'swing');
 +
                        $("#close").animate({left:'215px'},500,'swing').addClass("close");
 +
                        $(".logo").animate({left:'250'},500,'swing');
 +
                        $("#container").animate({margin:'0px 0px 0px 250px'},{duration:500,easing:'swing',complete:function(){topimg();},});
 +
                        $(".toplogo,#nav5,.active,.submenu").animate({opacity:'1'},800,'swing');
 +
                        setTimeout(function(){
 +
                                  $("#close a")
 +
                                  .css({'background-image':'url("https://static.igem.org/mediawiki/2014/6/6d/Kit_close.png")'
 +
                        });},500);
 +
}
 +
    var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Windows Phone') > 0){
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Windows Phone') > 0){
-
}else {
+
setTimeout(function(){topimg();},1100);
 +
$("#container").css({marginTop:'65px',marginLeft:'0px'});
 +
}else{
         $("#close").removeClass('close');
         $("#close").removeClass('close');
         $("#SideMenu").css({"left":"-215px"});
         $("#SideMenu").css({"left":"-215px"});
Line 160: Line 219:
         $(".toplogo,#nav5,.active,.submenu").css({opacity:'0'});
         $(".toplogo,#nav5,.active,.submenu").css({opacity:'0'});
         $("#close a").css({'background-image':'url("https://static.igem.org/mediawiki/2014/d/d0/Kit_open.png")'});
         $("#close a").css({'background-image':'url("https://static.igem.org/mediawiki/2014/d/d0/Kit_open.png")'});
 +
        setTimeout(function(){
 +
              slide();
 +
                },2100);
}
}
 +
       
         $('#close a')
         $('#close a')
         .click(function(){
         .click(function(){
 +
               
                 var closed = $("#close").hasClass("close");
                 var closed = $("#close").hasClass("close");
                 if(closed){
                 if(closed){
Line 168: Line 232:
                         $("#close").animate({left:'0px'},500,'swing').removeClass("close");
                         $("#close").animate({left:'0px'},500,'swing').removeClass("close");
                         $(".logo").animate({left:'40'},500,'swing');
                         $(".logo").animate({left:'40'},500,'swing');
-
                         $("#container").animate({margin:'0px 0px 0px 35px'},500,'swing');
+
                         $("#container").animate({margin:'0px 0px 0px 35px'},{duration:500,easing:'swing',complete:function(){topimg();},});
                         $(".toplogo,#nav5,.active,.submenu").animate({opacity:'0'},800,'swing');
                         $(".toplogo,#nav5,.active,.submenu").animate({opacity:'0'},800,'swing');
                         setTimeout(function(){
                         setTimeout(function(){
Line 174: Line 238:
                         },500);
                         },500);
                 }else {
                 }else {
-
                         $("#SideMenu").animate({left:'0px'},500,'swing');
+
                         slide();
-
                        $("#close").animate({left:'215px'},500,'swing').addClass("close");
+
-
                        $(".logo").animate({left:'250'},500,'swing');
+
-
                        $("#container").animate({margin:'0px 0px 0px 250px'},500,'swing');
+
-
                        $(".toplogo,#nav5,.active,.submenu").animate({opacity:'1'},800,'swing');
+
-
                        setTimeout(function(){
+
-
                                  $("#close a")
+
-
                                  .css({'background-image':'url("https://static.igem.org/mediawiki/2014/6/6d/Kit_close.png")'});
+
-
                        },500);
+
                 }
                 }
-
         })
+
         });
});
});
</script>
</script>

Latest revision as of 02:43, 11 October 2014

kit
Top

Retrieved from "http://2014.igem.org/Team:KIT-Kyoto/Test"