ne raffraichir qu'une seule div

ne raffraichir qu'une seule div - PHP - Programmation

Marsh Posté le 28-12-2007 à 16:18:41    

Bonjour
 
 
j'ai réalisé un site avec 3 div.
celle du haut avec le menu + bandeau flash, une au milieu pour le contenu et une en pied avec aussi une anim flash.
Mon problème, c'est qu'à chaque changement de rubrique, le bandeau flash se recharge et repart au début.
j'utilise comme méthode une fonction php include.
Comment faire pour ne recharger que la div centrale de ma page?
 
 
voici le liens vers le site en test : http://jambette.free.fr/delphis/index2.php
 
merci d'avance pour vos réponses
voici le code de ma page

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>delphis</title>
  6. <style type="text/css">
  8.     <!--
  10.     body {
  11. background: #666666;
  12. margin: 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
  13. padding: 0;
  14. text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
  15. color: #000000;
  16. background-color: #47292A;
  17. font-family: Verdana, Arial, Helvetica, sans-serif;
  18. font-size: 100%;
  19.     }
  20. a:link {
  21. font-family: Arial, Helvetica, sans-serif;
  22. font-size: 12px;
  23. font-style: normal;
  24. color: #D28E04;
  25. text-decoration: none;
  26. }
  27. a:visited {
  28. font-family: Arial, Helvetica, sans-serif;
  29. font-size: 12px;
  30. font-style: normal;
  31. color: #47292A;
  32. text-decoration: none;
  33. }
  34. a:hover {
  35. font-family: Arial, Helvetica, sans-serif;
  36. font-size: 12px;
  37. font-style: normal;
  38. color: #D38E05;
  39. text-decoration: none;
  40. }
  42.     .oneColLiqCtrHdr #container {
  43. width: 100%;  /* ce paramétrage crée un conteneur dont la largeur est 80 % de celle du navigateur */
  44. background: #FFFFFF; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
  45. border: 0px solid #000000;
  46. text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
  47. margin-top: 0;
  48. margin-right: auto;
  49. margin-bottom: 0;
  50. margin-left: auto;
  51.     }
  53.     .oneColLiqCtrHdr #header {
  54. padding-top: 0;
  55. padding-right: 0px;
  56. padding-bottom: 0;
  57. padding-left: 0px;
  58. background-color: #FFFFFF;
  59.     }
  61.     .oneColLiqCtrHdr #header h1 {
  62. margin: 0; /* l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
  63. padding-top: 0px;
  64. padding-right: 0;
  65. padding-bottom: 0px;
  66. padding-left: 0;
  67.     }
  69.     .oneColLiqCtrHdr #mainContent {
  70. padding: 0 20px; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
  71. background: #FFFFFF;
  72. font-family: Verdana, Arial, Helvetica, sans-serif;
  73. font-size: 10px;
  74. color: #333333;
  75.     }
  77.     .oneColLiqCtrHdr #footer {
  78. padding-top: 0;
  79. padding-right: 0px;
  80. padding-bottom: 0;
  81. padding-left: 0px;
  82. height: 38px;
  83. background-color: #DDDDDD;
  84. background-position: bottom;
  85.     }
  87.     .oneColLiqCtrHdr #footer p {
  88. margin: 0; /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */
  89. padding-top: 0px;
  90. padding-right: 0;
  91. padding-bottom: 0px;
  92. padding-left: 0;
  93.     }
  94. .Style1 {color: #47292A}
  95. .menu { position: fixed;
  96. font-family: Arial, Helvetica, sans-serif;
  97. font-size: 11px;
  98. }
  100.     -->
  102.     </style>
  103. <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
  104. <script type="text/javascript">
  105. <!--
  106. function MM_preloadImages() { //v3.0
  107.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  108.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  109.     if (a[i].indexOf("#" )!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  110. }
  111. //-->
  112. </script>
  113. </head>
  115. <body class="oneColLiqCtrHdr">
  116. <?php
  117. #
  118.     // On inclue le haut de la page
  119. #
  120.     include("haut.php" );
  121. #?>
  123. <div id="container">
  125.       <div id="header">
  126.    
  127.       <tr>
  128.     <td bgcolor="#FFFFFF"><img src="medias/blanc_haut_gauche.gif" alt="blanc delphis" width="52" height="39" /><a href=""><img src="medias/btn_acceuil.jpg" alt="accueil" name="accueil delphis" width="130" height="39" border="0" id="accueil delphis" /></a><a href="?page=2" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('prepresse','','medias/btn-prepresse_r.jpg',1)"><img src="medias/btn-prepresse.jpg" alt="prepresse" name="prepresse" width="130" height="39" border="0" id="prepresse" /></a><a href="?page=3" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('impression','','medias/btn-impression_r.jpg',1)"><img src="medias/btn-impression.jpg" alt="impression" name="impression" width="130" height="39" border="0" id="impression" /></a><a href=""><img src="medias/btn-logistique.jpg" alt="logistique" name="logistique" width="130" height="39" border="0" id="logistique" /></a><img src="medias/blanc_haut_droit.gif" alt="blanc delphis" width="262" height="39" /><a href=""><img src="medias/btn-contact.jpg" alt="contact" name="contact" width="132" height="39" border="0" id="contact" /></a></td>
  129.   </tr>
  130.         <!-- fin de #header -->
  131.         <br />
  132.   </div>
  133. <div id="mainContent">
  134.       <?
  135. $page = $_GET['page'];
  136. if ($page=='1') {
  137.     include('accueil.html');
  138. } elseif ($page=='2') {
  139.     include('prepresse.html');
  140. } elseif ($page=='3') {
  141.     include('impression.html');
  142. } elseif ($page=='4') {
  143.     include('logistique.html');
  144. }elseif ($page=='5') {
  145.     include('industrie.html');
  146. }elseif ($page=='6') {
  147.     include('liens.html');
  148. } elseif ($page=='7') {
  149.     include('contact.html');
  150. } elseif ($page=='8') {
  151.     include('finitions.html');
  152. } elseif ($page=='9') {
  153.     include('logistique_promotion.html');
  154. } elseif ($page=='10') {
  155.     include('logistique_marketing.html');
  156. } elseif ($page=='11') {
  157.     include('stockage.html');
  158. } else {
  159.     include('accueil.html');
  160. }
  161. ?>
  162.   <!-- fin de #mainContent --></div>
  164. <div id="footer">
  166.         <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#47292A">
  167.           <tr>
  168.             <td><script type="text/javascript">
  169. AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','500','height','38','title','references delphis','src','medias/texte','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','medias/texte' ); //end AC code
  170.             </script>
  171.                 <noscript>
  172.                 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="500" height="38" title="references delphis">
  173.                   <param name="movie" value="medias/texte.swf" />
  174.                   <param name="quality" value="high" />
  175.                   <embed src="medias/texte.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="500" height="38"></embed>
  176.                 </object>
  177.                 </noscript>
  178.             </td>
  179.             <td><div align="right"><img src="medias/bas.jpg" alt="bas delphis" width="540" height="38" /></div></td>
  180.           </tr>
  181.         </table>
  182.         <p>&nbsp;</p>
  184.   <!-- fin de #footer --></div>
  186. <!-- fin de #container --></div>
  188. </body>
  189. </html>

Reply

Marsh Posté le 28-12-2007 à 16:18:41   

Reply

Marsh Posté le 28-12-2007 à 18:19:20    

web 2.0 + ajax + javascript + xmlhttprequest

Reply

Marsh Posté le 28-12-2007 à 18:26:20    

smartdevil > javascript + xmlhttprequest = (en gros) ajax
web 2.0 = on fait participer les visiteurs

Message cité 1 fois
Reply

Marsh Posté le 28-12-2007 à 18:52:39    

... la pire des solutions étant d'utiliser des frames...
 
Mais au vu du code de ta page, l'intégration d'ajax devrait être relativement légère...

Reply

Marsh Posté le 28-12-2007 à 19:04:38    

je suis bon pour me lancer dans le web 3.0. alors ;)
ça freinera le référencement l'ajax?
merci pour les pistes. Si vous avez un lien vers un bon tuto qui correspondrait à mon cas, n'hésitez pas pour le poster !

Reply

Marsh Posté le 28-12-2007 à 23:30:08    

omega2 a écrit :

smartdevil > javascript + xmlhttprequest = (en gros) ajax
web 2.0 = on fait participer les visiteurs


 
javascript + xmlhttprequest = ajax  oui je suis d'accord
 
par contre le web 2.0 ce n'est pas que la participations des visiteurs mais ne trollons pas en lancant un débat


Message édité par smartdevil le 28-12-2007 à 23:30:27
Reply

Marsh Posté le 30-12-2007 à 15:52:12    

javascript + xmlhttprequest > Exactement ce qu'il te faut.
 
Il y a toujours la bonne vieille solution ( très moche, mais qui marche ):
<iframe></iframe>
 
<quote>je suis bon pour me lancer dans le web 3.0.</quote>
ahah (:


---------------
www.kobhqlt.no-ip.fr
Reply

Marsh Posté le 01-01-2008 à 23:34:52    

et puis n'oublions pas non plus que tous les navigateurs actuels ont tous ce que l'on appelle Un cache :)
 
donc en réalité tes animations flash ne ralentiront le site qu'au premier chargement, après ça devrait aller sans trop de mal.


Message édité par naeh le 01-01-2008 à 23:35:49
Reply

Marsh Posté le 01-01-2008 à 23:39:41    

c'est vrai.
finalement, je vais laisser l'anim se rafraichir à chaque clic et revenir au début
ça n'est peut-être pas si gènant que ça pour l'utilisateur.  :sarcastic:

Reply

Marsh Posté le 01-01-2008 à 23:45:24    

Cache qui n'est pas eternel et limité en taille.


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed