Salve,
Ho scaricato uno script di html.it che permette, cliccando su un link, di far comparire sotto di esso un div, dove ho messo un menu.
Sto pensando di mettere due o tre di questi link sulla stessa riga, in modo che ognuno di essi apra un menu al di sotto.
Tutto funziona. Clicco su MENU UNO e si apre, ma se poi clicco su MENU DUE anch'esso si apre, ma vorrei che prima si chiudesse MENU UNO e poi si aprisse menu due.
Non essendo esperto di Javascript chiedo se qualcuno di voi ha un consiglio. Il codice (ridotto ai minimi termini) html è:
<html><head>
<script type="text/javascript" src="animated-collapse.js">
/*Animated Collapsible DIV- © Dynamic Drive DHTML code library (www.dynamicdrive.com) - * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more*/
</script>
<style type=text/css>
#uno {width: 300px; height: 50px; background: yellow;}
#due {width: 300px; height: 50px; background: red;}
#tre {width: 300px; height: 50px; background: pink;}
</style>
</head>
<body>
Menu div uno -
Menu div due -
Menu div tre
<div id="uno">Menu div uno</div>
<div id="due">Menu div due</div>
<div id="tre">Menu div tre</div>
<script type="text/javascript">
//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse1=new animatedcollapse("uno", 800, false)</script>
<script type="text/javascript">
var collapse2=new animatedcollapse("due", 800, false)</script>
<script type="text/javascript">
var collapse3=new animatedcollapse("tre", 800, false)</script>
</body></html>
Il file non sono riuscito ad allegarlo, e allora lo incollo qui sotto. Data la lunghezza di questo file, se la cosa fosse troppo complessa lasciamo perdere, farò diversamente. Scusate se ho postato un testo così poco pratico da leggere.
Grazie a tutti.
file animated-collapse.js:
//Animated Collapsible DIV- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated June 27th, 07'. Added ability for a DIV to be initially expanded.
var uniquepageid=window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, "") //get current page path and name, used to uniquely identify this page for persistence feature
function animatedcollapse(divId, animatetime, persistexpand, initstate){
this.divId=divId
this.divObj=document.getElementById(divId)
this.divObj.style.overflow="hidden"
this.timelength=animatetime
this.initstate=(typeof initstate!="undefined" && initstate=="block")? "block" : "contract"
this.isExpanded=animatedcollapse.getCookie(uniquep ageid+"-"+divId) //"yes" or "no", based on cookie value
this.contentheight=parseInt(this.divObj.style.heig ht)
var thisobj=this
if (isNaN(this.contentheight)){ //if no CSS "height" attribute explicitly defined, get DIV's height on window.load
animatedcollapse.dotask(window, function(){thisobj._getheight(persistexpand)}, "load")
if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
this.divObj.style.visibility="hidden" //hide content (versus collapse) until we can get its height
}
else if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
this.divObj.style.height=0 //just collapse content if CSS "height" attribute available
if (persistexpand)
animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid +"-"+thisobj.divId, thisobj.isExpanded)}, "unload")
}
animatedcollapse.prototype._getheight=function(per sistexpand){
this.contentheight=this.divObj.offsetHeight
if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
this.divObj.style.height=0 //collapse content
this.divObj.style.visibility="visible"
}
else //else if persistence is enabled AND this content should be expanded, define its CSS height value so slideup() has something to work with
this.divObj.style.height=this.contentheight+"px"
}
animatedcollapse.prototype._slideengine=function(d irection){
var elapsed=new Date().getTime()-this.startTime //get time animation has run
var thisobj=this
if (elapsed<this.timelength){ //if time run is less than specified length
var distancepercent=(direction=="down")? animatedcollapse.curveincrement(elapsed/this.timelength) : 1-animatedcollapse.curveincrement(elapsed/this.timelength)
this.divObj.style.height=distancepercent * this.contentheight +"px"
this.runtimer=setTimeout(function(){thisobj._slide engine(direction)}, 10)
}
else{ //if animation finished
this.divObj.style.height=(direction=="down")? this.contentheight+"px" : 0
this.isExpanded=(direction=="down")? "yes" : "no" //remember whether content is expanded or not
this.runtimer=null
}
}
animatedcollapse.prototype.slidedown=function(){
if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
alert("Please wait until document has fully loaded then click again")
else if (parseInt(this.divObj.style.height)==0){ //if content is collapsed
this.startTime=new Date().getTime() //Set animation start time
this._slideengine("down")
}
}
}
animatedcollapse.prototype.slideup=function(){
if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
alert("Please wait until document has fully loaded then click again")
else if (parseInt(this.divObj.style.height)==this.contenth eight){ //if content is expanded
this.startTime=new Date().getTime()
this._slideengine("up")
}
}
}
animatedcollapse.prototype.slideit=function(){
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
alert("Please wait until document has fully loaded then click again")
else if (parseInt(this.divObj.style.height)==0)
this.slidedown()
else if (parseInt(this.divObj.style.height)==this.contenth eight)
this.slideup()
}
// -------------------------------------------------------------------
// A few utility functions below:
// -------------------------------------------------------------------
animatedcollapse.curveincrement=function(percent){
return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
}
animatedcollapse.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}
animatedcollapse.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}
animatedcollapse.setCookie=function(name, value, days){
if (typeof days!="undefined"){ //if set persistent cookie
var expireDate = new Date()
var expstring=expireDate.setDate(expireDate.getDate()+ days)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()
}
else //else if this is a session only cookie
document.cookie = name+"="+value
}
Rispondi quotando
