Team:NTNU Trondheim/Test

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:NTNU_Trondheim/Templates/Header}}
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
</div>
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 +
<head>
 +
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-
<html>
+
<link href="http://folk.ntnu.no/oyas/igem3/css/blank.css" rel="stylesheet" type="text/css" />
-
<div id="main">
+
-
<div id="buttons">
+
-
<button class="punch" id="projectButton">Project</button>
+
-
<button class="punch" id="resultsButton">Results</button>
+
-
<button class="punch" id="dataButton">Data</button>
+
-
</div>
+
-
<h1 style="border-bottom:none;">Welcome to our wiki!</h1>
+
  <!-- Ascensor styles -->
-
<p>This year the NTNU iGEM team is bent on cancer destruction by means of exploding bacteria. Here's a sketch of our basic plan for the genetic circuit:</p>
+
<link href="http://folk.ntnu.no/oyas/igem3/css/reset.css" rel="stylesheet" type="text/css" />
-
+
<link href="http://folk.ntnu.no/oyas/igem3/css/prettify.css" rel="stylesheet" type="text/css" />
-
<img src="https://static.igem.org/mediawiki/2012/3/3a/Genetisk_krets.png" width="500px;"/>
+
<link href="http://folk.ntnu.no/oyas/igem3/css/styles.css" rel="stylesheet" type="text/css" />
-
+
-
<p>Check out the <a href="https://2012.igem.org/Team:NTNU_Trondheim/Project">project</a> section if you want to read more.  
+
-
Please note that the wiki is under construction. Content will be updated continously over the course of the summer, so stay
+
-
tuned for the best synthetic biology action Trondheim has to offer!</p>
+
-
+
-
<p>In the meantime, why not enjoy some classic entertainment:</p>
+
-
+
-
<iframe width="560" height="315" src="http://www.youtube.com/embed/x5yPkxCLads" frameborder="0" allowfullscreen></iframe>
+
-
</div>
+
-
<div id="sidebar">
+
<!-- Menu styles -->
 +
<link href="http://folk.ntnu.no/oyas/igem3/css/extra.css" rel="stylesheet" type="text/css" />
-
<p style="text-align: center;">Countdown to the <a href="https://2012.igem.org/Regions/Europe/Jamboree" target="_blank">European jamboree</a>:
+
</head>
-
<div id="jamboreeCountdown" style="width:200px;float:right;position:relative;right:50px;"></div><br /><br /><br/>
+
<body>
 +
<header style="left: -30px;">
 +
<span style="display: block;" class="info-menu">MENU</span>
 +
    <nav id="nav">
 +
        <ul>
 +
        <li style="display: none;"><a href="#home" class="scrolltoanchor">home</a></li>
 +
    <li style="display: none;"><a href="#about" class="scrolltoanchor">ABOUT</a></li>
 +
        <li style="display: none;"><a href="#skills" class="scrolltoanchor">SKILLS</a></li>
 +
    <li style="display: none;"><a href="#cv" class="scrolltoanchor">CV</a></li>
 +
        <li style="display: none;"><a href="#ovo" class="scrolltoanchor">ovo</a></li>
 +
        <li style="display: none;"><a href="#mnt" class="scrolltoanchor">mnt</a></li>
 +
        <li style="display: none;"><a href="#fnaim" class="scrolltoanchor">fnaim</a></li>
 +
        <li style="display: none;"><a href="#vinedge" class="scrolltoanchor">vinedge</a></li>
 +
        <li style="display: none;"><a href="#maif" class="scrolltoanchor">maif</a></li>
 +
        <li style="display: none;"><a href="#ob" class="scrolltoanchor">ob</a></li>
 +
        <li style="display: none;"><a href="#plaar" class="scrolltoanchor">plaar</a></li>
 +
        <li style="display: none;"><a href="#applov" class="scrolltoanchor">app4love</a></li>
 +
        <li style="display: none;"><a href="#pexel" class="scrolltoanchor">pexel</a></li>
 +
        <li style="display: none;"><a href="#vanitas" class="scrolltoanchor">vanitas</a></li>
 +
        <li style="display: none;"><a href="#pillow" class="scrolltoanchor">pillow</a></li>
 +
        <li style="display: none;"><a href="#sand" class="scrolltoanchor">-ST-</a></li>
 +
        <li style="display: none;"><a href="#contact" class="scrolltoanchor">contact</a></li>
 +
      </ul>
 +
    </nav>
 +
  </header>
 +
<div id="general">
 +
<div id="content">
 +
<!--Contenu1-->
 +
<div>
 +
<div class="contenu" id="home">
 +
<h1><img src="images/logo.png"/></h1>
 +
<p>"Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system"</p>
 +
<p><a class="houseLink0" rel="ConcentLink" href="#house1">Demo & how to use</a>  |  <a href="ascensor.zip" title="project">Download Project</a></p>
 +
</div>
 +
</div>
 +
 +
 +
<!--Contenu2-->
 +
<div>
 +
<div class="contenu" id="project">
 +
<h2><img src="images/operation.png"/></h2>
 +
 +
<p class="text">Ascensor needs the <a href="http://jquery.com/">jQuery library</a> and the great plugin <a href="http://demos.flesler.com/jquery/scrollTo/">scrollTo</a>. It will also download the plugin <a href="http://www.kirkas.ch/ascensor/js/jquery.ascensor.js">here</a> or ascensor minified version <a href="http://www.kirkas.ch/ascensor/js/jquery.ascensor.min.js">here</a></p>
 +
 +
 +
<pre class="prettyprint">
 +
&lt;script src="js/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
 +
&lt;script src="js/jquery.scrollTo.js" type="text/javascript"&gt;&lt;/script&gt;
 +
&lt;script src="js/jquery.ascensor.js" type="text/javascript"&gt;&lt;/script&gt;
 +
&lt;script src="js/myscript.js" type="text/javascript"&gt;&lt;/script&gt;</pre>
 +
</div>
 +
 
 +
 
 +
</div>
 +
<div>
 +
 +
 +
<!--Contenu3-->
 +
<div class="contenu">
 +
<h2><img src="images/operationHtml.png"/></h2>
 +
<p class="text">You need to think like an architect for the future. You must build a house with 5 floors. For this he must do so:</p>
 +
 +
 +
<pre class="prettyprint">
 +
&lt;div id="house"&gt;
 +
&lt;div&gt;&lt;!-- Etage1--&gt;
 +
&lt;div id="ContentName"&gt;&lt;/div&gt;&lt;!-- Content of the floor 1--&gt;
 +
&lt;/div&gt;
 +
&lt;div&gt;&lt;!-- Etage2--&gt;
 +
&lt;div id="ContentName"&gt;&lt;/div&gt;&lt;!-- Content of the floor 2--&gt;
 +
&lt;/div&gt;
 +
&lt;div&gt;&lt;!-- Etage3--&gt;
 +
&lt;div id="ContentName"&gt;&lt;/div&gt;&lt;!-- Content of the floor 3--&gt;
 +
&lt;/div&gt;
 +
&lt;div&gt;&lt;!-- Etage4--&gt;
 +
&lt;div id="ContentName"&gt;&lt;/div&gt;&lt;!-- Content of the floor 4--&gt;
 +
&lt;/div&gt;
 +
&lt;div&gt;&lt;!-- Etage5--&gt;
 +
&lt;div id="ContentName"&gt;&lt;/div&gt;&lt;!-- Content of the floor 5--&gt;
 +
&lt;/div&gt;
 +
&lt;/div&gt;
 +
</pre>
 +
 
 +
</div>
 +
</div>
 +
<div>
 +
 +
 +
<!--Contenu4-->
 +
<div class="contenu">
 +
<h2><img src="images/operationJs.png"/></h2>
 +
<p class="text">then in your script file, simply write:</p> <br/>
 +
<pre class="prettyprint">$('#house').ascensor();</pre>
 +
</div>
 +
</div>
 +
 +
 +
<!--Contenu5-->
 +
<div>
 +
<div class="contenu">
 +
<h2><img src="images/operationJs2.png"/></h2>
 +
<p class="text">There are several settings for this plugin.</p><br/>
 +
<pre class="prettyprint">$('#house').ascensor({
 +
 +
AscensorName:'house',
 +
//you can choose the name that will define id and class (default:'maison')
 +
WindowsFocus:true,
 +
//if you start on the first content(default:true)
 +
WindowsOn:'0',
 +
//if you can to start to the 0,1,2,3 etc.. content
 +
Direction:'y',
 +
//What will be the direction of the ascensor
 +
NavigationDirection:'xy',
 +
//what will be his navigation direction(par défaut:'xy')
-
<div style="padding: 0 0 0 10px; text-align:center;">
+
});</pre>
-
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
+
</div>
-
<script>
+
</div>
-
new TWTR.Widget({
+
-
  version: 2,
+
-
  type: 'profile',
+
<!--Contenu6-->
-
  rpp: 4,
+
<div>
-
  interval: 30000,
+
<div class="contenu">
-
  width: 280,
+
<h2><img src="images/operationJs3.png"/></h2>
-
  height: 300,
+
<p class="text">There are also settings that allow the creation of navigation, disabling certain keys or even send the code to add elements.</p><br/>
-
  theme: {
+
<pre class="prettyprint">$('#content').ascensor({
-
shell: {
+
-
  background: '#515151',
+
Navig:true,
-
  color: '#ffffff'
+
//if you need a navigation system
-
},
+
Link:true,
-
tweets: {
+
//If you need a link per page for the next page
-
  background: '#000000',
+
PrevNext:true,
-
  color: '#ffffff',
+
//if you need a prev/next button
-
  links: '#53db50'
+
KeyArrow:false,
-
}
+
//deactivate the arrow key
-
  },
+
keySwitch:false,
-
  features: {
+
//deactivate navigation by arrow key
-
scrollbar: false,
+
CSSstyles:true,
-
loop: false,
+
//if you need the Default CSS plugin
-
live: false,
+
ReturnURL:true,
-
behavior: 'all'
+
//if you need a url per page
-
  }
+
ReturnCode:true,
-
}).render().setUser('iGEM_NTNU').start();
+
//Give you id and class of the navig/link/content
-
</script>
+
-
</div>
+
});</pre>
-
<br/>
+
</div>
-
<div style="padding: 0 0 0 5px;" class="fb-like-box" data-href="http://www.facebook.com/ntnuigem" data-width="292" data-show-faces="true" data-border-color="#ffffff" data-stream="false" data-header="false"></div>
+
</div>
-
<br/><br/>
+
 +
 +
<!--Contenu7-->
 +
<div>
 +
<div class="contenu">
 +
<h2><img src="images/operationJs4.png"/></h2>
 +
<p class="text">There are more complicated settings for this plugin. They can create a system map that defines the scale (AscensorMap) in which we will place each element by a series of coordinates (ContentCoord).</p><br/>
 +
<pre class="prettyprint">$('#content').ascensor({
 +
 +
ChocolateAscensor:true,
 +
//if you need to place yourself all the stage
 +
AscensorMap: '4|3',
 +
//define the size of a map
 +
ContentCoord:'1|1 &amp; 2|2 &amp; 1|2 &amp; 3|4 &amp; 1|3 &amp; 3|1 &amp; 2|3'
 +
//place stage one by one, indicating they positionx|positiony
 +
 +
});</pre>
 +
</div>
 +
</div>
 +
 +
 +
<!--Contenu7-->
 +
<div>
 +
<div class="contenu">
 +
<h2><img src="images/operationCss.png"/></h2>
 +
<p class="text">Then, Hide scrollbar in css</p><br/>
 +
<pre class="prettyprint">body{overflow: hidden;}</pre>
 +
</div>
 +
</div>
 +
 +
 +
<div>
 +
<div class="contenu">
 +
<h2><img src="images/operationTest.png"/></h2>
 +
<p class="text">This does not prevent their occurrence when there is too much content</p><br/>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis, ante vitae dapibus venenatis, velit metus imperdiet magna, sit amet iaculis nunc ligula sed lacus. Vivamus elit justo, mattis id ultricies a, lacinia id purus. Nunc nec erat turpis, non egestas purus. Duis non lectus venenatis nunc blandit mattis vitae eget risus. Nullam eget consectetur diam. Etiam nulla tortor, dictum ullamcorper tincidunt a, laoreet quis urna. Phasellus nunc sapien, lobortis sed rutrum eu, ullamcorper sed ante. Donec nec vulputate nulla. Curabitur magna ligula, pharetra eu adipiscing cursus, posuere quis tortor. Integer posuere porta velit sed mattis. Duis sed urna orci, ac rutrum ligula. Duis et lacinia eros. Quisque erat quam, fringilla at lobortis non, pellentesque et ligula. Ut volutpat metus justo, eu interdum urna.
 +
 +
Pellentesque feugiat enim in dolor mollis et gravida ligula ultrices. Quisque id enim ante, quis facilisis felis. Pellentesque condimentum lorem pellentesque libero mollis suscipit. Nulla facilisi. Suspendisse potenti. Aenean faucibus risus quis mi condimentum scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus nibh id neque pharetra id vulputate dolor consequat. Duis ac nibh massa, ac ullamcorper nibh. Aenean ut urna ut turpis suscipit posuere ut tempus lacus. Nam sed metus nunc, at tempus nibh. Duis eu erat est. Praesent diam risus, cursus nec interdum vel, pharetra et augue. In nec leo nec nunc tincidunt interdum. Vivamus erat turpis, dapibus vel tempus id, adipiscing rhoncus eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc eros leo, imperdiet in iaculis nec, semper sed augue.
 +
 +
Sed ac odio libero. Fusce eget consequat risus. Suspendisse eget velit ante. Nunc eget justo in nunc elementum scelerisque. Fusce facilisis feugiat porta. Vivamus blandit elementum quam, id gravida tellus venenatis eu. Proin eu dolor ac orci consectetur pretium. Praesent malesuada ligula sed elit semper sed euismod turpis mattis. Pellentesque ornare, velit et fringilla adipiscing, massa eros porta lorem, vel egestas neque velit a mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 +
 +
Ut congue diam eu nunc tempor eu laoreet lorem auctor. Morbi sed neque justo, eu pharetra quam. Proin erat sapien, porta interdum egestas non, ultrices in risus. In hac habitasse platea dictumst. Nulla facilisi. Aliquam malesuada, lorem non egestas ornare, quam orci posuere enim, ut consectetur turpis massa luctus enim. Vestibulum eget dui sapien, sit amet ullamcorper velit. Donec quis augue et neque rutrum interdum. Nullam leo sem, consequat vitae varius ac, aliquet tempus nunc. Maecenas quis tempor orci. In quis libero urna. Vivamus vulputate nisi nulla, ut aliquam arcu.
 +
 +
