Team:Glendale CC AZ/test

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
ourTestPage.html
 
-
<HTML>
 
-
<HEAD>
 
-
<TITLE>Our Display Test</TITLE>
 
-
<script src="modules_control.js" type="text/javascript">
 
-
</script>
 
-
<script type="text/javascript">
 
-
AddModule("dynamic_display.js");
 
-
</script>
 
-
</HEAD>
 
-
<BODY>
 
-
<div class="dBackgroundBox" id="bgModBox">
 
-
<p><a onclick="ModifyBGColor('bgModBox','#FF0000');">Click here to modify the background color!</a></p>
 
-
</div>
 
-
<div class="dColorBox" id="cModBox">
 
-
<p><a onclick="ModifyTextColor('cModBox','#00FF00');">Click here to modify the text color!</a></p>
 
-
</div>
 
-
<div class="dSizeBox" id="szModBox">
 
-
<p><a onclick="ModifyBoxSize('szModBox','900px', '100px');">Click here to modify the box size!</a></p>
 
-
</div>
 
-
<div class="dPositionBox" id="pModBox">
 
-
<p><a onclick="ModifyBoxPosition('pModBox','100px', '100px');">Click here to modify the box position!</a></p>
 
-
</div>
 
-
</BODY>
 
-
</HTML>
 
-
 
-
 
-
<!DOCTYPE html>
 
-
<html>
 
-
<body>
 
-
 
-
<p>
 
-
JavaScript can write directly into the HTML output stream:
 
-
</p>
 
-
 
-
<script>
 
-
document.write("<h1>This is a heading</h1>");
 
-
document.write("<p>This is a paragraph.</p>");
 
-
</script>
 
-
 
-
<p>
 
-
You can only use <strong>document.write</strong> in the HTML output.
 
-
If you use it after the document has loaded (e.g. in a function), the whole document will be overwritten.
 
-
</p>
 
-
 
-
</body>
 
-
</html>
 
-
 
-
[/CODE]
 
-
 
-
 
-
<!DOCTYPE html>
 
<html>
<html>
<head>
<head>
-
<script>
+
<style>
-
function displayDate()
+
#cssmenu ul,
-
{
+
#cssmenu li,
-
document.getElementById("demo").innerHTML=Date();
+
#cssmenu span,
 +
#cssmenu a {
 +
  margin: 0;
 +
  padding: 0;
 +
  position: relative;
}
}
-
</script>
+
#cssmenu {
 +
  height: 49px;
 +
  border-radius: 5px 5px 0 0;
 +
  -moz-border-radius: 5px 5px 0 0;
 +
  -webkit-border-radius: 5px 5px 0 0;
 +
  background: #141414;
 +
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
 +
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
 +
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
 +
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
 +
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
 +
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
 +
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
 +
  border-bottom: 2px solid #e00f16;
 +
}
 +
#cssmenu:after,
 +
#cssmenu ul:after {
 +
  content: '';
 +
  display: block;
 +
  clear: both;
 +
}
 +
#cssmenu a {
 +
  background: #141414;
 +
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
 +
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
 +
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
 +
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
 +
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
 +
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
 +
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
 +
  color: #ffffff;
 +
  display: inline-block;
 +
  font-family: Helvetica, Arial, Verdana, sans-serif;
 +
  font-size: 12px;
 +
  line-height: 49px;
 +
  padding: 0 20px;
 +
  text-decoration: none;
 +
}
 +
#cssmenu ul {
 +
  list-style: none;
 +
}
 +
#cssmenu > ul {
 +
  float: left;
 +
}
 +
#cssmenu > ul > li {
 +
  float: left;
 +
}
 +
#cssmenu > ul > li:hover:after {
 +
  content: '';
 +
  display: block;
 +
  width: 0;
 +
  height: 0;
 +
  position: absolute;
 +
  left: 50%;
 +
  bottom: 0;
 +
  border-left: 10px solid transparent;
 +
  border-right: 10px solid transparent;
 +
  border-bottom: 10px solid #e00f16;
 +
  margin-left: -10px;
 +
}
 +
#cssmenu > ul > li:first-child > a {
 +
  border-radius: 5px 0 0 0;
 +
  -moz-border-radius: 5px 0 0 0;
 +
  -webkit-border-radius: 5px 0 0 0;
 +
}
 +
#cssmenu > ul > li:last-child > a {
 +
  border-radius: 0 5px 0 0;
 +
  -moz-border-radius: 0 5px 0 0;
 +
  -webkit-border-radius: 0 5px 0 0;
 +
}
 +
#cssmenu > ul > li.active > a {
 +
  box-shadow: inset 0 0 3px #000000;
 +
  -moz-box-shadow: inset 0 0 3px #000000;
 +
  -webkit-box-shadow: inset 0 0 3px #000000;
 +
  background: #070707;
 +
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
 +
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
 +
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
 +
}
 +
#cssmenu > ul > li:hover > a {
 +
  background: #070707;
 +
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
 +
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
 +
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
 +
  box-shadow: inset 0 0 3px #000000;
 +
  -moz-box-shadow: inset 0 0 3px #000000;
 +
  -webkit-box-shadow: inset 0 0 3px #000000;
 +
}
 +
#cssmenu .has-sub {
 +
  z-index: 1;
 +
}
 +
#cssmenu .has-sub:hover > ul {
 +
  display: block;
 +
}
 +
#cssmenu .has-sub ul {
 +
  display: none;
 +
  position: absolute;
 +
  width: 200px;
 +
  top: 100%;
 +
  left: 0;
 +
}
 +
#cssmenu .has-sub ul li {
 +
  *margin-bottom: -1px;
 +
}
 +
#cssmenu .has-sub ul li a {
 +
  background: #e00f16;
 +
  border-bottom: 1px dotted #ec6f73;
 +
  filter: none;
 +
  font-size: 11px;
 +
  display: block;
 +
  line-height: 120%;
 +
  padding: 10px;
 +
}
 +
#cssmenu .has-sub ul li:hover a {
 +
  background: #b00c11;
 +
}
 +
#cssmenu .has-sub .has-sub:hover > ul {
 +
  display: block;
 +
}
 +
#cssmenu .has-sub .has-sub ul {
 +
  display: none;
 +
  position: absolute;
 +
  left: 100%;
 +
  top: 0;
 +
}
 +
#cssmenu .has-sub .has-sub ul li a {
 +
  background: #b00c11;
 +
  border-bottom: 1px dotted #d06d70;
 +
}
 +
#cssmenu .has-sub .has-sub ul li a:hover {
 +
  background: #80090d;
 +
}
 +
 
 +
</style>
</head>
</head>
-
<body>
 
-
<h1>JavaScript</h1>
 
-
<p id="demo">Welcome</p>
 
-
<button type="button" onclick="displayDate()">Display Date</button>
 
-
</body>
 
-
</html>
 
-
<!DOCTYPE html>
+
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
-
<html>
+
<link href="../Downloads/cssmenu-1/menu_assets/styles.css" rel="stylesheet" type="text/css">
-
<head>
+
<div id='cssmenu'>
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
+
<ul>
-
</script>
+
  <li><a href='#'><span>Home</span></a></li>
-
<script>
+
  <li class='has-sub '><a href='#'><span>Products</span></a>
-
$(document).ready(function(){
+
      <ul>
-
  $("p").click(function(){
+
        <li class='has-sub '><a href='#'><span>Product 1</span></a>
-
    $(this).hide();
+
            <ul>
-
  });
+
              <li><a href='#'><span>Sub Product</span></a></li>
-
});
+
              <li><a href='#'><span>Sub Product</span></a></li>
-
</script>
+
            </ul>
-
</head>
+
        </li>
-
<body>
+
        <li class='has-sub '><a href='#'><span>Product 2</span></a>
-
<p>If you click on me, I will disappear.</p>
+
            <ul>
-
<p>Click me away!</p>
+
              <li><a href='#'><span>Sub Product</span></a></li>
-
<p>Click me too!</p>
+
              <li><a href='#'><span>Sub Product</span></a></li>
-
</body>
+
            </ul>
-
</html>
+
        </li>
 +
      </ul>
 +
  </li>
 +
  <li><a href='#'><span>About</span></a></li>
 +
  <li><a href='#'><span>Contact</span></a></li>
 +
</ul>
 +
</div>

Revision as of 03:33, 26 July 2013

Retrieved from "http://2013.igem.org/Team:Glendale_CC_AZ/test"