Problema apertura link

marcoint

Utente Attivo
8 Gen 2014
58
0
0
Salve a tutti, sto svolgendo un importante progetto a scuola che prevede la creazione di un sito per un tour operator utilizzando qualsiasi linguaggio a nostra disposizione (html,php,java,e css). Anche se non li abbiamo studiati tutti il professore ci ha dato libera scelta. Io mi sono creato il layout del sito tramite css quindi creando un HEADER della pagina una SIDEBAR con dei link, una parte MAIN ed un FOOTER. Adesso vorrei sapere come si può fare, in qualunque modo e con qualunque linguaggio a far aprire la pagina dei link sulla sinistra nella porzione <div class=main> della pagina. Il professore mi aveva suggerito la PHP_SELF anche se approfondendo in tal senso non sono riuscito a fare un bel niente..

Grazie a chiunque mi aiuterà, ripeto il metodo da utilizzare è qualsiasi così come il linguaggio anche se è preferibilmente html-php :)
Metto una foto per far capire quello che voglio fare. Per qualsiasi dubbio sulla domanda sono disponibile qui o via mp, per piacere aiutatemi ;)
esempio.jpg
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao e Benvenuto
Il mio consiglio è quello di utilizzare la tecnologia ajax : cambi il contenuto del div senza ricaricare la pagina
qui trovi un semplice esempio
Se vuoi usare anche php ricordati che l'estensione delle pagine deve essere .php : quella che hai postato è .htm
 

marcoint

Utente Attivo
8 Gen 2014
58
0
0
Ciao e Benvenuto
Il mio consiglio è quello di utilizzare la tecnologia ajax : cambi il contenuto del div senza ricaricare la pagina
qui trovi un semplice esempio
Se vuoi usare anche php ricordati che l'estensione delle pagine deve essere .php : quella che hai postato è .htm
Si grazie mille per la risposta hai capito perfettamente cosa intendevo. Ho visto però che il metodo che suggerisci lì prevede javascript linguaggio che ho fatto poco e niente quindi non so se saprei giostrarmi per utilizzare al meglio il sito. Tengo ovviamente in considerazione la proposta e nel caso non ce ne siano altre proverò ad utilizzarla. Aspetto comunque qualche altra proposta semplice ed efficace, sbizzarritevi. Per quanto riguarda il fatto del .htm era solo per far vedere il layout del sito e cosa avevo in mente di fare, non ho ancora implementato niente di php.
PS: nel frattempo provo ad utilizzare il tuo metodo :)
 

marcoint

Utente Attivo
8 Gen 2014
58
0
0
Il mio menu è questo:
HTML:
<!--SIDE BAR-->

<div class="sidebar">
<p align=center><a href="#">Menu principale: </a></p>
&raquo; <img src="Home.png" height=33 width=33 align=center>   <a href="#">Home</a> 
<br><br>
&raquo;   <img src="albergo.gif" height=23 width=23  id="immaginimenu" align=center>   <a href="menucomuni.htm">Alberghi</a>
<br><br>
&raquo; <img src="agriturismo.jpg" height=23 width=23  id="immaginimenu" align=center> <a href="#">Agriturismi</a>
<br><br>
&raquo; <img src="ristorante.jpg" height=24 width=24  id="immaginimenu" align=center> <a href="#">Ristoranti</a>
<br><br>
&raquo; <img src="bedandbreackfast.jpg" height=23 width=23  id="immaginimenu" align=center> <a href="#">Bed&Breackfast</a>
<br><br>
&raquo; <img src="lowcost.jpg" height=23 width=23  id="immaginimenu" align=center> <a href="#">Vacanze Low Cost</a>
<br><br>
&raquo; <img src="fivestars.jpg" height=23 width=23  id="immaginimenu" align=center> <a href="#">Vacanze a 5 stelle</a>
<br><br>
<hr>
<p align=center><a href="#">Conosci la città:</a></p>
&raquo; <img src="map.jpg" height=23 width=23  id="immaginimenu" align=center> <a href="#">Mappa Città</a>
<br><br>
&raquo; <img src="impronta.gif" height=23 width=23  id="immaginimenu" align=center> <a href="#">A piedi nella storia</a>
<br><br>
&raquo; <img src="impronta.gif" height=23 width=23  id="immaginimenu" align=center> <a href="#">Le Tradizioni</a>
<br><br>
&raquo; <img src="tufo.jpg" height=23 width=23  id="immaginimenu" align=center> <a href="#">Un tufo nel passato</a>
<br><br>
</div>
E su ogni link ci vorrei fare la chiamata ajax nel div content.
 

flameseeker

Utente Attivo
27 Nov 2013
699
0
0
Con il selettore di jquery selezioni tutti i link sotto sidebar e poi imposti la richiesta.

Un esempio:
Codice:
// assegno un evento sulla pressione di uno qualsiasi dei link del menù
$('.sidebar a').click(function(e){
    // prevengo il funzionamento normale del browser che mi rimanderebbe all'url del link
    e.preventDefault();

    // effettuo invece una richiesta in ajax grazie a quella url
    $.get($(this).attr('href'))
        .done(function(data) {
            // in caso di riuscita scrivo il responso nel div main
            $('.main').html(data);
        });

});
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Aggiungo allo script di flameseeker un paio di correzioni sull HTML
script completo
HTML:
<html>
    <head>
        <title>Example</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script  type="text/javascript">
            $(document).ready(function() {
                // assegno un evento sulla pressione di uno qualsiasi dei link del menù
                $('.sidebar a').click(function(e) {
                    // prevengo il funzionamento normale del browser che mi rimanderebbe all'url del link
                    e.preventDefault();
                    // effettuo invece una richiesta in ajax grazie a quella url
                    $.get($(this).attr('href')).done(function(data) {
                        // in caso di riuscita scrivo il responso nel div main
                        $('.main').html(data);
                    });
                });
            });

        </script>
        <style type="text/css">
            .sidebar {
                float:left;
                width: 220px;
                background-color: #999;
            }
            .main {
                float:left;
                width: 620px;
                background-color: #999;
            }
            img.immaginimenu {
                height:23px;
                width: 23px;
            }
        </style>
    <body>
        <div class="sidebar">
            <p align=center>
                <a href="#">Menu principale: </a>
            </p>
            <!-- l'attributo alt per le immagini è obbligatori  -->
            <!-- non puoi assegnare lo stesso id a piu di un elemento nella stessa pagina  -->
            &raquo; <img src="Home.png" class="immaginimenu" alt="home"/>   
            <a href="home.html">Home</a> 
            <br/><br/>
            &raquo;   <img src="albergo.gif"  class="immaginimenu" alt="albergo">   
            <a href="alberghi.html">Alberghi</a>
        </div>
        <div class="main">

        </div>
    </body>
</html>
ovviamente nella stessa cartella dovrai avere i file home.html , alberghi.html etc etc
 

marcoint

Utente Attivo
8 Gen 2014
58
0
0
Ragazzi grazie mille però applicando il codice al sito praticamente non funge. Cioè la pagina prova1.html la apre in una scheda nuova. Magari vi posto il codice forse riuscite a trovare l'errore, grazie per tutto quello che fate. PS: Volevo chiedere se con questo modo delle chiamate ajax fosse possibile aprire nel <div class=main> della mia INDEX.HTML una PAGINA.PHP e di conseguenza lavorarci sopra.
HTML:
<html>
<head>
<title> Progetto></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="stylemasonery2.css">

<!--SCRIPT AJAX-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script  type="text/javascript">
            $(document).ready(function() {
                // assegno un evento sulla pressione di uno qualsiasi dei link del menù
                $('.sidebar a').click(function(e) {
                    // prevengo il funzionamento normale del browser che mi rimanderebbe all'url del link
                    e.preventDefault();
                    // effettuo invece una richiesta in ajax grazie a quella url
                    $.get($(this).attr('href')).done(function(data) {
                        // in caso di riuscita scrivo il responso nel div main
                        $('.main').html(data);
                    });
                });
            });

        </script>
</head>

<body>
<div class="content">

<!--HEADER DELLA PAGINA-->

<div class="header">
<img src="logo.png" width=380 height="100%" id="titolo"> 
<br><br><br>
<blockquote id="citazione">" Non esiste vento favorevole per <br>il marinaio che non sa dove andare "<br> Seneca</blockquote>
<form id="search-btn" action="" method="get">
		
		    
			
		
	             <input type="text" name="q" id="q" />
	             <input type="image" src="search.png" name="search-glass" id="search-glass" alt="Search" />
			
		
		</form>



</div>

<!--SIDE BAR-->