Nam scelerisque, orci vel porta varius, tortor magna blandit neque, id ullamcorper nibh leo sit amet libero. Cras fermentum pellentesque tincidunt. Suspendisse dictum tristique nisi in ultrices. Duis tempus ipsum vitae lorem faucibus lobortis. Pellentesque hendrerit, lectus ut vulputate cursus, nibh eros auctor diam, sed auctor magna lectus quis lorem. Nam sapien augue, ullamcorper quis imperdiet non, varius at purus. Nunc rhoncus arcu nec libero dapibus bibendum. Nunc cursus dui at quam congue ac eleifend tortor aliquet. Proin vel feugiat nulla. Mauris pharetra, odio in vestibulum dignissim, velit quam egestas metus, vel commodo neque quam non magna. Aliquam ac dui tellus, a suscipit turpis. Donec eget nibh vitae massa pulvinar commodo. Vivamus quis dolor eget leo ultrices posuere in at diam. Ut eget odio nisi, et condimentum nisi. Suspendisse </p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis, ante vitae dapibus venenatis, velit metus imperdiet magna, sit amet iaculis nunc ligula sed lacus. Vivamus elit justo, mattis id ultricies a, lacinia id purus. Nunc nec erat turpis, non egestas purus. Duis non lectus venenatis nunc blandit mattis vitae eget risus. Nullam eget consectetur diam. Etiam nulla tortor, dictum ullamcorper tincidunt a, laoreet quis urna. Phasellus nunc sapien, lobortis sed rutrum eu, ullamcorper sed ante. Donec nec vulputate nulla. Curabitur magna ligula, pharetra eu adipiscing cursus, posuere quis tortor. Integer posuere porta velit sed mattis. Duis sed urna orci, ac rutrum ligula. Duis et lacinia eros. Quisque erat quam, fringilla at lobortis non, pellentesque et ligula. Ut volutpat metus justo, eu interdum urna.
 +
 +
Pellentesque feugiat enim in dolor mollis et gravida ligula ultrices. Quisque id enim ante, quis facilisis felis. Pellentesque condimentum lorem pellentesque libero mollis suscipit. Nulla facilisi. Suspendisse potenti. Aenean faucibus risus quis mi condimentum scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus nibh id neque pharetra id vulputate dolor consequat. Duis ac nibh massa, ac ullamcorper nibh. Aenean ut urna ut turpis suscipit posuere ut tempus lacus. Nam sed metus nunc, at tempus nibh. Duis eu erat est. Praesent diam risus, cursus nec interdum vel, pharetra et augue. In nec leo nec nunc tincidunt interdum. Vivamus erat turpis, dapibus vel tempus id, adipiscing rhoncus eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc eros leo, imperdiet in iaculis nec, semper sed augue.
 +
 +
Sed ac odio libero. Fusce eget consequat risus. Suspendisse eget velit ante. Nunc eget justo in nunc elementum scelerisque. Fusce facilisis feugiat porta. Vivamus blandit elementum quam, id gravida tellus venenatis eu. Proin eu dolor ac orci consectetur pretium. Praesent malesuada ligula sed elit semper sed euismod turpis mattis. Pellentesque ornare, velit et fringilla adipiscing, massa eros porta lorem, vel egestas neque velit a mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 +
 +
Ut congue diam eu nunc tempor eu laoreet lorem auctor. Morbi sed neque justo, eu pharetra quam. Proin erat sapien, porta interdum egestas non, ultrices in risus. In hac habitasse platea dictumst. Nulla facilisi. Aliquam malesuada, lorem non egestas ornare, quam orci posuere enim, ut consectetur turpis massa luctus enim. Vestibulum eget dui sapien, sit amet ullamcorper velit. Donec quis augue et neque rutrum interdum. Nullam leo sem, consequat vitae varius ac, aliquet tempus nunc. Maecenas quis tempor orci. In quis libero urna. Vivamus vulputate nisi nulla, ut aliquam arcu.
 +
 +
Nam scelerisque, orci vel porta varius, tortor magna blandit neque, id ullamcorper nibh leo sit amet libero. Cras fermentum pellentesque tincidunt. Suspendisse dictum tristique nisi in ultrices. Duis tempus ipsum vitae lorem faucibus lobortis. Pellentesque hendrerit, lectus ut vulputate cursus, nibh eros auctor diam, sed auctor magna lectus quis lorem. Nam sapien augue, ullamcorper quis imperdiet non, varius at purus. Nunc rhoncus arcu nec libero dapibus bibendum. Nunc cursus dui at quam congue ac eleifend tortor aliquet. Proin vel feugiat nulla. Mauris pharetra, odio in vestibulum dignissim, velit quam egestas metus, vel commodo neque quam non magna. Aliquam ac dui tellus, a suscipit turpis. Donec eget nibh vitae massa pulvinar commodo. Vivamus quis dolor eget leo ultrices posuere in at diam. Ut eget odio nisi, et condimentum nisi. Suspendisse </p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis, ante vitae dapibus venenatis, velit metus imperdiet magna, sit amet iaculis nunc ligula sed lacus. Vivamus elit justo, mattis id ultricies a, lacinia id purus. Nunc nec erat turpis, non egestas purus. Duis non lectus venenatis nunc blandit mattis vitae eget risus. Nullam eget consectetur diam. Etiam nulla tortor, dictum ullamcorper tincidunt a, laoreet quis urna. Phasellus nunc sapien, lobortis sed rutrum eu, ullamcorper sed ante. Donec nec vulputate nulla. Curabitur magna ligula, pharetra eu adipiscing cursus, posuere quis tortor. Integer posuere porta velit sed mattis. Duis sed urna orci, ac rutrum ligula. Duis et lacinia eros. Quisque erat quam, fringilla at lobortis non, pellentesque et ligula. Ut volutpat metus justo, eu interdum urna.
 +
 +
Pellentesque feugiat enim in dolor mollis et gravida ligula ultrices. Quisque id enim ante, quis facilisis felis. Pellentesque condimentum lorem pellentesque libero mollis suscipit. Nulla facilisi. Suspendisse potenti. Aenean faucibus risus quis mi condimentum scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus nibh id neque pharetra id vulputate dolor consequat. Duis ac nibh massa, ac ullamcorper nibh. Aenean ut urna ut turpis suscipit posuere ut tempus lacus. Nam sed metus nunc, at tempus nibh. Duis eu erat est. Praesent diam risus, cursus nec interdum vel, pharetra et augue. In nec leo nec nunc tincidunt interdum. Vivamus erat turpis, dapibus vel tempus id, adipiscing rhoncus eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc eros leo, imperdiet in iaculis nec, semper sed augue.
 +
 +
Sed ac odio libero. Fusce eget consequat risus. Suspendisse eget velit ante. Nunc eget justo in nunc elementum scelerisque. Fusce facilisis feugiat porta. Vivamus blandit elementum quam, id gravida tellus venenatis eu. Proin eu dolor ac orci consectetur pretium. Praesent malesuada ligula sed elit semper sed euismod turpis mattis. Pellentesque ornare, velit et fringilla adipiscing, massa eros porta lorem, vel egestas neque velit a mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 +
 +
Ut congue diam eu nunc tempor eu laoreet lorem auctor. Morbi sed neque justo, eu pharetra quam. Proin erat sapien, porta interdum egestas non, ultrices in risus. In hac habitasse platea dictumst. Nulla facilisi. Aliquam malesuada, lorem non egestas ornare, quam orci posuere enim, ut consectetur turpis massa luctus enim. Vestibulum eget dui sapien, sit amet ullamcorper velit. Donec quis augue et neque rutrum interdum. Nullam leo sem, consequat vitae varius ac, aliquet tempus nunc. Maecenas quis tempor orci. In quis libero urna. Vivamus vulputate nisi nulla, ut aliquam arcu.
 +
 +
Nam scelerisque, orci vel porta varius, tortor magna blandit neque, id ullamcorper nibh leo sit amet libero. Cras fermentum pellentesque tincidunt. Suspendisse dictum tristique nisi in ultrices. Duis tempus ipsum vitae lorem faucibus lobortis. Pellentesque hendrerit, lectus ut vulputate cursus, nibh eros auctor diam, sed auctor magna lectus quis lorem. Nam sapien augue, ullamcorper quis imperdiet non, varius at purus. Nunc rhoncus arcu nec libero dapibus bibendum. Nunc cursus dui at quam congue ac eleifend tortor aliquet. Proin vel feugiat nulla. Mauris pharetra, odio in vestibulum dignissim, velit quam egestas metus, vel commodo neque quam non magna. Aliquam ac dui tellus, a suscipit turpis. Donec eget nibh vitae massa pulvinar commodo. Vivamus quis dolor eget leo ultrices posuere in at diam. Ut eget odio nisi, et condimentum nisi. Suspendisse </p>
 +
</div>
 +
</div>
 +
 +
 +
<!--Contenu8-->
 +
<div>
 +
<div class="contenu">
 +
<h2><img src="images/end.png"/></h2>
 +
<p class="text">Normally, everything should work. The plugin is still in development. if you use this plugin, talk about it or have any suggestions, bugs, please let me know at <a href="mailto:&#099;&#111;&#110;&#116;&#097;&#099;&#116;&#064;&#107;&#105;&#114;&#107;&#097;&#115;&#046;&#099;&#104;">this e-mail</a></p>
 +
</div>
 +
</div>
 +
</div>
</div>
</div>
-
<div id="bottom">
+
<!-- Javascript. Placed at the end for faster loading. -->
-
<h1>Our sponsors:</h1>
+
-
<div id="sponsors">
+
-
<p><a href="http://www.ntnu.edu/bioinformatics/pbi" target="_blank"><img src="http://folk.ntnu.no/oyas/igem/images/ntnu_bioinformatics_logo.png" /></a></p></div>
+
-
</div>
+
 +
<!-- jQuery and Ascensor scripts -->
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
 +
<script src="http://folk.ntnu.no/oyas/igem3/js/jquery.scrollTo.js" type="text/javascript"></script>
 +
