Allora... Ho fatto alcuni test e ho ritenuto il caso di riorganizzare le cose...
Siccome le funzioni relative alla visualizzazione pc e quelle relative alla visualizzazione smartphone dipendono dallo stato iniziale dei valori dell'attributo css display, ho deciso di prescindere dal controllo del tipo di dispositivo e di interrogare con JS tali stati.
Semplificando il discorso (sperando di non omettere nulla di importante), ho una funzione unica per fermare il div #destroTag quando non c'è più testo da mostrare scrollando (tipo le colonne laterali di Facebook):
codice:
function fermaScroll() {
var fixId, fixTop, fixLeft, correzioneY, correzioneX;
var idSide = document.getElementById("side"); // #side è un div visibile solo in modalità smartphone
var leggiStatoSide = window.getComputedStyle(idSide).display;
if (leggiStatoSide == "none") { // se #side è nascosto, quindi se sono in visualizzazione pc
fixId = document.getElementById("destrotag");
fixTop = fixId.offsetHeight + fixId.offsetTop - window.innerHeight + 130;
fixLeft = fixId.offsetWidth + fixId.offsetLeft - window.innerWidth;
correzioneY = fixId.offsetTop - fixTop;
correzioneX = fixId.offsetLeft;
with (fixId.style) {
if (window.pageYOffset > fixTop ) {
position = "fixed";
top = correzioneY + "px";
left = correzioneX + "px";
} else {
position = "static";
top = "0px";
left: "0px";
}
}
}
}
Questa funzione la richiamo così:
codice:
<body onload="javascript:fermaScroll();">
Per la visualizzazione smartphone, ho bisogno di due funzioni:
- una che, associata a un button nel #side, apra il #destroTag che parte nascosto in tale visualizzazione
- una che, associata ai link contenuto nel #destroTag, chiuda quest'ultimo.
Eccole:
codice:
function apriMenu() {
var idTag = document.getElementById("destrotag");
var leggiDisplay = window.getComputedStyle(idTag).display;
if (leggiDisplay == "none") {
idTag.style.display = "block";
idTag.style.position = "absolute";
idTag.style.float = "none";
idTag.style.width = "100%";
idTag.style.padding = "0px";
idTag.style.top = document.getElementById("header").offsetHeight + "px";
window.location.href = "#top";
} else if (leggiDisplay == "block") {
idTag.style.display = "none";
}
}
function chiudi() {
var idSide = document.getElementById("side");
var leggiStatoSide = window.getComputedStyle(idSide).display;
if (leggiStatoSide != "none") {
document.getElementById("destrotag").style.display = "none";
}
}
apriMenu() è richiamata così:
codice:
<button id="buttonTag" onClick="javascript:apriMenu();">TAG</button>
chiudi() invece dal generico link in #destroTag:
codice:
<a href="#bose" onClick="javascript:chiudi();">tag</a>
Il file .js è richiamato indistintamente nell'HEAD o prima di chiudere il BODY con
codice:
<script src="gestioneDestroTag.js"></script>
fa funzionare soltanto apriMenu() e chiudi()!
fermaScroll() in origine era composta da due funzioni, una invocata da window.onload, l'altra da window.onscroll, ma così facendo si attivavano sempre e non soltanto in visualizzazione pc!