Discussion :

[HWICE]

Bonjour a tous,
J'ai créé un site avec 8 pages. Dans mon index je mets tout, il y a juste le contenu d'un div qui change et le css. Donc jai 8 css, un pour chaque page. J'ai fait le tout en php mais j'aimerai que la page reload pas. J'ai trouver comment faire en ajax. Tout fonctionne mais il y a quand meme une sorte de « flashement ». J'ai installer ajax justement pour que ca ne flash pas. voici le code
index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script type='text/JavaScript'>
var xhr = null; 
function getXhr()
{
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject)
  { 
  try{
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
}
 
function ShowPage(page)
{
getXhr();
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('texte').innerHTML=xhr.responseText;
     }
    }
xhr.open("GET","ajax.php?page="+page,true);
xhr.send(null);
}
 
</script>
<div id="joli" class="cjolifou"><a href="#" onClick="ShowPage('jolis')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('jolifous','','images/jolifouO.png',1)"><img src="images/jolifou.png" name="jolifous" width="160" height="30" border="0"></a></div>

ajax.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
 
$page=$_GET['page'];
     if($page==$_GET['page']){
     include "francais/include/".$_GET['page'].".php";
     }
     else{
      require "francais/include/accueil.php";
     }
 $page=$_GET['page'];?>
<?php 
 
if ($_GET['page']!=''){
    if ($_GET['css'] !=''){
        $css=$_GET['css'];
        }
    else{
        $css=$_GET['page'];
        }
    }
else {
$css='accueil';}?>
<link href="css/jolifou_<?php echo "$css" ?>.css" rel="stylesheet" type="text/css">

Comment éviter ce « flashement »

merci de votre aide

[DoubleU]

Ce clignotement est normal, puisqu'il faut le temps que le navigateur charge ton css. A partir du moment ou tu affiches la structure html avant d'avoir chargé le css, tu l'as obligatoirement.

Une solution possible serait de charger ton css avant ta page via une première requpete synchrone (mais qui peut causer un freeze du navigateur).

L'autre solution, serait d'avoir tous tes css dans le même fichier...

[HWICE]

Le truc c'est que mes 8 css differant c'est pour que mon tableau, qui est former uniquement de div avec des couleur de fond et de contour, change de couleur quand tu change de page. Mon site est fait style Mondrian

[DoubleU]

J'ai suis pas sur d'avoir tout compris, mais si c'est juste pour changer la couleur de fond de la div qui représente ta page active, tu devrais pouvoir te contenter de la changer via javascript?

Genre au moment ou tu fais ton appel Ajax, tu fais aussi un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

madiv.style.backgroundColor = "red"

[HWICE]

a tester merci


mais jai changer mon site alors...
merci