aprire il contenuto di un link nel div content

alextalamonti

Nuovo Utente
25 Ago 2009
9
0
0
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

Utente Attivo
5 Mar 2003
5.177
10
38
43
Napoli
www.lucaruggiero.it
<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

Nuovo Utente
25 Ago 2009
9
0
0
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

Utente Attivo
5 Mar 2003
5.177
10
38
43
Napoli
www.lucaruggiero.it
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

Nuovo Utente
25 Ago 2009
9
0
0
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

Utente Attivo
5 Mar 2003
5.177
10
38
43
Napoli
www.lucaruggiero.it
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

Nuovo Utente
25 Ago 2009
9
0
0
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:
 

alextalamonti

Nuovo Utente
25 Ago 2009
9
0
0
ah si si! I frame ormai non fanno più parte del mio già esile background informatico :D. Il template che mi hai linkato l'ho già "rubato" e adattato alle mie esigenze :p...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

Utente Attivo
5 Mar 2003
5.177
10
38
43
Napoli
www.lucaruggiero.it
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.
 

nibbio

Nuovo Utente
30 Gen 2011
8
0
1
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

Nuovo Utente
30 Gen 2011
8
0
1
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
T Aprire il contenuto di un link in un DIV Javascript 3
M Aprire il contenuto di un link in un altro div (senza aggiornare tutta la pagina) Javascript 1
V aprire contenuto spry con pulsante flash Flash 5
W Aprire un pop-up da un pop-up HTML e CSS 3
T Come aprire file .wtb Discussioni Varie 10
A Aprire la window form Add Connection da codice Visual Basic 4
S Aprire su Mac Progetto PSD salvato su win Photoshop 0
D [HTML] Non riesco aprire foto singole in un album creato con "iWebAlbum" HTML e CSS 1
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
A [MS Access] Aprire maschera con sottomaschera su ultimo record MS Access 0
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
Tommy03 Aprire un file .asp nel browser Classic ASP 5
K Aprire porte modem Tim smart Fibra Adsl e Connettività 0
ste80 [MS Access] Impossibile aprire una maschera da pulsante MS Access 2
R [MS Access] COME APRIRE UNA MASCHERA FACENDO DOPPIO CLICK SU UN RECORDSET MS Access 1
R [MS Access] aprire maschera con doppio click su recordset di sottomaschera MS Access 4
G [PHP] Aprire una cartella tramite un link PHP 1
F aprire una pagina in un overlay jQuery 0
S [PHP] Aprire file in locale PHP 1
F [Javascript] Aprire file tramite jquery Javascript 0
trattorino [Javascript] aprire blocchi via via che si scorre Javascript 0
M Salvare i dati nel db e aprire altra pagina php PHP 7
C [PHP] Aprire la pagina dopo aver fatto il login PHP 1
Morganot37 Photoshop CC non può aprire l'immagine Webdesign e Grafica 5
S Aprire un marketplace Leggi, Normative e Fisco 0
G Aprire un app da pagina web Sviluppo app per Android 3
Shaovel [HTML] Aprire sito esterno cliccando immagine HTML e CSS 7
iap Aprire un ecommerce e sincronizzarlo al gestionale Discussioni Varie 1
M Aprire nuova scheda del browser con javascript Javascript 7
Shyson Aprire finestra popup con Safari Javascript 6
V aprire pagine php in div jQuery 1
M aprire Iframe su safari in IOS, (iphone - ipad) HTML e CSS 8
M Aprire un popup con un form jQuery 2
S Aprire file sul pc cliente dentro una intranet. PHP 1
D Navigare fra le directory e aprire file PHP 3
Gabriele Visioli Realizzare e Vendere siti web senza aprire una Partita IVA... Come? Leggi, Normative e Fisco 4
F Aprire un tab con js Javascript 0
F devo aprire due pagine asp contemporaneamente Classic ASP 1
F aprire un file pdf da una pagina asp Classic ASP 2
G Freelancer: quanto costa aprire e mantenere la partita IVA? Discussioni Varie 3
P Codice per far aprire un <div> al click di un immagine? HTML e CSS 0
lucolo Non posso aprire discussioni Supporto Mr.Webmaster 4
M Aprire file php di una pagina web! PHP 5
Z Script per aprire video youtube sia apre a schermo intero e poi ridimensionare in automatico Javascript 1
F Che tipo di Partita Iva devo aprire? Leggi, Normative e Fisco 2
filippino Aprire link esterni in iframe HTML e CSS 0
T [VBulletin] Campi aggiuntivi prima di aprire nuova discussione CMS (Content Management System) 0
K Aprire sub(o form) in automatico all'apertura del Database MS Access 1
radioButton Istruzione html per aprire rubrica HTML e CSS 0
Monital aprire una connesisone su un altro database all'interno di un while PHP 3

Discussioni simili