<script src="http://folk.ntnu.no/oyas/igem3/js/jquery.ascensor.js" type="text/javascript"></script>
 +
<script src="http://folk.ntnu.no/oyas/igem3/js/myscript.js" type="text/javascript"></script>
 +
<!-- Menu scripts -->
 +
<script src="http://folk.ntnu.no/oyas/igem3/js/plugins.js" type="text/javascript"></script>
 +
<script src="http://folk.ntnu.no/oyas/igem3/js/script.js" type="text/javascript"></script>
</body>
</body>
</html>
</html>

Revision as of 13:50, 17 July 2012

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

MENU

"Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system"

Demo & how to use | Download Project

Ascensor needs the jQuery library and the great plugin scrollTo. It will also download the plugin here or ascensor minified version here

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script> 
<script src="js/jquery.ascensor.js" type="text/javascript"></script>
<script src="js/myscript.js" type="text/javascript"></script>

You need to think like an architect for the future. You must build a house with 5 floors. For this he must do so:

<div id="house">
	<div><!-- Etage1-->
		<div id="ContentName"></div><!-- Content of the floor 1-->
	</div>
	<div><!-- Etage2-->	
		<div id="ContentName"></div><!-- Content of the floor 2-->
	</div>
	<div><!-- Etage3-->
		<div id="ContentName"></div><!-- Content of the floor 3-->
	</div>	
	<div><!-- Etage4-->
		<div id="ContentName"></div><!-- Content of the floor 4-->
	</div>
	<div><!-- Etage5-->
		<div id="ContentName"></div><!-- Content of the floor 5-->
	</div>
</div>

then in your script file, simply write:


$('#house').ascensor();

There are several settings for this plugin.


$('#house').ascensor({
					
	AscensorName:'house',
		//you can choose the name that will define id and class (default:'maison')
	WindowsFocus:true,
		//if you start on the first content(default:true)
	WindowsOn:'0',
		//if you can to start to the 0,1,2,3 etc.. content
	Direction:'y',
		//What will be the direction of the ascensor
	NavigationDirection:'xy',
		//what will be his navigation direction(par défaut:'xy')
	
});

There are also settings that allow the creation of navigation, disabling certain keys or even send the code to add elements.


$('#content').ascensor({
								
	Navig:true,
		//if you need a navigation system
	Link:true,
		//If you need a link per page for the next page
	PrevNext:true,
		//if you need a prev/next button
	KeyArrow:false,
		//deactivate the arrow key
	keySwitch:false,
		//deactivate navigation by arrow key
	CSSstyles:true,
		//if you need the Default CSS plugin
	ReturnURL:true,
		//if you need a url per page
	ReturnCode:true,
		//Give you id and class of the navig/link/content
			
});

There are more complicated settings for this plugin. They can create a system map that defines the scale (AscensorMap) in which we will place each element by a series of coordinates (ContentCoord).


$('#content').ascensor({
								
	ChocolateAscensor:true,
		//if you need to place yourself all the stage
	AscensorMap: '4|3',
		//define the size of a map
	ContentCoord:'1|1 & 2|2 & 1|2 & 3|4 & 1|3 & 3|1 & 2|3'
		//place stage one by one, indicating they positionx|positiony
		
});

Then, Hide scrollbar in css


body{overflow: hidden;}

