Ecco lo script mio:
<html>
<head>
<style>
#mainMenu{
position:absolute;
width:200px;
height:300px;
top:100px;
left:100px;
background-color:green;
border:10px solid brown;
}
.subMenu{
position:absolute;
width:100px;
height:100px;
top:50px;
left:20px;
background-color:cyan;
border:5px solid yellow;
}
</style>
<script>
function Posizione(obj){
var curleft=0;
var curtop=0;
do {
curleft+=obj.offsetLeft;
curtop+=obj.offsetTop;
} while(obj=obj.offsetParent);
return {X:curleft, Y:curtop};
}
function main(){
mainMenu=document.getElementById("mainMenu");
subMenu=document.getElementById("subMenu");
mainMenu.onclick=Crea;
}
function Crea(){
nuovo=document.createElement("div");
nuovo.style.left=Posizione(mainMenu).X+mainMenu.offsetWidth;
nuovo.style.top=Posizione(mainMenu).Y+mainMenu.offsetHeight/3;
nuovo.className="subMenu";
document.body.appendChild(nuovo);
}
window.onload=main;
</script>
</head>
<body>
<div id="mainMenu">
</div>
</body>
</html>
Notevole la funzione Posizione(obj), che ricava la posizione di un oggetto anche qualora questo sia contenuto in un altro oggetto, sommandone la posizione relativa all'oggetto "genitore" con la posizione dell'oggetto "genitore" stesso e così via via anche qualora l'oggetto sia contenuto in una scatola cinese di altri oggetti.In questo mio script l'oggetto nuovo viene creato (al click) affiancato al precedente, a un'altezza pari a un terzo di quella dell'oggetto precedente stesso.
Che faticaccia! Però soddisfacente!
Nessun commento:
Posta un commento