Problema caricamento contenuto tab

[Chef89]

ho un problema con il caricamento dei contenuti di un tabulatore.

Nella mia homepage ho 6 notizie che vengono richiamate (circa 100 parole ognuna) che poi vengono nascoste dal javascript per poi al click essere mostrate. Il problema che ho è che al caricamento della pagina il javascript non parte subito e quindi mi inserisce uno sotto l'altro tutti i testi.. che poi "magicamente" si nascondono e lo script funziona ad hoc.

C'è qualcosa che posso fare per impedere questo sgradito inconveniente? Xkè vedendo molti siti che utilizzano questo tipo di struttura ciò non accade...

vi riporto con questo link al codice dello script creato da artorius (che ringrazio)

[artorius]

Beh, questo è causato dal fatto che lo script funziona onload ovvero, quando la pagina è caricata, tu quindi vedi tutto il contenuto, prima che JS applichi lo stile display none agli altri div.
Se metti che i div abbiano display: none; di default l'effetto dovrebbe essere risolto.
Un altro metodo è mettere lo script sull'evento ondomready (che però non è supportato da tutti i browser...) che viene chiamato dopo aver caricato l'html e prima di risolvere i MIME media ed image (caricare immagini e stream, insomma)

[Chef89]

Grazie ancora per l'aiuto ho applicato un display none e funziona tt.. un ultima cosa poi la smetto di rompere (almeno lo spero )

ho la seguente struttura:

<table class="article">
<tr>
<td class="articlesTab">
<div id="headerTab">
 <ul class="vert-one">            [*][url="#"]Titolo 1[/url]                        [*][url="#"]Titolo2[/url][/list]
</div>
<div id="contentTab">
 <div class="tabs" id="1" >
  <h2>[url="articolo.html"]Titolo 1[/url]</h2>
  <p class="testo">Testo Testo Testo</p>
 </div>
 <div class="tabs" id="2" style="display:none">
  <h2>[url="articolo.html"]Titolo 2[/url]</h2>
  <p class="testo">Testo Testo Testo</p>
 </div>
</div>
</td>
</tr>
</table> 

questo è il css

.article {
       width: 100%;
}
.articlesTab {
    border: solid 1px #c8c8c8;
    background: #FFFFFF;
    font: 12px Arial, Verdana, Tahoma, sans-serif;
    text-align: left;
    width: 100%;
    height: auto;
}
.articlesTab #contentTab {
    width: 70%;
    float: right;
}
.articlesTab #contentTab p, .articlesTab #contentTab h2 {
    margin-left: 20px;
    margin-right: 25px;
}
.articlesTab #contentTab div {
    text-align: justify;
}
.articlesTab #headerTab {
    float: left;
    height: 100%;
    border-right: solid 1px #c8c8c8;
}
.articlesTab ul.vert-one {
    margin:0;
    padding:0;
    list-style-type: none;
    display: block;
    font:bold 12px Helvetica, Verdana, Arial, sans-serif;
    line-height: 20px;
    width: 180px;    
}
.articlesTab ul.vert-one li {
    margin:0;
    padding:0;
    border-bottom:1px solid #c8c8c8;
}
.articlesTab ul.vert-one li a {
    display:block;
    text-decoration:none;
    color: #006f9f;
    background: #f2f2f2;
    padding:0 0 0 20px;
    width:160px;
}
.articlesTab ul.vert-one li a:hover {
    background: #006f9f;
    color: #ffffff;
}
.articlesTab ul.vert-one li a.current,ul.vert-one li a.current:hover {
    background: #006f9f;
} 

Il tabulatore è su due colonne. Io vorrei che il div con id="headerTab" fosse alto quanto tutta la cella e quando si allunga, perchè il testo sulla destra è + lungo del menu, si allunghi anche la riga.

[artorius]

Ecco, ci sono un paio di cose sull'height:
height indica l'altezza dell'elemento, come width la larghezza, ma la regola sul funzionamento è diversa da quella del width. Width è forzato ad essere della stessa larghezza dell'elemento contenitore, quando non viene esplicitamente indicato (o viene usato auto) e le percentuali funzionano nello stesso modo. Height invece, tenta di arrivare all'altezza necessaria a contenere il testo o l'elemento contenuto nel flusso del HTML con display:block; che contiene. Per questo height:100% non ha alcun effetto. Dovresti usare un height fisso o, meglio, il line-height per aumentare l'altezza dell'elemento.

Per quanto riguarda il tabulatore prova ad alterare .articlesTab ul.vert-one li a così:

.articlesTab ul.vert-one li a {
    display:block;
    text-decoration:none;
    color: #006f9f;
    background: #f2f2f2;
    padding:0 10px 0 10px;
    width:auto;
} 

[Chef89]

Non sono riuscito a risolvere il prob e mi sono arrangiato come potevo con qualche effetto css, cmq grazie di tutto lo stesso.

Sto cercando ora di inserire un condice javascript che dopo tot secondi sposta il tabulatore attivo

Ho visto questa funzione javascript setTimeout e ho pensato di utilizzarla su change(id) in questo modo

var changeID = news1;
    
window.setTimeout("change(changeID)", 10000); 

il problema è che devo riuscire a far si che scaduto il tempo changeID = news1 divnetin changeID = news2 e così via fino a changeID = news6 e poi riprenda con news1

[Chef89]

up

[artorius]

mmm mi sembra che i parametri debbano essere passati dopo:

prova

setTimeout(change, 10000, changeID);

[Chef89]

ho aggiunto nella head della pagina questo codice

var changeID = news1;
var changeID = news2;
var changeID = news3;
var changeID = news4;
var changeID = news5;
var changeID = news6;

windows.setTimeout(change, 10000, changeID);

ma non funziona..

[artorius]

Originariamente inviato da Chef89
var changeID = news1;
var changeID = news2;
var changeID = news3;
var changeID = news4;
var changeID = news5;
var changeID = news6;

Scusa, ma questo non ha alcun senso...

Innanzi tutto l'id deve essere una stringa quindi ci devi mettere gli " " attorno.
E poi che senso ha ridefinire la varibile tutte le volte...

Puoi ripostarmi l'HTML della pagina?

[Chef89]

Originariamente inviato da artorius
Scusa, ma questo non ha alcun senso...

Innanzi tutto l'id deve essere una stringa quindi ci devi mettere gli " " attorno.
E poi che senso ha ridefinire la varibile tutte le volte...

Puoi ripostarmi l'HTML della pagina?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>

    function change(id)
    {
        var el = document.getElementById('contentTab');
        var divs = el.getElementsByTagName('div');
        var index = 0;
        for(i = 0; i < divs.length; i++)
        {
            if(divs[i].id == id)
            {
                divs[i].style.display = 'block';
                index = i;
            }
            else
            {
                divs[i].style.display = 'none';
            }
        }
        
        el = document.getElementById('headerTab');
        var lis = el.getElementsByTagName('li');
        for(i = 0; i < lis.length; i++)
        {
            if(i == index)
            {
                lis[i].className = 'active';
            }
            else
            {
                lis[i].className = '';
            }
        }
    }
    
    var changeID = news1;
    var changeID = news2;
    var changeID = news3;
    var changeID = news4;
    var changeID = news5;
    var changeID = news6;
    
    windows.setTimeout(change, 10000, changeID);

    --></script>            
                    
</head>
<body>
// continua la pagina
</body>
</html>