Liste/tableau "web 2.0"

http://stephane.moriaux.perso.orange.fr/truc/alt_zoom/

Le zoom (+) ne marche pas sous FF Linux...

Ça marche avec Mozilla sur Windows, simplement cela sélectionne l'image
en même temps que ça la zoome (elle devient toute bleutée).

Bon, alors j'ai longuement ½uvré et ... c'est réparé.
(du moins avec mon FF Mac ... Linux ? Windows ?)

Ça marche finement avec Mozilla Windows. Je ne teste pas avec Firefox,
je suppose que c'est pareil. Bravo pour la rapidité de ta correction !

Merci, merci, n'en jettez plus :-)

Sur Mac :
IE : OK mais faut pas l'affoler sinon ouvre une nvelle fenêtre !
Safari : OK
Opera : faut pas l'affoler sinon tendance à se bloquer
iCab : comme FF Linux ... pas de zoom+

--
Stephane Moriaux et son [moins] vieux Mac

Ne marche toujours pas avec FF sous Linux... snif. Mais fonctionne avec FF
sur Windows.

Bon, si FF Linux comme iCab ne capte pas les Alt, Ctrol ni Shift ...

test :
http://stephane.moriaux.perso.orange.fr/truc/alt_zoom/v1
essayer alternativement avec les trois touches pré-citées et dire si le
message JS repond 'true' pour la touche pressée.

iCab s'en moque comme de sa 1ière chemise :-(

--
Stephane Moriaux et son [moins] vieux Mac

Ne marche toujours pas avec FF sous Linux... snif. Mais fonctionne avec FF
sur Windows.

Bon, si FF Linux comme iCab ne capte pas les Alt, Ctrol ni Shift ...

test :
http://stephane.moriaux.perso.orange.fr/truc/alt_zoom/v1
essayer alternativement avec les trois touches pré-citées et dire si le
message JS repond 'true' pour la touche pressée.

iCab s'en moque comme de sa 1ière chemise :-(

FF Linux aussi... (mais Ctrl et Shift sont reconnus).


--
David Jourand

Pierre Goiffon wrote:

une sélection
naturelle en cliquant sur les items, possible au clavier, éventuellement
multiple (Ctrl et Maj), un clic droit qui ouvre un menu contextuel, des
rollovers, ...

Merci à tous pour vos réponses

A force de travail je suis arrivé à une petite maquette... Le tr:hiver
ne fonctionnant pas sur IE, et l'équivalent réalisé avec
hover:expression étant désespéremment lent, je me suis tourné vers un
parcours de l'arbre dom et affecter à chaque TR un onmouseover et un
onmouseout. Je voulais au passage lancer un onclick pour la sélection,
mais ça ne fonctionne pas...

Exemple dispo ici :
http://pgoiffon.free.fr/_temp/datagrid_20060613.html

Ce qui bloque c'est :
tableau.tBodies[i].rows[j].onclick = LigneCliquee(this.id);

On entre dans LigneCliquees à chaque passage sur cette ligne, et il n'y
a rien qui se déclenche lorsque l'on clique sur une cellule...

Hu ?

Exemple dispo ici :
http://pgoiffon.free.fr/_temp/datagrid_20060613.html

Ce qui bloque c'est :
tableau.tBodies[i].rows[j].onclick = LigneCliquee(this.id);

On entre dans LigneCliquees à chaque passage sur cette ligne, et il n'y
a rien qui se déclenche lorsque l'on clique sur une cellule...

Écrit comme ça, c'est normal que tu affectes à onclick le résultat de
l'exécution de la fonction LigneCliquee, alors qu'en fait tu voudrais
lui affecter le nom de la fonction.

Je ne me rappelle pas la syntaxe exacte, mais l'un des deux exemples
suivants a peut-être une chance de fonctionner :
tableau.tBodies[i].rows[j].onclick = 'LigneCliquee(this.id)';
ou :
tableau.tBodies[i].rows[j].onclick = 'LigneCliquee(' + this.id + ')';

Pierre Goiffon wrote:

une sélection naturelle en cliquant sur les items, possible au
clavier, éventuellement multiple (Ctrl et Maj), un clic droit qui
ouvre un menu contextuel, des rollovers, ...

tu veux juste roll-overiser des rangées de tableaux ?
tu veux juste marquer des rangées de tableaux ?
tu veux juste que ces rangées marquées soit roll-ovérisées elles aussi ?

voir (sans sélection multiple) :
http://perso.orange.fr/stephane.moriaux/truc/tables_highlight_rows_fr
variante (celulles de même contenu):
http://perso.orange.fr/stephane.moriaux/truc/tables_highlight_cells_fr

Merci à tous pour vos réponses

A force de travail je suis arrivé à une petite maquette... Le tr:hiver
ne fonctionnant pas sur IE, et l'équivalent réalisé avec
hover:expression étant désespéremment lent, je me suis tourné vers un
parcours de l'arbre dom et affecter à chaque TR un onmouseover et un
onmouseout. Je voulais au passage lancer un onclick pour la sélection,
mais ça ne fonctionne pas...

bon, là, je refile une fois de plus ma méthode CSS+FF/JS+IE
car ça m'agace dur dur de voir sur la démo, que mon FF va se farcir des
onmouse complètement inutiles.

les styles :

tr { background: #eee; }
tr:hover, .ie { background: #ddd; }
tr.bis { background: #ffc; }
tr.bis:hover, tr.bisie { background: #ff5; }

les scripts

/* *** est-ce IE ? *** */
IEúlse; /*@cc_on IE=true; @*/

/* *** choper, laisser béton, une rangée *** */
function capte(quoi) {
if(IE)
quoi.className = quoi.className=='ie'? 'bisie' : 'ie';
else
quoi.className = quoi.className==''? 'bis' : '';
}

/* *** roll-overs IE *** */
function roll(quoi) {
quoi.className = quoi.className==''? 'ie' :
quoi.className=='bis'? 'bisie' :
quoi.className=='bisie'? 'bis' :
'';
}

/* *** mise en place du tremblement *** */
onload = function() {
var T = document.getElementsByTagName('tr');
for(var i=0;i<T.length;i++) {
T[i].onclick = function() { capte(this); }
if(IE) {
T[i].onmouseover = function() {roll(this);};
T[i].onmouseout = function() {roll(this);};
}
}
}


Libre de limiter au tbodies d'un table si l'on veut.

Exemple dispo ici :
http://pgoiffon.free.fr/_temp/datagrid_20060613.html

Ce qui bloque c'est :
tableau.tBodies[i].rows[j].onclick = LigneCliquee(this.id);

Je crois que ça ira déjà mieux en employant la méthode vue 2 ou 3 lignes
+ haut dans ton code :-)

tableau.tBodies[i].rows[j].onclick=function(){LigneCliquee(this.id);};

On entre dans LigneCliquees à chaque passage sur cette ligne, et il n'y
a rien qui se déclenche lorsque l'on clique sur une cellule...

ben non, ça a déjà gueulé à ttes les lignes au chargement :-)

--
Stephane Moriaux et son [moins] vieux Mac

Exemple dispo ici :
http://pgoiffon.free.fr/_temp/datagrid_20060613.html

Ce qui bloque c'est :
tableau.tBodies[i].rows[j].onclick = LigneCliquee(this.id);

On entre dans LigneCliquees à chaque passage sur cette ligne, et il n'y
a rien qui se déclenche lorsque l'on clique sur une cellule...

Salut Pierre, le problème que tu rencontres est normal. Pour assigner un
handler d'event, il faut utiliser une référence.

Hors tu exécutes la fonction au lieu d'assigner sa référence en faisant

element.onclick = LigneCliquee();

Pour assigner la référence, il faut enlever les () qui indiquent qu'on
exécute.

element.onclick = LigneCliquee;

Notes les () qui ont disparus, et qui empêchent donc d'envoyer des
paramètres. Ce qui est également normal puisque on est la en modèle
traditionnel (DOM0) de gestion des events. Ce qui implique

1) la référence est appelé par l'interpréteur avec 1 seul paramètre qui
est l'event qui vient d'être appliqué.
2) Ne pas oublier le return true ou return false avant de quitter la
fonction afin d'indiquer au navigateur si il doit continuer ou pas l'event.
3) le contexte d'exécution est l'élément HTML d'ou est parti l'event.
ainsi avec un code HTML tel que

<a id="xxx">

et du js tel que

var a = document.getElementById('xxx');
a.onclick = function(evt) { alert(this); return false; };

lors du click sur le lien, this representera l'objet javascript du tag a.

si on fait comme dans ton exemple

a.onclick = alert(this);

this ne represente pas le tag a lors de l'exécution, mais la fonction
InitTableau() (toujours d'après ton exemple)

Plus de détails sur
http://www.quirksmode.org/index.html?/js/introevents.html

Dans ton exemple LigneCliquee() n'a à priori pas besoin de paramètre
puisque quand tu fais this.id j'imagine que tu voulais que le *this*
soit l'élément HTML. Ce qu'il est bien dans le modèle DOM0 d'events que
tu utilises ici.

Donc toujours pour ton exemple, remplace la fonction LigneCliquee par ceci :

function LigneCliquee()
{
this.className = "tr-select";
return false;
}

et remplace aussi

l'attribution des références

tableau.tBodies[i].rows[j].onclick = LigneCliquee;

Si tu veux absolument conserver l'utilisation des paramètres, il faudra
alors passer par une référence de fonction anonyme, comme tu as fait
pour les mouseover et out de ton exemple :

element.onclick = function(evt) { funct(param1, ..., paramX); };

[HS par rapport au pb d'origine]
Je vois que tu utilises la fonction alert pour debugger. C'est imo une
mauvaise habitude, on a vite fait à se retrouver dans une boucle infinie
qu'on arrive plus a arreter autrement qu'en tuant la tache.

Je préconise, à défaut d'une gestion des erreurs plus évoluées, ça :

function alerter(txt)
{
if ( alerter._continuer )
{
alerter._continuer = window.confirm(txt);
}
}
alerter._continuer = true;

Ainsi, au lieu de faire *alert(txt)* et d'avoir une bête boite d'alerte
on fait *alerter(txt)* et on obtient la même bête boite d'alerte sauf
qu'en cliquant sur le bouton cancel on arrête ces foutues alertes. Ce
qui permet de reprendre la main quand qqchose boucle :p

J'ai repris ton exemple pour en faire un qui fonctionne (sauf IE mac je
parie parce que y'a encore un truc qui va pas plus plaire, mais euh,
tant pis, y'a des experts du sujet dans le coin si t'as un soucis :)

http://mokhet.com/tests/pierregoiffon.html

--
laurent

voir (sans sélection multiple) :
http://perso.orange.fr/stephane.moriaux/truc/tables_highlight_rows_fr
variante (celulles de même contenu):
http://perso.orange.fr/stephane.moriaux/truc/tables_highlight_cells_fr

grrr, ca m'apprendre a recharger les news entre le moment ou je commence
à répondre et le moment ou je valide, désolé du doublon, Stéphane avait
déjà tout bien répondu.

A force de travail je suis arrivé à une petite maquette... Le tr:hiver
ne fonctionnant pas sur IE, et l'équivalent réalisé avec
hover:expression étant désespéremment lent, je me suis tourné vers un
parcours de l'arbre dom et affecter à chaque TR un onmouseover et un
onmouseout. Je voulais au passage lancer un onclick pour la sélection,
mais ça ne fonctionne pas...

bon, là, je refile une fois de plus ma méthode CSS+FF/JS+IE
car ça m'agace dur dur de voir sur la démo, que mon FF va se farcir des
onmouse complètement inutiles.

Oui, totalement d'accord, mais est-ce que un behavior IE est réellement
plus lent comme le souligne PG ?

--
laurent

voir (sans sélection multiple) :
http://perso.orange.fr/stephane.moriaux/truc/tables_highlight_rows_fr
variante (celulles de même contenu):
http://perso.orange.fr/stephane.moriaux/truc/tables_highlight_cells_fr

grrr, ca m'apprendre a recharger les news entre le moment ou je commence
à répondre et le moment ou je valide, désolé du doublon, Stéphane avait
déjà tout bien répondu.

Comme déjà dit par ailleurs, tes interventions (events étoussa) sont
toujours les bienvenues, car on voit bien que tu sais de quoi tu parles,
et on en apprend à chaque foi.
(bon ... ça rentre pas fort ni longtemps, n'oublie pas de revenir
souvent enfoncer le clou)

bon, là, je refile une fois de plus ma méthode CSS+FF/JS+IE
car ça m'agace dur dur de voir sur la démo, que mon FF va se farcir
des onmouse complètement inutiles.

Oui, totalement d'accord, mais est-ce que un behavior IE est réellement
plus lent comme le souligne PG ?

D'une part je ne sais ce qu'est un behavior
D'autre part est-ce qu'un behavior interpellera mon IE (Mac) ?
... j'en doute fort.
D'une part, je pense que oui un roll-over JS est plus lent que les css
(même si pour qques rows ça n'est pas vraiment perceptible)
D'autre part, je pense que oui dès qu'on a plus de monde à gérer
D'autre part, par principe, y pas d'raison qu'on se surcharge le job du
brouteur alors que des css sont là pour l'emoustiller et qu'il en rafolle.

En tous cas IE et les tables et les affectations de class ... :-(
http://perso.orange.fr/stephane.moriaux/truc/tables_un-sur-deux_rows_fr
... pourrait mieux faire (puisque d'autres le font)

--
Stephane Moriaux et son [moins] vieux Mac

J'ai repris ton exemple pour en faire un qui fonctionne (sauf IE mac je
parie parce que y'a encore un truc qui va pas plus plaire, mais euh,
tant pis, y'a des experts du sujet dans le coin si t'as un soucis :)

Pas de bol ! ça fonctionne très bien sous IE Mac ! :-)

Manque plus que le roll-over sur les sélectionnés
et la sélection par lasso :-)

http://mokhet.com/tests/pierregoiffon.html

Bon, ça c'est du JS trop technique pour moi.

-> outre les fonctions déclarées à l'intérieur d'une autre,
comment imaginer qu'on puisse faire ça :
this._selected = !this._selected;
et en plus (à ce que je comprends?) en affubler un TR

On peut attribuer comme ça n'inporte quoi à n'importe quel élément ?

--
Stephane Moriaux et son [moins] vieux Mac