[AJAX] Chargement dynamique de CSS

**drannh** · 19/12/2006, 10h12

Salut à tous,

J'ai un gros soucis avec CSS et AJAX.
En gros, j'obtiens un résultat différent avec AJAX et sans, en utilisant le même fichier CSS.
Il est un petit peu difficile d'expliquer exactement ce qu'il se passe comme cela, aussi je vais vous donner ce qu'il faut pour le répliquer.

Voila ce que ça donne sans AJAX. Les box suivent le resize de la fenêtre.. sous IE6 du moins, pas encore testé sous firefox.

<html>
<head>
<meta http-equiv="Content-Language" content="fr-be">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
.menu {
width: 20%;
border: 1px solid #000000;
padding: 1em ;
}
.content {
position: absolute;
right: 1;
border: 1px solid #000000;
padding: 1em 1%;
width: 80%;
}
</style>
<title>Universal Client</title>
</head>

<body>
<div class="content">
content
</div>
<div class="menu">
menu
</div>
</body>
</html>

Reproduire sous ajax :

Mettre ce script de DynamicDrive en place :
http://www.dynamicdrive.com/dynamici...jaxcontent.htm
et l'appeler avec le CSS que vous avez externalisé :
<a href="javascript:ajaxpage('test.htm', 'contentarea'); loadobjs('MesBoxQuiFoirent.css')">test</a>
Le lien est chargé dynamiquement et là, le résultat du CSS n'est pas pareil. Le box de droite se trouve tout a droite et ne touche plus du tout au premier.
Donc, comment dire... euh.. HELP

Merci,
Seb.

**FremyCompany** · 24/12/2006, 13h00

Le problème est connu... mais je ne crois pas qu'une solution aie été trouvée...

J'ai bien créé une fonction setInnerHTML qui résout quelques problèmes comme la "disparition" d'ID, la non-évalution de script, ... mais je ne crois pas que cela résolve ce problème (du moins on ne m'a pas averti de son effecicatié à ce genre de problème).

Le code se trouve la : http://www.developpez.net/forums/sho...9&postcount=18

Tu peux tjrs essayer et me dire si ca marche, mais j'ai des doutes...

**dingoth** · 26/12/2006, 12h09

1° Appeler ton fichier CSS.

Normalement, ceci devrait fonctionner.

Code :

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

1
2
3
4
5
6
var cssheet = document.createElement('link');
cssheet.setAttribute('rel','alternate stylesheet');
cssheet.setAttribute('type','text/css');
cssheet.setAttribute('href',tonUrl);
cssheet.setAttribute('media','all'); // éventuellement.
document.getElementsByTagName('head').appendChild(cssheet);

Une autre solution consisterait à nommer ta seconde feuille css dans le <head> de ton fichier HTML mais comme ceci :

Code :

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

<link rel="alternate stylesheet" type="text/css" href="TonURL" media="all" />

.

2° Activer ce CSS.
Trouvé sur le site que tu mentionnes : http://www.dynamicdrive.com/dynamici...etswitcher.htm

[AJAX] Chargement dynamique de CSS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager