Team:KIT-Kyoto/Notebook-week11

From 2010.igem.org

(Difference between revisions)
Line 58: Line 58:
</head>
</head>
-
<body>
+
<body>  
-
 
+
<h1 style="text-align:center">Accordion with color transition example - solutoire.com</h1>
-
 
+
<p style="width: 400px; margin:10px auto">
-
 
+
See the 'Javascript used in this example' tab for the options used in this example.
 +
</p>
<p class="accToggler">Click me!</p>  
<p class="accToggler">Click me!</p>  
<p class="accContent">  
<p class="accContent">  
-
 
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu elit. Sed consequat neque et sapien. In hac habitasse platea dictumst. In hac habitasse platea
-
 
+
dictumst. Donec justo dui, aliquam ac, feugiat nec, malesuada ac, enim. Etiam consequat nulla eget metus malesuada tincidunt. Ut ultrices nonummy metus.
-
 
+
Pellentesque pharetra neque eu urna. In nec ligula. Curabitur purus ligula, consectetuer id, auctor et, gravida pretium, est. Aenean vitae neque. Integer dolor
-
</p>
+
enim, ultricies semper, ullamcorper at, mollis at, mauris.
-
 
+
</p>  
-
<p class="accToggler">Click me!</p>  
+
<p class="accToggler">Click me!</p>
 +
<p class="accContent">
 +
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu elit. Sed consequat neque et sapien. In hac habitasse platea dictumst. In hac habitasse platea
 +
dictumst. Donec justo dui, aliquam ac, feugiat nec, malesuada ac, enim. Etiam consequat nulla eget metus malesuada tincidunt. Ut ultrices nonummy metus.
 +
Pellentesque pharetra neque eu urna. In nec ligula. Curabitur purus ligula, consectetuer id, auctor et, gravida pretium, est. Aenean vitae neque. Integer dolor
 +
enim, ultricies semper, ullamcorper at, mollis at, mauris.
 +
</p>
 +
 +
<p class="accToggler">Javascript used in this example</p>
 +
<p class="accContent">
 +
<code>
 +
var accordion;<br />
 +
var accordionTogglers;<br />
 +
var accordionContents;<br /><br />
 +
 +
window.onload = function() {<br /><br />
 +
accordionTogglers = document.getElementsByClassName('accToggler');<br /><br />
 +
 +
accordionTogglers.each(function(toggler){<br />
 +
//remember the original color<br />
 +
toggler.origColor = toggler.getStyle('background-color');<br />
 +
//set the effect<br />
 +
toggler.fx = new Fx.Color(toggler, 'background-color');<br />
 +
});<br /><br />
 +
 +
accordionContents = document.getElementsByClassName('accContent');<br /><br />
 +
accordion = new Fx.Accordion(accordionTogglers, <br />
 +
accordionContents,{<br />
 +
//when an element is opened change the<br />
 +
//background color to blue<br />
 +
onActive: function(toggler){<br />
 +
toggler.fx.toColor('#6899CE');<br />
 +
},<br />
 +
onBackground: function(toggler){<br />
 +
//change the background color to the original (green)<br />
 +
//color when another toggler is pressed<br />
 +
toggler.setStyle('background-color', toggler.origColor);<br />
 +
}<br />
 +
});<br />
 +
}
 +
</code>
 +
</p>
 +
