Team:KIT-Kyoto/Notebook-week11

From 2010.igem.org

(Difference between revisions)
 
(9 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
{{Template:KIT-Kyoto/menu}}
-
 
+
<table border=0 width="965px" align="center"><tr><td>
-
 
+
[[Team:KIT-Kyoto|Home]] > [[Team:KIT-Kyoto/Note|Notebook]] > [[Team:KIT-Kyoto/Notebook|Lab Note]] > [[Team:KIT-Kyoto/Notebook-week8|Week8]]</td></tr></table>
-
<head>
+
<table border=0 width="965px" align="center"><tr><td width="165px" valign="top" align="left"><div>{{Template:KIT-Kyoto/menu1}}
-
 
+
</div></td><td width="800px" valign="top" align="left"><div id="MIGI">
-
<script type="text/javascript" src="mootools.js"></script>  
+
{{Template:KIT-Kyoto/Labdaily}}
-
<script type="text/javascript">  
+
{{Template:KIT-Kyoto-week11}}
-
var accordion;
+
</div></td></tr></table>
-
var accordionTogglers;
+
{{Template:KIT-Kyoto-1}}
-
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);
+
-
}
+
-
});
+
-
}
+
-
</script>  
+
-
+
-
<style type="text/css">
+
-
*{padding:0px; margin:0px;}
+
-
body{font-size:11px; font-family:"Lucida Grande", Arial, sans-serif; color:#6d6d6d;}
+
-
.accToggler{
+
-
margin: 3px auto;
+
-
padding: 3px;
+
-
width: 400px;
+
-
background: #acc95f;
+
-
color: #f4f4f4;
+
-
border: 1px solid #fff;
+
-
cursor: pointer;
+
-
}
+
-
.accContent{
+
-
margin: 0px auto;
+
-
width: 400px;
+
-
}
+
-
a, a:visited{
+
-
font-family:"Lucida Grande", Arial, sans-serif; color:#6d6d6d;
+
-
}
+
-
</style>  
+
-
</head>
+
-
 
+
-
<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="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">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">  
+
-
<code>
+
-
.accToggler{<br />
+
-
margin: 3px auto;<br />
+
-
padding: 3px;<br />
+
-
width: 400px;<br />  
+
-
background: #acc95f;<br />  
+
-
color: #f4f4f4;<br />  
+
-
border: 1px solid #fff;<br />  
+
-
cursor: pointer;<br />
+
-
}<br /><br />
+
-
.accContent{<br />
+
-
margin: 0px auto;<br />
+
-
width: 400px;<br />
+
-
}<code>
+
-
</p>
+
-
<p style="width: 400px; margin:10px auto;text-align:center">
+
-
&copy;2006 <b><a href="http://www.solutoire.com">solutoire.com</a></b>
+
-
</p>
+
-
</body>
+
-
</html>
+

Latest revision as of 01:20, 21 October 2010



Home > Notebook > Lab Note > Week8


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