User:Annelies/Rollmenu

From 2009.igem.org

< User:Annelies(Difference between revisions)
 
(5 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
 
+
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css">
-
<head>
+
        <select dojoType="dijit.form.ComboBox" id="easingSelector">
-
<style>
+
            <option>
-
  body{font-family:verdana;}
+
                linear
-
  table{font-size:70%;background:d20000}
+
            </option>
-
  a{color:black;text-decoration:none;font:bold}
+
            <option>
-
  a:hover{color:003366}
+
                quadIn
-
  td.menu{background:d8e1e9}
+
            </option>
-
  table.menu
+
            <option>
-
  {
+
                quadOut
-
  font-size:100%;
+
            </option>
-
  position:absolute;
+
            <option>
-
  visibility:hidden;
+
                quadInOut
-
  }
+
            </option>
-
</style>
+
            <option>
-
  <script language="JavaScript">
+
                cubicIn
-
  function toonmenu(elmnt)
+
            </option>
-
  {
+
            <option>
-
  document.all(elmnt).style.visibility="visible"
+
                cubicOut
-
  }
+
            </option>
-
  function verstopmenu(elmnt)
+
            <option>
-
  {
+
                cubicInOut
-
  document.all(elmnt).style.visibility="hidden"
+
            </option>
-
  }
+
            <option>
-
  </script>
+
                quartIn
-
</head>
+
            </option>
 +
            <option>
 +
                quartOut
 +
            </option>
 +
            <option>
 +
                quartInOut
 +
            </option>
 +
            <option>
 +
                quintIn
 +
            </option>
 +
            <option>
 +
                quintOut
 +
            </option>
 +
            <option>
 +
                quintInOut
 +
            </option>
 +
            <option>
 +
                sineIn
 +
            </option>
 +
            <option>
 +
                sineOut
 +
            </option>
 +
            <option>
 +
                sineInOut
 +
            </option>
 +
            <option>
 +
                expoIn
 +
            </option>
 +
            <option>
 +
                expoOut
 +
            </option>
 +
            <option>
 +
                expoInOut
 +
            </option>
 +
            <option>
 +
                circIn
 +
            </option>
 +
            <option>
 +
                circOut
 +
            </option>
 +
            <option>
 +
                circInOut
 +
            </option>
 +
            <option>
 +
                backIn
 +
            </option>
 +
            <option>
 +
                backOut
 +
            </option>
 +
            <option>
 +
                backInOut
 +
            </option>
 +
            <option>
 +
                elasticIn
 +
            </option>
 +
            <option>
 +
                elasticOut
 +
            </option>
 +
            <option>
 +
                elasticInOut
 +
            </option>
 +
            <option>
 +
                bounceIn
 +
            </option>
 +
            <option>
 +
                bounceOut
 +
            </option>
 +
            <option>
 +
                bounceInOut
 +
            </option>
 +
        </select>
 +
        <button dojoType="dijit.form.Button" id="moveButton">
 +
            Move the div!
 +
        </button>
 +
        <div id="moveableNode" style="width: 100px; height: 100px; background-color: red; margin-left: 0px;">
 +
        </div>
 +
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
 +
    djConfig="parseOnLoad: true">
 +
    </script>
 +
    <script>
 +
        dojo.require("dijit.form.Button");
 +
        dojo.require("dijit.form.ComboBox");
 +
        dojo.require("dojo.fx.easing");
 +
        function setupMove() {
 +
            //Function linked to the button to trigger the fade.
 +
            function moveIt() {
 +
                //Set initial state and get the easing from the dropdown
 +
                dojo.style("moveableNode", "marginLeft", "0px");
 +
                var easing = dijit.byId("easingSelector").attr("value");
 +
                var ef = dojo.fx.easing[easing];
 +
                if (ef) {
 +
                    var moveArgs = {
 +
                        node: "moveableNode",
 +
                        properties: {
 +
                            marginLeft: {
 +
                                start: 0,
 +
                                end: 400,
 +
                                unit: "px"
 +
                            }
 +
                        },
 +
                        easing: ef,
 +
                        duration: 5000
 +
                    };
 +
                    dojo.animateProperty(moveArgs).play();
 +
                }
 +
            }
 +
            dojo.connect(dijit.byId("moveButton"), "onClick", moveIt);
 +
        }
 +
        dojo.addOnLoad(setupMove);
 +
    </script>
-
 
-
  <body>
 
-
 
-
<font face="arial" size="3"> <table width="100%"> <tr bgcolor="#d8e1e9">
 
-
  <td onmouseover="toonmenu('Home')" onmouseout="verstopmenu('Home')"> <a href="#.html" target=frame1>Home</a><br />
 
-
</td>
 
-
 
-
  <td onmouseover="toonmenu('site1')" onmouseout="verstopmenu('site1')"> <a href="#.html" target=frame1>The project</a><br />
 
-
<table class="menu" id="site1" width="100%"> <tr>
 
-
      <td class="menu"><a href="https://2009.igem.org/Team:Groningen/Project" target=frame1>Project overview</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="https://2009.igem.org/Team:Groningen/Project_Plan" target=frame1>Project plan</a></td>
 
-
    </tr>
 
-
<tr>
 
-
      <td class="menu"><a href="https://2009.igem.org/Team:Groningen/Vision" target=frame1>Our vision</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="#.html" target=frame1>Ethics</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="#.html" target=frame1>BioBricks</a></td>
 
-
    </tr>
 
-
</table></td>
 
-
<td onmouseover="toonmenu('site2')" onmouseout="verstopmenu('site2')"> <a href="#.html" target=frame1>The team</a><br />
 
-
  <table class="menu" id="site2" width="100%">
 
-
   
 
-
  <tr>
 
-
      <td class="menu"><a href="https://2009.igem.org/Team:Groningen/Team" target=frame1>Team overview</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="#.html" target=frame1>Advisors</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="#.html" target=frame1>Team members</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="#.html" target=frame1>De rest</a></td>
 
-
    </tr>
 
-
  </table></td>
 
-
<td onmouseover="toonmenu('site3')" onmouseout="verstopmenu('site3')"> <a href="#.html" target=frame1>Modelling</a><br />
 
-
  <table class="menu" id="site3" width="100%">
 
-
  <tr>
 
-
      <td class="menu"><a href="https://2009.igem.org/Team:Groningen/Modelling" target=frame1>Modelling overview</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="https://2009.igem.org/Team:Groningen/Project/Transport" target=frame1>Metal transport</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="https://2009.igem.org/Team:Groningen/Project/Accumulation" target=frame1>Metal accumulation</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="https://2009.igem.org/Team:Groningen/Project/Vesicle" target=frame1>Gas Vesicle</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="https://2009.igem.org/Team:Groningen/Project/Promoters" target=frame1>Metal sensitive promoters</a></td>
 
-
    </tr>
 
-
  </table></td>
 
-
<td onmouseover="toonmenu('site4')" onmouseout="verstopmenu('site4')"> <a href="#.html" target=frame1>Notebook</a><br />
 
-
  <table class="menu" id="site4" width="100%">
 
-
  <tr><td class="menu">
 
-
      <a href="https://2009.igem.org/Team:Groningen/Notebook" target=frame1>Notebook</a></td>
 
-
</tr>
 
-
<tr>
 
-
<td class="menu"><a href="#.html" target=frame1>Material &amp; Methods</a></td>
 
-
</tr>
 
-
<tr>
 
-
  <td class="menu"><a href="#.html" target=frame1>Lab Results</a></td>
 
-
</tr>
 
-
<tr>
 
-
  <td class="menu"><a href="#.html" target=frame1>Safety en nog wat</a></td>
 
-
</tr>
 
-
<tr>
 
-
  <td class="menu"><a href="https://2009.igem.org/Team:Groningen/Future" target=frame1>Future (ideas)</a></td>
 
-
</tr>
 
-
  </table></td>
 
-
<td onmouseover="toonmenu('site5')" onmouseout="verstopmenu('site5')"> <a href="#.html" target=frame1>Other information / Acknowledgements??</a><br />
 
-
  <table class="menu" id="site5" width="100%">
 
-
    <tr>
 
-
      <td class="menu"><a href="https://2009.igem.org/Team:Groningen/Glossary" target=frame1>Glossary</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="https://2009.igem.org/Team:Groningen/Literature" target=frame1>Litarature</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="#.html" target=frame1>Sponsors</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="https://2009.igem.org/Team:Groningen/Project_Plan/Tools_and_Documentation" target=frame1>Tools</a></td>
 
-
    </tr>
 
-
<tr>
 
-
      <td class="menu"><a href="#.html" target=frame1>Teams with similar projects</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="#.html" target=frame1>Work together with other teams</a></td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td class="menu"><a href="#.html" target=frame1>Meetings</a></td>
 
-
    </tr>
 
-
 
-
  </table></td></table>
 
-
 
-
 
-
  </body>
 
</html>
</html>

Latest revision as of 12:40, 23 September 2009

Retrieved from "http://2009.igem.org/User:Annelies/Rollmenu"