..:: Aiuto con il computer e non solo... The Help Center ::..
> Linguaggi di Programmazione

Problema con javascript caricamenti di pagine esterne in un div

(1/4) > >>

frainter95:
Salve a tutti mi servirebbe una mano per un sito semplice, sono agli inizi della creazione ma ho un piccolo problema:

la mia pagina consiste una pagina principale che un div centrale in cui vengono caricate pagine esterne.
il problema il seguente:

questa la pagina principale:
Clicca (Mostra/Nascondi)<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="cssmenu/styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>Progetto</title>
   
   
    <style>
        body { background: url(imm/Sfondo.jpg) no-repeat center 0px; padding-top:20px;}
   
   
   div#head{
            width:89%;
            height:220px;
       background-image:url(imm/Head12.jpg);
            background-repeat: no-repeat;
   }
   
   div#container{
       width: 50%;
            margin: 0px auto;
   }
   
   div#display{
                overflow: Auto;
                height: 600px;
                width: 829.7px;
                margin: 0px;
                padding: 5px;
      background-image: url(imm/display1.png);
                scrollbar-base-color: #000000;
                scrollbar-arrow-color: #CCCCCC;
                scrollbar-track-color: #CCCCCC;
        }
   div#footer{
       width: 848px;
                text-align:center;
                font-size: 10px;
                background-color: grey;
      display: block;
   }
    </style>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="loader.js"></script> 
</head>
<body>
   <div id="container">
      
       <div id="head">
   
       </div>
      <div id="page">
      
          <div id='cssmenu'>
         <ul>
             <li><a href='#' id="home" title="Home"><span>Home</span></a></li>
             <li><a href='#' id="ChiSiamo" title="Chisiamo"><span>Chi Siamo</span></a></li>
             <li><a href='#' id="Contatti" title="Contatti"><span>Contatti</span></a></li>
             <li><a href='#' id="Servizi" title="Servizi"><span>Servizi</span></a></li>
             <li><a href='#' id="Progetti" title="Progetti"><span>Progetti</span></a></li>
             <li><a href='#' id="Sudinoi" title="Su di noi"><span>Su di noi</span></a></li>
             <li class='last'><a href='#' id="Photogalley" title="Photo-gallery"><span>Photo-Gallery</span></a></li>
         </ul>
          </div>
         <div id="display">
   
         </div>
         <div class="clear"></div>
             <div id="footer">
            <font color=white><p>Posted by: Marco Osio</p><p>Contact information: <a href="mailto:marcoosio@alice.it">marcoosio@alice.it</a></p></font>
             </div>
      </div>
   </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="loader.js"></script>
</body>
</html>
e questa e un loader javascript per il caricamento:
Clicca (Mostra/Nascondi)$(document).ready(function(){
    $("#display").load("home1.html");
    $("#Home").click(function(){
        $("#display").load("Home1.html");
    });
    $("#Chisiamo").click(function(){
        $("#display").load("Chisiamo.html");
    });
    $("#Contatti").click(function(){
        $("#display").load("Contatti.html");
    });
    $("#Servizi").click(function(){
        $("#display").load("Servizi.html");
    });
    $("#Progetti").click(function(){
        $("#display").load("Progetti.html");
    });
    $("#Sudinoi").click(function(){
        $("#display").load("Sudinoi.html");
    });
    $("#Photogallery").click(function(){
        $("#display").load("Photogallery.html");
    });
});
non capisco il problema per cui non mi carica ad esempio la pagina contatti che questa:
Clicca (Mostra/Nascondi)<p>
    <div id="titolo">
        <h1><font color:"white">Come contattarmi</font></h1>
    </div>
</p>
all'interno del div chiamato display

Vi prego aiutatemi grazie mille per l'aiuto.

edi67:
Per prima cosa ti chiedo se hai pubblicato la pagina in internet giusto per vedere anche gli elementi pagina, seconda cosa ti faccio notare che nel loader javascript richiami la pagina home1 prima con la prima lettera iniziale minuscola e poi la richiami con la maiuscola siccome i codici java sono case sensitive e fanno differenza tra maiuscole e minuscole ed anche html crea a volte problemi.

frainter95:
Ah ok grazie edi ora ho modificato il file:
Clicca (Mostra/Nascondi)$(document).ready(function(){
    $("#display").load("Home.html");
    $("#home").click(function(){
        $("#display").load("Home1.html");
    });
    $("#Chisiamo").click(function(){
        $("#display").load("Chisiamo.html");
    });
    $("#Contatti").click(function(){
        $("#display").load("Contatti.html");
    });
    $("#Servizi").click(function(){
        $("#display").load("Servizi.html");
    });
    $("#Progetti").click(function(){
        $("#display").load("Progetti.html");
    });
    $("#Sudinoi").click(function(){
        $("#display").load("Sudinoi.html");
    });
    $("#Photogallery").click(function(){
        $("#display").load("Photogallery.html");
    });
});
no edi non ho caricato niente in internet perch uso i servizi di xampp.

nel codice cos facendo ma carica solo la pagina iniziale dentro al div... riusciresti a correggermi il codice...non riesco a capire dove sta il problema se nel primo caricamento del div o nel codice successivo.  Grazie mille.

edi67:
come mai nel codice hai una Home ed una Home1 ? richiamata dall stesso comando devi spiegarmi meglio.

Inoltre il TAG ID messo cosi:

<a href='#' id="Contatti" title="Contatti"><span>Contatti</span></a>

punta ad un link vuoto che una volta cliccato non porta a nulla se non alla pagina stessa in pratica il tuo menu non serve a nulla in quando href='#' rimane sempre in quella pagina.

Devi spiegarmi meglio altrimenti rimaniamo qui a non capirci, stai usando dei riferimenti interni del marcatori NAME? a seguito del cancelleto # deve esserci il nome della pagina che vuoi visitare #Contatti.

o quanto meno cosi a href='Contatti.html

frainter95:
Io uso i riferimenti name non metto il link perche attraversk il loader carico diverse pagine in un dicve ho una home1 perche la prima volta che viene caricata la pagina deve essere caricata la home in questo caso si chiama home1.html mentre la pagina Home.html la pagina principale in cui vengo caricati all'interno del div id="display" praticamente funzione cosi:
Accedi al sito e la prima cosa che carica nel div la home1 succesivamente se seleziono nel menu la pagina per esempio contatti viene caricata attraverso la funzione del loader la pagina Contatti.html

Grazie mille davvero per l'aiuto.

Navigazione

[0] Indice dei post

[#] Pagina successiva

E' avvenuto un errore mentre ringraziavi
Ringraziando...
Vai alla versione completa