Team:Amsterdam/Sandbox

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:Amsterdam/Header2}}
 
<html>
<html>
-
<meta name="keywords" content="igem amsterdam, igem amsterdam 2011, igem team amsterdam" />
 
-
<meta name="description" content="iGEM team Amsterdam 2011. In this wiki you can find information about our progress in the iGEM competition. Our labjournal, recent activities, biobricks and much more." />
 
-
<div id="leftcolumn">
 
-
<h1>iGEM team Amsterdam 2011                            <g:plusone></g:plusone></h1>
 
-
Welcome to the wiki of team iGEM Amsterdam 2011! On this site, you can find out everything about the team that represents Amsterdam in this year's edition of the iGEM competition, as well as our project: <a href="https://2011.igem.org/Team:Amsterdam/Project/Description"><b>icE. coli</b></a>. You will find answers to questions like...<br><br>
 
-
<ul><li>Who are the <a href="https://2011.igem.org/Team:Amsterdam/Team/Students">team members</a>?</li>
+
<style type="text/css">
-
<li>What are they <a href="https://2011.igem.org/Team:Amsterdam/Project/Description">working</a> on?</li>
+
-
<li>Who's <a href="https://2011.igem.org/Team:Amsterdam/Sponsors">paying</a> for all this?</li></ul>
+
-
... and many more!<br><br>
+
-
Please take a look around, and be sure to <A HREF="mailto:igemamsterdam@gmail.com">contact us</a> with any questions you are left with!
+
<!--
-
<br><br>
+
-
<h1>Abstract</h1>
+
-
<i>Escherichia coli's</i> optimal growth temperature is 37°C. Its growth rate decreases drastically at lower temperatures and growth completely halts below 7°C. The aim of our project is to increase the cold tolerance of <i>E. coli</i> by expressing and combining several chaperone proteins that are normally found in psychrophillic bacteria. Chaperone proteins are essential in maintaining correct protein folding following changes in temperature. As such, expressing these proteins will enable enhanced growth rates at temperatures below 37°C and shift the minimal growth temperature down from 7°C, possibly even allowing growth near 0°C. Protein expression is achieved by using BioBricks, combining promoters and ribosome binding sites characterized by previous iGEM teams with newly synthesized genes that encode for psychrophile chaperones. While our subject is mainly fundamental in nature, there are various practical applications such as selection for growth on low temperatures instead of antibiotics or the optimization of biofuel production.
+
-
<h1>News</h1>
+
-
<div id="news">
+
-
</html>
+
-
{{:Team:Amsterdam/News}}
+
-
<html>
+
-
</div>
+
-
<hr>
+
-
</div>
+
-
<div id="rightcolumn">
+
/**
-
<center>
+
-
<img src="https://static.igem.org/mediawiki/2011/d/d4/Logo.jpg" align="center"; width="248 px"; height="112 px";><br>
+
-
Would you like to contact us? <A HREF="mailto:igemamsterdam@gmail.com">E-Mail</A>
+
-
<object type="application/x-shockwave-flash" data="http://www.oneplusyou.com/bb/files/countdown/countdown.swf?co=FF0000&bgcolor=FFFFFF&date_month=10&date_day=01&date_year=0&un=EUROPEAN JAMBOREE 2011&size=normal&mo=10&da=01&yr=2011" width="250" height="80"><PARAM NAME="WMODE" VALUE="transparent" /><param name="movie" value="http://www.oneplusyou.com/bb/files/countdown/countdown.swf?co=FF0000&bgcolor=FFFFFF&date_month=10&date_day=01&date_year=0&un=EUROPEAN JAMBOREE 2011&size=normal&mo=10&da=01&yr=2011" /><param name="bgcolor" value="#FFFFFF" /></object><img src="http://www.oneplusyou.com/q/img/bb_badges/countdown.jpg" alt="" style="display: none;" height="1" width="1" /><br><br>
+
-
<a href="http://twitter.com/igemamsterdam" class="twitter-follow-button" data-show-count="yes">Follow @igemamsterdam</a>
+
-
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script><br><br>
+
-
Would you like to help us?
+
* Slideshow style rules.
-
<a href="http://www.indiegogo.com/iGEM-Amsterdam-icE-coli">Donate here!</a><br>
+
-
<a href="http://www.indiegogo.com/iGEM-Amsterdam-icE-coli"> <img src="https://static.igem.org/mediawiki/2011/5/56/Indiegogo_logo3.jpg" style= "max-width:250px;" /> </a>
+
-
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Figemamsterdam2011&amp;width=248&amp;colorscheme=light&amp;border_color&amp;header=true&amp;show_faces=true&amp; height=200" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:248px; height:200px; margin-top: 10px" allowTransparency="yes"></iframe>
+
*/
-
</center>
+
 