<div class="sidebar">
<p align=center><a href="#">Menu principale: </a></p>
&raquo; <img src="Home.png" height=33 width=33 align=center>   <a href="#">Home</a> 
<br><br>
&raquo;   <img src="albergo.gif" height=23 width=23  class="immaginimenu" align=center>   <a href="menucomuni.htm">Alberghi</a>
<br><br>
&raquo; <img src="agriturismo.jpg" height=23 width=23  class="immaginimenu" align=center> <a href="#">Agriturismi</a>
<br><br>
&raquo; <img src="ristorante.jpg" height=24 width=24  class="immaginimenu" align=center> <a href="prova1.html">prova1</a>
<br><br>
&raquo; <img src="bedandbreackfast.jpg" height=23 width=23  class="immaginimenu" align=center> <a href="#">Bed&Breackfast</a>
<br><br>
&raquo; <img src="lowcost.jpg" height=23 width=23  class="immaginimenu" align=center> <a href="#">Vacanze Low Cost</a>
<br><br>
&raquo; <img src="fivestars.jpg" height=23 width=23  class="immaginimenu" align=center> <a href="#">Vacanze a 5 stelle</a>
<br><br>
<hr>
<p align=center><a href="#">Conosci la città:</a></p>
&raquo; <img src="map.jpg" height=23 width=23  class="immaginimenu" align=center> <a href="#">Mappa Città</a>
<br><br>
&raquo; <img src="impronta.gif" height=23 width=23  class="immaginimenu" align=center> <a href="#">A piedi nella storia</a>
<br><br>
&raquo; <img src="impronta.gif" height=23 width=23  class="immaginimenu" align=center> <a href="#">Le Tradizioni</a>
<br><br>
&raquo; <img src="tufo.jpg" height=23 width=23  class="immaginimenu" align=center> <a href="#">Un tufo nel passato</a>
<br><br>
</div>
<!--CONTENUTI PRINCIPALI-->

<div class="main">
<strong><p id="titolo">La città di Matera</p></strong>
<div id="container" class="cols">
    <div class="box twelve"></div>
    <div class="box eleven"></div>
    <div class="box ten"></div>
    <div class="box nine"></div>
    <div class="box eight"></div>
    <div class="box seven"></div>
    <div class="box six"></div>
    <div class="box five"></div>
    <div class="box four"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box one"></div>
</div>
</div>


<!--FOOTER-->


<div class="footer">
<div class="copyright">
 <a href="#">Contattaci</a> <br>
[| <a href="#">Home Page</a> | <a href="#">Faq</a> | <a href="#">Crediti</a> | <a href="#">Chi siamo?</a> |]<br>
©2013 Tutti i diritti riservati. Vietato utilizzare informazioni previa autorizzazioni di <a href="#">Sassi e Secoli.it</a></div>
</div>
</div>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
la pagina prova1.html la apre in una scheda nuova.
A me funziona, sicuro di aver incluso la libreria jquery? sei collegato a internet quando provi?
HTML:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
fosse possibile aprire nel <div class=main> della mia INDEX.HTML una PAGINA.PHP
Certo , cambi lestensione nel link
HTML:
<a href="prova1.php">Prova 1</a>
PS: sposto la discussione in jquery
 
Ultima modifica:

marcoint

Utente Attivo
8 Gen 2014
58
0
0
Non so cosa vuol dire aver incluso la libreria jquery.. Il codice è quello che vedi li..
Si sono connesso ad internet e la
HTML:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
mi sembra di averla messa nello script ajax.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
il codice che hai postato funziona , non capisco perchè a te non va. Hai un esempio online da postare o stai lavorando in locale?
 

marcoint

Utente Attivo
8 Gen 2014
58
0
0
Sto lavorando in locale... Comunque ripeto che lo apre su un'altra finestra.. Magari vi posto il css forse gli errori sono lì..
HTML:
body {font-family: Centaury Gothic, Arial;
       background-image: url(sfondo.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100%;

      margin:0 auto;
      }

.content { width: 910px;
           margin: 20px auto 0px auto;
           text-align:center;
          } 

.header{ margin: 0 auto;
         height : 140px;
         background-color: #999999;
         border: 1px dashed #666666;
         font-size: 18px;
         color: #333333;
        }

img#titolo{float:left;
           margin: 0 auto;
           clear:both;
          }

#citazione {text-align:right;
            font: italic 16px arial, sans-serif;
             float:right;
             margin: auto 15px 0 auto;
              }

#inlineimage { position: absolute;
               top : 70px;
               right: 70px;
               width : 300px;
}
 
#search-btn   { position: absolute;
	display: block;
	top: 33px;
	right: 350px;
        margin: 0;
}     
 #search-glass   { position: absolute;
	display: block;
	top: 5px;
	right: 5px;
        margin: 0;
}     



.sidebar {  width: 200px;
           float: left;
           text-align: left;
           padding: 10px;
           background-color: #999999;
           border: 1px dashed #666666;
           font-size: 18px;
           color: #333333;
           margin: 8px auto 5px auto;
         }

.immaginimenu{ margin-right: 7px;
               margin-left: 7px;    }

.main {    width: 680px;
           float: right;
           background-color: #999999;
           border: 1px dashed #666666;
           font-size: 22px;
           color: #333333;
           margin: 8px auto 5px auto;
}

p#titolo{font-size:45px;
text-shadow: -1px -1px 0 #0099ff, 1px -1px 0 #0099ff, -1px 1px 0 #0099ff, 1px 1px 0 #0099ff;
margin-top:7px;
}

a:link {
	color: black;
	text-decoration:none;
}

a:active {
	background-color: yellow;
	text-decoration:none;
}
a:hover { 
          font-weight:bold;
	  text-decoration: underline;
}

.footer { padding: 0,5em;
          width: 910px;
          background-color: #000;
          position:relative;
          bottom: 0;
          margin: 30px auto auto auto;
           background-color: #999999;
           border: 1px dashed #666666;
           text-align:center;
           clear: both;
}

.copyright { font-size: 15px:
             font-style: italic;
             text-align : center;
           }
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Il css non c'entra, ho copiato e incollato il codice che hai scritto su una pagina online, guarda qui
come puoi vedere se premi su "prova1" cambia il contenuto del div come volevi
Il perchè a te non funziona non lo so
forse non ha salvato la pagina o non hai copiato tutto il codice, non saprei
al massimo puoi usare firefox e installarti l'estensione firebug e da li capire quale puo essere il problema
 

marcoint

Utente Attivo
8 Gen 2014
58
0
0
Allora copiando ed incollando la sorgente della tua pagina online in un nuovo documento e creando una pagina1.html nuova, praticamente con internet explore non fa nulla di nulla e su prova1 rimanda su un'altra scheda mentre aprendo con google chrome i link inattivi ( quelli con HREF="#") li apre sulla stessa pagina, mentre su prova1 all'evento click non succede nulla. Come caspita è possibile :(
PS: Ovviamente grazie per tutto il tempo che stai perdendo con me ;)
 

marcoint

Utente Attivo
8 Gen 2014
58
0
0
La cosa strana è che un altro mio amico provando online il codice, funziona. Mentre io che lavoro in locale ed un altro amico mio che lavora in locale a cui ho passato lo stesso codice, ha gli stessi miei problemi. Ma non sarà che la chiamata ajax non funziona in locale?
 

marcoint

Utente Attivo
8 Gen 2014
58
0
0
Ok ho risolto. Mettendolo online su altervista funziona. Solo una cosa non riesco a fare. Praticamente se clicco su home anche la home mi si aprirà nel div main. Come faccio invece a ritornare alla pagina iniziale?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ma non sarà che la chiamata ajax non funziona in locale?
no non può essere, ma , non me lo spiego
Come faccio invece a ritornare alla pagina iniziale?
puoi provare modificando questa riga
Codice:
$('.sidebar a').click(function(e) {
cosi
Codice:
$('.sidebar a').not(":first").click(function(e) {
dovrebbe saltarti il primo link ma non ho testato

prova anche cosi
Codice:
$('.sidebar a').click(function(e) {
       if ($(this).attr('href') == "home.html") {
             return;
       }
etc .etc.
 
Ultima modifica:

marcoint

Utente Attivo
8 Gen 2014
58
0
0
Fatto nel secondo modo e funziona. Comunque per far si che tutti i link della pagina si aprano nel <div main> tranne la home bisognerebbe modificare tutto lo script ajax?
Ovviamente grazie sempre per l'aiuto ;)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
scrivendo cosi
Codice:
$('.sidebar a').click(function(e) {
ti riferisci a tutti i tag <a> del div con classe sidebar
se invece scrivi
Codice:
$('a').click(function(e) {
ti riferirai a tutti i tag <a> in generale, ma non potrai avere link esterni se non specificati come la home.html