Template:Queens Canada/Header

From 2011.igem.org

(Difference between revisions)
Line 126: Line 126:
|}
|}
 +
 +
 +
 +
 +
 +
 +
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 +
 +
<head>
 +
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 +
 +
<script type="text/javascript" src="ddaccordion.js">
 +
 +
/***********************************************
 +
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
 +
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
 +
* This notice must stay intact for legal use
 +
***********************************************/
 +
 +
</script>
 +
 +
 +
<script type="text/javascript">
 +
 +
 +
ddaccordion.init({
 +
headerclass: "silverheader", //Shared CSS class name of headers group
 +
contentclass: "submenu", //Shared CSS class name of contents group
 +
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
 +
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
 +
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
 +
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
 +
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
 +
animatedefault: false, //Should contents open by default be animated into view?
 +
persiststate: true, //persist state of opened contents within browser session?
 +
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
 +
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
 +
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
 +
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
 +
//do nothing
 +
},
 +
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 +
//do nothing
 +
}
 +
})
 +
 +
 +
</script>
 +
 +
 +
<style type="text/css">
 +
 +
.applemenu{
 +
margin: 5px 0;
 +
padding: 0;
 +
width: 170px; /*width of menu*/
 +
border: 1px solid #9A9A9A;
 +
}
 +
 +
.applemenu div.silverheader a{
 +
background: black url(silvergradient.gif) repeat-x center left;
 +
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
 +
color: white;
 +
display: block;
 +
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
 +
width: auto;
 +
padding: 5px 0;
 +
padding-left: 8px;
 +
text-decoration: none;
 +
}
 +
 +
 +
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
 +
color: white;
 +
}
 +
 +
 +
.applemenu div.selected a, .applemenu div.silverheader a:hover{
 +
background-image: url(silvergradientover.gif);
 +
color: white;
 +
}
 +
 +
.applemenu div.submenu{ /*DIV that contains each sub menu*/
 +
background: white;
 +
padding: 5px;
 +
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
 +
}
 +
 +
</style>
 +
 +
</head>
 +
 +
<body>
 +
 +
<div class="applemenu">
 +
<div class="silverheader"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
 +
<div class="submenu">
 +
Some random content here<br />
 +
</div>
 +
<div class="silverheader"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
 +
<div class="submenu">
 +
Some random content here<br />
 +
</div>
 +
<div class="silverheader"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div>
 +
<div class="submenu">
 +
Some random content here<br />
 +
</div>
 +
<div class="silverheader"><a href="http://www.cssdrive.com">CSS Drive</a></div>
 +
<div class="submenu">
 +
Some random content here<br />
 +
<img src="http://i27.tinypic.com/sy7295.gif" />
 +
</div>
 +
<div class="silverheader"><a href="http://www.codingforums.com">Coding Forums</a></div>
 +
<div class="submenu">
 +
Some random content here<br />
 +
</div>
 +
</div>
 +
 +
<p>Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:</p>
 +
<p>
 +
- <a href="current.htm?silverheader=0">Expand 1st header within "submenuheader" header group</a><br />
 +
</p>
 +
 +
<p>Helpful links: </p>
 +
<p>
 +
- <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm">Adding arbitrary links hat expand/ collapse the contents</a><br />
 +
- <a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm">Taking advantage of the oninit() and onopenclose() event handlers</a><br />
 +
</p>
 +
 +
</body>
 +
</html>

Revision as of 15:35, 15 June 2011

Text everywhere QQQQQ Okay

Is this text actually the right font? Text everywhere okay QQQQQQQQ Q


QQQ

Text inside here, everywhere! Whoa!

but then:

Achievements in copying code


Flickr Twitter

If nothing appears here, something has gone wrong! Please enable JavaScript to continue.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">

Dynamic Drive
Some random content here
CSS Examples
Some random content here
JavaScript Kit
Some random content here
CSS Drive
Some random content here
Coding Forums
Some random content here

Assuming the current page is named "current.htm", the below links when navigated to expands a particular header on that page:

- Expand 1st header within "submenuheader" header group

Helpful links:

- Adding arbitrary links hat expand/ collapse the contents
- Taking advantage of the oninit() and onopenclose() event handlers

Retrieved from "http://2011.igem.org/Template:Queens_Canada/Header"