[HTML - JAVASCRIPT - CSS] simulare un frame

javacomelava · 14-12-2009, 01:43

Sto realizzando un sito la cui struttura è molto semplice:

header
Contenuto
footer

Vorrei simulare l'uso dei frame in modo da far rimanere fissi header e footer.
Il contenuto deve variare in base ai link presenti nel menu(che si trova nell'header) e non deve essere "scrollabile".

Mi chiedevo come poter realizzare la cosa utilizzando javascript o css.

saluti

wingman87 · 14-12-2009, 03:00

Perché vuoi complicarti la vita? Mi viene da pensare che lo fai come esercizio personale...

EDIT: ripensandoci potrei avere frainteso, intendi che il footer e l'header restano fissi ma vengono comunque ricaricati all'apertura di un link o intendi dire che i link attiveranno delle funzioni javascript per cambiare il contenuto del content senza ricaricare tutto?

BlackAuron · 14-12-2009, 12:45

Cosa intendi con "far rimaner fissi" ? L'idea di base è usare tre div, e javascript per modificare il contenuto del div centrale ( eventualmente, appoggiandoti ad una xmlhttprequest) ... ma perchè ti possa venir data una risposta più precisa, dovresti specificare meglio cosa intendi per fissi.

javacomelava · 14-12-2009, 14:39

Intendo la seconda che ha capito wingman:

HEADER e FOOTER fissi: "I link attiveranno delle funzioni javascript per cambiare il contenuto del content senza ricaricare tutto"

Nell' HEADER ci sarà un Menu (Home,Iscriviti,Chi Siamo etc.).
Cliccando su un link del Menu vorrei che cambiasse il contenuto dell'emento CONTENT in base al link cliccato.

La cosa che mi sono chiesta è stata: "Ma possibile che siti e portali che devono rispondere a centinaia di risposte simultanee devono,per ogni richiesta,ricaricare tutti i componenti fissi dell'interfaccia??? Perchè non fare in modo che gli elementi che non variano vengano caricati una volta sola piuttosto che ricaricarli ogni volta? "

Altra considerazione che ho fatto:
"Se non utilizzo frame o una loro simulaziome,dovrò riscrivere per ogni pagina web del mio sito sia header che footer,facendo praticamente copia e incolla di questi ultimi"

Che ne pensate ? Sono due fattori trascurabili ???

saluti

BlackAuron · 14-12-2009, 15:05

Quote:

La cosa che mi sono chiesta è stata: "Ma possibile che siti e portali che devono rispondere a centinaia di risposte simultanee devono,per ogni richiesta,ricaricare tutti i componenti fissi dell'interfaccia??? Perchè non fare in modo che gli elementi che non variano vengano caricati una volta sola piuttosto che ricaricarli ogni volta? "

Altra considerazione che ho fatto:
"Se non utilizzo frame o una loro simulaziome,dovrò riscrivere per ogni pagina web del mio sito sia header che footer,facendo praticamente copia e incolla di questi ultimi"

Che ne pensate ? Sono due fattori trascurabili ???

1) La maggior parte dei componenti più pesanti vengono memorizzati nella cache, quindi non pensare che ogni elemento venga riscaricato dal server ad ogni richista.
2) è una buona idea, il cui prezzo è rendere il sito pressochè inutilizzabile per tutti coloro che non hanno javascript attivato... salvo tu non crei il codice alternativo dentro i tags noscript, ma a questo punto ogni pagina peserà il doppio , e non son certo che in fin dei conti avresti un guadagno
3) i frame sono il male, evitali finchè puoi

4) puoi sempre crearti una sorta di template in php, che faccia gli include in automatico per ogni pagina, senza dover fare copia e incolla di header e footer per tutte le pagine
5) no, la tua idea è già stata proposta ed elaborata: sotto ti ho scritto sinteticamente un codice di esempio funzionante. Occhio che le pagine foo.htm, home.htm e via dicendo dovranno contenere non l'html di tutta la pagina, ma solo quello che conterrebbero dentro al div

Codice PHP:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script>
        if ( typeof XMLHttpRequest == "undefined" ){
            XMLHttpRequest = function(){
                return new ActiveXObject(
                navigator.userAgent.indexOf("MSIE 5") >= 0 ?
                    "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP"
                );
            }
        }
        function req(a){
            var txt = new XMLHttpRequest();
            txt.open("GET", a, true);
            txt.onreadystatechange = function(){
                if ( txt.readyState == 4 ) {
                    document.getElementById("content").innerHTML = txt.responseText;
                    txt = null;
                }
            }
            txt.send();
            return false;
        }
        
    </script>
    <style>
        li{
            display:inline;
        }
    </style>
  </head>
  <body>
    <div id="header">
        <ul>
            <li><a href="#" onclick="req('home.htm');">Home</a></li>
            <li><a href="#" onclick="req('foo.htm');">foo</a></li>
            <li><a href="#" onclick="req('bar.htm');">bar</a></li>
            <li><a href="#" onclick="req('foo2.htm');">foo2</a></li>
            <li><a href="#" onclick="req('bar2.htm');">bar2</a></li>
            <li><a href="#" onclick="req('contacts.htm');">Contacts</a></li>
        </ul>
    </div>
    <div id="content">Benvenuto</div>
    <div id="footer"> copyright blablabla</div>
  </body>
</html>

Ovviamente sul server devi avere le pagine foo.htm e cosi via

CozzaAmara · 14-12-2009, 16:13

Quote:

Originariamente inviato da javacomelava

Sto realizzando un sito la cui struttura è molto semplice:

header
Contenuto
footer

