aprire il contenuto di un link nel div content

[alextalamonti]

Salve, non sono un grande esperto di css e javascript.
Ho preso la decisione di abbandonare i vecchi e obsoleti frame per realizzare un sito con i div dei Css.
La struttura è quella classica: un header, un menù laterale sx, e il div content che riceve i contenuti dei link del menù.

Ho provveduto a realizzare la parte grafica ora vi chiedo di aiutarmi a far sì che quando clicco su una voce del menù, il contenuto della pagina venga riversata nel div content, però senza ajax e senza utilizzare iframe :elvis: bello è? Non c'è per caso una funzione Javascript che possa risolvere la questione? Grazie anticipatamente.

 

[lukeonweb]

<script type="text/javascript">
function SimulaLink()
{
document.getElementById("MyDIV").innerHTML = "Eccomi qua!";
}
</script>

<a href="javascript:SimulaLink()">CLICCA QUI</a>

<div id="MyDIV"></div>

 

[alextalamonti]

Perfetto! Era la funzione che volevo! Ora nonmi rimane che adattarla al mio menù. Grazie :fonzie:

 

[lukeonweb]

Di nulla, ciao

 

[alextalamonti]

Un'ultimissima domanda 0... con questa funzione posso "mettere" nel div solo il testo racchiuso tra le virgolette di document.getElementById("MyDIV").innerHTML , oppure tale istruzione come argomento, ha la possibilità di accettare un file html esterno? Grazie!

 

[lukeonweb]

No, cosi com'è no. A limite puoi non usare innerHTML ma visualizzare/nascondere dei DIV, usando:

document.getElementById("MioDIV").style.visibility = "visible";
document.getElementById("MioDIV").style.position = "relative";

per la visualizzazione, e:

document.getElementById("MioDIV").style.visibility = "hidden";
document.getElementById("MioDIV").style.position = "absolute";

per nascondere il DIV.

Ovviamente dovresti usare più livelli di testo... faccio prima a farti un esempio (al volo, testalo tu):

<script type="text/javascript">
function SimulaLink(ID)
{
var i = 1;
for (i=1; i<4; i++) // Adatto per 3 link (3+1 = 4)
{
document.getElementById("MioDIV_" + i).style.visibility = "hidden";
document.getElementById("MioDIV_" + i).style.position = "absolute";
if (i == ID)
{
document.getElementById("MioDIV_" + ID).style.visibility = "visible";
document.getElementById("MioDIV_" + ID).style.position = "relative";
}
}
}
</script>

<style type="text/css">
#MioDIV_1,#MioDIV_2, #MioDIV_3
{
visibility: hidden;
position: absolute;
}
</style>

<a href="javascript:SimulaLink(1)">LINK 1</a>
<a href="javascript:SimulaLink(2)">LINK 2</a>
<a href="javascript:SimulaLink(3)">LINK 3</a>

<div id="MioDIV_1">CONTENUTO 1</div>
<div id="MioDIV_2">CONTENUTO 2</div>
<div id="MioDIV_3">CONTENUTO 3</div>

 

[alextalamonti]

Capisco, l'esempio funziona perfettamente! Grazie ancora:fonzie: La domanda che mi viene spontanea è: l'utilizzo di più Div nascosti potrebbe rallentare il caricamento del sito la prima volta che un utente si collega? Ossia, il sito sarebbe pronto all'interazione con un utente solo al termine del caricamento di tutti i Div?
Grazie ancora!

 

[lukeonweb]

Beh, se goni DIV contiene tantissimo contenuto (o anche immagini) ed i DIV sono tanti, potrebbe.

Ma la domanda che viene spontanea a me è perchè non usare i link tradizionali come mamma li ha fatti?

 

[alextalamonti]

Eh...il fatto è che il sito lo avevo iniziato con i frame, però al fine di indicizzarlo tale tecnica non è proprio il massimo...:hammer: e quindi da qui la volontà di abbandonarli per sempre per imparare meglio i Css book:

 

[lukeonweb]

Pensi che tal'altra tecnica sia migliore? In questo modo indicizza una sola pagina e male, non capendo se tratta carne, pesce o carote, perchè col sistema che ti ho suggerito li tratta tutti e tre.

Passa ai link senza frame, senti a me

Se proprio ti piace il layout in stile frameset, dai un'occhiata a questo:

https://www.mrw.it/css/articoli/simulare-frame-css_502.html

Ciao!

 

[alextalamonti]

ah si si! I frame ormai non fanno più parte del mio già esile background informatico . Il template che mi hai linkato l'ho già "rubato" e adattato alle mie esigenze ...mi mancava solo il dietro le quinte, cioè popolare il div #right con i vari link, cosa che è possibile fare con i due tuoi esempi di cui sopra, no?

 

[lukeonweb]

Ti conviene, all'interno di #right, creare dei DIV ad hoc.

Nota che nell'esempio ho indicizzato i vari DIV da 1 a 3 (puoi farlo fino ad "N") per rendere comodo lo script che usa un ciclo for per nascondere gli altri in un colpo solo.

 

[alextalamonti]

Ok! E' stato un vero piacere, ti ringrazio:fonzie::fonzie::fonzie:

 

[lukeonweb]

Piacere mio

 

[pups4545]

ciao scusa
io ho esattamente la struttura a pseudo frame realizzata in css esattamente come quella che hai linkato tu...https://www.mrw.it/css/artico...e-css_502.html ....in quel caso come dovrei fare per aprire nel frame di destra link cliccati nel frame di sinistra?????

 

[nibbio]

Sito matrimonio con SimulaLink --- funziona tutto bene tranne..

Ciao Luke,

malgrado le mie tranquille abilità grafiche (un tempo ero piu ferrato) sto tentando di mettere su un sito per il mio matrimonio.

Il sito ha un'homepage in html e le altre pagine linkate in asp
LA struttura dell'homepage è a 3 colonne con il contenuto nel div content centrale.

html,body{margin:0;padding:0}
body{font-family: "Century Gothic",serif;;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #FFCCFF;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #FFFFFF;color: #F66}
div#container{background:#F66 text-align:left}
div#content p{line-height:1.4; background:#e9f2cb}
div#navigation {background:#FF8539}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-700px}
div#extra{float:left;width:150px;margin-left:-150px}
div#footer{clear:left;width:100%}
#navcontainer
{

Dato che non volevo nè frame, nè iframe, ne link normali che ricaricassero la pagina ho cercato nel web e mi sono imbattutto nella tua ottima funzione SimulaLink

Detto fatto. Funziona tutto tranne...

...quando apro l'homepage mi si vede il contenuto di TUTTE le pagine insieme!

L'utente che clicca subito su un link sulla colonna di sinistra non lo nota,
ma chi non clicca e decide di scorrere la pagina, oltre al DIV1 vede il contenuto di tutti gli altri 7 DIV insieme.

E possibile far apparire solo la pagina introduttiva? Questa va numerata con DIV1?
Oppure far apparire tutti i DIV con il colore dello sfondo tranne quello della pagina introduttiva?

Spero in una tua illuminazione 0

Grazie
NIBBIO

<script type="text/javascript">
function SimulaLink()
{
document.getElementById("MyDIV").innerHTML = "Eccomi qua!";
}
</script>

<a href="javascript:SimulaLink()">CLICCA QUI</a>

<div id="MyDIV"></div>

 

[nibbio]

C'è nessuno che puo aiutarmi??

QUALCUNO PUO AIUTARMI...??
O SUGGERIRE ALTERNATIVE MANTENENDO PIU O MENO LA STESSA STRUTTURA?

Grazie a chiunque possa darmi un feedback!

NIBBIO

Ciao Luke,

malgrado le mie tranquille abilità grafiche (un tempo ero piu ferrato) sto tentando di mettere su un sito per il mio matrimonio.

Il sito ha un'homepage in html e le altre pagine linkate in asp
LA struttura dell'homepage è a 3 colonne con il contenuto nel div content centrale.

html,body{margin:0;padding:0}
body{font-family: "Century Gothic",serif;;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #FFCCFF;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #FFFFFF;color: #F66}
div#container{background:#F66 text-align:left}
div#content p{line-height:1.4; background:#e9f2cb}
div#navigation {background:#FF8539}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-700px}
div#extra{float:left;width:150px;margin-left:-150px}
div#footer{clear:left;width:100%}
#navcontainer
{

Dato che non volevo nè frame, nè iframe, ne link normali che ricaricassero la pagina ho cercato nel web e mi sono imbattutto nella tua ottima funzione SimulaLink

Detto fatto. Funziona tutto tranne...

...quando apro l'homepage mi si vede il contenuto di TUTTE le pagine insieme!

L'utente che clicca subito su un link sulla colonna di sinistra non lo nota,
ma chi non clicca e decide di scorrere la pagina, oltre al DIV1 vede il contenuto di tutti gli altri 7 DIV insieme.

E possibile far apparire solo la pagina introduttiva? Questa va numerata con DIV1?
Oppure far apparire tutti i DIV con il colore dello sfondo tranne quello della pagina introduttiva?

Spero in una tua illuminazione 0

Grazie
NIBBIO