[Tag "div"] Stranissimo comportamento barre scorrimento

[Shadow976]

Carissimi,
la mia pagina web dispone al suo interno di un tag div che con due pulsanti associati a due funzioni javascript (posizionati accanto a tale tag div) viene nascosto o reso visibile, senza che nessun'altro elemento della pagina muti la sua posizione: tale tag div, che in pratica è un piccolo riquadro, viene in pratica sovrapposto alla pagina stessa a seconda della pressione di uno dei due pulsanti che gli sono affiancati. Con tutti i browser funziona.

Ora, su una certa sezione della mia pagina web (che contiene tale tag), ho aggiunto una barra di scorrimento verticale in quanto tale sezione iniziava a contenere numerosi elementi ed ho provato, prima di cliccare il pulsante per visualizzare tale tag div, a scorrere un pò questo riquadro verso il basso. Ribadisco, non parlo della barra di scorrimento del browser ma di una sezione interna alla mia pagina web che contiene il tag div in questione.

Con IE, Firefox e K-Meleon non noto anomalie; con Chrome, Safari e Opera vedo una cosa stranissima. Se scorro il mio riquadro in basso e seleziono il pulsante per rendere lo stesso tag visibile, questo non si apre accanto al pulsante di apertura ma si apre nella posizione che tale tag aveva prima che iniziassi a scorrere la pagina verso il basso quasi come se, scusate se mi esprimo in modo pedestre, la barra di scorrimento avesse "trascinato" con sé tutti gli elementi del riquadro in modo corretto, tranne quell'unico tag che ha continuato ad occupare la posizione che aveva prima che manovrassi la barra di scorrimento. E se, dopo averlo reso visibile, continuo a manovrare la barra di scorrimento, il tag non si muove con essa ma resta fisso.

Come mai? Da cosa può dipendere? Scusate se mi sono dilungato ma come sapete tengo sempre alla massima chiarezza nei miei quesiti.

[Mich_]

La spiegazione e` molto dettagliata, ma non basta.
Quando parli di una pagina, devi dire
- in quale linguaggio e` scritta (in pratica la DTD)
- se la sintassi e` stata validata (sia HTML che CSS)
Quando parli di browser IE, devi distinguere le versioni (si comportano in modo diverso)
Quando parli di un oggetto, devi specificare (per tutti gli oggetti coinvolti, compreso i contenitori):
- tipo di oggetto
- tipo di posizionamento
Quando parli di visualizzare/nascondere devi specificare
- con quale sistema e` realizzato (display oppure visibility)
... e forse mi sono dimenticato altri dettagli.

Praticamente devi postare il link alla pagina (eventualmente in un sito provvisorio), altrimenti non ne possiamo venire a capo.

[Shadow976]

Grazie per il tuo interessamento, sei stato molto gentile. Mi sono svegliato molto presto e non ne sono ancora venuto a capo. Mi è molto difficile postare un link alla pagina perché è in locale e non riesco a metterti qui il codice perché è spalmato su più file (sia il css che il javascript sono ottenuti tramite chiamate e importazioni a file esterni, e l'intera pagina ha diverse centinaia di righe).

Vedrò comunque di darti tutte le informazini di cui hai bisogno; ho anche realizzato uno schizzo dove si vede la situazione forse ancor meglio che nella pagina vera e propria in quanto ti mostra la situazione sovrapposta scorrendo la pagina e lasciandola così com'è.

1) Il problema si verifica con una pagina jsp che fa parte di una dynamic web application java;
2) La pagina non è stata validata;
3) Tutti i browser citati si riferiscono all'ultimissima versione. In particolare, quando ti dicevo che con Firefox e IE il problema non si verificava, mi riferivo sia all'ultima versione che alla penultima e nel caso di IE anche alla 5.5, quindi con tutti questi browser il problema non c'è. Solo con quei tre (ultima versione) lo riscontro.
4) Non ho modificato la proprietà visibility ma hidden;
5) Non ho specificato un posizionamento relativo né assoluto del tag padre e nemmeno di quello figlio; ma posso dirti che impostandolo in entrambi i casi il problema non si risolve;

Oltre all'immagine che ti allego, il seguente frammento di codice ti servirà sicuramente (l'ho preso dal file css associato):

DIV PADRE

#area-div-main {
        overflow-x: hidden;
        overflow-y: scroll;
	align: justify;
	cellspacing: 0px;
	font-weight: none;
	font-size: 11px;
	margin-left: 0px;
	margin-top: 0px;
}

DIV FIGLIO

#area-div-sub{
      display: none;	
      height: 20px;
      width: 50px;
}

[Mich_]

Non hai risposto a tutto quanto ti chiedevo (in particolare la DTD), ma noto vari errori di sintassi:

1. la proprieta` hidden non esiste. hidden esiste come valore della proprieta` visibility

2. overflow-x e overflow-y non esistono nei CSS2, anche se sono riconosciuti da qualche brwoser; pertanto cui non ha senso usarli se non preceduti da overflow

3. la proprieta` align non esiste (esiste il text-align)

4. cellspacing non esiste come proprieta` CSS (esisteva come attributo HTML, ma e` deprecato)

5. font-weight non supporta il valore none


Per cui direi di riparlarne quando hai validato i codici.

E` importante anche conoscere quali proprieta` vengono modificate dal JS.
E un CSS senza l'HTML cui si riferisce e` sempre difficile da capire.

[Shadow976]

Ho isolato il problema alla grande e fatto tutto quello che mi hai detto, riproducendo l'errore con una pagina web di una manciata di righe. L'arcanissimo mistero sta per essere svelato, tra poco potrai riprodurre lo strano fenomeno che mi è accaduto con il codice html che ti posterò. Dammi cinque minuti e lo metto in questa discussione.

[Shadow976]

ECCO, FINALMENTE!

Salvate il codice sottostante in una pagina prova.html ed apritela con Opera, Chrome o Safari.

1. Cliccate sul pulsante mostra e vi si aprirà il riquadro grigio, notate bene la sua posizione e cliccando sul pulsante nascondi richiudetelo.
2. Ora con la barra di scorrimento scorrete leggermente giù la pagina. Premete nuovamente il pulsante mostra e (solo con i tre citati browser)... il margine superiore sarà situato alla stessa identica altezza che aveva prima, come se lo scrolling avesse trascinato tutto tranne quel riquadro!

PS Ovviamente mettere position: relative non è certo una soluzione opportuna in quanto così quel riquadro non si aprirebbe sovrapponendosi al resto della pagina ma facendo spostare tutti i suoi elementi verso il basso.

Ora sapete proprio tutto... Potete aiutarmi? Ci sto dietro da giorni e giorni!
Grazie in anticipo.

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html;charset=utf-8">

    <title>Test</title>

    <style type="text/css">

        #nascosto {

            width: 200px;

            height: 200px;

            background-color: #666666;

            position: absolute;

        }

        #padre {

            overflow-x: hidden;

            overflow-y: scroll;

            height: 300px;



        }

    </style>

    <script type="text/javascript">

        function mostra(){

            document.getElementById("nascosto").style.display = "block";

        }

        function nascondi(){

            document.getElementById("nascosto").style.display = "none";

        }

    </script>

</head>

<body>

    <div id="padre">

        <div> test   test   test </div>

        <div> test   test   test </div>

        <div> test   test   test </div>

        <div> test   test   test </div>

        <div> test   test   test </div>

        <div> test   test   test </div>

        <div> test   test   test </div>

        <div> test   test   test </div>

        <div id="container">

<div>

                <button onclick="mostra()">Mostra</button>

                <button onclick="nascondi()">Nascondi</button>

            </div>

            <div id="nascosto" style="display:none;">roba nascosta</div>

            

        </div>

        <div>1 test   test   test </div>

        <div>2 test   test   test </div>

        <div>3 test   test   test </div>

        <div>4 test   test   test </div>

        <div>5 test   test   test </div>

        <div>6 test   test   test </div>

        <div>7 test   test   test </div>

        <div>8 test   test   test </div>

        <div>9 test   test   test </div>

        <div>10 test   test   test </div>

        <div>11 test   test   test </div>

        <div>12 test   test   test </div>

        <div>13 test   test   test </div>

        <div>14 test   test   test </div>



    </div>

</body>

</html>

[bionicoz]

Ma scusa, se devi nascondere qualcosa, nn puoi semplicemente rendere invisibile la parte che ti interessa invece di metterci un qualcosa sopra? In ogni caso, qui sotto c'è il codice funzionante commentato nei punti in cui l'ho modificato.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <title>Test</title>
    <style type="text/css">
        #nascosto {  /*dal nome sembrerebbe la roba da cancellare*/
            width: 200px;
            height: 200px;
            background-color: #666666;
            /*qui serve relative, o nulla.*/
            position: relative;  
            /*qui dai un margine negativo pari all'altezza del "nasconditore"*/
            margin-bottom: -200px; 
        }
        #padre {  
            overflow-x: hidden;
            overflow-y: scroll;
            height: 300px;
        }
    </style>
    <script type="text/javascript">
        /*preferibile usare l'attributo visibility invece di display*/
        function mostra(){
            document.getElementById("nascosto").style.visibility = "visible";
        }
        function nascondi(){
            document.getElementById("nascosto").style.visibility= "hidden";
        }
    </script>
</head>
<body>
    <div id="padre">
/*In una pagina vera ti sconsiglio di contornare tutto da <div>
E non servono mille livelli di annidamento, metti tutto dentro #padre e stop
*/

        <div> test   test   test </div>
        <div> test   test   test </div>
        <div> test   test   test </div>
        <div> test   test   test </div>
        <div> test   test   test </div>
        <div> test   test   test </div>
        <div> test   test   test </div>
        <div> test   test   test </div>
        <button onclick="mostra()">Mostra</button>
        <button onclick="nascondi()">Nascondi</button>
                <div id="nascosto" style="visibility:hidden;">roba nascosta</div>
        <div>1 test   test   test </div>
        <div>2 test   test   test </div>
        <div>3 test   test   test </div>
        <div>4 test   test   test </div>
        <div>5 test   test   test </div>
        <div>6 test   test   test </div>
        <div>7 test   test   test </div>
        <div>8 test   test   test </div>
        <div>9 test   test   test </div>
        <div>10 test   test   test </div>
        <div>11 test   test   test </div>
        <div>12 test   test   test </div>
        <div>13 test   test   test </div>
        <div>14 test   test   test </div>
    </div>
</body>
</html> 

[Shadow976]

GENIALE.

Problema risoltissimo, discussione chiusa.