Mostrare un div in seguito a onclick su un altro div

**Gas75** · 21-06-2018, 12:48

Salve. Sto cercando di condizionare la visualizzazione o meno di un div che parte in CSS con display: none, in seguito all'evento onClick impostato in un altro div chiamato "side". Qualcosa tuttavia non funziona...
Questo è il codice html...
Nell'HEAD:

codice:

<script src="apriMenu.js"></script>

Nel BODY:

codice:

<div id="side" onclick="javascript:apriMenu();"><a href="#">&nbsp;+&nbsp;</a></div>

Mentre apriMenu.js è quanto segue:

codice:

var idTag;idTag = document.getElementById("destrotag").style;


function apriMenu() {
	if (idTag.display == "none") {
		idTag.display = "block";
		idTag.top = document.getElementByTagName("header").style.top + "px";
	} else if (idTag.display == "block") {
		idTag.display = "none";
	}
}

Il div deve comparire subito sotto l'header della pagina, che ha proprio tag semantico <header></header>, quindi credo sia corretto richiamarlo con getElementByTagName() anziché getElementById(), tuttavia non funziona in entrambi i casi.

Cambiando il valore a display direttamente in HTML dentro il tag del div "side" riesco a visualizzare il nuovo div ma in una posizione che non va bene.

**KillerWorm** · 21-06-2018, 16:12

Così ad occhio noto 2 errori principali:

1: stai lanciando quello script nell'head per cui gli elementi del DOM non sono ancora stati creati. Questo significa che la tua variabile idTag non può essere definita correttamente perché il metodo getElementById("destrotag") non può trovare quell'elemento (che ancora non è stato creato sulla pagina) e restituisce un valore null. Se apri la tua console web (puoi farlo pigiando F12) noterai un probabile messaggio di errore del tipo "document.getElementById(...) è null".

Ovviamente getElementById (come tutti gli altri metodi che servono a selezionare gli elementi della pagina) deve essere eseguito solo dopo che l'elemento specificato è stato creato sulla pagina e quindi risulta disponibile per la manipolazione via script.

Puoi risolvere includendo lo script alla fine del tag <body> prima del tag di chiusura, oppure con altri sistemi come, ad esempio, l'uso dell'evento onload. Sono comunque nozioni di base, meglio studiarle da qualche guida di base e farle proprie il prima possibile.

Un ulteriore consiglio che posso darti è quello di esercitarti ad usare la console web così che tu possa verificare da te eventuali errori, e magari anche riuscire a correggerli.

2: il metodo getElementByTagName() non esiste. Fai attenzione alla sintassi. Presumo tu volessi scrivere getElementsByTagName() (occhio alla "s" di Elements). Proprio quella "s" sta ad indicare che questo metodo restituisce una collezione di elementi (in particolare un oggetto NodeList), a differenza di getElementById() che restituisce un singolo specifico elemento. Perciò, anche usando quel metodo scritto come si deve, non puoi riferirti alla proprietà style così come hai fatto, perché questa non può essere trovata in un oggetto NodeList.

Tieni conto che i singoli elementi di un oggetto NodeList possono essere "selezionati" proprio come quelli di un Array, cioè specificando un indice tra parentesi quadre a seguire l'oggetto.

Per risolvere potresti quindi usare una cosa del genere per selezionare il primo elemento trovato:

codice:

document.getElementByTagName("header")[0].style.top

Ad ogni modo, in questo caso, sarebbe forse più pratico e funzionale attribuire un id a quell'elemento e quindi andare sempre di getElementById, così come hai scritto di aver provato a fare, ma chiaramente correggendo gli altri errori.

**Gas75** · 21-06-2018, 18:12

Grazie della risposta.
Ho ragionato sul fatto che lo script è richiamato da un evento onClick, per cui mi pareva più corretto richiamare gli script nell'head in modo che fossero "pronti" prima.
Spostando

codice:

<scriptsrc="apriMenu.js"></script>

prima di </body> e correggendo il secondo errore (con la notazione tipo array), la console del browser non rileva errori ma neppure esegue lo script.

C'è comunque un conflitto con un altro script (funzionante) sul medesimo div "destrotag", che serve quando la pagina è visualizzata su schermi più grandi.

**Gas75** · 21-06-2018, 18:41

Grazie della risposta.
Ho ragionato sul fatto che lo script è richiamato da un evento onClick, per cui mi pareva più corretto richiamare gli script nell'head in modo che fossero "pronti" prima.
Spostando

codice:

<scriptsrc="apriMenu.js"></script>

prima di </body> e correggendo il secondo errore (con la notazione tipo array), la console del browser non rileva errori ma neppure esegue lo script.

C'è comunque un conflitto con un altro script (funzionante) sul medesimo div "destrotag", che serve quando la pagina è visualizzata su schermi più grandi.

**KillerWorm** · 21-06-2018, 20:25

Ho ragionato sul fatto che lo script è richiamato da un evento onClick, per cui mi pareva più corretto richiamare gli script nell'head in modo che fossero "pronti" prima

Anche no. Stai richiamando la funzione attraverso l'evento onclick, per cui quella funzione e lo script contenuto in essa vengono eseguiti in modo asincrono (quando tutta la pagina si presume sia già stata caricata), questo può andare bene, ma non è così per lo script fuori dalla funzione che viene comunque eseguito nell'ordine di lettura della pagina stessa, cosi come il resto del contenuto del DOM. Se per la variabile idTag, che è letta e definita nel livello principale, utilizzi getElementById, devi assicurarti che l'elemento HTML specificato sia disponibile a quel punto della lettura della pagina.

Un modo per risolvere è quello che ti ho indicato, mettere lo script alla fine del body, ma ovviamente esistono altri metodi. Nel tuo specifico caso potresti addirittura inserire quella variabile dentro la funzione stessa; a quel punto sarà valorizzata ogni volta che la funzione viene richiamata per cui non dovrai preoccuparti di spostare lo script che può perciò restare nell'head.

prima di </body> e correggendo il secondo errore (con la notazione tipo array), la console del browser non rileva errori ma neppure esegue lo script.

Evidentemente c'è qualcos'altro che non va. Però capisci che a questo punto diventa difficile aiutarti se non si vede la pagina in azione.
Se puoi, posta il link.

C'è comunque un conflitto con un altro script (funzionante) sul medesimo div "destrotag", che serve quando la pagina è visualizzata su schermi più grandi.

Non che non mi fidi, però... sarebbe utile vedere la pagina per verificare se effettivamente c'è questo conflitto ed eventualmente capire come risolverlo.

**Gas75** · 21-06-2018, 22:28

Il problema principale è conciliare funzionalità delle pagine con esigenze responsive.

La pagina provvisoria (allo stato attuale, non aggiorno ogni modifica sull'hosting...) è

codice:

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

Il CSS

codice:

http://dampyr.altervista.org/dampyr-bozza.css

E i due JS esterni (perché condivisi con alcune pagine)

codice:

http://dampyr.altervista.org/fissaTag.js (per le risoluzioni pc/tablet)
http://dampyr.altervista.org/apriMenu.js (per gli smartphone)

In pratica i due JS agiscono sul medesimo div in modi diversi e per ragioni altrettanto diverse: nel primo caso blocco lo scorrimento del div tipo "colonna laterale di Facebook", avendo generalmente un height inferiore al div principale; nel secondo rendo visibile quel div in primo piano, come una sorta di pop-up, al verificarsi di un onclick su un div predisposto (che appare solo in modalità smartphone).

Ora, inglobando la variabile nella funzione, la console non lancia errori/eccezioni, e il div risulta apparire, ma lo vedo solo passando in modalità pc poiché riceve i parametri css dall'altro JS. Da cui il conflitto che temo.
Potrei "caserecciamente"

realizzare due div gemelli (con id diversi) e renderli alternativamente display block o none a seconda della risoluzione, ma trattandosi di div soggetti ad aggiornamenti, diventa scomodo (e non ho ancora basi di PHP).

**KillerWorm** · 22-06-2018, 00:54

Ok, quantomeno i problemi principali sono risolti e già questo è un qualcosa.

Per il resto, intuisco il conflitto che mi descrivi, anche se non riesco ad inquadrarlo esattamente, la cosa mi sembra un po' aggrovigliata. Noto che anche provando a simulare il ridimensionamento della finestra nel browser, il layout si rompe in modo inconsistente, la colonna di destra va un po' per i fatti suoi. Chiaramente la mia visione delle cose non può che rimanere esterna in questo caso

Ora, mi devi perdonare ma mi sfuggiva l'associazione tra te e quel sito, che comunque avevo già avuto modo di "testare" in occasione di tue precedenti discussioni. Mi fa piacere che ti sia cimentato in varie modifiche/migliorie/aggiunte, purtroppo però in questo caso io non riesco ad esserti di maggiore aiuto.

Come già ti scrissi in precedenti discussioni, personalmente avrei ripreso da zero l'intera impostazione del layout partendo da un progettino ben studiato a priori. Capisco però che probabilmente stai testando varie soluzioni runtime, e man mano stai apportando le varie modifiche, magari anche per riuscire a farti meglio un'idea di cosa adoperare e cosa no.

In questo caso trovo difficile consigliarti qualcosa di mirato non essendo io "dentro" il progetto. Il mio aiuto può limitarsi a darti qualche consiglio e risolvere qualche "criticità" nel codice. Mentre per ciò che riguarda "l'impalcatura", che stai cercando di aggiustare in questo modo, non posso fare altro che dirti in bocca al luppolo e buon proseguimento.

**Gas75** · 22-06-2018, 10:02

Originariamente inviata da KillerWorm

Noto che anche provando a simulare il ridimensionamento della finestra nel browser, il layout si rompe in modo inconsistente, la colonna di destra va un po' per i fatti suoi. Chiaramente la mia visione delle cose non può che rimanere esterna in questo caso

Sono a conoscenza del problema, è oggettivamente così. Purtroppo da quando ho inserito il JS per le risoluzioni pc/tablet, quel div risente di parametri di posizione e lo script non reagisce subito, per le condizioni incluse nei due if... Caricando la pagina senza deformare la finestra del browser, funziona.

Originariamente inviata da KillerWorm

Ora, mi devi perdonare ma mi sfuggiva l'associazione tra te e quel sito, che comunque avevo già avuto modo di "testare" in occasione di tue precedenti discussioni. Mi fa piacere che ti sia cimentato in varie modifiche/migliorie/aggiunte, purtroppo però in questo caso io non riesco ad esserti di maggiore aiuto.

Come già ti scrissi in precedenti discussioni, personalmente avrei ripreso da zero l'intera impostazione del layout partendo da un progettino ben studiato a priori. Capisco però che probabilmente stai testando varie soluzioni runtime, e man mano stai apportando le varie modifiche, magari anche per riuscire a farti meglio un'idea di cosa adoperare e cosa no.

Tra una modifica e l'altra il layout è stato rifatto sostanzialmente da zero: spariti tutti i position absolute, introdotto un footer vero e proprio... Ci sono però dei contenuti, tipo i tag per navigare dentro la pagina stessa, che da qualche parte devono stare, e per smartphone l'unica via è mostrare il div su richiesta dato lo spazio "ristretto" in modalità verticale.

Originariamente inviata da KillerWorm

In questo caso trovo difficile consigliarti qualcosa di mirato non essendo io "dentro" il progetto. Il mio aiuto può limitarsi a darti qualche consiglio e risolvere qualche "criticità" nel codice. Mentre per ciò che riguarda "l'impalcatura", che stai cercando di aggiustare in questo modo, non posso fare altro che dirti in bocca al luppolo e buon proseguimento.

Certo, mi pare logico.

Sto cercando di discriminare con un if lo script da eseguire a seconda del dispositivo, in modo che non siano più in conflitto... Magari cambio anche quel div con un button, che rende anche meglio l'idea di "qualcosa da premere".

**Gas75** · 22-06-2018, 11:39

Ho recuperato un codice per distinguere il dispositivo in uso, e l'ho adattato alle mie esigenze.

codice:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {	apriMenu(); //funzione per dispositivi mobili
} else {
	valorizza(); //funzioni per pc
	scrolla();
}

File .js (ora unico) richiamato prima di </body>, ma non va, nel senso che sono sempre eseguite le funzioni per pc, e credo anche di sapere il perché! Differiscono gli eventi che chiamano quelle funzioni: per pc sono onload e onscroll di window, per smartphone è onclick su un div.

**Gas75** · 22-06-2018, 13:14

Il problema risiede nel codice di apriMenu() o nella sua invocazione.
Ho introdotto un button che richiama la funzione direttamente nell'head dalla pagina html, tolto la variabile ed esplicitato tutto il percorso ogni volta, e scollegato da essa le altre funzioni operanti su quel div.

codice:

	function apriMenu() {
		if (document.getElementById("destrotag").style.display == "none") {
			document.getElementById("destrotag").style.display = "block";
			document.getElementById("destrotag").style.top = document.getElementById("header").style.height + "px";
		} else if (document.getElementById("destrotag").style.display == "block") {
			document.getElementById("destrotag").style.display = "none";
		}
	}

Richiamo della funzione:

codice:

<div id="side"><button onClick="javascript:apriMenu();">&nbsp;+&nbsp;</button></div>

Niente, l'attributo display del div "destrotag" resta none, e nessun errore in console per capire l'inghippo.

Discussione: Mostrare un div in seguito a onclick su un altro div

Strumenti discussione

Ricerca discussione

Visualizza

Mostrare un div in seguito a onclick su un altro div

Permessi di invio