Pagina 2 di 2 primaprima 1 2
Visualizzazione dei risultati da 11 a 16 su 16
  1. #11
    A quanto pare il problema risiede nelle dichiarazioni CSS!

    Ho creato questa pagina web, con il solito script, e funziona...
    codice:
    <!DOCTYPE html>
    
    <HTML lang="it">
    <HEAD>
    <TITLE>Prova visualizzazione div via button</TITLE>
    <meta charset="UTF-8" />
    <script>
    	function apriMenu() {
    		var idTag;
    		idTag = document.getElementById("appari").style;
    		if (idTag.display == "none") {
    			idTag.display = "block";
    			idTag.top = document.getElementById("header").style.height + "px";
    		} else if (idTag.display == "block") {
    			idTag.display = "none";
    		}
    	}
    </script>
    <!-- <style type="text/css">
    	header {
    		width: 100%;
    		background-color: #22ffff;
    		height: 40px;
    	}
    	#appari {
    		width: 49%;
    		background-color: #ff22ff;
    		height: auto;
    		display: none;
    	}
    </style> -->
    </HEAD>
    
    
    <body>
    <header id="header" style="width: 100%;
    		background-color: #22ffff;
    		height: 40px;">
    	Questo è l'header<br />
    	<div id="side">
    		<button onClick="javascript:apriMenu();">Clicca</button>
    	</div>
    </header>
    <div id="appari" style="width: 49%;
    		background-color: #ff22ff;
    		height: auto;
    		display: none;">
    	Questo è il div appari
    </div>
    </body>
    </html>
    Tuttavia, se decommento la dichiarazione del CSS nell'head e la tolgo dai div, non funziona più!?
    Che storia è questa??

  2. #12
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Un consiglio:
    devi chiaramente fare un debug. Uno strumento utile per questa fase è la funzione console.log().
    Potresti mettere dei console.log() strategici in qualche punto del tuo script, così da riuscire a capire dove potrebbe essere il/i problema/i.

    Non so, intanto verificherei se quella funzione viene richiamata regolarmente.
    Dentro la funzione puoi mettere una cosa del genere:
    codice:
    function apriMenu() {
       console.log('sono dentro apriMenu');
       // ... resto della funzione
    }
    A questo punto puoi cliccare sul tuo button e verificare se la funzione viene richiamata, magari anche variando la dimensione della finestra per le varie risoluzioni, se questo influisce. Ovviamente nella console ti dovrà saltare fuori quel messaggio se la cosa funziona.

    Se non ci sono problemi, puoi proseguire con dei log più specifici.
    Ad esempio verificare le condizioni che stanno dentro la funzione:
    codice:
    function apriMenu() {
       console.log('sono dentro apriMenu');
       console.log('destrotag.display == none: ', (document.getElementById("destrotag").style.display == "none"));
       console.log('destrotag.display == block: ', (document.getElementById("destrotag").style.display == "block"));
       console.log('destrotag.display = ', document.getElementById("destrotag").style.display);
       console.log('--------');
       // ... resto della funzione
    }
    A questo punto io penso che noterai una possibile "anomalia". Sta a te capire quale.

    EDIT:
    Mentre ti rispondevo avevi già intuito, prova comunque ad usare il console.log come ti ho indicato, ti aiuterà a capire meglio.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #13
    Se ho usato correttamente console.log(), non viene svolta l'istruzione
    codice:
    idTag.display = "block";
    In console non appare nulla inserendo quell'istruzione in console.log().

    Tra l'altro si capiva che display restava su "none" dalla semplice osservazione degli strumenti di ispezione di Chrome...
    Non mi spiego perché dando lo stile direttamente nei div, la funzione lavora mentre definendo un foglio di stile no.

    ---

    Risolto (non da me): occorre introdurre una nuova variabile che non agisca sull'elemento del document per id ma sullo stile della finestra,
    codice:
    window.getComputedStyle(idTag).display
    e confrontare quella negli if.
    Non ci sarei mai arrivato poiché è un comando per me nuovo: sapevo che gli attributi di stile si manipolavano via JS tramite getElementById sul document...
    Ultima modifica di Gas75; 22-06-2018 a 20:03

  4. #14
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Bene, la risposta è nella documentazione della proprietà style:

    https://developer.mozilla.org/en-US/...LElement/style

    Cito:
    The HTMLElement.style property is used to get as well as set the inline style of an element
    Che significa "inline style"? è ovviamente lo stile applicato in linea sul tag attraverso l'attributo style. Questo significa che il css applicato come embed (cioè incluso nell'head) o comunque quello di default applicato dal browser, non fa parte della proprietà style dell'elemento; a differenza del metodo getComputedStyle che invece restituisce tutto il css applicato in quel momento sull'elemento a prescindere da come e dove è stato applicato.

    In alternativa puoi definire le proprietà in questione (in questo caso display) nell'attributo style direttamente sul tag, appunto, come d'altronde hai già constatato per l'elemento appari con l'ultima tua prova. In questo modo quella proprietà (display) sarà "recuperabile" attraverso JavaScript con la proprietà style dell'elemento. In quella prova hai definito display:none sul tag, ma ovviamente può essere definito display:block.

    Ancora, un'ulteriore alternativa e quella di "forzare" la definizione attraverso JavaScript. In sostanza se all'inizio dello script inserisci questo:
    document.getElementById("destrotag").style.display = "block";
    ovviamente nelle successive condizioni quella stessa proprietà risulterà valorizzata a prescindere da come l'hai definita sul css o nel tag.
    Ultima modifica di KillerWorm; 22-06-2018 a 21:08
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #15
    Grazie per la traduzione... E per il supporto in questa odissea!
    I problemi non sono finiti, perché ora lo script funzionante deve coesistere con lo script che agisce sullo stesso div in visualizzazione pc, oltre al fatto di dover chiudere il "destrotag" al click su uno dei link, ma se e solo se è im visualizzazione smartphone!
    A tale proposito cerco di adattare la funzione apriMenu() o ne creo una ex novo?

  6. #16
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    A tale proposito cerco di adattare la funzione apriMenu() o ne creo una ex novo?
    Non so, mi sono perso su quel punto. Ad ogni modo credo che l'oggetto in discussione sia risolto. Se ci sono problemi oltre questo che è stato risolto, ti consiglio di aprire delle nuove specifiche discussioni definendo meglio la specifica necessità.

    Ancora, in bocca al luppolo.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.