<p class="accToggler">CSS used in this example</p>  
<p class="accContent">  
<p class="accContent">  
-
【時間】　9:00～18:00<BR>
+
<code>  
-
<BR>
+
.accToggler{<br />  
-
【実験担当】岩城,福山,竹内,臼井,足立<BR>
+
margin: 3px auto;<br />  
-
<BR>
+
padding: 3px;<br />  
-
【実験名】<BR>
+
width: 400px;<br />  
-
(1)pSB6及びpsB1(非パーツ)のプレカルチャー<BR>
+
background: #acc95f;<br />  
-
(2)pGVBpttの電気泳動<BR>
+
color: #f4f4f4;<br />  
-
(3)psB3K3(J04450)のトランスフォーメーション<BR>
+
border: 1px solid #fff;<br />  
-
<BR>
+
cursor: pointer;<br />  
-
【実験目的】<BR>
+
}<br /><br />  
-
(1)pSB6A1(K121013)及びpsB1(非パーツ)のプレカルチャー<BR>
+
.accContent{<br />  
-
(2)pGVBpttが正しく制限酵素処理されているかどうかを確認するため<BR>
+
margin: 0px auto;<br />  
-
(3)psB3K3(J04450)のトランスフォーメーション<BR>
+
width: 400px;<br />  
-
<BR>
+
}<code>  
-
【実験内容】<BR>
+
</p>  
-
<BR>
+
<p style="width: 400px; margin:10px auto;text-align:center">  
-
(1)プレカルチャー<BR>
+
&copy;2006 <b><a href="http://www.solutoire.com">solutoire.com</a></b>  
-
:DH5α-pSB6を液体LB培地(+amp)2mLで培養<BR>
+
</p>  
-
:DH5α-pSB1 を液体LB培地(+amp)2mLで培養<BR>
+
</body>  
-
<BR>
+
</html>
-
(2)pGVBpttの電気泳動<BR>
+
-
<BR>
+
-
:〈組成〉<BR>
+
-
::pGVBppt 5μL<BR>
+
-
::KpmI 1μL <BR>
+
-
::HindⅢ 1μL <BR>
+
-
::Buffer(M) 1μL <BR>
+
-
::H2O 11μL <BR>
+
-
::計  20μL  <BR>
+
-
<BR>
+
-
:これを1h,37℃でインキュベート<BR>
+
-
:　　　　　　　　↓<BR>
+
-
:Loading Buffer　1μLを加えたものと、マーカー(1kbp radder)を<BR>
+
-
:1% Agarose Gel のコームに流し込んだ<BR>
+
-
:　　　　　　　　↓100V,30min泳動<BR>
+
-
:　　　　　　　　↓EtBr(10mg/mL)で20min染色<BR>
+
-
:泳動結果を写真で撮影した<BR>
+
-
<BR>
+
-
<BR>
+
-
(3)psB3K3にSOC　0.9mLを加えDH5αにトランスフォーメーションした<BR>
+
-
:　　　　　　　　　　　　　↓<BR>
+
-
:　　37℃でインキュベート（Overnight）<BR>
+
-
 
+
-
</p>
+
-
 
+
-
 
+
-
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
+
-
 
+
-
 
+
-
</head></html>
+

Revision as of 14:00, 6 September 2010

Accordion with color transition example - solutoire.com

See the 'Javascript used in this example' tab for the options used in this example.

Click me!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu elit. Sed consequat neque et sapien. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Donec justo dui, aliquam ac, feugiat nec, malesuada ac, enim. Etiam consequat nulla eget metus malesuada tincidunt. Ut ultrices nonummy metus. Pellentesque pharetra neque eu urna. In nec ligula. Curabitur purus ligula, consectetuer id, auctor et, gravida pretium, est. Aenean vitae neque. Integer dolor enim, ultricies semper, ullamcorper at, mollis at, mauris.

Click me!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In eu elit. Sed consequat neque et sapien. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Donec justo dui, aliquam ac, feugiat nec, malesuada ac, enim. Etiam consequat nulla eget metus malesuada tincidunt. Ut ultrices nonummy metus. Pellentesque pharetra neque eu urna. In nec ligula. Curabitur purus ligula, consectetuer id, auctor et, gravida pretium, est. Aenean vitae neque. Integer dolor enim, ultricies semper, ullamcorper at, mollis at, mauris.

Javascript used in this example

var accordion;
var accordionTogglers;
var accordionContents;

window.onload = function() {

accordionTogglers = document.getElementsByClassName('accToggler');

accordionTogglers.each(function(toggler){
//remember the original color
toggler.origColor = toggler.getStyle('background-color');
//set the effect
toggler.fx = new Fx.Color(toggler, 'background-color');
});

accordionContents = document.getElementsByClassName('accContent');

accordion = new Fx.Accordion(accordionTogglers,
accordionContents,{
//when an element is opened change the
//background color to blue
onActive: function(toggler){
toggler.fx.toColor('#6899CE');
},
onBackground: function(toggler){
//change the background color to the original (green)
//color when another toggler is pressed
toggler.setStyle('background-color', toggler.origColor);
}
});
}

CSS used in this example

.accToggler{
margin: 3px auto;
padding: 3px;
width: 400px;
background: #acc95f;
color: #f4f4f4;
border: 1px solid #fff;
cursor: pointer;
}

.accContent{
margin: 0px auto;
width: 400px;
}

©2006 solutoire.com

Retrieved from "http://2010.igem.org/Team:KIT-Kyoto/Notebook-week11"