Script che interferiscono sullo stesso div

**Gas75** · 25-06-2018, 17:42

Salve, spero questo sia l'ultimo problema da risolvere sulla medesima pagina.

Riepilogando quanto affrontato in altre discussioni mirate:
- ho un modello di pagina web che mira a essere responsive
- nella visualizzazione pc c'è un div con float destro contenente dei link a paragrafi della pagina stessa
- nella visualizzazione pc tale div si comporta come la colonna laterale di Facebook, cioè scorre con la pagina finché ci sono contenuti, poi si blocca grazie a una coppia di funzioni JS
- nella visualizzazione smartphone il div di cui sopra parte con attributo display: none da css
- nella visualizzazione smartphone, e solo in quella, si visualizza un button cui è associato l'evento onClick per richiamare una funzione JS che visualizza e nasconde il div
- lasciando i soli script per visualizzazione pc o per visualizzazione smartphone, questi funzionano correttamente
- la gestione degli script avviene mediante tale controllo

codice:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    apriMenu(); // funzione che, richiamata da un onClick, varia il valore display del div
} else {
    valorizza(); // funzioni che determinano di quanto può scrollare il div in visualizzazione pc
    scrolla(); // e lo fanno scrollare per quanto consentito
}

Come posso fare affinché le funzioni valorizza() e scrolla() non vengano mai eseguite quando il sito è visualizzato in modalità smartphone? Le due funzioni agiscono sull'attributo display del div dandogli valore fixed (utile in visualizzazione pc) che quindi copre parte della pagina senza che venga aperto dal button dedicato.
A intuito, forse nell'else andrebbe aggiunto un if relativo al navigator.userAgent, ma non conosco la stringa analoga a quella per gli smartphone...

La pagina provvisoria è qui

codice:

http://dampyr.altervista.org/Autori-bozza.htm

Il file JS che gestisce tutto è qui

codice:

http://dampyr.altervista.org/gestioneDestroTag.js

**Gas75** · 25-06-2018, 22:03

Sto provando a prescindere dal controllo sul navigator.userAgent, sfruttando il fatto che la scelta sulle funzioni da attivare dipende dallo stato iniziale del div stesso: se none (quindi su smartphone) si esegue apriMenu(), altrimenti le altre funzioni.
Ho notato che non va, così ho aggiunto un controllo booleano, e questo è il blocco if di controllo iniziale:

codice:

var controllo = false;
var idTag = document.getElementById("destrotag");
var leggiDisplay = window.getComputedStyle(idTag).display;
alert(leggiDisplay);
function decidi() {
	if (leggiDisplay == "none") {
		apriMenu();
	} else {
		controllo = true;
	}
}
alert(controllo);

Ora, se non vado errato, qualora il primo alert restituisse un valore diverso da none, controllo dovrebbe diventare true, eppure non succede questo! Caricando la pagina, il primo alert dice block, il secondo dice false, quindi non entra nell'else!

Perché???

**badaze** · 25-06-2018, 22:55

Non vedo il richiamo alla funzione decidi();

**Gas75** · 26-06-2018, 09:30

È nel tag body.

codice:

 <body onload="javascript:decidi() ;">

**Gas75** · 27-06-2018, 11:58

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!

**Gas75** · 27-06-2018, 16:04

Anche questo è risolto!

C'era with keyword deprecata, inoltre window.open causava l'avvio inopportuno della prima funzione, mentre la seconda deve avere window.scroll per poter leggere la posizione in tempo reale del div e regolarne il valore dell'attributo display.

**Gas75** · 01-07-2018, 10:58

Riprendo questa mia recente discussione poiché descrive la situazione, oltre a esserne il naturale (spero!) sviluppo; non mi sembrava il caso di aprirne un'altra per discutere della medesima funzione JS.

Sono riuscito a unificare in una sola le due funzioni che gestivano un div contenente dei link interni alla pagina web.
Tale div "destrotag", in visualizzazione pc, è posizionato a destra del div principale, e scorre "tipo colonna laterale di Facebook", cioè fintanto che ci sono contenuti da mostrare scrollando.
Il medesimo div, in visualizzazione smartphone, viene aperto tramite un button (il cui div contenitore "side" è invisibile tramite un display: none) in visualizzazione pc. Il div, poi, si chiude al click su uno dei suoi link, tramite un'apposita funzione.

Quello che non riesco a sistemare è lo scorrimento "tipo colonna laterale di Facebook" del div in visualizzazione smartphone. Questo è il codice della funzione, perfettamente operativo soltanto nel primo if:

codice:

function fermaScroll() { 
	var idSide = document.getElementById("side"); // elemento di controllo (div del button)
	var statoSide = window.getComputedStyle(idSide).display; // puntamento al valore interessante dell'elemento di controllo
	if (statoSide == "none") { // se il button non è visibile == sono su pc
		var fixId = document.getElementById("destrotag");
		var fixTop = fixId.offsetHeight + fixId.offsetTop - window.innerHeight + 130;
		var fixLeft = fixId.offsetWidth + fixId.offsetLeft - window.innerWidth;
		var correzioneY = - fixId.offsetHeight + window.innerHeight - 130;
		var correzioneX = fixId.offsetLeft;
		window.onscroll = function scrolla() {
			if (window.pageYOffset > fixTop) {
				fixId.style.position = "fixed";
				fixId.style.top = correzioneY + "px";
				fixId.style.left = correzioneX + "px";
			} else {
				fixId.style.position = "static";
				fixId.style.top = "0px";
				fixId.style.left = "0px";
			}
		}
	} else if (statoSide != "none") { // se il button è visibile == sono su smartphone
		var idHeader = document.getElementById("header"); // elemento da cui prendere la posizione del div da inserire
		var idDestrotag = document.getElementById("destrotag"); // div che voglio gestire
		var conta = idDestrotag.getElementsByTagName("a").length; // puntamento ai link del div che voglio gestire
		var hComposta = document.getElementById("headertag").style.height + 23*conta; // calcolo l'height del div che voglio gestire
		var fixTop = hComposta + idHeader.offsetHeight - window.innerHeight; // calcolo di quanto il div può salire
		var correzioneY = - hComposta + window.innerHeight; // calcolo la correzione per fermare il div
		window.onscroll = function scrolla() {
			if (window.pageYOffset > fixTop) {
				idDestrotag.style.position = "fixed";
				idDestrotag.style.top = correzioneY + "px";
				idDestrotag.style.left = "0px";
			} else {
				idDestrotag.style.position = "static";
				idDestrotag.style.top = hComposta + "px";
				document.getElementById("headertag").style.height = "23px"; // valore imposto perché sennò vale oltre 10.000!
			}
		}
	}
}

Il div "destrotag" è composto da un div con classe "headercontent" cui ho dato apposta anche un div "headertag", seguito da una serie di link alti ciascuno 23px, che quantifico grazie alla variabile "conta".
La funzione che apre il div tramite il button, lo colloca correttamente, ma appena scrollo da smartphone, il div scompare (nonostante abbia display: block) anche se gli do uno z-index per portarlo avanti a tutto il resto.

**Gas75** · 01-07-2018, 12:08

Edit: nell'ultimo else, la seconda istruzione corretta è:

codice:

idDestrotag.style.top = document.getElementById("header").offsetHeight + "px";

Nonostante ciò, persiste il problema scrollando. Per la precisione il div (non visibile) risulta subito sotto a un altro div che invece "destrotag" dovrebbe coprire (condividendone il bordo superiore).

Discussione: Script che interferiscono sullo stesso div

Strumenti discussione

Ricerca discussione

Visualizza

Script che interferiscono sullo stesso div

Permessi di invio