Biomod/2013/OSU/media

From OpenWetWare
Revision as of 09:19, 15 September 2013 by Mike W. Zoller (talk | contribs)
Jump to navigationJump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.


<html> </div> </div> </div> <head> <style type='text/css'>

.firstHeading, #column-one, #p-bookmarks, #p-history , .portlet{ display:none; }

  1. bodyContent, #content{

display:none; background-color:#FFFFFF;

}

  1. column-content, .container, #globalWrapper, body{

background-color:#FFFFFF; }

p{ color:dimgrey; text-align:center; margin-left:auto; margin-right:auto; font-gamily:Calibri; font-size: 15px; }

.selflink{ display: table-cell; 

  text-decoration: none;
  font-family: Gill Sans MT;
  outline: none;
  font-size: 20px;
  color: dimgrey;
  border-right: 2px solid dimgray;
  padding: 15px 25px; /* sets button size */
  font-weight:normal;

}

ul.navigation-bar { 

  list-style-type: none;
  border: 2px solid dimgray;
  padding: 0px;
  margin-left: 20px;

width:615px; 

  *line-height: 3.2em; /* IE6,IE7 */
  }

ul.navigation-bar li { 

  display: table-cell;

  background-image: -webkit-linear-gradient(bottom, silver, azure);
  background-image:    -moz-linear-gradient(bottom, silver, azure);
  background-image:     -ms-linear-gradient(bottom, silver, azure);
  background-image:         linear-gradient(bottom, silver, azure);
  background-color: midnightblue; /* IE6...IE9 */
  *display: inline; /* IE6,IE7 */

  }


ul.navigation-bar li:hover { 

  background-image: -webkit-linear-gradient(top, silver, azure);
  background-image:    -moz-linear-gradient(top, silver, azure);
  background-image:     -ms-linear-gradient(top, silver, azure);
  background-image:         linear-gradient(top, silver, azure);

}

ul.navigation-bar li a, ul.navigation-bar li ul li a { 

  display: table-cell;
  text-decoration: none;
  font-family: Gill Sans MT;
  outline: none;
  font-size: 20px;
  color: dimgrey;
  border-right: 0px;
  padding: 15px 25px; /* sets button size */
  }

ul.navigation-bar li ul{ list-style: none; display: none; position: absolute; padding: 0px; margin: 1px 0px 0px -1px; background-color:#FFFFFF; border: 1px solid dimgrey; z-index:5; } ul.navigation-bar li ul li{ background-image: none; background-color:#FFFFFF; border-right: none; border: 0px solid dimgray; display: block; float: none; position: relative; }

ul.navigation-bar li ul li:hover{ background-image:none; background-color: lightgrey; }

ul.navigation-bar li:hover ul{ list-style: none; display: block; position: absolute; }

ul.navigation-bar li a{ display: block; }

.profile-right{ clear:both; }

.profile-right p{ text-align:left; float: left; } .profile-right img{ float: right; padding: 20px; }

.profile-left{ clear:both; }

.profile-left p{ text-align:left; float:left; }

.profile-left img{ float: left; padding:20px; }

  1. OSUfooter{

clear:both; }


  1. protocol-content table td{

border: 1px solid black; text-align:center; }

  1. protocol-content p{

text-align:left; }

.overlay-bg{ display:none; position:fixed; top:0; left:0; height:100%; width:100%; cursor: pointer; background: #000; background: rgba(0,0,0,0.75); }

.overlay-content{ background:#fff; padding:1%; width: 60%; position: relative; top:15%; left:50%; margin: 0 0 0 -30%; cursor: default; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.9);

}

.close-btn{ float:right; font-size:x-large; margin-top:-10px; }

</style>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script type="text/javascript"> $(document).ready(function() { 

 $('.show-popup').click(function(event){
 event.preventDefault();
 $('.overlay-bg').show();

});

$('.close-btn').click(function(){ $('.overlay-bg').hide(); });

$('.overlay-bg').click(function(){ 

 $('.overlay-bg').hide();

});

$('.overlay-content').click(function(){ return false; });

}); </script>

</head>

<!-- navbar -->

<a href="http://openwetware.org/wiki/Biomod/2013"> << Back to Team Pages</a>

<center>

<img src="http://openwetware.org/images/1/15/Ohiomod2013.jpg" height="60%" width="60%" style="margin-left:-40px;"> <div id="navbar" style="margin-left:auto; margin-right:auto;text-align:center;width:650px;height:auto;" > <ul id="homebutton" class="navigation-bar"> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU">Home</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/about">About</a> <ul> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/abstract">Abstract</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/goals">Goals</a></li>

<li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/about">Description</a> </ul> </li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/experiments">Project</a> <ul> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/experiments">Life of Project</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/protocol">Protocols</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/labnotes">Lab Notes</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/meetingnotes">Meeting Notes</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/resources">Resources</a></li> </ul> </li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/results">Results</a> <ul> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/results">Experimental Results</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/data">Data</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/futurework">Future Work</a></li> </li> </ul> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/media">Media</a> <ul> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/projectvideo">Project Video</a><li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/animations">Animations</a><li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/videoblogs">Video Blog</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/photos">Photos</a></li> </ul> </li> <li><a href="http://openwetware.org/wiki/Biomod/2013/OSU/team">Team</a></li> </ul>

</div>

</center> </html>

Edit <html>

<head> <style type="text/css"> .slider-container { 

       color: white;
       text-align:left;
   }

.slider { 

   position:relative;
   width:600px;
   height:400px;
   background-color:black;
   margin: 0 auto;

} 

   .slider-prev {
       position:absolute;   
      width:30px;
       height:100%;
       background-color: black;
       padding-left:5px;
       padding-right:5px;
       filter: alpha(opacity=25);
       opacity: .25;
   }
   .slider-next {
       position:absolute;   
       right:0px;
       height:100%;
       background-color: black;
       padding-left:5px;
       padding-right:5px;
       filter: alpha(opacity=25);
       opacity: .25;
   }

   .slider-prev:hover {
       filter: alpha(opacity=55);
       opacity: .55;
   }

   .slider-next:hover {
       filter: alpha(opacity=55);
       opacity: .55;
   }
   .slider-prev a{
       position:absolute;
       top: 50%;
       text-decoration:none;
       color:#FFFFFF;
       font-size:24px;
      
   }
   .slider-next a{
      position:relative;
      top: 50%;
      text-decoration:none;
      color:#FFFFFF;
      font-size:24px;
   }

   .slider img {
       position:absolute;
   }

   #img-slider-caption{
       position:absolute;   
       bottom:0px;
       width:100%;
       background-color: black;
       padding-left:0px;
       padding-right:0px;
       filter: alpha(opacity=50);
       opacity: .50;
   }


</style>


<script type="text/javascript">

var imgs = ["http://openwetware.org/images/5/5b/OSU_Deformed_shape1.png", "http://openwetware.org/images/5/50/OSU_Deformed_shape2.png", "http://openwetware.org/images/8/8b/OSUwetlab1.jpg", "http://openwetware.org/images/d/dc/OSUwetlab2.jpg", "http://openwetware.org/images/0/09/OSUwetlab3.jpg", "http://openwetware.org/images/4/43/OSUwetlab4.jpg", "http://openwetware.org/images/b/be/OSUwetlab5.jpg", "http://openwetware.org/images/c/c8/Ohiomod2013team.jpg"];

var allImgs = imgs var structureImgs = [imgs[0], imgs[1]]; var labImgs = [imgs[7], imgs[2], imgs[3],imgs[4],imgs[5],imgs[6]];

var captions = ["Side view of our structure", "Front view of our structure", "Our lab", "Our lab again", "and again...", "Gel electrophoresis", "Examining the gel after running"];

var counter = 0;

function changeImages(type){ if (type=="lab"){imgs = labImgs;} else if (type=="struct"){imgs = structureImgs;} else { imgs = allImgs } counter = 0; document.getElementById("slider-img").setAttribute("src", imgs[counter]); }

function next(){ counter++; if (counter >= imgs.length){counter = 0;} document.getElementById("slider-img").setAttribute("src", imgs[counter]); document.getElementById("img-caption").innerHTML = captions[counter];

}

function previous(){ counter--; if (counter < 0 ){counter = imgs.length - 1;} document.getElementById("slider-img").setAttribute("src", imgs[counter]); document.getElementById("img-caption").innerHTML = captions[counter];

}

</script>

</head>

<div id="media-container" style="width:65%;margin-left:auto;margin-right:auto;">

<h1>Video Blogs</h1> <center> <iframe style="margin-top:10px" width="560" height="315" src="//www.youtube.com/embed/tGonkdAFvUs" frameborder="0" allowfullscreen></iframe> </center>

<p>View the rest of our Video Blog posts on out <a href="http://www.youtube.com/user/OhioMOD2013">Youtube Channel</a>!</p>


<h1>Photos</h1> <a onClick="changeImages('lab');">Lab Photos</a> | <a onClick="changeImages('struct');">Structure Photos</a> | <a onClick="changeImages('all');">All Photos</a>

<div class="slider-container" width="600" height="400" style="margin-top:10px"> 

   <div class="slider" width="600" height="400">
       <img id="slider-img" src="http://openwetware.org/images/5/5b/OSU_Deformed_shape1.png" width="600" height="400" />
       <div onClick="previous();" class="slider-prev"> 
           <a><<</a>
       </div>
       <div onClick="next();" class="slider-next"> 
           <a>>></a>
       </div>
       <div id="img-slider-caption">
          <p id="img-caption">Front view of our structure</p>
       </div>
          </div>
   </div>


</html>


<html>

<head> <style>

  1. Footer table {
  width: 96.8%;
  max-width:2350px;
  bottom:0px;
  height:50px;   /* Height of the footer */
  font-weight:300;
  background-color: #2E2E2E;
   text-align:center;
   color: white;
   font-size:13px;
   border: 3px white solid;

}

  1. Footer {
   clear: both; /*may be omitted*/
   position: absolute;
   bottom: 12px; 
   background-color:#fffff;
   width: 100%;
   height: 40px; /* or anything you like */
}


</style> </head> <div id="Footer" > 

       <table>
           <tr>

<td id="osuicon" align="left"><a href="http://www.osu.edu" target="_blank"><img src="http://openwetware.org/images/c/cd/TheOhioStateUniversity-REV-Horiz-RGBHEX.png"height="30" width="190" /></td>

<td id="email">Contact us at <a href="mailto:theohiomod@gmail.com"><font color="white">theohiomod@gmail.com</a></td>

<td id="nblicon"><a href="http://mae.osu.edu/labs/nbl/"target="_blank"><img src="http://openwetware.org/images/e/e9/NBL_logo-RGBHEX.png"height="40" width="40"/></td>

<td id="fbicon"><a href="http://www.facebook.com/OhioMod?fref=photo"target="_blank"><img src="http://openwetware.org/images/3/3f/Facebook_icon.png"height="40" width="40"/></td> 

           </tr>
       </table>
   </div>

</html>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2013/OSU/media&oldid=728386"