Biomod/2012/HKBU/BU Magician

From OpenWetWare

(Difference between revisions)
Jump to: navigation, search
Line 1: Line 1:
 +
{{Template:HKBU2012}}
<html>
<html>
 +
<head>
<style>
<style>
.container{background-color: #ffffff; margin-top:0px}
.container{background-color: #ffffff; margin-top:0px}
Line 6: Line 8:
#column-one {display:none; width:0px;background-color: #ffffff;}
#column-one {display:none; width:0px;background-color: #ffffff;}
-
#globalWrapper{width: 920px; background-color: #ffffff; margin-left: auto;margin-right: auto;
+
#globalWrapper{width: 930px; background-color: #ffffff; margin-left: auto;margin-right: auto;
-moz-box-shadow:  0px 0px 15px #ccc;
-moz-box-shadow:  0px 0px 15px #ccc;
-webkit-box-shadow:  0px 0px 15px #ccc;
-webkit-box-shadow:  0px 0px 15px #ccc;
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: 896px;background-color: #ffffff; border: 0;}
+
#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;}
#bodyContent{ width: 800px; align: center; background-color: #fffffff;}
#column-content{width: 800px;background-color: #ffffff;}
#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>
</style>
-
</html>
+
</head>
-
<!--
+
<body>
-
[[Image:BackgroundHKBU1.png]] <img src="HKBU2012Logoversion101.jpg" height="200" width="800" />
+
<div id="content"> <a class="back" href=""></a>
-
-->
+
  <div class="rotator">
-
<!--
+
    <ul id="rotmenu">
-
[[Image:HKBU2012HEADER1.jpg]] <img src="http://openwetware.org/images/f/f5/HKBU2012Logoversion101.jpg" height="200" width="900" />
+
      <li> <a href="rot1">Project</a>
-
-->
+
        <div style="display:none;">
-
{{Template:HKBU2012}}
+
          <div class="info_image">1_1.jpg</div>
-
<div style="padding: 10px; color: #272727; background-color:#F0F0F0; width: 877px; align = center;">
+
          <div class="info_heading">Our Works</div>
-
== <font face="trebuchet ms" size = "5px" style="color:#272727">Welcome to BU Magician Homepage </font> ==
+
          <div class="info_description"> ... <a href="#" class="more">Read more</a> </div>
-
<font face="arial" size = "2px" style="color:#272727">Welcome to HKBU project 2012. This year, we aim to design self-assembling iron particle for small interference RNA(siRNA) delivery, then provide cell protection to neurons. Previous work has shown that magnetic iron nanoparticles are effective carriers for gene delivery in cells. We focus specifically for the delivery of N-methyl-D-aspartate receptor 2B(NR2B) into neuronal cells. Previous studies demonstrated that the magnetic field could facilitate the particle internalization through endocytosis so as to increase the effectiveness of siRNA uptake.
+
        </div>
-
 
+
      </li>
-
In this website, we will show you our ideas , design and results.</font>
+
      <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>
</div>
 +
 +
<!-- The JavaScript -->
 +
<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>
<div style="padding: 10px; color: #272727; background-color:#F0F0F0; width: 700px; align = center;">
<div style="padding: 10px; color: #272727; background-color:#F0F0F0; width: 700px; align = center;">
-
== <font face="trebuchet ms" size = "5px" style="color:#272727">Video </font> ==
+
== <font face="trebuchet ms" size = "5px" style="color:#272727">Welcome to BU Magician Homepage </font> ==
-
<html>
+
I work in the [[Your Lab]] at XYZ University.  I learned about [[OpenWetWare]] from From the
-
Click our video to get an overview!
+
wiki pages in Biomod competition 2011., and I've joined because To complete the wiki page
-
<object width="1000" height="900"><param name="movie" value="http://www.youtube.com/v/opVb89Cmrtkamp;hl=enamp;fs=1">
+
required by the Biomod competition.
-
  </param><param name="allowFullScreen" value="true">
+
</div><div style="padding: 10px; color: #272727; background-color:#F0F0F0; width: 700px; align = center;">
-
  </param><param name="allowscriptaccess" value="always"></param>
+
== <font face="trebuchet ms" size = "5px" style="color:#272727">Abstract </font> ==
-
  <embed src="http://www.youtube.com/v/opVb89Cmrtk&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="500">
+
I work in the [[Your Lab]] at XYZ University. I learned about [[OpenWetWare]] from From the
-
  </embed>
+
wiki pages in Biomod competition 2011., and I've joined because To complete the wiki page
-
</object>
+
required by the Biomod competition.
</div>
</div>
-
<a href="http://openwetware.org/index.php?title=Biomod/2012/HKBU/BU_Magician&action=edit">edit</a>
 

Revision as of 00:51, 26 October 2012

jOuery

have a try

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.

Personal tools