-
<div id="sitenews">
+
#slideshow {
-
</html>
+
 
-
{{:Team:Amsterdam/Sitenews}}
+
margin:0 auto;
-
<html>
+
 
-
</div>
+
width:640px;
 +
 
 +
height:263px;
 +
 
 +
background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;
 +
 
 +
position:relative;
-
<center>
 
-
<a href="http://www4.clustrmaps.com/counter/maps.php?url=https://2011.igem.org/Team:Amsterdam" id="clustrMapsLink"><img src="http://www4.clustrmaps.com/counter/index2.php?url=https://2011.igem.org/Team:Amsterdam" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" />
 
-
</a>
 
-
<script type="text/javascript">
 
-
function cantload() {
 
-
img = document.getElementById("clustrMapsImg");
 
-
img.onerror = null;
 
-
img.src = "http://www2.clustrmaps.com/images/clustrmaps-back-soon.jpg";
 
-
document.getElementById("clustrMapsLink").href = "http://www2.clustrmaps.com";
 
}
}
-
img = document.getElementById("clustrMapsImg");
+
 
-
img.onerror = cantload;
+
#slideshow #slidesContainer {
 +
 
 +
  margin:0 auto;
 +
 
 +
  width:560px;
 +
 
 +
  height:263px;
 +
 
 +
  overflow:auto; /* allow scrollbar */
 +
 
 +
  position:relative;
 +
 
 +
}
 +
 
 +
#slideshow #slidesContainer .slide {
 +
 
 +
  margin:0 auto;
 +
 
 +
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
 +
 
 +
  height:263px;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
/**
 +
 
 +
* Slideshow controls style rules.
 +
 
 +
*/
 +
 
 +
.control {
 +
 
 +
  display:block;
 +
 
 +
  width:39px;
 +
 
 +
  height:263px;
 +
 
 +
  text-indent:-10000px;
 +
 
 +
  position:absolute;
 +
 
 +
  cursor: pointer;
 +
 
 +
}
 +
 
 +
#leftControl {
 +
 
 +
  top:0;
 +
 
 +
  left:0;
 +
 
 +
  background:transparent url(img/control_left.jpg) no-repeat 0 0;
 +
 
 +
}
 +
 
 +
#rightControl {
 +
 
 +
  top:0;
 +
 
 +
  right:0;
 +
 
 +
  background:transparent url(img/control_right.jpg) no-repeat 0 0;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
/**
 +
 
 +
* Style rules for Demo page
 +
 
 +
*/
 +
 
 +
* {
 +
 
 +
  margin:0;
 +
 
 +
  padding:0;
 +
 
 +
  font:normal 11px Verdana, Geneva, sans-serif;
 +
 
 +
 
 +
 
 +
}
 +
 
 +
a {
 +
 
 +
  color: #fff;
 +
 
 +
  font-weight:bold;
 +
 
 +
  text-decoration:none;
 +
 
 +
}
 +
 
 +
a:hover {
 +
 
 +
  text-decoration:underline;
 +
 
 +
}
 +
 
 +
a img {border:2px solid #ccc;}
 +
 
 +
body {
 +
 
 +
  background:#393737 url(img/bg_body.jpg) repeat-x top left;
 +
 
 +
}
 +
 
 +
#pageContainer {
 +
 
 +
  margin:0 auto;
 +
 
 +
  width:960px;
 +
 
 +
}
 +
 
 +
