Team:EPF-Lausanne/Essai

From 2009.igem.org

(Difference between revisions)
Line 1: Line 1:
-
blip
+
<html>
-
{{Template:Main}}
+
 
 +
<head>
 +
<title>Essai 1</title>
 +
 
 +
<style type="text/css">
 +
.anylinkcss{
 +
position: absolute;
 +
left: 0;
 +
top: 0;
 +
visibility: hidden;
 +
border: 1px solid black;
 +
border-bottom-width: 0;
 +
font: normal 12px Verdana;
 +
line-height: 18px;
 +
z-index: 100; /* zIndex should be greater than that of shadow's below */
 +
background: lightyellow;
 +
width: 200px; /* default width for menu */
 +
}
 +
 
 +
.anylinkcss ul{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
}
 +
 
 +
.anylinkcss ul li a{
 +
width: 100%;
 +
display: block;
 +
text-indent: 3px;
 +
border-bottom: 1px solid black;
 +
padding: 1px 0;
 +
text-decoration: none;
 +
font-weight: bold;
 +
text-indent: 5px;
 +
}
 +
 
 +
.anylinkcss a:hover{ /*hover background color*/
 +
background: black;
 +
color: white;
 +
}
 +
 
 +
/* ######### Alternate multi-column class for drop down menus ######### */
 +
 
 +
 
 +
.anylinkcsscols{
 +
position: absolute;
 +
left: 0;
 +
top: 0;
 +
visibility: hidden;
 +
border: 1px solid black;
 +
padding: 10px;
 +
font: normal 12px Verdana;
 +
z-index: 100; /*zIndex should be greater than that of shadow's below*/
 +
background: #DEFFCA;
 +
}
 +
 
 +
.anylinkcsscols .column{
 +
width: 130px;
 +
float: left;
 +
}
 +
 
 +
.anylinkcsscols .column ul{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
}
 +
 
 +
.anylinkcsscols li{
 +
padding-bottom: 3px;
 +
}
 +
 
 +
/* ######### class for shadow DIV ######### */
 +
 
 +
 
 +
.anylinkshadow{ /*CSS for shadow. Keep this as is */
 +
position: absolute;
 +
left: 0;
 +
top: 0;
 +
z-index: 99; /*zIndex for shadow*/
 +
background: black;
 +
visibility: hidden;
 +
}
 +
</style>
 +
 
 +
<script type="text/javascript">
 +
 
 +
var anylinkcssmenu={
 +
 
 +
menusmap: {},
 +
effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:true, duration:500}}, //customize menu effects
 +
 
 +
dimensions: {},
 +
 
 +
getoffset:function(what, offsettype){
 +
return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
 +
},
 +
 
 +
getoffsetof:function(el){
 +
el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop"), h: el.offsetHeight}
 +
},
 +
 
 +
getdimensions:function(menu){
 +
this.dimensions={anchorw:menu.anchorobj.offsetWidth, anchorh:menu.anchorobj.offsetHeight,
 +
docwidth:(window.innerWidth ||this.standardbody.clientWidth)-20,
 +
docheight:(window.innerHeight ||this.standardbody.clientHeight)-15,
 +
docscrollx:window.pageXOffset || this.standardbody.scrollLeft,
 +
docscrolly:window.pageYOffset || this.standardbody.scrollTop
 +
}
 +
if (!this.dimensions.dropmenuw){
 +
this.dimensions.dropmenuw=menu.dropmenu.offsetWidth
 +
this.dimensions.dropmenuh=menu.dropmenu.offsetHeight
 +
}
 +
},
 +
 
 +
isContained:function(m, e){
 +
var e=window.event || e
 +
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
 +
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
 +
if (c==m)
 +
return true
 +
else
 +
return false
 +
},
 +
 
 +
setopacity:function(el, value){
 +
el.style.opacity=value
 +
if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
 +
el.style.MozOpacity=value
 +
if (el.filters){
 +
el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
 +
}
 +
}
 +
},
 +
 
 +
showmenu:function(menuid){
 +
var menu=anylinkcssmenu.menusmap[menuid]
 +
clearTimeout(menu.hidetimer)
 +
this.getoffsetof(menu.anchorobj)
 +
this.getdimensions(menu)
 +
var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) //base x pos
 +
var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)//base y pos
 +
if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
 +
posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)
 +
}
 +