This does not prevent their occurrence when there is too much content


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis, ante vitae dapibus venenatis, velit metus imperdiet magna, sit amet iaculis nunc ligula sed lacus. Vivamus elit justo, mattis id ultricies a, lacinia id purus. Nunc nec erat turpis, non egestas purus. Duis non lectus venenatis nunc blandit mattis vitae eget risus. Nullam eget consectetur diam. Etiam nulla tortor, dictum ullamcorper tincidunt a, laoreet quis urna. Phasellus nunc sapien, lobortis sed rutrum eu, ullamcorper sed ante. Donec nec vulputate nulla. Curabitur magna ligula, pharetra eu adipiscing cursus, posuere quis tortor. Integer posuere porta velit sed mattis. Duis sed urna orci, ac rutrum ligula. Duis et lacinia eros. Quisque erat quam, fringilla at lobortis non, pellentesque et ligula. Ut volutpat metus justo, eu interdum urna. Pellentesque feugiat enim in dolor mollis et gravida ligula ultrices. Quisque id enim ante, quis facilisis felis. Pellentesque condimentum lorem pellentesque libero mollis suscipit. Nulla facilisi. Suspendisse potenti. Aenean faucibus risus quis mi condimentum scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus nibh id neque pharetra id vulputate dolor consequat. Duis ac nibh massa, ac ullamcorper nibh. Aenean ut urna ut turpis suscipit posuere ut tempus lacus. Nam sed metus nunc, at tempus nibh. Duis eu erat est. Praesent diam risus, cursus nec interdum vel, pharetra et augue. In nec leo nec nunc tincidunt interdum. Vivamus erat turpis, dapibus vel tempus id, adipiscing rhoncus eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc eros leo, imperdiet in iaculis nec, semper sed augue. Sed ac odio libero. Fusce eget consequat risus. Suspendisse eget velit ante. Nunc eget justo in nunc elementum scelerisque. Fusce facilisis feugiat porta. Vivamus blandit elementum quam, id gravida tellus venenatis eu. Proin eu dolor ac orci consectetur pretium. Praesent malesuada ligula sed elit semper sed euismod turpis mattis. Pellentesque ornare, velit et fringilla adipiscing, massa eros porta lorem, vel egestas neque velit a mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut congue diam eu nunc tempor eu laoreet lorem auctor. Morbi sed neque justo, eu pharetra quam. Proin erat sapien, porta interdum egestas non, ultrices in risus. In hac habitasse platea dictumst. Nulla facilisi. Aliquam malesuada, lorem non egestas ornare, quam orci posuere enim, ut consectetur turpis massa luctus enim. Vestibulum eget dui sapien, sit amet ullamcorper velit. Donec quis augue et neque rutrum interdum. Nullam leo sem, consequat vitae varius ac, aliquet tempus nunc. Maecenas quis tempor orci. In quis libero urna. Vivamus vulputate nisi nulla, ut aliquam arcu. Nam scelerisque, orci vel porta varius, tortor magna blandit neque, id ullamcorper nibh leo sit amet libero. Cras fermentum pellentesque tincidunt. Suspendisse dictum tristique nisi in ultrices. Duis tempus ipsum vitae lorem faucibus lobortis. Pellentesque hendrerit, lectus ut vulputate cursus, nibh eros auctor diam, sed auctor magna lectus quis lorem. Nam sapien augue, ullamcorper quis imperdiet non, varius at purus. Nunc rhoncus arcu nec libero dapibus bibendum. Nunc cursus dui at quam congue ac eleifend tortor aliquet. Proin vel feugiat nulla. Mauris pharetra, odio in vestibulum dignissim, velit quam egestas metus, vel commodo neque quam non magna. Aliquam ac dui tellus, a suscipit turpis. Donec eget nibh vitae massa pulvinar commodo. Vivamus quis dolor eget leo ultrices posuere in at diam. Ut eget odio nisi, et condimentum nisi. Suspendisse

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis, ante vitae dapibus venenatis, velit metus imperdiet magna, sit amet iaculis nunc ligula sed lacus. Vivamus elit justo, mattis id ultricies a, lacinia id purus. Nunc nec erat turpis, non egestas purus. Duis non lectus venenatis nunc blandit mattis vitae eget risus. Nullam eget consectetur diam. Etiam nulla tortor, dictum ullamcorper tincidunt a, laoreet quis urna. Phasellus nunc sapien, lobortis sed rutrum eu, ullamcorper sed ante. Donec nec vulputate nulla. Curabitur magna ligula, pharetra eu adipiscing cursus, posuere quis tortor. Integer posuere porta velit sed mattis. Duis sed urna orci, ac rutrum ligula. Duis et lacinia eros. Quisque erat quam, fringilla at lobortis non, pellentesque et ligula. Ut volutpat metus justo, eu interdum urna. Pellentesque feugiat enim in dolor mollis et gravida ligula ultrices. Quisque id enim ante, quis facilisis felis. Pellentesque condimentum lorem pellentesque libero mollis suscipit. Nulla facilisi. Suspendisse potenti. Aenean faucibus risus quis mi condimentum scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus nibh id neque pharetra id vulputate dolor consequat. Duis ac nibh massa, ac ullamcorper nibh. Aenean ut urna ut turpis suscipit posuere ut tempus lacus. Nam sed metus nunc, at tempus nibh. Duis eu erat est. Praesent diam risus, cursus nec interdum vel, pharetra et augue. In nec leo nec nunc tincidunt interdum. Vivamus erat turpis, dapibus vel tempus id, adipiscing rhoncus eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc eros leo, imperdiet in iaculis nec, semper sed augue. Sed ac odio libero. Fusce eget consequat risus. Suspendisse eget velit ante. Nunc eget justo in nunc elementum scelerisque. Fusce facilisis feugiat porta. Vivamus blandit elementum quam, id gravida tellus venenatis eu. Proin eu dolor ac orci consectetur pretium. Praesent malesuada ligula sed elit semper sed euismod turpis mattis. Pellentesque ornare, velit et fringilla adipiscing, massa eros porta lorem, vel egestas neque velit a mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut congue diam eu nunc tempor eu laoreet lorem auctor. Morbi sed neque justo, eu pharetra quam. Proin erat sapien, porta interdum egestas non, ultrices in risus. In hac habitasse platea dictumst. Nulla facilisi. Aliquam malesuada, lorem non egestas ornare, quam orci posuere enim, ut consectetur turpis massa luctus enim. Vestibulum eget dui sapien, sit amet ullamcorper velit. Donec quis augue et neque rutrum interdum. Nullam leo sem, consequat vitae varius ac, aliquet tempus nunc. Maecenas quis tempor orci. In quis libero urna. Vivamus vulputate nisi nulla, ut aliquam arcu. Nam scelerisque, orci vel porta varius, tortor magna blandit neque, id ullamcorper nibh leo sit amet libero. Cras fermentum pellentesque tincidunt. Suspendisse dictum tristique nisi in ultrices. Duis tempus ipsum vitae lorem faucibus lobortis. Pellentesque hendrerit, lectus ut vulputate cursus, nibh eros auctor diam, sed auctor magna lectus quis lorem. Nam sapien augue, ullamcorper quis imperdiet non, varius at purus. Nunc rhoncus arcu nec libero dapibus bibendum. Nunc cursus dui at quam congue ac eleifend tortor aliquet. Proin vel feugiat nulla. Mauris pharetra, odio in vestibulum dignissim, velit quam egestas metus, vel commodo neque quam non magna. Aliquam ac dui tellus, a suscipit turpis. Donec eget nibh vitae massa pulvinar commodo. Vivamus quis dolor eget leo ultrices posuere in at diam. Ut eget odio nisi, et condimentum nisi. Suspendisse

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis, ante vitae dapibus venenatis, velit metus imperdiet magna, sit amet iaculis nunc ligula sed lacus. Vivamus elit justo, mattis id ultricies a, lacinia id purus. Nunc nec erat turpis, non egestas purus. Duis non lectus venenatis nunc blandit mattis vitae eget risus. Nullam eget consectetur diam. Etiam nulla tortor, dictum ullamcorper tincidunt a, laoreet quis urna. Phasellus nunc sapien, lobortis sed rutrum eu, ullamcorper sed ante. Donec nec vulputate nulla. Curabitur magna ligula, pharetra eu adipiscing cursus, posuere quis tortor. Integer posuere porta velit sed mattis. Duis sed urna orci, ac rutrum ligula. Duis et lacinia eros. Quisque erat quam, fringilla at lobortis non, pellentesque et ligula. Ut volutpat metus justo, eu interdum urna. Pellentesque feugiat enim in dolor mollis et gravida ligula ultrices. Quisque id enim ante, quis facilisis felis. Pellentesque condimentum lorem pellentesque libero mollis suscipit. Nulla facilisi. Suspendisse potenti. Aenean faucibus risus quis mi condimentum scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus nibh id neque pharetra id vulputate dolor consequat. Duis ac nibh massa, ac ullamcorper nibh. Aenean ut urna ut turpis suscipit posuere ut tempus lacus. Nam sed metus nunc, at tempus nibh. Duis eu erat est. Praesent diam risus, cursus nec interdum vel, pharetra et augue. In nec leo nec nunc tincidunt interdum. Vivamus erat turpis, dapibus vel tempus id, adipiscing rhoncus eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc eros leo, imperdiet in iaculis nec, semper sed augue. Sed ac odio libero. Fusce eget consequat risus. Suspendisse eget velit ante. Nunc eget justo in nunc elementum scelerisque. Fusce facilisis feugiat porta. Vivamus blandit elementum quam, id gravida tellus venenatis eu. Proin eu dolor ac orci consectetur pretium. Praesent malesuada ligula sed elit semper sed euismod turpis mattis. Pellentesque ornare, velit et fringilla adipiscing, massa eros porta lorem, vel egestas neque velit a mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut congue diam eu nunc tempor eu laoreet lorem auctor. Morbi sed neque justo, eu pharetra quam. Proin erat sapien, porta interdum egestas non, ultrices in risus. In hac habitasse platea dictumst. Nulla facilisi. Aliquam malesuada, lorem non egestas ornare, quam orci posuere enim, ut consectetur turpis massa luctus enim. Vestibulum eget dui sapien, sit amet ullamcorper velit. Donec quis augue et neque rutrum interdum. Nullam leo sem, consequat vitae varius ac, aliquet tempus nunc. Maecenas quis tempor orci. In quis libero urna. Vivamus vulputate nisi nulla, ut aliquam arcu. Nam scelerisque, orci vel porta varius, tortor magna blandit neque, id ullamcorper nibh leo sit amet libero. Cras fermentum pellentesque tincidunt. Suspendisse dictum tristique nisi in ultrices. Duis tempus ipsum vitae lorem faucibus lobortis. Pellentesque hendrerit, lectus ut vulputate cursus, nibh eros auctor diam, sed auctor magna lectus quis lorem. Nam sapien augue, ullamcorper quis imperdiet non, varius at purus. Nunc rhoncus arcu nec libero dapibus bibendum. Nunc cursus dui at quam congue ac eleifend tortor aliquet. Proin vel feugiat nulla. Mauris pharetra, odio in vestibulum dignissim, velit quam egestas metus, vel commodo neque quam non magna. Aliquam ac dui tellus, a suscipit turpis. Donec eget nibh vitae massa pulvinar commodo. Vivamus quis dolor eget leo ultrices posuere in at diam. Ut eget odio nisi, et condimentum nisi. Suspendisse

Normally, everything should work. The plugin is still in development. if you use this plugin, talk about it or have any suggestions, bugs, please let me know at this e-mail

Retrieved from "http://2012.igem.org/Team:NTNU_Trondheim/Test"