Revision as of 07:36, 22 August 2013

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Team:KAIST Korea/Project Background - 2013.igem.org

HOME
- Introduction
- iGEM
TEAM
- Official Team Profile
- Members
- Gallery
DATA
- Description
- Bio Bricks

PROJECT
- Overview
- Results
- Future Plan
- Modeling
NOTEBOOK
- Labnote
- Protocol
PLUS
- Safety
- Human Practice
- Attribution
- Sponsors

2013 KAIST Korea

Mail : kaist.igem.2012@gmail.com
Twitter : twitter.com/KAIST_iGEM_2012
Facebook : www.facebook.com/KAISTiGEM2012

Team

▲Back to the top

@@ Line 4: / Line 4: @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="generator" content="MediaWiki 1.16.5" />
+<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-darkness/jquery-ui.css" type="text/css" />
 <link rel="alternate" type="application/x-wiki" title="Edit" href="/wiki/index.php?title=Team:KAIST_Korea/Project&amp;action=edit" />
 <link rel="edit" title="Edit" href="/wiki/index.php?title=Team:KAIST_Korea/Project&amp;action=edit" />
@@ Line 13: / Line 14: @@
 <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic' rel='stylesheet' type='text/css'>
 <title>Team:KAIST Korea/Project Background - 2013.igem.org</title>
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
+<script type="text/javascript" src="http://coulisse.luvdasun.com/assets/jquery.ui.coulisse.min.js"></script>
+<style type="text/css">
+.CoulisseDemo
+{
+    width: 100%;
+    height: 300px;
+    position: relative;
+    overflow: hidden;
+    background-color: Black;
+}
+.SliderDemo
+{
+    width: 80%;
+    margin: 10px 10%;
+    position: relative;
+}
+</style>
 <style type="text/css" media="screen, projection">/*<![CDATA[*/
 			@import "/wiki/skins/common/shared.css?270";
@@ Line 1,047: / Line 1,067: @@
 			</div>
-			<img src="https://static.igem.org/mediawiki/2012/e/e1/KAIST_lionLion.png" style="float:left;padding:10px 20px 10px 0px;margin:0px 0px 20px 0px;"/>
+			 <h2 id="title40">
-			</br>
+        </h2>
+        <h3 id="subtitle40">
-			<div clear='both'></div>
+        </h3>
+        <div id="coulisseDemo40" class="CoulisseDemo">
+        </div>
+        <script type="text/javascript">
+            jQuery(function ($) {
+                /*
+                cache the title, subtitle and coulisse containers
+                */
+                var $title = $('#title40');
+                var $subtitle = $('#subtitle40');
+                var $coulisse = $('#coulisseDemo40');
+                /*
+                Declare an array of objects that contain the images, titles and subtitles
+                */
+                var myImages = [
+                    { src: '/Content/Tiger.jpg', title: 'Tiger', subtitle: 'grrrr...' }
+                    , { src: '/Content/Duck.jpg', title: 'Duck', subtitle: 'quack!' }
+                    , { src: '/Content/Moes.jpg', title: 'Moes', subtitle: 'Miauw' }
+                    , { src: '/Content/Moos.jpg', title: 'Moos', subtitle: 'Prrr' }
+                    , { src: '/Content/Lion.jpg', title: 'Lion', subtitle: 'Yummy' }
+                    ];
+                /*
+                handy function that sets the content of the title and subtitle to the
+                specified entry in myImages
+                */
+                var setTitles = function (entryIndex) {
+                    var entry = myImages[entryIndex];
+                    $title.text(entry.title);
+                    $subtitle.text(entry.subtitle);
+                };
+                /*
+                pseudo random value for the initial image
+                */
+                var initialIndex = (new Date().valueOf()) % myImages.length;
+                /*
+                Initialize the coulisse container
+                */
+                $coulisse
+                .coulisse({
+                    images: myImages
+                    , imageSrcGetter: 'src' // the member of an entry in the images array thet holds the source url of the image
+                    , index: initialIndex // set the index to the (pseudo random) initial index
+                    , activeSize: 500
+                    , inactiveSize: 200
+                    , indexChanging: function (e, arg) {
+                        /*
+                        update the title and subtitle when the index is changing
+                        */
+                        setTitles(arg.index);
+                    }
+                })
+                ;
+                /*
+                some fancy code to handle the mousewheel event
+                */
+                var mousewheelTimeoutHandle = null;
+                var mousewheelIndex = null;
+                $coulisse
+                .bind('mousewheel', function (event, delta) {
+                    window.clearTimeout(mousewheelTimeoutHandle);
+                    if (mousewheelIndex === null) {
+                        mousewheelIndex = $coulisse.coulisse('option', 'index');
+                    }
+                    mousewheelIndex += delta;
+                    mousewheelIndex = Math.min(myImages.length - 1, mousewheelIndex);
+                    mousewheelIndex = Math.max(0, mousewheelIndex);
+                    $coulisse.coulisse('option', 'index', Math.round(mousewheelIndex));
+                    mousewheelTimeoutHandle = window.setTimeout(function () {
+                        mousewheelIndex = null;
+                    }, 300);
+                    return false;
+                })
+                ;
+                /*
+                set the titles to their initial values
+                */
+                setTitles(initialIndex);
+            });    //jQuery
+        </script>

Team:KAIST Korea/Team

From 2013.igem.org

Revision as of 07:36, 22 August 2013

Team