Biomod/2012/HKBU/BU Magician

From OpenWetWare

(Difference between revisions)
Jump to: navigation, search
(47 intermediate revisions not shown.)
Line 1: Line 1:
<html>
<html>
 +
<img src="http://openwetware.org/images/b/b8/HKBUlogo104.jpg" height="200" width="900"/>
 +
</html>
 +
{{Template:HKBU2012}}
 +
<html>
 +
<head>
<style>
<style>
.container{background-color: #ffffff; margin-top:0px}
.container{background-color: #ffffff; margin-top:0px}
Line 6: Line 11:
#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>
 +
</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">Check out our abstract and design of project
 +
here! <a href="http://openwetware.org/wiki/Biomod/2012/HKBU/BU_Magician:Projects" 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">Techniques</div>
 +
          <div class="info_description">View our methodology and detailed protocols here!<a href="http://openwetware.org/wiki/Biomod/2012/HKBU/BU_Magician:Methods" 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">Data&Discussion</div>
 +
          <div class="info_description"> Find out our results, discussion & conclusion here! <a href="http://openwetware.org/wiki/Biomod/2012/HKBU/BU_Magician:Results" class="more">Read more</a> </div>
 +
        </div>
 +
      </li>
 +
      <li> <a href="rot4">Lab Record</a>
 +
        <div style="display:none;">
 +
          <div class="info_image">4.jpg</div>
 +
          <div class="info_heading">We do stuff</div>
 +
          <div class="info_description">Learn more about what we do here!<a href="#" class="more">Read more</a> </div>
 +
        </div>
 +
      </li>
 +
      <li> <a href="rot5">About us</a>
 +
        <div style="display:none;">
 +
          <div class="info_image">5.jpg</div>
 +
          <div class="info_heading">Team of Magician</div>
 +
          <div class="info_description">Know more about BU Magicians!<a href="http://openwetware.org/wiki/Biomod/2012/HKBU/BU_Magician:Team" 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>
 +
 +
<!-- 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,6000);
 +
 +
                $('#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/5b/HKBU2012Methods.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/9/92/HKBUHomepagegraph1.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/f/fc/HKBUGROUP2.jpg').attr('width','800').attr('height','300')
 +
                );
 +
                }     
 +
 +
                }
 +
            });
 +
        </script>
 +
</body>
</html>
</html>
-
<!--
+
==<font face="trebuchet ms" size = "5.5px" style="color:#272727">Welcome to BU Magician Homepage </font>==
-
[[Image:BackgroundHKBU1.png]] <img src="HKBU2012Logoversion101.jpg" height="200" width="800" />
+
<div style="padding: 10px; color: #272727; background-color:#FfFfFf; width: 800px; align = center; FONT-FAMILY: Helvetica; FONT-SIZE: 14px">Welcome to HKBU Magicians webpage 2012! This year, we conduct ''in vitro'' experiments to develop a simple yet effective method for self-assembling magnetic nanoparticle-based gene delivery.  
-
-->
+
'''Project Highlights:''' <br/>
-
<!--
+
-Feasibility and low cost. <br/>
-
[[Image:HKBU2012HEADER1.jpg]] <img src="http://openwetware.org/images/f/f5/HKBU2012Logoversion101.jpg" height="200" width="900" />
+
-Real ''in vitro'' experiment being conducted <br/>
-
-->
+
-Promising future application <br/>
-
{{Template:HKBU2012}}
+
-
<div style="padding: 10px; color: #272727; background-color:#F0F0F0; width: 877px; align = center;">
+
In this website, we will show you our ideas, design and results. Explore to find out more…
-
== <font face="trebuchet ms" size = "5px" style="color:#272727">Welcome to BU Magician Homepage </font> ==
+
 
-
<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.
+
-
In this website, we will show you our ideas , design and results.</font>
 
</div>
</div>
-
<div style="padding: 10px; color: #272727; background-color:#F0F0F0; width: 700px; align = center;">
 
-
== <font face="trebuchet ms" size = "5px" style="color:#272727">Video </font> ==
 
<html>
<html>
-
Click our video to get an overview!
+
<h1><font face="trebuchet ms" size = "5.5px" style="color:#272727">Video</font></h1>
-
<object width="1000" height="900"><param name="movie" value="http://www.youtube.com/v/opVb89Cmrtkamp;hl=enamp;fs=1">
+
<center><iframe width="800" height="500" src="http://www.youtube.com/embed/w1CN91PpOZ0" frameborder="0" allowfullscreen></iframe></center>
-
  </param><param name="allowFullScreen" value="true">
+
</html>
-
  </param><param name="allowscriptaccess" value="always"></param>
+
 
-
  <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">
+
----
-
  </embed>
+
<html>
-
</object>
+
<img src="http://openwetware.org/images/a/a4/HKBU2012allfaculty.jpg" height="200" width="800"/>
-
</div>
+
<a href="http://openwetware.org/index.php?title=Biomod/2012/HKBU/BU_Magician&action=edit">have a try</a>
-
<a href="http://openwetware.org/index.php?title=Biomod/2012/HKBU/BU_Magician&action=edit">edit</a>
+
</html>

Revision as of 20:54, 27 October 2012

jOuery

Welcome to BU Magician Homepage

Welcome to HKBU Magicians webpage 2012! This year, we conduct in vitro experiments to develop a simple yet effective method for self-assembling magnetic nanoparticle-based gene delivery.

Project Highlights:
-Feasibility and low cost.
-Real in vitro experiment being conducted
-Promising future application

In this website, we will show you our ideas, design and results. Explore to find out more…


Video


have a try

Personal tools