Changement dynamique de classe CSS - IE me gonfle !

Patrick 'Zener' Brunet wrote:

Le problème du jour est de faire bien proprement (donc en CSS) un effet dans
une page Web, l'effet étant simplement déclenché (pas réalisé) par du
Javascript.

Donc en fait le JS assigne un className à un élément et le but est que le
look correspondant soit défini en 100% CSS.

Evidemment ça marche très bien partout sauf avec la crotte qui équipe encore
60% des visiteurs. En fait IE fait la modification de className, mais il ne
retrace pas (ça sert à quoi alors ?).

(...)

Mais, expérimentation à l'appui, ça ne marche pas si les styles sont dans
une CSS séparée plutôt que dans la page elle-même. Au moins sur IE 6.

Je comprend que vous voulez modifier les classes affectées à un élément
dynamiquement par JS, mais que sous IE6 cette modification ne produit
aucun résultat si les classes affectées sont définies dans un CSS
externe, est-ce bien ça ?
Ca me surprend beaucoup ! Pourriez vous mettre en ligne un exemple
simple où tester que l'on comprenne bien ?

Le 10/24/08 3:34 PM, Pierre Goiffon a écrit :

Patrick 'Zener' Brunet wrote:

Le problème du jour est de faire bien proprement (donc en CSS) un
effet dans une page Web,

Je comprend que vous voulez modifier les classes affectées à un élément
dynamiquement par JS, mais que sous IE6 cette modification ne produit
aucun résultat si les classes affectées sont définies dans un CSS
externe, est-ce bien ça ?
Ca me surprend beaucoup ! Pourriez vous mettre en ligne un exemple
simple où tester que l'on comprenne bien ?

Voilà :
<http://cjoint.com/?kys66hP5Jf>
et ça ne pose pas de blème (comme de juste)

Pat' a encore dû nous pondre un truc super alambiqué ?

--
sm

SAM wrote:

<http://cjoint.com/?kys66hP5Jf>
et ça ne pose pas de blème (comme de juste)
Pat' a encore dû nous pondre un truc super alambiqué ?

Oui, là tu l'as fait à base de innerHTML.
Un truc à base de setAttributes() n'aurait pas été plus "propre"?
Puisque c'est justement le but, de changer la valeur de l'attribut "class".

--
Serveurs infogérés:
http://www.infogerance.us/infogerance/packs-serveurs-infogeres

Le 10/25/08 12:50 AM, Rakotomandimby (R12y) Mihamina a écrit :

SAM wrote:

<http://cjoint.com/?kys66hP5Jf>
et ça ne pose pas de blème (comme de juste)
Pat' a encore dû nous pondre un truc super alambiqué ?

Oui, là tu l'as fait à base de innerHTML.

Où ça à base de innerHTML ?

Le innerHTML n'est là qu'en complément, pour rapporter ce qu'il se passe.

Un truc à base de setAttributes() n'aurait pas été plus "propre"?
Puisque c'est justement le but, de changer la valeur de l'attribut "class".

D'abord c'est "setAttribute"
Ensuite, je n'utilise jamais jamais jamais setAttribute

surtout avec "style" ou "className" directement accessibles

