+ Rispondi al Thread
Pagina 1 di 2 12 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 16

Discussione: Header fisso per tutte le pagine del sito

  1. #1
    L'avatar di Domenico_Falco1
    Domenico_Falco1 non è in linea Scolaretto
    Post
    235

    Header fisso per tutte le pagine del sito

    Buon giorno, sto creando un sito e chiaramente l'header con div ed immagini è uguale per tutte le pagine del sito.

    Vorrei che l'header non si caricasse ogni volta che apro le pagine.

    Ho salvato in una pagina html diversa tutto il codice del''html e l'ho chiamata : header.html

    C'è un metodo affinché appunto l'header rimanga fisso e si carichi solo la pagina scelta del sito ?

    Ho letto che la tecnica dell'iframe ormai è superata e per cortesia chiedo suggerimenti o esempi.

    Grazie per eventuali risposte

    Domenico
    "Considerate la vostra semenza:
    fatti non foste a viver come bruti,
    ma per seguir virtute e canoscenza"

  2. #2
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Luogo
    Reggio Emilia
    Post
    1,143
    Puoi caricare una porzione di una pagina HTML usando AJAX, magari con una semplice libreria di supporto, tipo JQuery.
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Homepage | Blog | Delphi Podcast | Delphi Succinctly (e-book)

  3. #3
    L'avatar di Domenico_Falco1
    Domenico_Falco1 non è in linea Scolaretto
    Post
    235
    Grazie della risposta, può inviarmi una guida o un esempio ?

    Purtroppo non sono un esperto, ma a furia di leggere poi capisco o almeno spero

    Poi preciso una cosa, non voglio inserire lo stesso codice per ogni pagina, non so se è follia pura, ma vorrei che una volta aperta la pagina home e magari clicco su un'altra pagina, si caricasse solo questa e non l'header, spero di essere stato chiaro, preciso che sto codificando in html.

    Saluti
    Ultima modifica di Domenico_Falco1; 16-05-2019 13:22 
    "Considerate la vostra semenza:
    fatti non foste a viver come bruti,
    ma per seguir virtute e canoscenza"

  4. #4
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Luogo
    Reggio Emilia
    Post
    1,143
    Quote Originariamente inviato da Domenico_Falco1 Visualizza il messaggio
    Grazie della risposta, può inviarmi una guida o un esempio ?
    Basta una ricerca veloce. Ad esempio, io ho trovato questo.

    Ovviamente, al posto del "button" utilizzato, l'elemento di riferimento potrebbe essere un link o qualsiasi altra cosa.

    Ciao!
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Homepage | Blog | Delphi Podcast | Delphi Succinctly (e-book)

  5. #5
    L'avatar di Domenico_Falco1
    Domenico_Falco1 non è in linea Scolaretto
    Post
    235
    Innanzitutto grazie della risposta, ed è un ottimo inizio, ma purtroppo di sicuro non sono stato chiaro, ci riprovo, io creo la pagina index con un header con immagini e div, e sotto in un div container ci inserisco tutto l'altro contenuto, poi se clicco su un link o button ( poi si vede ), il div container deve scomparire ( magari con un display : none o altro metodo ) con tutti i suoi contenuti e deve comparire la pagina che ho scelto, ad esempio : contatti.html che chiaramente è preparata da parte.

    Un codice similare a questo che ho trovato in rete :

    codice:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $.ajax({url: "demo_test.txt", success: function(result){
          $("#div1").html(result);
        }});
      });
    });
    </script>
    </head>
    <body>
    
    <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
    
    <button>Get External Content</button>
    
    </body>
    </html>
    trovato qui : https://www.w3schools.com/jquery/try...uery_ajax_ajax

    Così l'header non si ricarica al cambio di pagina e solo il contenuto sotto di lui cambia.

    Spero di essere stato chiaro

    Ancora grazie e saluti.
    Ultima modifica di Domenico_Falco1; 16-05-2019 15:00 
    "Considerate la vostra semenza:
    fatti non foste a viver come bruti,
    ma per seguir virtute e canoscenza"

  6. #6
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Luogo
    Reggio Emilia
    Post
    1,143
    Quote Originariamente inviato da Domenico_Falco1 Visualizza il messaggio
    Innanzitutto grazie della risposta, ed è un ottimo inizio, ma purtroppo di sicuro non sono stato chiaro,
    Sei stato chiarissimo, e l'esempio che ti ho citato è esattamente ciò che chiedi.

    Quando carichi la pagina, se agganci l'evento a un pulsante dell'header, JQuery caricherà il file indicato, che sarà solo una parte della pagina, e tale contenuto andrà a sostituire quello presente nell'elemento <div> che viene usato come contenitore o riferimento.

    Quello che otterrai è che la pagina non fa il refresh, e al clic sul pulsante del menu si andrà a sostituire un contenuto con un altro, di fatto quindi "cambiando pagina" in un certo senso, ma senza navigare e facendo comparire il nuovo contenuto al posto del precedente.

    Associando a pulsanti dell'header altre pagine differenti, ecco che avrai una navigazione dove - su ogni clic - potrai sostituire il contenuto della pagina con quello scelto e scaricato al momento, aggiornato dinamicamente grazie ad AJAX.

    Non l'ho specificato, ma per me è ovvio che l'esempio vada preso come un cosiddetto POC (Proof of Concept): serve a farti capire come scaricare la pagina al clic di un pulsante e metterla in un <div>, ma dovrai poi essere tu a disporre questi elementi nel modo corretto e in modo non identico all'esempio.

    Se ti aspetti di trovare esattamente e precisamente il codice già pronto che fa quello che chiedi senza un minimo di modifica, o che qualcuno te lo scriva, credo che l'attesa potrebbe essere lunga, e in ogni caso devi studiare il codice per comprenderlo e poterlo successivamente modificare per qualsiasi evenienza.

    Ciao!
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Homepage | Blog | Delphi Podcast | Delphi Succinctly (e-book)

  7. #7
    L'avatar di Domenico_Falco1
    Domenico_Falco1 non è in linea Scolaretto
    Post
    235
    Buon pomeriggio gentile Alka, ti ringrazio per le tue risposte ed attenzioni, desidero solo precisare una cosa, non ho mai pensato che qualcuno mi compilasse un codice o altro, ho solo chiesto un esempio o una guida e dopo il tuo suggerimento ho postato un qualcosa che penso si avvicinasse, il fatto che tu sei chiaramente molto più esperto non significa che chiunque domandi qualcosa voglia approfittarne, da solo e da zero mi sto creando un sito aziendale, forse sarà molto semplice ma è mio e ciò mi diverte tanto, esistono anche persone a cui piace farle da se le cose anche se chiedono aiuto e suggerimenti.

    Il sito è questo http://www.trinitycoretcloud, certo roba di poco conto ma fatto tutto da solo, compreso la grafica, quindi senza alcuna polemica ma solo per un precisazione dovuta, ti ringrazio ancora ed ottimo fine settimana.

    Domenico.
    "Considerate la vostra semenza:
    fatti non foste a viver come bruti,
    ma per seguir virtute e canoscenza"

  8. #8
    L'avatar di Brontolo
    Brontolo non è in linea Very Important Person
    Post
    2,830
    Se il tuo desiderio è effettivamente evitare che la parte comune a tutte le pagine venga ricaricata ogni volta che si cambia pagina allora il ricorso ad Ajax o JQuery è inevitabile.
    Se invece vuoi semplicemente evitare di duplicare la parte comune in ogni pagina, con l'inconveniente di doverle modificare tutte ogni volta che dovrai cambiare la parte comune, puoi ricorrere al trucco di trasformare le tue pagine da html a php o asp (o altro linguaggio lato server). In pratica dovresti solo cambiare l'estensione delle tue pagine da html a php (per esempio) e inserire al posto della parte comune un'istruzione offerta dal linguaggio che serve ad includere la porzione comune. Per rimanere nell'esempio del php l' istruzione si chiama appunto "include".
    Il regolamento del forum: la prima cosa da leggere.

  9. #9
    L'avatar di Domenico_Falco1
    Domenico_Falco1 non è in linea Scolaretto
    Post
    235
    Buona sera Brontolo, anzi meglio buona notte, appena ritornato a casa ed ho letto il messaggio attentamente, ringrazio davvero, ho ripreso l'esempio che mi è stato inviato da Alka e ho fatto una prova a riguardo cambiando il codice così :

    codice:
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $('#uno').click(function(){
        $.ajax({url: "demo_test.txt", success: function(result){
          $("#div1").html(result);
        }});
      });
    });
    
    $(document).ready(function(){
      $('#due').click(function(){
        $.ajax({url: "demo_test.txt", success: function(result){
          $("#div2").html(result);
        }});
      });
    });
    
    </script>
    </head>
    <body>
    
    <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
    <div id="div2"><h2>bl bla bla</h2></div>
    
    <button id="uno">Get Content</button>
    <button id="due">Get External Content</button>
    
    
    </body>
    </html>
    cioè ho usato due button ed chiaramente funziona tutto,

    adesso riprendendo la mia richiesta, potrò usare dei button che al posto del classico tasto link dovranno caricare dei codici html ed altro in una pagina che non desidero che si ricarica l'header, come mi hai spiegato.

    Adesso l'unica cosa che mi rimane da capire è praticamente i codici diversi che chiaramente dovrò salvarli esternamente, dovranno essere semplici file testo o js.
    Beh farò delle prove e se avrò problemi, spero in un altro vostro suggerimento.

    Magari meglio usare la funzione
    codice:
    function getAjaxFile(fileName){  ajax.requestFile = fileName;  ajax.onCompletion = showContent;  ajax.onLoading = showWaitMessage;  ajax.runAJAX();}
    Beh farò delle prove e se avrò problemi, spero in un altro vostro suggerimento.

    Grazie ancora e saluti.
    Ultima modifica di Domenico_Falco1; 19-05-2019 00:07 
    "Considerate la vostra semenza:
    fatti non foste a viver come bruti,
    ma per seguir virtute e canoscenza"

  10. #10
    L'avatar di Domenico_Falco1
    Domenico_Falco1 non è in linea Scolaretto
    Post
    235
    Buon giorno ed ottima settimana a tutti

    Alla fine ci sono riuscito e sembra giusto pubblicare il codice che mi permette di sostituire in un div, appositamente predisposto un nuovo codice html, in modo che pigiando un button, si aggiorni automaticamente con il nuovo contenuto, posto in una pagina esterna.

    codice HTML:
    <head>
      <script src="jquery-1.5.2.min.js"></script>
    
    <script>
    function SetHtmlAjax(id){
        $.ajax({
         type: "GET",
         dataType: "html",
         cache: false,
         url: "INSEFORM.html",
         data: "",
         success: function(msg){
            $('#'+id).html(msg);    
         }
         });
    }
    </script>
    </head>
    
    <body>
    
    <input type="button" value="Set HTML" onclick="SetHtmlAjax('inclusione')"/>
    
    <div id="inclusione"> qui verrà inserito il nuovo codice </div>
    
    </body>
    Chiaramente la pagina : INSEFORM.html, è una pagina pubblicata comunque nel server.

    Basta pigiare il button che nel div ( ' inclusione ' ) si inserisca codificato tutto il contenuto della pagina esterna.

    Grazie di cuore per i vostri opportuni suggerimenti, che anche adesso saranno ben accetti.

    Buona settimana e complimenti per tutto

    Domenico
    "Considerate la vostra semenza:
    fatti non foste a viver come bruti,
    ma per seguir virtute e canoscenza"

+ Rispondi al Thread
Pagina 1 di 2 12 ultimoultimo

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi