Biomod/2012/HKBU/BU Magician: Difference between revisions

Revision as of 21:51, 25 October 2012

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jOuery</title> <link rel="stylesheet" href="style.css" /> <style> .menu { height: 45px; display: block; } .menu ul { list-style: none; padding: 0; margin: 0; } .menu ul li { float: left; overflow: hidden; position: relative; text-align: center; line-height: 45px; } .menu ul li a { position: relative; display: block; width: 128px; height: 45px; font-family: Arial; font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; } .menu ul li a span { position: absolute; left: 0; width: 128px; } .menu ul li a span.out { top: 0px; } .menu ul li a span.over, .menu ul li a span.bg { top: -45px; }

menu2 { background:#45A8DF; }
menu2 ul li a { color:#FFF; }
menu2 ul li a span.over { background: #A6DD00; color:#333; }
menu2 ul li.nav1 a span.over { background: #fea274; }
menu2 ul li.nav2 a span.over { background: #b0bbba; }
menu2 ul li.nav3 a span.over { background: #a3f091; }
menu2 ul li.nav4 a span.over { background: #86dbf9; }
menu2 ul li.nav5 a span.over { background: #e0caf0; }
menu2 ul li.nav6 a span.over { background: #9dace9; }
menu2 ul li.nav7 a span.over { background: #FFE66F; }

</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script language="javascript"> $(document).ready(function() {

$("#menu2 li a").wrapInner( '<span class="out"></span>' );

$("#menu2 li a").each(function() { $('<span class="over">' + $(this).text() + '</span>' ).appendTo( this ); });

$("#menu2 li a").hover(function() { $(".out",this).stop().animate({'top':'45px'},200); $(".over",this).stop().animate({'top':'0px'},200);

}, function() { $(".out",this).stop().animate({'top':'0px'},200); $(".over",this).stop().animate({'top':'-45px'},200); });

});

</script> </head> <body> <div id="HEADER">

 <div id="menu2" class="menu" style="width: 897px">
   <ul>
     <li class="nav1"><a href="http://openwetware.org/wiki/Biomod/2012/HKBU/BU_Magician">Home</a></li>
     <li class="nav2"><a href="http://openwetware.org/wiki/Biomod/2012/HKBU/BU_Magician:Projects">Projects</a></li>
     <li class="nav3"><a href="http://openwetware.org/wiki/Biomod/2012/HKBU/BU_Magician:Results">ResultS</a></li>
      <li class="nav7"><a href="http://openwetware.org/wiki/Biomod/2012/HKBU/BU_Magician:Methods">Methods</a></li>
     <li class="nav4"><a href="http://openwetware.org/wiki/Biomod/2012/HKBU/BU_Magician:Team">Team</a></li>
     <li class="nav5"><a href="http://openwetware.org/wiki/Biomod/2012/HKBU/BU_Magician:Labook:Notebook/Labbook">Labook</a></li>
     <li class="nav6"><a href="http://openwetware.org/wiki/Biomod/2012/HKBU/BU_Magician:Extra">Extra</a></li>
   </ul>
 </div>

</div> </body> </html> <html> <head> <style> .container{background-color: #ffffff; margin-top:0px}

column-content {width: 0px; float: left; margin: 0 0 0 0;padding: 0;}

.firstHeading {display:none; width:0px;}

column-one {display:none; width:0px;background-color: #ffffff;}

globalWrapper{width: 930px; background-color: #ffffff; margin-left: auto;margin-right: auto;

-moz-box-shadow: 0px 0px 15px #ccc; -webkit-box-shadow: 0px 0px 15px #ccc; box-shadow: 0px 0px 15px #ccc;}

content{ margin: 0 0 0 0; align: center; padding: 12px 12px 12px 12px; width:

800px;background-color: #ffffff; border: 0;}

bodyContent{ width: 800px; align: center; background-color: #fffffff;}
column-content{width: 800px;background-color: #ffffff;}

.rotator{

   background-color:#222;
   width:800px;
   height:300px;
   margin:0px auto;
   position:relative;
   font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
   color:#fff;
   text-transform:uppercase;
   letter-spacing:-1px;
   border:3px solid #f0f0f0;
   overflow:hidden;
   -moz-box-shadow:0px 0px 10px #222;
   -webkit-box-shadow:0px 0px 10px #222;
   box-shadow:0px 0px 10px #222;

} img.bg{

   position:absolute;
   top:0px;
   left:0px;

} .rotator ul{

   list-style:none;
   position:absolute;
   right:0px;
   top:0px;
   margin-top:6px;
   z-index:999999;

} .rotator ul li{

   display:block;
   float:left;
   clear:both;
   width:260px;

} .rotator ul li a{

   width:230px;
   float:right;
   clear:both;
   padding-left:10px;
   text-decoration:none;
   display:block;
   height:52px;
   line-height:52px;
   background-color:#222;
   margin:1px -20px 1px 0px;
   opacity:0.7;
   color:#f0f0f0;
   font-size:20px;
   border:2px solid #000;
   border-right:none;
   outline:none;
   text-shadow:-1px 1px 1px #000;
   -moz-border-radius:10px 0px 0px 20px;
   -webkit-border-top-left-radius:10px;
   -webkit-border-bottom-left-radius:20px;
   border-top-left-radius:10px;
   border-bottom-left-radius:20px;

} .rotator ul li a:hover{

     text-shadow:0px 0px 2px #fff;

} .rotator .heading{

   position:absolute;
   top:0px;
   left:0px;
   width:500px;

} .rotator .heading h1{

   text-shadow:-1px 1px 1px #555;
   font-weight:normal;
   font-size:46px;
   padding:20px;
   color:orange;

} .rotator .description{

   width:500px;
   height:80px;
   position:absolute;
   bottom:0px;
   left:0px;
   padding:20px;
   background-color:#222;
   -moz-border-radius:0px 10px 0px 0px;
   -webkit-border-top-right-radius:10px;
   border-top-right-radius:10px;
   opacity:0.7;
   border-top:2px solid #000;
   border-right:2px solid #000;

} .rotator .description p{

   text-shadow:-1px 1px 1px #000;
   text-transform:none;
   letter-spacing:normal;
   line-height:26px;

} a.more{

   color:orange;
   text-decoration:none;
   text-transform:uppercase;
   font-size:10px;

} a.more:hover{

   color:#fff;

} </style> </head> <body> <div id="content"> <a class="back" href=""></a>

 <div class="rotator">
   <ul id="rotmenu">
     <li> <a href="rot1">Project</a>
       <div style="display:none;">
         <div class="info_image">1_1.jpg</div>
         <div class="info_heading">Our Works</div>
         <div class="info_description"> ... <a href="#" class="more">Read more</a> </div>
       </div>
     </li>
     <li> <a href="rot2">Methods</a>
       <div style="display:none;">
         <div class="info_image">2.jpg</div>
         <div class="info_heading">We serve</div>
         <div class="info_description"> ... <a href="#" class="more">Read more</a> </div>
       </div>
     </li>
     <li> <a href="rot3">Results</a>
       <div style="display:none;">
         <div class="info_image">3.jpg</div>
         <div class="info_heading">Get in touch</div>
         <div class="info_description"> ... <a href="#" class="more">Read more</a> </div>
       </div>
     </li>
     <li> <a href="rot4">Experiments</a>
       <div style="display:none;">
         <div class="info_image">4.jpg</div>
         <div class="info_heading">We do stuff</div>
         <div class="info_description">... <a href="#" class="more">Read more</a> </div>
       </div>
     </li>
     <li> <a href="rot5">People</a>
       <div style="display:none;">
         <div class="info_image">5.jpg</div>
         <div class="info_heading">Working things</div>
         <div class="info_description"> ... <a href="#" class="more">Read more</a> </div>
       </div>
     </li>
   </ul>
   <div id="rot1"> <img src="" width="800" height="300" class="bg" alt=""/>
     <div class="heading">
       <h1></h1>
     </div>
     <div class="description">
       <p></p>
     </div>
   </div>
 </div>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> <script type="text/javascript">

           $(function() {
               var current = 1;
               
               var iterate		= function(){
                   var i = parseInt(current+1);
                   var lis = $('#rotmenu').children('li').size();
                   if(i>lis) i = 1;
                   display($('#rotmenu li:nth-child('+i+')'));
               }
               display($('#rotmenu li:first'));
               var slidetime = setInterval(iterate,3000);

               $('#rotmenu li').bind('click',function(e){
                   clearTimeout(slidetime);
                   display($(this));
                   e.preventDefault();
               });

               function display(elem){
                   var $this 	= elem;
                   var repeat 	= false;
                   if(current == parseInt($this.index() + 1))
                       repeat = true;

                   if(!repeat)
                       $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
                           $(this).animate({'opacity':'0.7'},700);
                       });

                   current = parseInt($this.index() + 1);

                   var elem = $('a',$this);
                   
                       elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

                   var info_elem = elem.next();
                   $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
                       $('h1',$(this)).html(info_elem.find('.info_heading').html());
                       $(this).animate({'left':'0px'},400,'easeInOutQuad');
                   });

                   $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
                       $('p',$(this)).html(info_elem.find('.info_description').html());
                       $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
                   });  
                   if(parseInt(info_elem.find('.info_image').html())==1){
                  $('#rot1').prepend(
                   $('<img/>',{
                       style	:	'opacity:0',
                       className : 'bg'
                   }).load(
                   function(){
                       $(this).animate({'opacity':'1'},600);
                       $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                           $(this).remove();
                       });
                   }
               ).attr('src','http://openwetware.org/images/d/d6/Hkbutest1.jpg').attr('width','800').attr('height','300')
               );
                   }
              else if(parseInt(info_elem.find('.info_image').html())==2){
                  $('#rot1').prepend(
                   $('<img/>',{
                       style	:	'opacity:0',
                       className : 'bg'
                   }).load(
                   function(){
                       $(this).animate({'opacity':'1'},600);
                       $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                           $(this).remove();
                       });
                   }
               ).attr('src','http://openwetware.org/images/5/59/Hkbutest2.jpg').attr('width','800').attr('height','300')
               );
               }
              else if(parseInt(info_elem.find('.info_image').html())==3){
                  $('#rot1').prepend(
                   $('<img/>',{
                       style	:	'opacity:0',
                       className : 'bg'
                   }).load(
                   function(){
                       $(this).animate({'opacity':'1'},600);
                       $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                           $(this).remove();
                       });
                   }
               ).attr('src','http://openwetware.org/images/c/c8/Hkbutest3.jpg').attr('width','800').attr('height','300')
               );
               }
              else if(parseInt(info_elem.find('.info_image').html())==4){
                  $('#rot1').prepend(
                   $('<img/>',{
                       style	:	'opacity:0',
                       className : 'bg'
                   }).load(
                   function(){
                       $(this).animate({'opacity':'1'},600);
                       $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                           $(this).remove();
                       });
                   }
               ).attr('src','http://openwetware.org/images/c/c1/Hkbutest4.jpg').attr('width','800').attr('height','300')
               );
               }
              else if(parseInt(info_elem.find('.info_image').html())==5){
                  $('#rot1').prepend(
                   $('<img/>',{
                       style	:	'opacity:0',
                       className : 'bg'
                   }).load(
                   function(){
                       $(this).animate({'opacity':'1'},600);
                       $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                           $(this).remove();
                       });
                   }
               ).attr('src','http://openwetware.org/images/2/23/Hkbutest5.jpg').attr('width','800').attr('height','300')
               );
               }

               }
           });
       </script>

</body> <a href="http://openwetware.org/index.php?title=Biomod/2012/HKBU/BU_Magician:Extra&action=edit">have a try</a> </html>

Welcome to BU Magician Homepage

I work in the Your Lab at XYZ University. I learned about OpenWetWare from From the wiki pages in Biomod competition 2011., and I've joined because To complete the wiki page required by the Biomod competition.

Abstract

I work in the Your Lab at XYZ University. I learned about OpenWetWare from From the wiki pages in Biomod competition 2011., and I've joined because To complete the wiki page required by the Biomod competition.

Biomod/2012/HKBU/BU Magician: Difference between revisions

Revision as of 21:51, 25 October 2012

Welcome to BU Magician Homepage

Abstract

Navigation menu

Page actions

Page actions

Personal tools

Navigation

Search

research

Tools