Team:IIT Delhi

From 2013.igem.org

(Difference between revisions)
 
(38 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<head>
<head>
 +
 +
   <meta content="text/html; charset=ISO-8859-1"
   <meta content="text/html; charset=ISO-8859-1"
  http-equiv="content-type">
  http-equiv="content-type">
   <title>Navigation-Top</title>
   <title>Navigation-Top</title>
 +
 +
 +
   <style ="text/css">
   <style ="text/css">
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { display:none;}
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { display:none;}
Line 27: Line 32:
height: 50px; margin: 0; /* Ensures there is no space between sides of the screen and the menu */
height: 50px; margin: 0; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
-
position: relative; background-color: #333333;
+
position: relative; background-color: white;
}
}
.navbar {
.navbar {
Line 35: Line 40:
margin: 0;
margin: 0;
position: absolute; /* Ensures that the menu doesn&#8217;t affect other elements */
position: absolute; /* Ensures that the menu doesn&#8217;t affect other elements */
-
border-right: 1px solid #333333; }
+
border-right: 0.5px solid white; }
.navbar li {
.navbar li {
height: auto;
height: auto;
Line 42: Line 47:
text-align: center; /* All text is placed in the center of the box */
text-align: center; /* All text is placed in the center of the box */
list-style: none; /* Removes the default styling (bullets) for the list */
list-style: none; /* Removes the default styling (bullets) for the list */
-
font: normal bold 12px/1.2em Arial, Verdana, Helvetica; padding: 0;
+
font: normal bold 13px/1.2em Arial, Verdana, Helvetica; padding: 0;
margin: 0;
margin: 0;
-
background-color: #333333;
+
background-color: white;
}
}
.navbar a { padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
.navbar a { padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
-
border-left: 1px solid #333333; border-right: 1px solid #333333; text-decoration: none; /* Removes the default hyperlink styling. */
+
border-left: 0.5px solid black; border-right: 0.5px solid black; border-top: 0.5px solid black; border-bottom: 0.5px solid black; text-decoration: none; /* Removes the default hyperlink styling. */
color: white; /* Text color is white */
color: white; /* Text color is white */
display: block;
display: block;
}
}
#home {background-color:red;}
#home {background-color:red;}
-
#home:hover {color:red; background-color: #333333;}  
+
#home:hover {color:red; background-color: white;}  
#Project {background-color:orange;}
#Project {background-color:orange;}
-
#Project:hover {color:orange; background-color: #333333;}
+
#Project:hover {color:orange; background-color: white;}
#overview {background-color: orange;}
#overview {background-color: orange;}
-
#overview:hover {color:orange; background-color: #333333;}
+
#overview:hover {color:orange; background-color: white;}
#motivation {background-color: orange;}
#motivation {background-color: orange;}
-
#motivation:hover {color:orange; background-color: #333333;}
+
#motivation:hover {color:orange; background-color: white;}
#model {background-color: orange;}
#model {background-color: orange;}
-
#model:hover {color:orange; background-color: #333333;}
+
#model:hover {color:orange; background-color: white;}
#biobricks {background-color: orange;}
#biobricks {background-color: orange;}
-
#biobricks:hover {color:orange; background-color: #333333;}
+
#biobricks:hover {color:orange; background-color: white;}
-
#modelling {background-color: yellow;}
+
#modelling {background-color: #b3b300;}
-
#modelling:hover {color:yellow; background-color: #333333;}
+
#modelling:hover {color:#b3b300; background-color: white;}
#methods {background-color: green;}
#methods {background-color: green;}
-
#methods:hover {color:green; background-color:#333333;}
+
#methods:hover {color:green; background-color:white;}
#protocol {background-color: green;}
#protocol {background-color: green;}
-
#protocol:hover {color:green; background-color:#333333;}
+
#protocol:hover {color:green; background-color: white;}
#notebook {background-color: green;}
#notebook {background-color: green;}
-
#notebook:hover {color:green; background-color: #333333;}
+
#notebook:hover {color:green; background-color: white;}
 +
#brainstorming {background-color: green;}
 +
#brainstorming:hover {color:green; background-color: white;}
#safety {background-color: green;}
#safety {background-color: green;}
-
#safety:hover {color:green; background-color:#333333;}
+
#safety:hover {color:green; background-color:white;}
#outreach {background-color: violet;}
#outreach {background-color: violet;}
-
#outreach:hover {color:violet; background-color: #333333;}
+
#outreach:hover {color:violet; background-color: white;}
#orientation {background-color: violet;}
#orientation {background-color: violet;}
-
#orientation:hover {color:violet; background-color: #333333;}
+
#orientation:hover {color:violet; background-color: white;}
#south {background-color: violet;}
#south {background-color: violet;}
-
#south:hover {color:violet; background-color: #333333;}
+
#south:hover {color:violet; background-color: white;}
#bill {background-color: violet;}
#bill {background-color: violet;}
-
#bill:hover {color:violet; background-color: #333333;}
+
#bill:hover {color:violet; background-color: white;}
#biotoilets {background-color: violet;}
#biotoilets {background-color: violet;}
-
#biotoilets:hover {color:violet; background-color: #333333;}
+
#biotoilets:hover {color:violet; background-color: white;}
#team {background-color: darkblue;}
#team {background-color: darkblue;}
-
#team:hover {color:darkblue; background-color: #333333;}
+
#team:hover {color:darkblue; background-color: white;}
#student {background-color: darkblue;}
#student {background-color: darkblue;}
-
#student:hover {color:darkblue; background-color: #333333;}
+
#student:hover {color:darkblue; background-color: white;}
#faculty {background-color: darkblue;}
#faculty {background-color: darkblue;}
-
#faculty:hover {color:darkblue; background-color: #333333;}
+
#faculty:hover {color:darkblue; background-color: white;}
#attributions {background-color: darkblue;}
#attributions {background-color: darkblue;}
-
#attributions:hover {color:darkblue; background-color: #333333;}
+
#attributions:hover {color:darkblue; background-color: white;}
.navbar li ul {
.navbar li ul {
Line 106: Line 113:
}
}
-
.navbar li ul li {background-color: #333333; width: 100%;} .navbar li ul li a {
+
.navbar li ul li {background-color: white; width: 100%;} .navbar li ul li a {
-
border-left: 1px solid #1f5065; border-right: 1px solid #333333; border-top: 1px solid #333333; border-bottom: 1px solid #333333; width: auto; }
+
border-left: 0.5px solid black; border-right: 0.5px solid black; border-top: 0.5px solid black; border-bottom: 0.5px solid black; width: auto; }
-
.navbar li ul li a:hover {width: 100%; background-color: #333333;}
+
.navbar li ul li a:hover {width: 100%; background-color: white;}
-
/*-----------------------------------------------------Slideshow---------------------------------------------------*/
+
-
 
+
-
 
+
-
<SCRIPT TYPE="text/javascript">
+
-
function slide(src,link,text,target,attr) {
+
-
  // This is the constructor function for the slide object.
+
-
  // It is called automatically when you create a new slide object.
+
-
  // For example:
+
-
  // s = new slide();
+
-
 
+
-
  // Image URL
+
-
  this.src = src;
+
-
 
+
-
  // Link URL
+
-
  this.link = link;
+
-
 
+
-
  // Text to display
+
-
  this.text = text;
+
-
 
+
-
  // Name of the target window ("_blank")
+
-
  this.target = target;
+
-
 
+
-
  // Custom duration for the slide, in milliseconds.
+
-
  // This is an optional parameter.
+
-
  // this.timeout = 3000
+
-
 
+
-
  // Attributes for the target window:
+
-
  // width=n,height=n,resizable=yes or no,scrollbars=yes or no,
+
-
  // toolbar=yes or no,location=yes or no,directories=yes or no,
+
-
  // status=yes or no,menubar=yes or no,copyhistory=yes or no
+
-
  // Example: "width=200,height=300"
+
-
  this.attr = attr;
+
-
 
+
-
  // Create an image object for the slide
+
-
  if (document.images) {
+
-
    this.image = new Image();
+
-
  }
+
-
 
+
-
  // Flag to tell when load() has already been called
+
-
  this.loaded = false;
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.load = function() {
+
-
    // This method loads the image for the slide
+
-
 
+
-
    if (!document.images) { return; }
+
-
 
+
-
    if (!this.loaded) {
+
-
      this.image.src = this.src;
+
-
      this.loaded = true;
+
-
    }
+
-
  }
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.hotlink = function() {
+
-
    // This method jumps to the slide's link.
+
-
    // If a window was specified for the slide, then it opens a new window.
+
-
 
+
-
    var mywindow;
+
-
 
+
-
    // If this slide does not have a link, do nothing
+
-
    if (!this.link) return;
+
-
 
+
-
    // Open the link in a separate window?
+
-
    if (this.target) {
+
-
 
+
-
      // If window attributes are specified,
+
-
      // use them to open the new window
+
-
      if (this.attr) {
+
-
        mywindow = window.open(this.link, this.target, this.attr);
+
-
 
+
-
      } else {
+
-
        // If window attributes are not specified, do not use them
+
-
        // (this will copy the attributes from the originating window)
+
-
        mywindow = window.open(this.link, this.target);
+
-
      }
+
-
 
+
-
      // Pop the window to the front
+
-
      if (mywindow && mywindow.focus) mywindow.focus();
+
-
 
+
-
    } else {
+
-
      // Open the link in the current window
+
-
      location.href = this.link;
+
-
    }
+
-
  }
+
-
}
+
-
 
+
-
//==================================================
+
-
// slideshow object
+
-
//==================================================
+
-
function slideshow( slideshowname ) {
+
-
  // This is the constructor function for the slideshow object.
+
-
  // It is called automatically when you create a new object.
+
-
  // For example:
+
-
  // ss = new slideshow("ss");
+
-
 
+
-
  // Name of this object
+
-
  // (required if you want your slideshow to auto-play)
+
-
  // For example, "SLIDES1"
+
-
  this.name = slideshowname;
+
-
 
+
-
  // When we reach the last slide, should we loop around to start the
+
-
  // slideshow again?
+
-
  this.repeat = true;
+
-
 
+
-
  // Number of images to pre-fetch.
+
-
  // -1 = preload all images.
+
-
  //  0 = load each image is it is used.
+
-
  //  n = pre-fetch n images ahead of the current image.
+
-
  // I recommend preloading all images unless you have large
+
-
  // images, or a large amount of images.
+
-
  this.prefetch = -1;
+
-
 
+
-
  // IMAGE element on your HTML page.
+
-
  // For example, document.images.SLIDES1IMG
+
-
  this.image;
+
-
 
+
-
  // ID of a DIV element on your HTML page that will contain the text.
+
-
  // For example, "slides2text"
+
-
  // Note: after you set this variable, you should call
+
-
  // the update() method to update the slideshow display.
+
-
  this.textid;
+
-
 
+
-
  // TEXTAREA element on your HTML page.
+
-
  // For example, document.SLIDES1FORM.SLIDES1TEXT
+
-
  // This is a depracated method for displaying the text,
+
-
  // but you might want to supply it for older browsers.
+
-
  this.textarea;
+
-
 
+
-
  // Milliseconds to pause between slides.
+
-
  // Individual slides can override this.
+
-
  this.timeout = 3000;
+
-
 
+
-
  // Hook functions to be called before and after updating the slide
+
-
  // this.pre_update_hook = function() { }
+
-
  // this.post_update_hook = function() { }
+
-
 
+
-
  // These are private variables
+
-
  this.slides = new Array();
+
-
  this.current = 0;
+
-
  this.timeoutid = 0;
+
-
 
+
-
  //--------------------------------------------------
+
-
  // Public methods
+
-
  //--------------------------------------------------
+
-
  this.add_slide = function(slide) {
+
-
    // Add a slide to the slideshow.
+
-
    // For example:
+
-
    // SLIDES1.add_slide(new slide("s1.jpg", "link.html"))
+
-
 
+
-
    var i = this.slides.length;
+
-
 
+
-
    // Prefetch the slide image if necessary
+
-
    if (this.prefetch == -1) {
+
-
      slide.load();
+
-
    }
+
-
 
+
-
    this.slides[i] = slide;
+
-
  }
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.play = function(timeout) {
+
-
    // This method implements the automatically running slideshow.
+
-
    // If you specify the "timeout" argument, then a new default
+
-
    // timeout will be set for the slideshow.
+
-
 
+
-
    // Make sure we're not already playing
+
-
    this.pause();
+
-
 
+
-
    // If the timeout argument was specified (optional)
+
-
    // then make it the new default
+
-
    if (timeout) {
+
-
      this.timeout = timeout;
+
-
    }
+
-
 
+
-
    // If the current slide has a custom timeout, use it;
+
-
    // otherwise use the default timeout
+
-
    if (typeof this.slides[ this.current ].timeout != 'undefined') {
+
-
      timeout = this.slides[ this.current ].timeout;
+
-
    } else {
+
-
      timeout = this.timeout;
+
-
    }
+
-
 
+
-
    // After the timeout, call this.loop()
+
-
    this.timeoutid = setTimeout( this.name + ".loop()", timeout);
+
-
  }
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.pause = function() {
+
-
    // This method stops the slideshow if it is automatically running.
+
-
 
+
-
    if (this.timeoutid != 0) {
+
-
 
+
-
      clearTimeout(this.timeoutid);
+
-
      this.timeoutid = 0;
+
-
 
+
-
    }
+
-
  }
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.update = function() {
+
-
    // This method updates the slideshow image on the page
+
-
 
+
-
    // Make sure the slideshow has been initialized correctly
+
-
    if (! this.valid_image()) { return; }
+
-
 
+
-
    // Call the pre-update hook function if one was specified
+
-
    if (typeof this.pre_update_hook == 'function') {
+
-
      this.pre_update_hook();
+
-
    }
+
-
 
+
-
    // Convenience variable for the current slide
+
-
    var slide = this.slides[ this.current ];
+
-
 
+
-
    // Determine if the browser supports filters
+
-
    var dofilter = false;
+
-
    if (this.image &&
+
-
        typeof this.image.filters != 'undefined' &&
+
-
        typeof this.image.filters[0] != 'undefined') {
+
-
 
+
-
      dofilter = true;
+
-
 
+
-
    }
+
-
 
+
-
    // Load the slide image if necessary
+
-
    slide.load();
+
-
 
+
-
    // Apply the filters for the image transition
+
-
    if (dofilter) {
+
-
 
+
-
      // If the user has specified a custom filter for this slide,
+
-
      // then set it now
+
-
      if (slide.filter &&
+
-
          this.image.style &&
+
-
          this.image.style.filter) {
+
-
 
+
-
        this.image.style.filter = slide.filter;
+
-
 
+
-
      }
+
-
      this.image.filters[0].Apply();
+
-
    }
+
-
 
+
-
    // Update the image.
+
-
    this.image.src = slide.image.src;
+
-
 
+
-
    // Play the image transition filters
+
-
    if (dofilter) {
+
-
      this.image.filters[0].Play();
+
-
    }
+
-
 
+
-
    // Update the text
+
-
    this.display_text();
+
-
 
+
-
    // Call the post-update hook function if one was specified
+
-
    if (typeof this.post_update_hook == 'function') {
+
-
      this.post_update_hook();
+
-
    }
+
-
 
+
-
    // Do we need to pre-fetch images?
+
-
    if (this.prefetch > 0) {
+
-
 
+
-
      var next, prev, count;
+
-
 
+
-
      // Pre-fetch the next slide image(s)
+
-
      next = this.current;
+
-
      prev = this.current;
+
-
      count = 0;
+
-
      do {
+
-
 
+
-
        // Get the next and previous slide number
+
-
        // Loop past the ends of the slideshow if necessary
+
-
        if (++next >= this.slides.length) next = 0;
+
-
        if (--prev < 0) prev = this.slides.length - 1;
+
-
 
+
-
        // Preload the slide image
+
-
        this.slides[next].load();
+
-
        this.slides[prev].load();
+
-
 
+
-
        // Keep going until we have fetched
+
-
        // the designated number of slides
+
-
 
+
-
      } while (++count < this.prefetch);
+
-
    }
+
-
  }
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.goto_slide = function(n) {
+
-
    // This method jumpts to the slide number you specify.
+
-
    // If you use slide number -1, then it jumps to the last slide.
+
-
    // You can use this to make links that go to a specific slide,
+
-
    // or to go to the beginning or end of the slideshow.
+
-
    // Examples:
+
-
    // onClick="myslides.goto_slide(0)"
+
-
    // onClick="myslides.goto_slide(-1)"
+
-
    // onClick="myslides.goto_slide(5)"
+
-
 
+
-
    if (n == -1) {
+
-
      n = this.slides.length - 1;
+
-
    }
+
-
 
+
-
    if (n < this.slides.length && n >= 0) {
+
-
      this.current = n;
+
-
    }
+
-
 
+
-
    this.update();
+
-
  }
+
-
 
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.goto_random_slide = function(include_current) {
+
-
    // Picks a random slide (other than the current slide) and
+
-
    // displays it.
+
-
    // If the include_current parameter is true,
+
-
    // then
+
-
    // See also: shuffle()
+
-
 
+
-
    var i;
+
-
 
+
-
    // Make sure there is more than one slide
+
-
    if (this.slides.length > 1) {
+
-
 
+
-
      // Generate a random slide number,
+
-
      // but make sure it is not the current slide
+
-
      do {
+
-
        i = Math.floor(Math.random()*this.slides.length);
+
-
      } while (i == this.current);
+
-
+
-
      // Display the slide
+
-
      this.goto_slide(i);
+
-
    }
+
-
  }
+
-
 
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.next = function() {
+
-
    // This method advances to the next slide.
+
-
 
+
-
    // Increment the image number
+
-
    if (this.current < this.slides.length - 1) {
+
-
      this.current++;
+
-
    } else if (this.repeat) {
+
-
      this.current = 0;
+
-
    }
+
-
 
+
-
    this.update();
+
-
  }
+
-
 
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.previous = function() {
+
-
    // This method goes to the previous slide.
+
-
 
+
-
    // Decrement the image number
+
-
    if (this.current > 0) {
+
-
      this.current--;
+
-
    } else if (this.repeat) {
+
-
      this.current = this.slides.length - 1;
+
-
    }
+
-
 
+
-
    this.update();
+
-
  }
+
-
 
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.shuffle = function() {
+
-
    // This method randomly shuffles the order of the slides.
+
-
 
+
-
    var i, i2, slides_copy, slides_randomized;
+
-
 
+
-
    // Create a copy of the array containing the slides
+
-
    // in sequential order
+
-
    slides_copy = new Array();
+
-
    for (i = 0; i < this.slides.length; i++) {
+
-
      slides_copy[i] = this.slides[i];
+
-
    }
+
-
 
+
-
    // Create a new array to contain the slides in random order
+
-
    slides_randomized = new Array();
+
-
 
+
-
    // To populate the new array of slides in random order,
+
-
    // loop through the existing slides, picking a random
+
-
    // slide, removing it from the ordered list and adding it to
+
-
    // the random list.
+
-
 
+
-
    do {
+
-
 
+
-
      // Pick a random slide from those that remain
+
-
      i = Math.floor(Math.random()*slides_copy.length);
+
-
 
+
-
      // Add the slide to the end of the randomized array
+
-
      slides_randomized[ slides_randomized.length ] =
+
-
        slides_copy[i];
+
-
 
+
-
      // Remove the slide from the sequential array,
+
-
      // so it cannot be chosen again
+
-
      for (i2 = i + 1; i2 < slides_copy.length; i2++) {
+
-
        slides_copy[i2 - 1] = slides_copy[i2];
+
-
      }
+
-
      slides_copy.length--;
+
-
 
+
-
      // Keep going until we have removed all the slides
+
-
 
+
-
    } while (slides_copy.length);
+
-
 
+
-
    // Now set the slides to the randomized array
+
-
    this.slides = slides_randomized;
+
-
  }
+
-
 
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.get_text = function() {
+
-
    // This method returns the text of the current slide
+
-
 
+
-
    return(this.slides[ this.current ].text);
+
-
  }
+
-
 
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.get_all_text = function(before_slide, after_slide) {
+
-
    // Return the text for all of the slides.
+
-
    // For the text of each slide, add "before_slide" in front of the
+
-
    // text, and "after_slide" after the text.
+
-
    // For example:
+
-
    // document.write("<ul>");
+
-
    // document.write(s.get_all_text("<li>","\n"));
+
-
    // document.write("<\/ul>");
+
-
 
+
-
    all_text = "";
+
-
 
+
-
    // Loop through all the slides in the slideshow
+
-
    for (i=0; i < this.slides.length; i++) {
+
-
 
+
-
      slide = this.slides[i];
+
-
   
+
-
      if (slide.text) {
+
-
        all_text += before_slide + slide.text + after_slide;
+
-
      }
+
-
 
+
-
    }
+
-
 
+
-
    return(all_text);
+
-
  }
+
-
 
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.display_text = function(text) {
+
-
    // Display the text for the current slide
+
-
 
+
-
    // If the "text" arg was not supplied (usually it isn't),
+
-
    // get the text from the slideshow
+
-
    if (!text) {
+
-
      text = this.slides[ this.current ].text;
+
-
    }
+
-
 
+
-
    // If a textarea has been specified,
+
-
    // then change the text displayed in it
+
-
    if (this.textarea && typeof this.textarea.value != 'undefined') {
+
-
      this.textarea.value = text;
+
-
    }
+
-
 
+
-
    // If a text id has been specified,
+
-
    // then change the contents of the HTML element
+
-
    if (this.textid) {
+
-
 
+
-
      r = this.getElementById(this.textid);
+
-
      if (!r) { return false; }
+
-
      if (typeof r.innerHTML == 'undefined') { return false; }
+
-
 
+
-
      // Update the text
+
-
      r.innerHTML = text;
+
-
    }
+
-
  }
+
-
 
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.hotlink = function() {
+
-
    // This method calls the hotlink() method for the current slide.
+
-
 
+
-
    this.slides[ this.current ].hotlink();
+
-
  }
+
-
 
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.save_position = function(cookiename) {
+
-
    // Saves the position of the slideshow in a cookie,
+
-
    // so when you return to this page, the position in the slideshow
+
-
    // won't be lost.
+
-
 
+
-
    if (!cookiename) {
+
-
      cookiename = this.name + '_slideshow';
+
-
    }
+
-
 
+
-
    document.cookie = cookiename + '=' + this.current;
+
-
  }
+
-
 
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.restore_position = function(cookiename) {
+
-
  // If you previously called slideshow_save_position(),
+
-
  // returns the slideshow to the previous state.
+
-
 
+
-
    //Get cookie code by Shelley Powers
+
-
 
+
-
    if (!cookiename) {
+
-
      cookiename = this.name + '_slideshow';
+
-
    }
+
-
 
+
-
    var search = cookiename + "=";
+
-
 
+
-
    if (document.cookie.length > 0) {
+
-
      offset = document.cookie.indexOf(search);
+
-
      // if cookie exists
+
-
      if (offset != -1) {
+
-
        offset += search.length;
+
-
        // set index of beginning of value
+
-
        end = document.cookie.indexOf(";", offset);
+
-
        // set index of end of cookie value
+
-
        if (end == -1) end = document.cookie.length;
+
-
        this.current = parseInt(unescape(document.cookie.substring(offset, end)));
+
-
        }
+
-
    }
+
-
  }
+
-
 
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.noscript = function() {
+
-
    // This method is not for use as part of your slideshow,
+
-
    // but you can call it to get a plain HTML version of the slideshow
+
-
    // images and text.
+
-
    // You should copy the HTML and put it within a NOSCRIPT element, to
+
-
    // give non-javascript browsers access to your slideshow information.
+
-
    // This also ensures that your slideshow text and images are indexed
+
-
    // by search engines.
+
-
 
+
-
    $html = "\n";
+
-
 
+
-
    // Loop through all the slides in the slideshow
+
-
    for (i=0; i < this.slides.length; i++) {
+
-
 
+
-
      slide = this.slides[i];
+
-
 
+
-
      $html += '<P>';
+
-
 
+
-
      if (slide.link) {
+
-
        $html += '<a href="' + slide.link + '">';
+
-
      }
+
-
 
+
-
      $html += '<img src="' + slide.src + '" ALT="slideshow image">';
+
-
 
+
-
      if (slide.link) {
+
-
        $html += "<\/a>";
+
-
      }
+
-
 
+
-
      if (slide.text) {
+
-
        $html += "<BR>\n" + slide.text;
+
-
      }
+
-
 
+
-
      $html += "<\/P>" + "\n\n";
+
-
    }
+
-
 
+
-
    // Make the HTML browser-safe
+
-
    $html = $html.replace(/\&/g, "&amp;" );
+
-
    $html = $html.replace(/</g, "&lt;" );
+
-
    $html = $html.replace(/>/g, "&gt;" );
+
-
 
+
-
    return('<pre>' + $html + '</pre>');
+
-
  }
+
-
 
+
-
 
+
-
  //==================================================
+
-
  // Private methods
+
-
  //==================================================
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.loop = function() {
+
-
    // This method is for internal use only.
+
-
    // This method gets called automatically by a JavaScript timeout.
+
-
    // It advances to the next slide, then sets the next timeout.
+
-
    // If the next slide image has not completed loading yet,
+
-
    // then do not advance to the next slide yet.
+
-
 
+
-
    // Make sure the next slide image has finished loading
+
-
    if (this.current < this.slides.length - 1) {
+
-
      next_slide = this.slides[this.current + 1];
+
-
      if (next_slide.image.complete == null || next_slide.image.complete) {
+
-
        this.next();
+
-
      }
+
-
    } else { // we're at the last slide
+
-
      this.next();
+
-
    }
+
-
   
+
-
    // Keep playing the slideshow
+
-
    this.play( );
+
-
  }
+
-
 
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.valid_image = function() {
+
-
    // Returns 1 if a valid image has been set for the slideshow
+
-
 
+
-
    if (!this.image)
+
-
    {
+
-
      return false;
+
-
    }
+
-
    else {
+
-
      return true;
+
-
    }
+
-
  }
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.getElementById = function(element_id) {
+
-
    // This method returns the element corresponding to the id
+
-
 
+
-
    if (document.getElementById) {
+
-
      return document.getElementById(element_id);
+
-
    }
+
-
    else if (document.all) {
+
-
      return document.all[element_id];
+
-
    }
+
-
    else if (document.layers) {
+
-
      return document.layers[element_id];
+
-
    } else {
+
-
      return undefined;
+
-
    }
+
-
  }
+
-
 
+
-
 
+
-
  //==================================================
+
-
  // Deprecated methods
+
-
  // I don't recommend the use of the following methods,
+
-
  // but they are included for backward compatibility.
+
-
  // You can delete them if you don't need them.
+
-
  //==================================================
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.set_image = function(imageobject) {
+
-
    // This method is deprecated; you should use
+
-
    // the following code instead:
+
-
    // s.image = document.images.myimagename;
+
-
    // s.update();
+
-
 
+
-
    if (!document.images)
+
-
      return;
+
-
    this.image = imageobject;
+
-
  }
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.set_textarea = function(textareaobject) {
+
-
    // This method is deprecated; you should use
+
-
    // the following code instead:
+
-
    // s.textarea = document.form.textareaname;
+
-
    // s.update();
+
-
 
+
-
    this.textarea = textareaobject;
+
-
    this.display_text();
+
-
  }
+
-
 
+
-
  //--------------------------------------------------
+
-
  this.set_textid = function(textidstr) {
+
-
    // This method is deprecated; you should use
+
-
    // the following code instead:
+
-
    // s.textid = "mytextid";
+
-
    // s.update();
+
-
 
+
-
    this.textid = textidstr;
+
-
    this.display_text();
+
-
  }
+
-
SLIDES = new slideshow("SLIDES");
+
-
 
+
-
s = new slide();
+
-
s.src = "https://static.igem.org/mediawiki/2013/7/7a/Sfgfp-iit-igem.JPG";
+
-
//s.link = "pics/pic1-lg.jpg";
+
-
//s.text = "Open link in same window";
+
-
SLIDES.add_slide(s);
+
-
s.src = "https://static.igem.org/mediawiki/igem.org/e/e1/Banner-1.jpg";
+
-
SLIDES.add_slide(s);
+
-
 
+
-
if (document.images)
+
-
{
+
-
  SLIDES.set_image(document.images.SLIDESIMG);
+
-
  SLIDES.set_textid("SLIDESTEXT"); // optional
+
-
  SLIDES.update();
+
-
  SLIDES.play(); //optional
+
-
}
+
-
}
+
-
</SCRIPT>
+
-
 
+
-
 
+
-
/*----------------------------------------------slideshow----------------------------------------------------------*/
+
-
 
+
/* Slider */
/* Slider */
Line 849: Line 166:
opacity: 1;
opacity: 1;
}
}
 +
   </style>
   </style>
</head>
</head>
-
<body onLoad="SLIDES.restore_position(); SLIDES.update();"
+
 
-
onUnLoad="SLIDES.save_position()">
+
<body>
 +
 
<table
<table
  style="background-color: white; width: 100%; height: 200px; text-align: left; margin-left: auto; margin-right: auto;"
  style="background-color: white; width: 100%; height: 200px; text-align: left; margin-left: auto; margin-right: auto;"
Line 882: Line 201:
       <li><a href="https://2013.igem.org/Team:IIT_Delhi/Protocol" id="protocol">Protocols</a></li>
       <li><a href="https://2013.igem.org/Team:IIT_Delhi/Protocol" id="protocol">Protocols</a></li>
       <li><a href="https://2013.igem.org/Team:IIT_Delhi/Notebook" id="notebook">Notebook</a></li>
       <li><a href="https://2013.igem.org/Team:IIT_Delhi/Notebook" id="notebook">Notebook</a></li>
 +
      <li><a href="https://2013.igem.org/Team:IIT_Delhi/Brainstorming" id="brainstorming">Brainstorming</a></li>
       <li><a href="https://2013.igem.org/Team:IIT_Delhi/Safety" id="safety">Safety</a></li>
       <li><a href="https://2013.igem.org/Team:IIT_Delhi/Safety" id="safety">Safety</a></li>
     </ul>
     </ul>
Line 888: Line 208:
     <ul>
     <ul>
       <li><a href="https://2013.igem.org/Team:IIT_Delhi/Outreach" id="orientation">Orientation for Freshmen</a></li>
       <li><a href="https://2013.igem.org/Team:IIT_Delhi/Outreach" id="orientation">Orientation for Freshmen</a></li>
-
      <li><a href="https://2013.igem.org/Team:IIT_Delhi/Collabration" id="south">South Asian Collabration</a></li>
 
       <li><a href="https://2013.igem.org/Team:IIT_Delhi/BRAI" id="bill">BRAI Bill</a></li>
       <li><a href="https://2013.igem.org/Team:IIT_Delhi/BRAI" id="bill">BRAI Bill</a></li>
       <li><a href="https://2013.igem.org/Team:IIT_Delhi/Biotoilet" id="biotoilets">Biotoilets</a></li>
       <li><a href="https://2013.igem.org/Team:IIT_Delhi/Biotoilet" id="biotoilets">Biotoilets</a></li>
Line 926: Line 245:
  style="vertical-align: top; text-align: center; width: 291px; background-color: white;"></td>
  style="vertical-align: top; text-align: center; width: 291px; background-color: white;"></td>
       <td style="vertical-align: top; text-align: center;">
       <td style="vertical-align: top; text-align: center;">
-
      <div id="image-slider">
+
<div id="slide-frame">  
-
      <div id="slide-frame">
+
  <div id="slides"><img id="slide1" width=100% height=80%
-
 
+
src="https://static.igem.org/mediawiki/2013/1/1c/Iitd_333.jpg"
-
<a href="javascript:SLIDES.hotlink()">
+
alt=""><img id="slide2" width=600px height=300px src="https://static.igem.org/mediawiki/2013/b/bc/IITD2013.jpg"
-
<IMG NAME="SLIDESIMG1" SRC="https://static.igem.org/mediawiki/2013/7/7a/Sfgfp-iit-igem.JPG"
+
  alt=""><img id="slide3" width=600px height=300px src="https://static.igem.org/mediawiki/2013/1/1e/Iitd_team.jpg"
-
  WIDTH="150" HEIGHT="150" BORDER="0" ALT="slideshow image">
+
alt=""><img id="slide4" width=600px height=300px src="https://static.igem.org/mediawiki/2013/9/91/Iitd2.JPG"
-
<IMG NAME="SLIDESIMG2" SRC="https://static.igem.org/mediawiki/igem.org/e/e1/Banner-1.jpg"
+
  alt=""><img id="slide5" width=100% height=80% src="https://static.igem.org/mediawiki/2013/4/4f/Coli.jpg"
-
  WIDTH="150" HEIGHT="150" BORDER="0" ALT="slideshow image">
+
alt=""></div>
-
</a>     
+
-
 
+
-
 
+
-
</div>
+
       </div>
       </div>
-
       </td>
+
       <div id="navigation">
-
      <td
+
       <a href="#slide1">1</a>
-
style="vertical-align: top; text-align: center; width: 294px; background-color: white;"></td>
+
       <a href="#slide2">2</a>
-
       <td
+
       <a href="#slide3">3</a>
-
style="vertical-align: top; text-align: center; width: 110px; background-color: white;"></td>
+
       <a href="#slide4">4</a>
-
    </tr>
+
       <a href="#slide5">5</a>  
-
    <tr>
+
</tr>
-
       <td
+
</tbody>
-
style="vertical-align: top; text-align: center; width: 115px; background-color: white;"></td>
+
-
       <td
+
-
style="vertical-align: top; text-align: center; width: 291px;"></td>
+
-
       <td align="center" valign="top"></td>
+
-
       <td style="width: 294px;" align="center"
+
-
valign="top"></td>
+
-
      <td
+
-
style="vertical-align: top; text-align: center; width: 110px; background-color: white;"></td>
+
-
    </tr>
+
-
  </tbody>
+
</table>
</table>
-
<br>
+
   
-
<table
+
  <br><br><br>     
-
  style="text-align: left; background-color: white; width: 100%; height: 85px;"
+
-
border="0" cellpadding="0" cellspacing="0">
+
-
  <tbody>
+
-
    <tr>
+
-
      <td colspan="3" rowspan="1"
+
-
style="vertical-align: top; text-align: center; height: 41px; background-color: white; width: 179px;"></td>
+
-
    </tr>
+
-
    <tr>
+
-
      <td
+
-
style="vertical-align: top; text-align: center; background-color: rgb(51, 51, 51); width: 174px;"></td>
+
-
      <td
+
-
style="vertical-align: top; text-align: center; background-color: rgb(51, 51, 51); width: 663px;"><big><big><big
+
-
style="font-family: Palatino Linotype;"><span
+
-
style="color: white;"></span><br
+
-
style="color: white;">
+
-
      </big></big></big>
+
-
      <table
+
-
style="text-align: left; background-color: rgb(51, 51, 51); width: 100%; height: 32px;"
+
-
border="0" cellpadding="0" cellspacing="0">
+
-
        <tbody>
+
-
          <tr>
+
-
            <td style="vertical-align: top; text-align: center;"><big><big><big
+
-
style="font-family: Palatino Linotype;"><span
+
-
style="color: white;">Project Description</span></big></big></big></td>
+
-
          </tr>
+
-
        </tbody>
+
-
      </table>
+
-
      <span style="font-family: Myriad Pro;"><br>
+
-
      </span><font style="font-family: Palatino Linotype;"
+
-
size="+1"><span style="color: white;">pH
+
-
induced response elicited by certain promoters in bacteria may have
+
-
major practical applications. The response can be targeted for specific
+
-
pH ranges, for example in tracking the anomalies associated with the
+
-
gut micro-biota or detecting pH inside a bioreactor. There are only
+
-
limited studies reported in the area. In the present project, a genetic
+
-
circuit has been created, using the promoters of the acid shock
+
-
response gene from E.coli and the F0F1 ATPase operon from C. glutamicum
+
-
that produces a pH dependent colour gradient, much like a universal pH
+
-
indicator. A mathematical model has been developed to simulate the
+
-
experimental findings. The present study will form the basis for
+
-
further research in the field of synthetic biology.</span></font><span
+
-
style="color: rgb(0, 0, 0); font-family: sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19.0469px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255); display: inline ! important; float: none;"><br>
+
-
      <br>
+
-
      </span><font size="+2"><span
+
-
style="font-family: Palatino Linotype;"><font
+
-
style="font-family: Myriad Pro;"><span
+
-
style="color: white;"></span></font></span></font></td>
+
-
      <td
+
-
style="vertical-align: top; text-align: center; background-color: rgb(51, 51, 51); width: 179px;"></td>
+
-
     </tr>
+
-
    <tr>
+
-
      <td
+
-
style="vertical-align: top; text-align: center; background-color: rgb(51, 51, 51); width: 174px;"></td>
+
-
      <td
+
-
style="vertical-align: top; text-align: center; background-color: rgb(51, 51, 51); width: 663px;"><br>
+
-
      <br>
+
-
      </td>
+
-
      <td
+
-
style="vertical-align: top; text-align: center; background-color: rgb(51, 51, 51); width: 179px;"></td>
+
-
    </tr>
+
-
  </tbody>
+
-
</table>
+
-
<br>
+
<table
<table
  style="text-align: left; background-color: rgb(175, 175, 175); width: 100%;"
  style="text-align: left; background-color: rgb(175, 175, 175); width: 100%;"
Line 1,029: Line 271:
     <tr>
     <tr>
       <td
       <td
-
  style="vertical-align: top; text-align: center; width: 302px; background-color: rgb(175, 175, 175);"><br>
+
  style="vertical-align: top; text-align: center; width: 302px; background-color: rgb(175, 175, 175);">
 +
<br><b>WON BRONZE AT iGEM 2013 ASIAN JAMBOREE! :D</b><br><br>
Feel Free to contact us at igemiitdelhi2013 at gmail dot com if you
Feel Free to contact us at igemiitdelhi2013 at gmail dot com if you
-
have queries; requests; suggestions et cetera.<br>
+
have queries, requests, suggestions et cetera.<br>
       <br>
       <br>
Thanks to iGEM and IIT Delhi,<br>
Thanks to iGEM and IIT Delhi,<br>
Line 1,037: Line 280:
   <a href="https://www.facebook.com/igemiitdelhi2013?ref=hl"><img
   <a href="https://www.facebook.com/igemiitdelhi2013?ref=hl"><img
     style="border: 0px solid ; width: 70px; height: 70px;" alt="" align="center"
     style="border: 0px solid ; width: 70px; height: 70px;" alt="" align="center"
-
     src="https://static.igem.org/mediawiki/2013/5/51/Fb.png"></a>
+
     src="https://static.igem.org/mediawiki/2013/b/bb/Op3.png"></a>
     <a href="https://twitter.com/iGEM_IIT_Delhi"><img
     <a href="https://twitter.com/iGEM_IIT_Delhi"><img
       style="border: 0px solid ; width: 70px; height: 70px;" alt="" align="center"
       style="border: 0px solid ; width: 70px; height: 70px;" alt="" align="center"
-
     src="https://static.igem.org/mediawiki/2013/1/12/Twitter3.png"></a>
+
     src="https://static.igem.org/mediawiki/2013/3/3d/Twitterlogo.png"></a>
     <a href="http://www.igemiitdelhi.org/"><img
     <a href="http://www.igemiitdelhi.org/"><img
     style="border: 0px solid ; width: 70px; height: 70px;" alt="" align="center"
     style="border: 0px solid ; width: 70px; height: 70px;" alt="" align="center"
-
     src="https://static.igem.org/mediawiki/2013/b/b7/Blogger.png"></a>
+
     src="https://static.igem.org/mediawiki/2013/7/76/Op5.png"></a>
       </td>
       </td>
       <td
       <td
  style="vertical-align: top; text-align: center; width: 351px; background-color: rgb(175, 175, 175);">Our
  style="vertical-align: top; text-align: center; width: 351px; background-color: rgb(175, 175, 175);">Our
-
Project was supported by and done by the students<br>
+
Project was supported by and done by the students
       <br>
       <br>
&nbsp;of IIT Delhi, India.<br>
&nbsp;of IIT Delhi, India.<br>

Latest revision as of 18:19, 16 October 2013

Navigation-Top








WON BRONZE AT iGEM 2013 ASIAN JAMBOREE! :D

Feel Free to contact us at igemiitdelhi2013 at gmail dot com if you have queries, requests, suggestions et cetera.

Thanks to iGEM and IIT Delhi,
we had an awesome summer!

 Our Project was supported by and done by the students
 of IIT Delhi, India.

 This project was done as a part of iGEM:
iGEM Main Website

Retrieved from "http://2013.igem.org/Team:IIT_Delhi"