Problema con javascript caricamenti di pagine esterne in un div
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
Vai alla versione completa