Template:WashUProjectbar

From 2012.igem.org

(Difference between revisions)
(Created page with " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...")
 
(3 intermediate revisions not shown)
Line 1: Line 1:
-
 
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
-
 
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
-
 
<head>
<head>
-
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
 
+
<title>MENU</title>
-
<title>Live floating menu</title>
+
<script src="http://code.jquery.com/jquery-latest.js"></script>
-
 
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
-
<script language="javascript" src="jquery_mini.js"></script>
+
<script language ="javascript">
-
 
+
var name= "#nav";
-
<script language="javascript" src="jquery.dimensions.js"></script>
+
var menuYloc=null;
-
 
+
-
<script language="javascript">
+
-
 
+
-
var name = "#floatMenu";
+
-
 
+
-
var menuYloc = null;
+
-
 
+
-
 
+
-
 
+
$(document).ready(function(){
$(document).ready(function(){
-
 
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
-
 
$(window).scroll(function () {
$(window).scroll(function () {
-
 
offset = menuYloc+$(document).scrollTop()+"px";
offset = menuYloc+$(document).scrollTop()+"px";
-
 
$(name).animate({top:offset},{duration:500,queue:false});
$(name).animate({top:offset},{duration:500,queue:false});
-
 
});
});
-
 
});
});
-
 
</script>
</script>
-
 
-
 
-
 
-
<link href="reset.css" rel="stylesheet" type="text/css" />
 
-
 
-
<link href="page.css" rel="stylesheet" type="text/css" />
 
-
 
-
 
-
 
<style type="text/css">
<style type="text/css">
 +
@charset "UTF-8";
 +
/* CSS Document */
-
body {
+
#page-wrap{
-
 
+
border-right:1px solid #444;
-
background-color:#000;
+
border-left:1px solid #444;
-
 
+
width:900px;
-
height:2000px;
+
margin:0 auto;
-
 
+
background-color:#222;
-
color:#ccc;
+
color:#ffffff;
-
 
+
font-family:"Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;
-
font:10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;
+
}
-
 
+
#page-wrap #header{
-
}
+
background-color:#444;
 +
padding-top:20px;
 +
padding-bottom:30px;
 +
}
 +
#page-wrap #header h1{
 +
margin-left:45px;
 +
font-size:2.8em;
 +
margin-bottom:10px;
 +
line-height:0.9em;
 +
}
 +
#page-wrap #header h2{
 +
margin-left:45px;
 +
font-size:1.7em;
 +
}
 +
#page-wrap #content{
 +
background:url(images/content_bg.jpg) no-repeat;
 +
padding-top:85px;
 +
}
 +
#page-wrap #content h1{
 +
margin-left:45px;
 +
font-size:2em;
 +
margin-bottom:10px;
 +
}
 +
#page-wrap #content p{
 +
margin-left:45px;
 +
width:620px;
 +
text-align:justify;
 +
margin-bottom:25px;
 +
line-height:1.5em;
 +
}
 +
#page-wrap #content p.first{
 +
font-size:1.2em;
 +
font-weight:bold;
 +
}
 +
#page-wrap #content p.longer{
 +
width:810px;
 +
}
 +
#page-wrap #footer{
 +
background-color:#444;
 +
}
 +
#page-wrap #footer p{
 +
width:auto;
 +
margin:auto;
 +
text-align:center;
 +
font-size:0.9em;
 +
border:1px solid #000;
 +
padding:15px 0;
 +
}
 +
#page-wrap #footer a:link{
 +
color:#09f;
 +
}
 +
#page-wrap #footer a:visited{
 +
text-decoration:none;
 +
}
 +
#page-wrap #footer a:hover{
 +
color:#0f9;
 +
}
 +
#page-wrap #footer a:active{
 +
color:#f90;
 +
}
 +
</style>
 +
<style type = "text/css">
#floatMenu {
#floatMenu {
Line 123: Line 156:
}
}
-
 
</style>
</style>
-
 
</head>
</head>
-
 
<body>
<body>
-
 
-
<div id="page-wrap">
 
-
 
-
<div id="header">
 
-
 
-
<h2>Floating menu</h2>
 
-
 
-
<h1>jQuery&CSS</h1>
 
-
 
-
</div>
 
-
 
-
<div id="content">
 
-
 
-
<h1>Live Demo</h1>
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
<div id="footer"><p>Thanks for your time and i hope you enjoyed this | <a href="mailto:jeff.dion@gmail.com">Contact the author</a></p></div>
 
-
 
-
</div>
 
-
 
-
</div>
 
-
 
-
 
<div id="floatMenu">
<div id="floatMenu">
Line 187: Line 185:
</div>
</div>
-
 
-
 
-
 
-
 
-
 
</body>
</body>
-
 
</html>
</html>
-
 
-
 
-
<style type ="text/css">
 
-
@charset "UTF-8";
 
-
/* CSS Document */
 
-
 
-
#page-wrap{
 
-
border-right:1px solid #444;
 
-
border-left:1px solid #444;
 
-
width:900px;
 
-
margin:0 auto;
 
-
background-color:#222;
 
-
color:#ffffff;
 
-
font-family:"Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;
 
-
}
 
-
#page-wrap #header{
 
-
background-color:#444;
 
-
padding-top:20px;
 
-
padding-bottom:30px;
 
-
}
 
-
#page-wrap #header h1{
 
-
margin-left:45px;
 
-
font-size:2.8em;
 
-
margin-bottom:10px;
 
-
line-height:0.9em;
 
-
}
 
-
#page-wrap #header h2{
 
-
margin-left:45px;
 
-
font-size:1.7em;
 
-
}
 
-
#page-wrap #content{
 
-
background:url(images/content_bg.jpg) no-repeat;
 
-
padding-top:85px;
 
-
}
 
-
#page-wrap #content h1{
 
-
margin-left:45px;
 
-
font-size:2em;
 
-
margin-bottom:10px;
 
-
}
 
-
#page-wrap #content p{
 
-
margin-left:45px;
 
-
width:620px;
 
-
text-align:justify;
 
-
margin-bottom:25px;
 
-
line-height:1.5em;
 
-
}
 
-
#page-wrap #content p.first{
 
-
font-size:1.2em;
 
-
font-weight:bold;
 
-
}
 
-
#page-wrap #content p.longer{
 
-
width:810px;
 
-
}
 
-
#page-wrap #footer{
 
-
background-color:#444;
 
-
}
 
-
#page-wrap #footer p{
 
-
width:auto;
 
-
margin:auto;
 
-
text-align:center;
 
-
font-size:0.9em;
 
-
border:1px solid #000;
 
-
padding:15px 0;
 
-
}
 
-
#page-wrap #footer a:link{
 
-
color:#09f;
 
-
}
 
-
#page-wrap #footer a:visited{
 
-
text-decoration:none;
 
-
}
 
-
#page-wrap #footer a:hover{
 
-
color:#0f9;
 
-
}
 
-
#page-wrap #footer a:active{
 
-
color:#f90;
 
-
}
 

Latest revision as of 20:42, 3 July 2012

MENU