#pageContainer h1 {
 +
 
 +
  display:block;
 +
 
 +
  width:960px;
 +
 
 +
  background:transparent url(img/bg_pagecontainer_h1.jpg) no-repeat top left;
 +
 
 +
  text-indent: -10000px;
 +
 
 +
}
 +
 
 +
.slide h2, .slide p {
 +
 
 +
  margin:15px;
 +
 
 +
}
 +
 
 +
.slide h2 {
 +
 
 +
  font:italic 24px Georgia, "Times New Roman", Times, serif;
 +
 
 +
  color:#ccc;
 +
 
 +
  letter-spacing:-1px;
 +
 
 +
}
 +
 
 +
.slide img {
 +
 
 +
  float:right;
 +
 
 +
  margin:0 15px;
 +
 
 +
}
 +
 
 +
 
 +
-->
 +
 
 +
</style>
 +
 
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 +
 
 +
<script type="text/javascript">
 +
 
 +
$(document).ready(function(){
 +
 
 +
  var currentPosition = 0;
 +
 
 +
  var slideWidth = 560;
 +
 
 +
  var slides = $('.slide');
 +
 
 +
  var numberOfSlides = slides.length;
 +
 
 +
 
 +
 
 +
  // Remove scrollbar in JS
 +
 
 +
  $('#slidesContainer').css('overflow', 'hidden');
 +
 
 +
 
 +
 
 +
  // Wrap all .slides with #slideInner div
 +
 
 +
  slides
 +
 
 +
    .wrapAll('<div id="slideInner"></div>')
 +
 
 +
    // Float left to display horizontally, readjust .slides width
 +
 
 +
.css({
 +
 
 +
      'float' : 'left',
 +
 
 +
      'width' : slideWidth
 +
 
 +
    });
 +
 
 +
 
 +
 
 +
  // Set #slideInner width equal to total width of all slides
 +
 
 +
  $('#slideInner').css('width', slideWidth * numberOfSlides);
 +
 
 +
 
 +
 
 +
  // Insert controls in the DOM
 +
 
 +
  $('#slideshow')
 +
 
 +
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
 +
 
 +
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
 +
 
 +
 
 +
 
 +
  // Hide left arrow control on first load
 +
 
 +
  manageControls(currentPosition);
 +
 
 +
 
 +
 
 +
  // Create event listeners for .controls clicks
 +
 
 +
  $('.control')
 +
 
 +
    .bind('click', function(){
 +
 
 +
    // Determine new position
 +
 
 +
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
 +
 
 +
   
 +
 
 +
// Hide / show controls
 +
 
 +
    manageControls(currentPosition);
 +
 
 +
    // Move slideInner using margin-left
 +
 
 +
    $('#slideInner').animate({
 +
 
 +
      'marginLeft' : slideWidth*(-currentPosition)
 +
 
 +
    });
 +
 
 +
  });
 +
 
 +
 
 +
 
 +
  // manageControls: Hides and Shows controls depending on currentPosition
 +
 
 +
  function manageControls(position){
 +
 
 +
    // Hide left arrow if position is first slide
 +
 
 +
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
 +
 
 +
// Hide right arrow if position is last slide
 +
 
 +
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
 +
 
 +
  }
 +
 
 +
});
 +
 
</script>
</script>
-
<br><br>
+
 
-
<a href="https://2011.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2011/b/b0/Igem_minder_koud3.jpg" width="150 px";></a>
+
 
-
</center>
+
<body>
 +
 
 +