if (posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight){  //drop up instead?
 +
posy=Math.max(posy-this.dimensions.dropmenuh - (menu.orientation=="lr"? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) //position above anchor or window's top edge
 +
}
 +
if (this.effects.fade.enabled){
 +
this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially
 +
if (this.effects.shadow.enabled)
 +
this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially
 +
}
 +
menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'})
 +
if (this.effects.shadow.enabled)
 +
menu.shadow.setcss({left:posx+anylinkcssmenu.effects.shadow.depth[0]+'px', top:posy+anylinkcssmenu.effects.shadow.depth[1]+'px', visibility:'visible'})
 +
if (this.effects.fade.enabled){
 +
clearInterval(menu.animatetimer)
 +
menu.curanimatedegree=0
 +
menu.starttime=new Date().getTime() //get time just before animation is run
 +
menu.animatetimer=setInterval(function(){anylinkcssmenu.revealmenu(menuid)}, 20)
 +
}
 +
},
 +
 
 +
revealmenu:function(menuid){
 +
var menu=anylinkcssmenu.menusmap[menuid]
 +
var elapsed=new Date().getTime()-menu.starttime //get time animation has run
 +
if (elapsed<this.effects.fade.duration){
 +
this.setopacity(menu.dropmenu, menu.curanimatedegree)
 +
if (this.effects.shadow.enabled)
 +
this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity)
 +
}
 +
else{
 +
clearInterval(menu.animatetimer)
 +
this.setopacity(menu.dropmenu, 1)
 +
menu.dropmenu.style.filter=""
 +
}
 +
menu.curanimatedegree=(1-Math.cos((elapsed/this.effects.fade.duration)*Math.PI)) / 2
 +
},
 +
 
 +
setcss:function(param){
 +
for (prop in param){
 +
this.style[prop]=param[prop]
 +
}
 +
},
 +
 
 +
hidemenu:function(menuid){
 +
var menu=anylinkcssmenu.menusmap[menuid]
 +
clearInterval(menu.animatetimer)
 +
menu.dropmenu.setcss({visibility:'hidden', left:0, top:0})
 +
menu.shadow.setcss({visibility:'hidden', left:0, top:0})
 +
},
 +
 
 +
getElementsByClass:function(targetclass){
 +
if (document.querySelectorAll)
 +
return document.querySelectorAll("."+targetclass)
 +
else{
 +
var classnameRE=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "i") //regular expression to screen for classname
 +
var pieces=[]
 +
var alltags=document.all? document.all : document.getElementsByTagName("*")
 +
for (var i=0; i<alltags.length; i++){
 +
if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
 +
pieces[pieces.length]=alltags[i]
 +
}
 +
return pieces
 +
}
 +
},
 +
 
 +
addEvent:function(targetarr, functionref, tasktype){
 +
if (targetarr.length>0){
 +
var target=targetarr.shift()
 +
if (target.addEventListener)
 +
target.addEventListener(tasktype, functionref, false)
 +
else if (target.attachEvent)
 +
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)})
 +
this.addEvent(targetarr, functionref, tasktype)
 +
}
 +
},
 +
 
 +
setupmenu:function(targetclass, anchorobj, pos){
 +
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
 +
var relattr=anchorobj.getAttribute("rel")
 +
var dropmenuid=relattr.replace(/\[(\w+)\]/, '')
 +
var menu=this.menusmap[targetclass+pos]={
 +
id: targetclass+pos,
 +
anchorobj: anchorobj,
 +
dropmenu: document.getElementById(dropmenuid),
 +
revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click")? "click" : "mouseover",
 +
orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",
 +
shadow: document.createElement("div")
 +
}
 +
menu.anchorobj._internalID=targetclass+pos
 +
menu.anchorobj._isanchor=true
 +
menu.dropmenu._internalID=targetclass+pos
 +
menu.shadow._internalID=targetclass+pos
 +
menu.shadow.className="anylinkshadow"
 +
document.body.appendChild(menu.dropmenu) //move drop down div to end of page
 +
document.body.appendChild(menu.shadow)
 +
menu.dropmenu.setcss=this.setcss
 +
menu.shadow.setcss=this.setcss
 +
menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
 +
this.setopacity(menu.shadow, this.effects.shadow.opacity)
 +
this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOVER event for anchor, dropmenu, shadow
 +
var menu=anylinkcssmenu.menusmap[this._internalID]
 +
if (this._isanchor && menu.revealtype=="mouseover" && !anylinkcssmenu.isContained(this, e)){ //event for anchor
 +
anylinkcssmenu.showmenu(menu.id)
 +
}
 +
else if (typeof this._isanchor=="undefined"){ //event for drop down menu and shadow
 +
clearTimeout(menu.hidetimer)
 +
}
 +
}, "mouseover")
 +
this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow
 +
if (!anylinkcssmenu.isContained(this, e)){
 +
var menu=anylinkcssmenu.menusmap[this._internalID]
 +
menu.hidetimer=setTimeout(function(){anylinkcssmenu.hidemenu(menu.id)}, anylinkcssmenu.effects.delayhide)
 +
}
 +
}, "mouseout")
 +
this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu
 +
var menu=anylinkcssmenu.menusmap[this._internalID]
 +
if ( this._isanchor && menu.revealtype=="click"){
 +
if (menu.dropmenu.style.visibility=="visible")
 +
anylinkcssmenu.hidemenu(menu.id)
 +
else
 +
anylinkcssmenu.showmenu(menu.id)
 +
if (e.preventDefault)
 +
e.preventDefault()
 +
return false
 +
}
 +
else
 +
menu.hidetimer=setTimeout(function(){anylinkcssmenu.hidemenu(menu.id)}, anylinkcssmenu.effects.delayhide)
 +
}, "click")
 +
},
 +
 
 +
init:function(targetclass){
 +
var anchors=this.getElementsByClass(targetclass)
 +
for (var i=0; i<anchors.length; i++){
 +
this.setupmenu(targetclass, anchors[i], i)
 +
}
 +
}
 +
 
 +
}
 +
</script>
 +
 
 +
 
 +
</head>
 +
 
 +
<body>
 +
 
 +
<!--1st anchor link and menu -->
 +
 
 +
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Default Example</a></p>
 +
 
 +
                                                   
 +
<div id="submenu1" class="anylinkcss">
 +
<ul>
 +
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
 +
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
 +
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
 +
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
 +
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
 +
</ul>
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!--2nd anchor link and menu -->
 +
 
 +
<p><a href="http://www.dynamicdrive.com" class="anchorclass someotherclass" rel="submenu2[click]" rev="lr">Right dropping menu</a> (click to reveal)</p>
 +
                                                   
 +
<div id="submenu2" class="anylinkcss" style="width: 150px; background-color:#E9FECB">
 +
<ul>
 +
<li><a href="http://www.cnn.com/">CNN</a></li>
 +
<li><a href="http://www.msnbc.com">MSNBC</a></li>
 +
<li><a href="http://www.google.com">Google</a></li>
 +
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
 +
</ul>
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!--3rd anchor link and menu -->
 +
 
 +
<p style="text-align:center"><a href="http://www.dynamicdrive.com" class="anchorclass myownclass" rel="submenu3">Menu with multiple columns</a></p>
 +
                                                   
 +
<div id="submenu3" class="anylinkcsscols">
 +
 
 +
<div class="column">
 +
<b>Web Development</b>
 +
<ul>
 +
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
 +
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
 +
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
 +
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
 +
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
 +
</ul>
 +
</div>
 +
 
 +
<div class="column">
 +
<b>News Related</b>
 +
<ul>
 +
<li><a href="http://www.cnn.com/">CNN</a></li>
 +
<li><a href="http://www.msnbc.com">MSNBC</a></li>
 +
<li><a href="http://www.google.com">Google</a></li>
 +
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
 +
</ul>
 +
</div>
 +
 
 +
<div class="column">
 +
<b>Technology</b>
 +
<ul>
 +
<li><a href="http://www.news.com/">News.com</a></li>
 +
<li><a href="http://www.slashdot.com">SlashDot</a></li>
 +
<li><a href="http://www.digg.com">Digg</a></li>
 +
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
 +
</ul>
 +
</div>
 +
 
 +
</div>
 +
 
 +
 
 +
 
 +
<script type="text/javascript">
 +
 
 +
//anylinkcssmenu.init("menu_anchors_class") //call this function at the very *end* of the document!
 +
anylinkcssmenu.init("anchorclass")
 +
</script>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</body>
 +
</html>

Revision as of 09:43, 16 April 2009

Essai 1

Default Example

Right dropping menu (click to reveal)

Menu with multiple columns

Retrieved from "http://2009.igem.org/Team:EPF-Lausanne/Essai"