Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    Div che deve chiudersi al click su uno dei suoi link

    Salve, nel realizzare la versione per smartphone di una pagina web, ho necessità di visualizzare un div soltanto in seguito al click su un button dedicato (nella versione pc, tale div occupa una colonna laterale col float: right):
    codice:
    <button onClick="javascript:apriMenu();">TAG</button>
    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";
    	}
    }
    Questo script funziona, tuttavia ho necessità che tale div si chiuda anche al click su qualunque link presente in esso, poiché sono riferimenti a schede della pagina stessa che tale div potrebbe coprire. A tale scopo ho scritto questa funzione:
    codice:
    function chiudi() {
    	if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    		var idTag = document.getElementById("destrotag");
    		var setDisplay = window.getComputedStyle(idTag).display;
    		setDisplay = "none";
    	}
    }
    richiamata dal generico link nel div:
    codice:
    <a href="#bose" onClick="javascript:chiudi();">Mauro BOSELLI</a>
    Tuttavia non funziona, anche togliendo l'if di verifica (che serve per non avviare chiudi() in visualizzazione da pc: display non va mai su "none" e quindi il div non viene nascosto se non tramite il button.

  2. #2
    Non funziona perché la variabile setDisplay, nella funzione chiudi(), contiene una stringa e non un riferimento all'oggetto con id "destrotag".

    Prova con:

    codice:
    document.getElementById("destrotag").style.display='none';

  3. #3
    Ok funziona. Grazie!!!

    Però adesso non mi è chiaro perché talvolta occorra utilizzare window.getComputedStyle() in quanto document.getElementById() legge(rebbe) solo valori di stile inseriti nel tag stesso (<div style="...">) e non richiamati nell'head o in un file css esterno.
    Nella funzione apriMenu() non c'è stato verso di accedere al valore senza window.getComputedStyle(), coinvolgendo una variabile locale...

  4. #4
    In apriMenu() c'è un'operazione di lettura, con tutte le limitazioni che hai elencato.
    Nella funzione chiudi() invece viene eseguita un'operazione di scrittura, per la quale un riferimento all'elemento del DOM è sufficiente.

  5. #5

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.