11496 sujets

JavaScript, DOM et API Web HTML5

Changement de contenu de page sans changement de header

bonjour à tous , j'ai un site web et je veux que le header de site contenant les pages comme accueil,photo, video soit fixe alors que le contenue se change d’après ce que j'ai vus sur internet il s'agit de navigation ajax mais quelqu’un peut m'expliquer le principe, merci d'avance
Pour l'ajax, vous pouvez étudier la fonction .load() de jQuery.

Mais a priori ce que vous cherchez se trouve plutôt au niveau de l'include php. Par exemple :
<?php
include('header.php');

/* mon contenu html et boucles php pour cette page */

include('footer.php');

?>

Avec, donc, une page header.php et footer.php unique.

Vous obtiendrez sensiblement la même chose avec require :
<?php

require 'header.php';

/* mon contenu html et boucles php pour cette page */

require 'footer.php';

?>

La gestion des erreurs en cas de fichiers manquants à l'appel ne sera pas la même.
j'ai essayer de façon suivante :
head.php

<html>
<head>
<style>

ul.tabs {
    float: left;
    line-height: 27px;
    list-style-type: none;
    margin: 0;
    max-height: 35px;
    overflow: hidden;
    padding-right: 20px;
}

ul li {
    display: block;
    float: left;
    position: relative;
}
ul.tabs > li {
    background: none repeat scroll 0 0 #C4D5E3;
    border: 1px solid #689DF3;
    border-top-left-radius: 26px 199px;
    border-top-right-radius: 23px 199px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    color: #000000;
    cursor: pointer;
    float: left;
    height: 136px;
    margin: 10px -10px 0 -8px;
    max-width: 200px;
       padding: 0 20px;
    position: relative;
}
</style>
</head>
<body>
<div id="menu">
<ul class="tabs clearfix">	

								<li style="background: none repeat scroll 0% 0% rgb(196, 213, 227);"><a class=" menu_is_selected ajax_link" href="http://development.www.chatpassion.org/">
Accueil</a>
								</li>


								<li style="background: none repeat scroll 0% 0% rgb(196, 213, 227);"><a class="ajax_link" href="http://development.www.chatpassion.org/rencontre/">
Rencontre</a>
								</li>

								<li style="background: none repeat scroll 0% 0% rgb(196, 213, 227);"><a class="ajax_link" href="http://development.www.chatpassion.org/photo/">
Photos</a>
								</li>

								<li style="background: none repeat scroll 0% 0% rgb(255, 251, 237);"><a class="ajax_link" href="http://development.www.chatpassion.org/video/">
Videos</a>
								</li>

								<li style="background: none repeat scroll 0% 0% rgb(196, 213, 227);"><a class="ajax_link" href="http://development.www.chatpassion.org/music/">
Musique</a>
								</li>

								<li style="background: none repeat scroll 0% 0% rgb(196, 213, 227);"><a class="ajax_link" href="http://development.www.chatpassion.org/pages/">
Pages</a>
								</li>

								<li style="background: none repeat scroll 0% 0% rgb(196, 213, 227);"><a class="ajax_link" href="http://development.www.chatpassion.org/blog/">
Blogs</a>
								</li>

								<li style="background: none repeat scroll 0% 0% rgb(196, 213, 227);"><a class="ajax_link" href="http://development.www.chatpassion.org/forum/">
Forum</a>
								</li>

								<li style="background: none repeat scroll 0% 0% rgb(196, 213, 227);" ><a class="ajax_link" href="http://development.www.chatpassion.org/poll/">
Sondages</a>
								</li>

								<li style="background: none repeat scroll 0% 0% rgb(196, 213, 227);" ><a class="ajax_link" href="http://development.www.chatpassion.org/quiz/">
Quizz</a>
								</li>

								<li style="background: none repeat scroll 0% 0% rgb(196, 213, 227);" ><a class="ajax_link" href="http://development.www.chatpassion.org/marketplace/">
Bon Plan</a>
								</li>
									
						</ul>
                        </div>
</body>
</html>

index.php

<html>
<head>
</head>
<body>
<?php
require 'header.php';
?>
<div>
hello world! <br>
waaaaaaaaaaaaaaaaaaw
</div>
</body>
<html>

mais le header.php ne s'affiche pas dans index.php
Modifié par la-ilaha-ila-allah (28 Jan 2014 - 15:57)
Certainement un problème d'adresse, comme souvent dans ce genre de cas...

L'orthographe du fichier est-elle correcte (header.php, head.php) ? De plus, selon ce que vous avez spécifié, les deux fichier doivent se trouver au même niveau.

J'utilise require sur toutes mes pages php. Pas de problème pour cette fonction php ultra basique.
Salut,
Je sais pas si le problème vient de la mais tu utilises mal la fonction require.
Pour le principe de fonctionnement, en gros, c'est que ça va insérer le code html à l'endroit ou tu fais le include. Et dans ton cas, ça ne va pas être du html valide. La si on insère le code la ou tu as mis require, on se retrouve a avoir les balises html head body qui s'ouvrent et se ferment en plein milieu du body de la page ou tu insères.
Je sais pas si c'est clair, mais en gros une fois la page reconstruite, il faut un seul balisage html head body
Modifié par mathieu1004 (29 Jan 2014 - 09:38)
merci bien ce fonctionnel , c'était ma faute , j'ai une autre question si ça ne vous dérange pas , ça cause un problème si j'utilise cette fonction avec une applet java ?
merci bien pour votre temps Smiley smile
Je ne pense pas que cela pose de problème, mais bon les applets java .. c'est pas franchement a la mode on va dire ^^. Tu risques de passer à coté de pas mal de personne qui ont java désactivé sur leur navigateurs ( assez mauvaise réputation d'avoir des failles de sécurités :s )
tu n'as pas moyen de faire autrement qu'avec des applets java ?
Sujet clos
Aller à