<div id="pageContainer">
 +
 
 +
  <h1><a href="http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/">Slick Slideshow using jQuery</a></h1>
 +
 
 +
  <!-- Slideshow HTML -->
 +
 
 +
  <div id="slideshow">
 +
 
 +
    <div id="slidesContainer">
 +
 
 +
      <div class="slide">
 +
 
 +
        <h2>Web Development Tutorial</h2>
 +
 
 +
        <p><a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/"><img src="img/img_slide_01.jpg" alt="An image that says Install X A M P P for wordpress." width="215" height="145" /></a>If you're into developing web apps, you should check out the tutorial called "<a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/">Using XAMPP for Local WordPress Theme Development</a>" which shows you how to set up a local testing server for developing PHP/Perl based applications locally on your computer. The example also shows you how to set up WordPress locally!</p>
 +
 
 +
      </div>
 +
 
 +
      <div class="slide">
 +
 
 +
        <h2>Grunge Brushes, Anyone?</h2>
 +
 
 +
        <p><a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/"><img src="img/img_slide_02.jpg" width="215" height="145" alt="A thumbnail image that says S R grunge photoshop brushes 6 high resolution grunge brushes by six revisions." /></a>In this layout, I used <a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/">SR Grunge</a>, which is a free set of high-resolution Photoshop brushes you can download here on Six Revisions.</p>
 +
 
 +
        <p>
 +
 
 +
      </div>
 +
 
 +
      <div class="slide">
 +
 
 +
        <h2>How About Some Awesome Grunge Textures?</h2>
 +
 
 +
        <p><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="img/img_slide_03.jpg" width="215" height="145" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a>The texture used in this web page is from the Grunge Extreme Textures freebie set by JC Parmley released here on Six Revisions.</p>
 +
 
 +
        <p>You can head over to the <a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/">Grunge Extreme</a> page to download the texture set or check out Six Revisions' <a href="http://sixrevisions.com/category/freebies/">freebie section</a> for even more goodies!</p>
 +
 
 +
      </div>
 +
 
 +
      <div class="slide">
 +
 
 +
        <h2>'Tis the End, My Friend.</h2>
 +
 
 +
        <p><a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/"><img src="img/img_slide_04.jpg" width="215" height="145" alt="Thumbnail image that says sleek button using photoshop that links to a Photoshop tutoril." /></a>This is the last slide. Hit the left arrow control to go back to the other slides.</p>
 +
 
 +
        <p>Alternatively, you may want to check out the tutorial on how to create a simple and cool button in Photoshop called &quot;<a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/">How to Create a Slick and Clean Button in Photoshop</a>&quot; which was inspired by the <a href="http://www.campaignmonitor.com/designer/?utm_source=sixrevisions&amp;utm_medium=banner&amp;utm_term=2&amp;utm_content=0003&amp;utm_campaign=Apr09Banners">Campaign Monitor</a> web interface.</p>
 +
 
 +
      </div>
 +
 
 +
    </div>
 +
 
 +
  </div>
 +
 
 +
  <!-- Slideshow HTML -->
 +
 
 +
 
</div>
</div>
 +
 +
</body>
 +
</html>
</html>
-
{{:Team:Amsterdam/Footer}}
 

Revision as of 13:31, 8 September 2011

Slick Slideshow using jQuery

Web Development Tutorial

An image that says Install X A M P P for wordpress.If you're into developing web apps, you should check out the tutorial called "Using XAMPP for Local WordPress Theme Development" which shows you how to set up a local testing server for developing PHP/Perl based applications locally on your computer. The example also shows you how to set up WordPress locally!

Grunge Brushes, Anyone?

A thumbnail image that says S R grunge photoshop brushes 6 high resolution grunge brushes by six revisions.In this layout, I used SR Grunge, which is a free set of high-resolution Photoshop brushes you can download here on Six Revisions.

How About Some Awesome Grunge Textures?

A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions.The texture used in this web page is from the Grunge Extreme Textures freebie set by JC Parmley released here on Six Revisions.

You can head over to the Grunge Extreme page to download the texture set or check out Six Revisions' freebie section for even more goodies!

'Tis the End, My Friend.

Thumbnail image that says sleek button using photoshop that links to a Photoshop tutoril.This is the last slide. Hit the left arrow control to go back to the other slides.

Alternatively, you may want to check out the tutorial on how to create a simple and cool button in Photoshop called "How to Create a Slick and Clean Button in Photoshop" which was inspired by the Campaign Monitor web interface.

Retrieved from "http://2011.igem.org/Team:Amsterdam/Sandbox"