(surtout s'il faut espérer causer à un quelconque IE)

Là ici, pour le toggle (balance) il est utilisé :

b.className = b.className==''? 'red' :
b.className=='red'? 'blu' : '';

Pour se servir de setAttribute on va rentrer dans qques complications à
mon sens bien inutiles :

function toggle() {
var b = document.getElementById?
document.getElementsByTagName('body')[0] :
document.body;
var getClass = function() {
return b.getAttribute? document.all? b.getAttribute('class','false') :
b.getAttribute('class'):
b.className;
}
var setClass = function( laClass ) {
if(b.setAttribute) b.setAttribute('class', laClass, 'false');
else b.className = laClass;
}
var couleur = getClass();
couleur = couleur==''||!couleur? 'red' : couleur=='red'? 'blu' : '';
alert(couleur);
setClass( couleur);
}

et en plus, malgré les précautions prises,
ça ne fonctionne pas avec IE ! :-(

Ce con, si on lui setAttribte une class
n'est pas capable ensuite de la retrouver par 'className'

--
sm

Bonjour.

Navré pour le délai: alphanet était en rade ce matin :-/

"SAM" <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> a écrit dans le message
de news: 49020028$0$888$ba4acef3@news.orange.fr...

Le 10/24/08 3:34 PM, Pierre Goiffon a écrit :
> Patrick 'Zener' Brunet wrote:
>> Le problème du jour est de faire bien proprement (donc
>> en CSS) un effet dans une page Web,
>
> Je comprend que vous voulez modifier les classes affectées
> à un élément dynamiquement par JS, mais que sous IE6 cette
> modification ne produit aucun résultat si les classes affectées
> sont définies dans un CSS externe, est-ce bien ça ?
> Ca me surprend beaucoup ! Pourriez vous mettre en ligne un
> exemple simple où tester que l'on comprenne bien ?

Alors je n'ai pas d'hébergement disponible, mais voici une maquette
stand-alone:
http://cjoint.com/?kznZXmikK8 (lien valide 21 jours).

La partie intéressante se trouve dans le DemoWebScripts.js.
Dans l'état fourni, ça marche, mais en retirant la manip brutale qui force
le recalcul complet de la page, plus du tout avec IE 6 pour Windows.

SAM, j'ai essayé aussi le coup du style.display que tu avais suggéré il y a
longtemps sur un autre cas, mais ça ne marche pas mieux chez moi...

Voilà :
<http://cjoint.com/?kys66hP5Jf>
et ça ne pose pas de blème (comme de juste)

En effet, ça marche sur le même IE 6.

Saperlipopette ! Où est la différence ?
Je vois que tu changes la className du <body>...

Je vais voir si ça a un impact (mais de toute manière, chez moi désormais la
class du <body> est réservée pour piloter mon nouveau système de CSS
adaptative...).

Pat' a encore dû nous pondre un truc super alambiqué ?

Ben c'est l'effet démo: on rajoute un truc simplissime sur un site existant
et on est reparti pour une autopsie complète...

Le site concerné est www.ipzb-pro.com sur lequel j'ai rajouté un effet pour
faire remarquer le menu escamotable (il y a des gens qui ne le voient pas).
Ca marche impec sur Firefox et sur IE 5.5, pas sur IE 6.
C'est pourquoi je suis très désappointé, comme dirait Zorg.

--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur http://zener131.eu/ContactMe

Re-

"Patrick 'Zener' Brunet" <use.link.in.signature@ddress.invalid> a écrit dans
le message de news: gdv2t1$3re$1@shakotay.alphanet.ch...

"SAM" <stephanemoriaux.NoAdmin@wanadoo.fr.invalid>
a écrit dans le message
de news: 49020028$0$888$ba4acef3@news.orange.fr...
> Le 10/24/08 3:34 PM, Pierre Goiffon a écrit :
> > Patrick 'Zener' Brunet wrote:
> >> Le problème du jour est de faire bien proprement
> >> (donc en CSS) un effet dans une page Web,
> > [...]

Alors je n'ai pas d'hébergement disponible, mais voici une
maquette stand-alone:
http://cjoint.com/?kznZXmikK8 (lien valide 21 jours).


> Voilà :
> <http://cjoint.com/?kys66hP5Jf>
> et ça ne pose pas de blème (comme de juste)

En effet, ça marche sur le même IE 6.

Saperlipopette ! Où est la différence ?
Je vois que tu changes la className du <body>...

Arrrrrgh !

Alors oui, ça a un impact :-(((

Si sur ma maquette je remplace dans le JS mon forçage par ceci:

/*desactive---- document.body.innerHTML
= document.body.innerHTML;
remplace par: */
alert( "coucou");
document.body.className = "none";
document.body.className = "InDemoWS";

(même si aucune CSS avec class n'est définie pour body),
alors ça marche.

Si j'enlève la message box, ça ne marche plus !!!!!!

Donc le fait de taper sur le <body> provoque un recalcul des styles, que la
modification d'un sous-élément ne provoque pas,
et en plus j'ai un effet temporel bizarre.

Ca fait pareil chez vous ?

--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur http://zener131.eu/ContactMe

Le 10/25/08 2:19 PM, Patrick 'Zener' Brunet a écrit :

Bonjour.

Alors je n'ai pas d'hébergement disponible, mais voici une maquette
stand-alone:
http://cjoint.com/?kznZXmikK8 (lien valide 21 jours).

Bon, je n'y comprends rien en htc, mais si pour fixer le menu on a
besoin du htc, je suppose que lors du bricolage de Adds1 il faut aussi
relancer le htc (ou ses fonction dont 'ResizeInFixedHeight').

La partie intéressante se trouve dans le DemoWebScripts.js.
Dans l'état fourni, ça marche, mais en retirant la manip brutale qui force
le recalcul complet de la page, plus du tout avec IE 6 pour Windows.

Oui, en effet.
Pourtant on voit bien qu'il se passe qque chose, par exemple en ajoutant
une bordure à 'Adds1' changeant de couleur suivant le style.
En particulier, dès manip par JS, Addss1 devient raplapla en bas.

et comme document.body.innerHTML

le replacement du div laborieux fonctionne aussi :

document.body.replaceChild(
document.getElementById('MainContainer'),
document.getElementById('MainContainer'));

SAM, j'ai essayé aussi le coup du style.display que tu avais suggéré il y a
longtemps sur un autre cas, mais ça ne marche pas mieux chez moi...

Pour enfoncer le clou, rien ne vaut un remplacement du fautif
(valable pour balise object modifiée en tous brouteurs par exemple)

Mais il parait que c'est très vilain, bouffage de CPU, toussa ...
... comme si le CPU ne servait à être bouffé ?

<http://cjoint.com/?kys66hP5Jf>
et ça ne pose pas de blème (comme de juste)

En effet, ça marche sur le même IE 6.

Saperlipopette ! Où est la différence ?

La différence est que je n'ai pas de htc ?

Je vois que tu changes la className du <body>...

Oui, car j'ai idée que "qui peut le plus peut le moins"
Si ça fonctionne pour tout un body ça devrait fonctionner pour un de ses
éléments.
(sauf que là j'ai cru comprendre que le dit élément était hacké par htc)

Pat' a encore dû nous pondre un truc super alambiqué ?

Ben c'est l'effet démo: on rajoute un truc simplissime sur un site existant
et on est reparti pour une autopsie complète...

et avec un site bâti sur 2500 ressorts imbriqués .... y a du taf ! ;-)

Le site concerné est www.ipzb-pro.com sur lequel j'ai rajouté un effet pour
faire remarquer le menu escamotable (il y a des gens qui ne le voient pas).

Ben ... tt'façon moi j'vois rien ...
sans essplications je n'y repère pas ce qu'on est censés voir comme
"allant de soi"

Ca marche impec sur Firefox et sur IE 5.5, pas sur IE 6.

Ha! et en plus ça fonctionnerait sur plus vieux ?

Voir le problème de
- document.body
et
- document.documentElement

qu'un des IE comprendrait le 1er et l'autre le second ?
(pour les offsetHeight, scrollTop, et autres ...)
si j'ai capté.

--
sm

Le 10/25/08 2:27 PM, Patrick 'Zener' Brunet a écrit :

Ca fait pareil chez vous ?

oui.

et sans alert, ceci fonctionne :

if(document.all) {
setTimeout('document.body.className=document.body.className', 0);
}

Je suppose donc qu'il faut lui secouer le body d'une manière ou d'une
autre ?

Je ne sais pourquoi ?!
--
sm

Bonsoir.

"SAM" <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> a écrit dans le message
de news: 4903447b$0$926$ba4acef3@news.orange.fr...

Le 10/25/08 2:19 PM, Patrick 'Zener' Brunet a écrit :

> Alors je n'ai pas d'hébergement disponible, mais voici une
> maquette stand-alone:
> http://cjoint.com/?kznZXmikK8 (lien valide 21 jours).

Bon, je n'y comprends rien en htc, mais si pour fixer le menu
on a besoin du htc, je suppose que lors du bricolage de Adds1
il faut aussi relancer le htc (ou ses fonction dont
'ResizeInFixedHeight').

En fait j'ai pris ce que j'avais sous la main: une démo du fonctionnement de
ce HTC dont le but est de permettre au fonc bleu à gauche d'être positionné
et dimensionné en % de la hauteur...

C'est un peu hors sujet.
En fait le changement de class produit un décalage de la partie basse de ce
fond et la colore en rouge pour montrer le truc.

Mais je ne sais pas si ça fonctionne sur IE pour Mac. Sur mes sites j'ai
introduit un mode "Minimal" pour les trop vieux navigateurs.
Donc c'est le comparatif entre Firefox et IE 6 qui m'intéresse (la plupart
des gens à qui s'adresse le vrai site sont sur IE 6).

> La partie intéressante se trouve dans le
> DemoWebScripts.js.
> Dans l'état fourni, ça marche, mais en retirant la manip
> brutale qui force le recalcul complet de la page, plus du
> tout avec IE 6 pour Windows.

Oui, en effet.
Pourtant on voit bien qu'il se passe qque chose, par exemple
en ajoutant une bordure à 'Adds1' changeant de couleur
suivant le style.
En particulier, dès manip par JS, Addss1 devient raplapla
en bas.

Oui, chez moi sans le forçage du redraw, il disparaît et ne réapparaît plus
:-@

et comme document.body.innerHTML

le replacement du div laborieux fonctionne aussi :

document.body.replaceChild(
document.getElementById('MainContainer'),
document.getElementById('MainContainer'));

Tout ce qui touche au body a priori... (au coup de la message boc près, voir
mon second post).

> SAM, j'ai essayé aussi le coup du style.display que tu
> avais suggéré il y a longtemps sur un autre cas, mais ça
> ne marche pas mieux chez moi...

Pour enfoncer le clou, rien ne vaut un remplacement du
fautif (valable pour balise object modifiée en tous
brouteurs par exemple)

Mais il parait que c'est très vilain, bouffage de CPU,
toussa ...
... comme si le CPU ne servait à être bouffé ?

Sur le site final, le but de la manip est d'ouvrir/fermer à moitié le menu 3
fois lors du premier passage sur le site, pour permettre au visiteur de
comprendre que ça s'ouvre...
Je ne voudrais pas avoir à la place sur toute la page un effet "TV déréglée"
à faire peur :o)

En plus c'est actif seulement en mode "menu escamotable". Toi tu ne dois pas
le voir parce que sur IE 5 en principe le mode "menu fixe" s'engage
automatiquement par défaut, car on avait vu l'année dernière que les hovers
étaient trop immontrables...
Quoiqu'avec la nouvelle CSS, ça se passe beaucoup mieux sur mon IE 5.5.

>> <http://cjoint.com/?kys66hP5Jf>
>> et ça ne pose pas de blème (comme de juste)
>
> En effet, ça marche sur le même IE 6.
> Saperlipopette ! Où est la différence ?

La différence est que je n'ai pas de htc ?

A priori le HTC est hors-sujet car il ne touche pas aux mêmes attributs ni
même au div en question.
Son fonctionnement consiste à redimentionner la hauteur du grand div
englobant en pixels lorsque la fenêtre est redimensionnée. Le but est de
permettre aux éléments internes d'être positionnables/dimensionnables en %.
Si on ne retaille pas la fenêtre, le HTC ne fait rien du tout au moment du
test.

Donc rien à voir en principe, mais son existence peut y avoir un effet de
bord souterrain dans le moteur de rendu de IE :-(

Je vais réessayer sans le HTC... Mais idem: je n'ai pas mis ces béquilles
juste pour le plaisir. Sans eux IE 6 ne vaut pas mieux que IE 5.

>> Pat' a encore dû nous pondre un truc
>>super alambiqué ?
>
> Ben c'est l'effet démo: on rajoute un truc simplissime
> sur un site existant et on est reparti pour une autopsie
> complète...

et avec un site bâti sur 2500 ressorts imbriqués ....
y a du taf ! ;-)

Le jour où j'arrive à la conclusion qu'à cause d'IE on en peut faire que des
sites hyper-basiques ou bien non accessibles à la plupart des visiteurs qui
m'intéressent, je supprime tous les miens et j'abandonne le Web à son triste
sort :-) J'ai horreur des causes perdues.

Merci pour ta patience et ta curiosité.

--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur http://zener131.eu/ContactMe

Le 10/25/08 7:07 PM, Patrick 'Zener' Brunet a écrit :

Bonsoir.

Ha! Oui! bonsoir,

Mais je ne sais pas si ça fonctionne sur IE pour Mac.

Pas essayé.
Voici capture : <http://cjoint.com/?kAbJOQLxpx>
(avec menu illisible)
et le même en fr : <http://cjoint.com/?kAbL2TfCjw>

Sur mes sites j'ai
introduit un mode "Minimal" pour les trop vieux navigateurs.
Donc c'est le comparatif entre Firefox et IE 6 qui m'intéresse (la plupart
des gens à qui s'adresse le vrai site sont sur IE 6).

C'est avec ça que j'ai regardé.
(enfin une espèce de standalone-émulateur-IE-6-Unix-Mac)

le replacement du div laborieux fonctionne aussi :

document.body.replaceChild(
document.getElementById('MainContainer'),
document.getElementById('MainContainer'));

Tout ce qui touche au body a priori... (au coup de la message boc près, voir
mon second post).

setTimeout class du body = class du body avec délai 0
(le déclenchement d'une fonction immédiate ne semble pas suffire)
Néanmoins ça reste chiant que les seules CSS ne donnent pas
satisfactions et qu'il faille béquillr en JS.

Note que Stu Nicholls arrive à faire des miracles à grands renforts
d'introduction de table(s) par commentaires conditionnels sur son site
CSS Play :
<http://www.cssplay.co.uk/layouts/>
son truc IE6 donne page blanche dans IE Mac.
<http://www.cssplay.co.uk/menus/>

Reste que les tables, côté accessibilité, laissent fortement à désirer :-(

Sur le site final, le but de la manip est d'ouvrir/fermer à moitié le menu 3
fois lors du premier passage sur le site, pour permettre au visiteur de
comprendre que ça s'ouvre...
Je ne voudrais pas avoir à la place sur toute la page un effet "TV déréglée"
à faire peur :o)

Je ne pense pas que le replacement d'un body ou de seulement son nom de
class (qui doit prendre qques 1000 de secondes) soit visible.

En plus c'est actif seulement en mode "menu escamotable". Toi tu ne dois pas
le voir parce que sur IE 5 en principe le mode "menu fixe" s'engage
automatiquement par défaut, car on avait vu l'année dernière que les hovers
étaient trop immontrables...
Quoiqu'avec la nouvelle CSS, ça se passe beaucoup mieux sur mon IE 5.5.

Pas regardé non plus sur IE 5.5
(c'est déjà assez pénible avec IE6 !)

Je vais réessayer sans le HTC... Mais idem: je n'ai pas mis ces béquilles
juste pour le plaisir. Sans eux IE 6 ne vaut pas mieux que IE 5.

J'ai essayé de redimensionner la hauteur du menu par changement de
class, ça fait pareil : une fois diminué le menu ne s'agrandit plus :-(

et avec un site bâti sur 2500 ressorts imbriqués ....
y a du taf ! ;-)

Le jour où j'arrive à la conclusion qu'à cause d'IE on en peut faire que des
sites hyper-basiques ou bien non accessibles à la plupart des visiteurs qui
m'intéressent, je supprime tous les miens

Tiens ? une nouveauté (et le mal voyant n'aura qu'à y voir !) :
une *toute petite* icone pour révéler le menu de l'accessibilité !?

Il y aurait-il moyen à ce que ça ne fasse pas descendre tout le reste ?

et j'abandonne le Web à son triste sort :-) J'ai horreur des causes perdues.

Merci pour ta patience et ta curiosité.

Ben oui, ce truc qui ne marche pas est bien agaçant !
et reste encore incompréhensible :-(


--
sm