Vorrei simulare l'uso dei frame in modo da far rimanere fissi header e footer.
Il contenuto deve variare in base ai link presenti nel menu(che si trova nell'header) e non deve essere "scrollabile".

Mi chiedevo come poter realizzare la cosa utilizzando javascript o css.

saluti

AJAX.

Il contenuto centrale lo aggiorni tramite chiamata AJAX ad un'altra pagina dinamica del tuo sito.
Per facilitarti il tutto ti consiglio un framework JS come JQuery.

Ciao.

javacomelava · 15-12-2009, 11:37

grazie per le risposte e per i chiarimenti.

Sicuramente non è accettabile che chi non abbia javascript non possa fruire del sito.Questo è discriminante rispetto al resto.

Approposito di ajax,sto sviluppando con jsf IceFaces,devo darmi una guardata alla documentazione mi sà!

saluti

IAmZak · 15-12-2009, 11:44

come siete complicati....
ragiona con i div quindi div header div contenuto e altre storie. se poi per esempio hai un link in header che va a cambiare il contenuto, viene caricato solo quello siccome header e footer rimangono invariati.
header.php

Codice:

<div id="header">
bla bla bla
</div>

footer.php

Codice:

<div id="footer">
bla bla bla
</div>

pagina.php

Codice:

<?php include("header.php"); ?>
<div id="pagina">
bla bla bla
</div>
<?php include("footer.php"); ?>

anche se vedi il php, è solo per gli include quindi non spaventarti

BlackAuron · 15-12-2009, 12:58

IamZak, col tuo metodo, quando clicchi su un link nell'header, viene ricaricata l'intera pagina, e non solo il div centrale.
Fai pure un test con livehttpheaeders e vedi cosa intendo.

IAmZak · 15-12-2009, 13:04

Quote:

Originariamente inviato da BlackAuron

IamZak, col tuo metodo, quando clicchi su un link nell'header, viene ricaricata l'intera pagina, e non solo il div centrale.
Fai pure un test con livehttpheaeders e vedi cosa intendo.

si ma è il metodo migliore per una buona programmazione, e 3/4 delle cose rimangono in cache.
inoltre usare i frame ormai è quasi "illegale" sicchè sono letteralmente antigoogle sicchè lo spider diventa scemo.
io poi parlo dal punto di vista del mio lavoro

BlackAuron · 15-12-2009, 13:26

... più di un sito usa ajax al posto di ricaricare l'intera pagina, e il problema del php è che serve un servizio di hosting che lo supporti

Poi ti ripeto, la tua è la soluzione che userei pure io, ma non è quanto chi ha aperto il thread aveva chiesto

IAmZak · 15-12-2009, 14:01

Quote:

Originariamente inviato da BlackAuron

... più di un sito usa ajax al posto di ricaricare l'intera pagina, e il problema del php è che serve un servizio di hosting che lo supporti

Poi ti ripeto, la tua è la soluzione che userei pure io, ma non è quanto chi ha aperto il thread aveva chiesto

beh ma ormai moltissimi hosting danno php, per esempio altervista. cmq sò che non ha chiesto di php, ma ho messi 2 righe

javacomelava · 15-12-2009, 14:39

ehehe...ragazzi io prima di pormi gl interrogativi di cui ho scritto non avevo valutato il fatto che:

1. gli oggetti piu pesanti vengono memorizzati in cache
2. chi non ha javascript non può usufruire di una delle eventuali soluzioni a cui avevo pensato

Php non lo utilizzo,in quanto sto sviluppando seguende le specifiche di java EE (IceFaces,EJB,Spring,JPA).
Qualcuno mi ha messo la pulce nell'orecchio con AJAX,e utilizzando IceFaces,ce l'ho "aggratis" quasi.
La cosa comunque esula dal lavoro che devo fare,mi è sovvenuto il dubbio e quindi ho chiesto.

Credo comunque che utilizzerò il metodo dei "div",che poi ricarichi di volta in volta tutto lo posso trascurare,grazie anche alla cache e al fatto che di pesante nel mio header,non c'e' proprio niente.

chissa se posso fare lo stesso discorso degli include PHP con degli INCLUDE JSP,ma credo di si.

ciaooo

IAmZak · 15-12-2009, 14:41

Quote:

Originariamente inviato da javacomelava

Credo comunque che utilizzerò il metodo dei "div"

tieni presente che per una programmazione fatta bene e web 2.0, DEVI usare i div, in quanto frame e altre cose sono letteralmente old o per principianti/chi non lavora

javacomelava · 15-12-2009, 14:47

Su questo non ho mai avuto dubbi,i frame ho deciso di evitarli sin dall'inizio!

comunque grazie per i consigli!

IAmZak · 15-12-2009, 15:01

Quote:

Originariamente inviato da javacomelava

Su questo non ho mai avuto dubbi,i frame ho deciso di evitarli sin dall'inizio!

comunque grazie per i consigli!

niente

otto88 · 01-02-2010, 22:14

ciao ragazzi dovrei fare un sitoweb portfolio per presentare dei lavori. ho visto questo sito ( http://work.1-up.com) è mi sono chiesto come è possibilie fare una cosa del genere..cosa devo avranno usato jquery?

spero in un vostro aiuto

grazie ancora ciao!

14-12-2009, 01:43	#1
javacomelava Member Iscritto dal: May 2009 Messaggi: 129	[HTML - JAVASCRIPT - CSS] simulare un frame Sto realizzando un sito la cui struttura è molto semplice: header Contenuto footer Vorrei simulare l'uso dei frame in modo da far rimanere fissi header e footer. Il contenuto deve variare in base ai link presenti nel menu(che si trova nell'header) e non deve essere "scrollabile". Mi chiedevo come poter realizzare la cosa utilizzando javascript o css. saluti

15-12-2009, 11:44	#8
IAmZak Senior Member Iscritto dal: Oct 2005 Messaggi: 654	come siete complicati.... ragiona con i div quindi div header div contenuto e altre storie. se poi per esempio hai un link in header che va a cambiare il contenuto, viene caricato solo quello siccome header e footer rimangono invariati. header.php Codice: <div id="header"> bla bla bla </div> footer.php Codice: <div id="footer"> bla bla bla </div> pagina.php Codice: <?php include("header.php"); ?> <div id="pagina"> bla bla bla </div> <?php include("footer.php"); ?> anche se vedi il php, è solo per gli include quindi non spaventarti __________________ Macbook Pro 15'' Mid 2015

01-02-2010, 22:14	#17
otto88 Junior Member Iscritto dal: Oct 2009 Messaggi: 23	jQuery ciao ragazzi dovrei fare un sitoweb portfolio per presentare dei lavori. ho visto questo sito ( http://work.1-up.com) è mi sono chiesto come è possibilie fare una cosa del genere..cosa devo avranno usato jquery? spero in un vostro aiuto grazie ancora ciao! __________________ iMac 27" mid 2011 \| HP Pavilion DV5 1144el

14-12-2009, 03:00	#2
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2788	Perché vuoi complicarti la vita? Mi viene da pensare che lo fai come esercizio personale... EDIT: ripensandoci potrei avere frainteso, intendi che il footer e l'header restano fissi ma vengono comunque ricaricati all'apertura di un link o intendi dire che i link attiveranno delle funzioni javascript per cambiare il contenuto del content senza ricaricare tutto?

14-12-2009, 12:45	#3
BlackAuron Member Iscritto dal: May 2006 Messaggi: 86	Cosa intendi con "far rimaner fissi" ? L'idea di base è usare tre div, e javascript per modificare il contenuto del div centrale ( eventualmente, appoggiandoti ad una xmlhttprequest) ... ma perchè ti possa venir data una risposta più precisa, dovresti specificare meglio cosa intendi per fissi.

14-12-2009, 14:39	#4
javacomelava Member Iscritto dal: May 2009 Messaggi: 129	Intendo la seconda che ha capito wingman: HEADER e FOOTER fissi: "I link attiveranno delle funzioni javascript per cambiare il contenuto del content senza ricaricare tutto" Nell' HEADER ci sarà un Menu (Home,Iscriviti,Chi Siamo etc.). Cliccando su un link del Menu vorrei che cambiasse il contenuto dell'emento CONTENT in base al link cliccato. La cosa che mi sono chiesta è stata: "Ma possibile che siti e portali che devono rispondere a centinaia di risposte simultanee devono,per ogni richiesta,ricaricare tutti i componenti fissi dell'interfaccia??? Perchè non fare in modo che gli elementi che non variano vengano caricati una volta sola piuttosto che ricaricarli ogni volta? " Altra considerazione che ho fatto: "Se non utilizzo frame o una loro simulaziome,dovrò riscrivere per ogni pagina web del mio sito sia header che footer,facendo praticamente copia e incolla di questi ultimi" Che ne pensate ? Sono due fattori trascurabili ??? saluti

15-12-2009, 11:37	#7
javacomelava Member Iscritto dal: May 2009 Messaggi: 129	grazie per le risposte e per i chiarimenti. Sicuramente non è accettabile che chi non abbia javascript non possa fruire del sito.Questo è discriminante rispetto al resto. Approposito di ajax,sto sviluppando con jsf IceFaces,devo darmi una guardata alla documentazione mi sà! saluti

15-12-2009, 12:58	#9
BlackAuron Member Iscritto dal: May 2006 Messaggi: 86	IamZak, col tuo metodo, quando clicchi su un link nell'header, viene ricaricata l'intera pagina, e non solo il div centrale. Fai pure un test con livehttpheaeders e vedi cosa intendo.

15-12-2009, 13:26	#11
BlackAuron Member Iscritto dal: May 2006 Messaggi: 86	... più di un sito usa ajax al posto di ricaricare l'intera pagina, e il problema del php è che serve un servizio di hosting che lo supporti Poi ti ripeto, la tua è la soluzione che userei pure io, ma non è quanto chi ha aperto il thread aveva chiesto

15-12-2009, 14:39	#13
javacomelava Member Iscritto dal: May 2009 Messaggi: 129	ehehe...ragazzi io prima di pormi gl interrogativi di cui ho scritto non avevo valutato il fatto che: 1. gli oggetti piu pesanti vengono memorizzati in cache 2. chi non ha javascript non può usufruire di una delle eventuali soluzioni a cui avevo pensato Php non lo utilizzo,in quanto sto sviluppando seguende le specifiche di java EE (IceFaces,EJB,Spring,JPA). Qualcuno mi ha messo la pulce nell'orecchio con AJAX,e utilizzando IceFaces,ce l'ho "aggratis" quasi. La cosa comunque esula dal lavoro che devo fare,mi è sovvenuto il dubbio e quindi ho chiesto. Credo comunque che utilizzerò il metodo dei "div",che poi ricarichi di volta in volta tutto lo posso trascurare,grazie anche alla cache e al fatto che di pesante nel mio header,non c'e' proprio niente. chissa se posso fare lo stesso discorso degli include PHP con degli INCLUDE JSP,ma credo di si. ciaooo

15-12-2009, 14:47	#15
javacomelava Member Iscritto dal: May 2009 Messaggi: 129	Su questo non ho mai avuto dubbi,i frame ho deciso di evitarli sin dall'inizio! comunque grazie per i consigli!

Strumenti
Mostra una versione stampabile Invia questa pagina per email