Recherche split / splitbar

Zaza a écrit :

Bonjour,

Je suis à la recherche de solution pour faire un split (splitbar),
c'est-à-dire 2 cadres côtes à côtes avec une barre de dimensionnement
entre les 2. Une idée ?

Des html frames ? (Non pas taper !)

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org

Salut Mickaël,

Des html frames ? (Non pas taper !)

Effectivement, je connais cette solution, j'y avais pensé, mais mon
besoin est d'intégrer ce "split pane" dans une page, parmi d'autres
choses, et il me semble que ce n'est pas possible avec des frames
"classiques" ... ou je me trompe ?

Merci

Xavier

Mickaël Wolff a écrit :

Zaza a écrit :

Je suis à la recherche de solution pour faire un split (splitbar),
c'est-à-dire 2 cadres côtes à côtes avec une barre de dimensionnement
entre les 2. Une idée ?

Quelques unes, mais ça dépends beaucoup de la structure initiale. Mais
oui c'est évidemment possible, voilà un exemple grossier avec un bête
système de drag/drop :

* CSS/HTML :
- un DIV à gauche (divG)
- un DIV à droite (divD)
- un DIV entre les deux, c'est le splitter (divS)
- tous les 3 en tailles figées et position:absolute

* JS
- onmousedown sur le divS, déclenchement du drag/drop
- onmousemove (après un mousedown), déplacement des éléments
- onmouseup (après un mousedown), annulation des events de drop

<http://mokhet.com/tests/split.html>
testé OK sur FF3, OP9.5, IE8b1, Safari(win) 3.1.1

Des html frames ? (Non pas taper !)

LOL Mickaël, j'avais pas pensé à celle là :D

--
laurent

Salut Laurent,

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

Super ! Très simple et correspond exactement à mon besoin, grand
merci !

Xavier

Laurent vilday a écrit :

Ça y est encore un coup de Laurent !
je suis sûr qu'il a fait ça en moins d'une minute ;-)

<http://mokhet.com/tests/split.html>
testé OK sur FF3, OP9.5, IE8b1, Safari(win) 3.1.1

Hop! dans la boite à malices

Des html frames ? (Non pas taper !)

LOL Mickaël, j'avais pas pensé à celle là :D

Ben moi j'y pense fort,
comment passer depuis (tout en frames) :
<http://stephane.moriaux.pagesperso-orange.fr/truc/mondrian/>
on clique le coin haut-gauche de la couleur pour la changer
et glisse les séparateurs

à : slit.html

--
sm

SAM a écrit :

Laurent vilday a écrit :

>> Mickaël Wolff a écrit :

Arghh, cochon, t'as quoté comme un goret.

<http://mokhet.com/tests/split.html>
testé OK sur FF3, OP9.5, IE8b1, Safari(win) 3.1.1

Ça y est encore un coup de Laurent !
je suis sûr qu'il a fait ça en moins d'une minute ;-)

LOL, si seulement c'était vrai.

Plus rapide que l'éclair, moins de temps pour coder qu'il ne m'en a
fallu pour chercher une façon de remplir l'objectif et copier/coller les
morceaux adéquats. J'en rêve toutes les nuits :D

Hop! dans la boite à malices

Je me demande bien ou elle se cache elle.

<http://stephane.moriaux.pagesperso-orange.fr/truc/>

J'ai essayer de fouiner un peu, mais il est pas très coopératif, il
arrête pas de me dire que je me suis planté de trajet.

Des html frames ? (Non pas taper !)

LOL Mickaël, j'avais pas pensé à celle là :D

Ben moi j'y pense fort,
comment passer depuis (tout en frames) :
<http://stephane.moriaux.pagesperso-orange.fr/truc/mondrian/>

OMFG. T'es sérieux ? Le HTML n'est pas prévu pour ce genre de chose IMO.
Mais bon, t'as bien raison, on en fait quand même un peu tout ce qu'on
veut du HTML alors pourquoi pas cette horreur.

on clique le coin haut-gauche de la couleur pour la changer
et glisse les séparateurs

à : slit.html

slit ? :)

<http://mokhet.com/tests/mondrian.html>

Ca ira comme ça ? :)

Et là, non ne rêve pas, il m'a fallu 3 heures, pas juste 1 minute.

Bon d'accord c'est 6 Ko de HTML/CSS/JS mais pour ce prix là tu as :
- mini gestion event (position principalement)
- mini gestion style (getStyle, getBorderLeft, getPaddingTop, etc.)
- quelques fonctions annexes (toHyphen, [].indexOf, etc.)
- quelques commentaires restants il est vrai bien inutiles
- gestion d'une mise en forme BorderLayout [1] à la java
- gestion des splitters [2]

testé OK FF3, OP9.5, Safari (win) 3.1.1

OK également pour IE8b1 sauf sur un splitter (vertical à droite) qui
refuse d'entendre raison et comme IE8b1 refuse également de me fournir
le moindre message d'information. Jamais il me cause lui, ça m'énerve.

Et c'est quand que l'équipe IE va se décider d'ajouter
Array.prototype.indexOf ? grrr, c'est pas possible ça.

[1] librairie basée sur le travail de Steffen Rusitschka
<http://www.ruzee.com/blog/ruzeelayoutmanager/>
Mais comme je me refuse d'utiliser prototype.js, il a bien fallu créer
ma version.

[2] Il doit rester des cas non gérés je pense.
Et c'est loin d'être du code optimisé, il doit y avoir plein de zones
d'étranglement à libérer.
Mais bon hein, c'est juste pour le fun alors ... :)

--
laurent

Laurent vilday a écrit :

SAM a écrit :
Arghh, cochon, t'as quoté comme un goret.

Arf, et j'ai pas vraiment réussi à rectifier le tir. Sans parler des
fautes d'orthographe et de grammaire.

M'enfin, désolé.

--
laurent

Laurent vilday a écrit :

SAM a écrit :

Laurent vilday a écrit :

>> Mickaël Wolff a écrit :

Arghh, cochon, t'as quoté comme un goret.

Ça ne me semblait pas, mébon.

<http://mokhet.com/tests/split.html>

Hop! dans la boite à malices

Je me demande bien ou elle se cache elle.

Erreur : j'aurais dû dire dans "ma" boite à malices, tu sais le coin du
DD où tu mets tous les trucs importants ou intéressants qu'on peut
trouver ici ou là, et qu'on ne retrouve jamais le jour où on pense que
ça pourrait servir.

<http://stephane.moriaux.pagesperso-orange.fr/truc/>

Ha! non ! ce dossier est réservé :-)
Normalement il aurait dû être en consultation libre (dossier sans page
index) mais wanadoo-orange a supprimé cette possibilité. Peut-être un
jour j'y mettrai un menu ... peut-être ...

comment passer depuis (tout en frames) :
<http://stephane.moriaux.pagesperso-orange.fr/truc/mondrian/>

OMFG. T'es sérieux ? Le HTML n'est pas prévu pour ce genre de chose IMO.
Mais bon, t'as bien raison, on en fait quand même un peu tout ce qu'on
veut du HTML alors pourquoi pas cette horreur.

Ha! Ben ! Mondrian va apprécier le qualificatif !

Ce truc n'est pas de moi (vient de la fameuse boite) et date du siècle
dernier et du JS 1.0 maxi.
(l'auteur est indiqué dans le head, pas retrouvé l'original sur le Net)
Ça a l'avantage d'être compris par tout navigateur depuis NC3 et IE4 au
moins.

on clique le coin haut-gauche de la couleur pour la changer
et glisse les séparateurs

à : slit.html

slit ? :)

C'est t'y pas plus propre ?
(cracher = to split)

<http://mokhet.com/tests/mondrian.html>

Ca ira comme ça ? :)

Ha! non ça ne va pas du tout, ce n'est pas en accord avec le travail de
Mondrian qui ne se servait que des couleurs primaires.
<http://www.google.fr/search?q=mondrian>

Et là, non ne rêve pas, il m'a fallu 3 heures, pas juste 1 minute.

T'es complètement dingue !
Mébon que sont ces 3 heures à côté des 3 WE qu'il me faudra pour
comprendre ?

Bon d'accord c'est 6 Ko de HTML/CSS/JS mais pour ce prix là tu as :

quasi pareil que le truc en frames

- mini gestion event (position principalement)
- mini gestion style (getStyle, getBorderLeft, getPaddingTop, etc.)
- quelques fonctions annexes (toHyphen, [].indexOf, etc.)
- quelques commentaires restants il est vrai bien inutiles
- gestion d'une mise en forme BorderLayout [1] à la java
- gestion des splitters [2]

testé OK FF3, OP9.5, Safari (win) 3.1.1

Ça fonctionne aussi avec mon Fx.2

Mon IE Mac cale sur : toLayout.push(root); }

iCab.3 se fout comme de ses premières chaussettes des séparateurs, rien
ne bouge.
Je sais pas c'qu'y veut :
"impossible de créer un objet à partir d'une valeur indéfinie"
ici :
".onmousemove"
dans :
" document.onmousemove = null;"

OK également pour IE8b1 sauf sur un splitter (vertical à droite) qui
refuse d'entendre raison et comme IE8b1 refuse également de me fournir
le moindre message d'information. Jamais il me cause lui, ça m'énerve.

Et c'est quand que l'équipe IE va se décider d'ajouter
Array.prototype.indexOf ? grrr, c'est pas possible ça.

[1] librairie basée sur le travail de Steffen Rusitschka
<http://www.ruzee.com/blog/ruzeelayoutmanager/>
Mais comme je me refuse d'utiliser prototype.js, il a bien fallu créer
ma version.

Il y en a pour dire que prototype est codé avec les pieds.
(je ne saurais juger)

[2] Il doit rester des cas non gérés je pense.
Et c'est loin d'être du code optimisé, il doit y avoir plein de zones
d'étranglement à libérer.
Mais bon hein, c'est juste pour le fun alors ... :)

Toutafé.


--
sm

SAM a écrit :

Laurent vilday a écrit :

SAM a écrit :

Laurent vilday a écrit :

>>>> <http://mokhet.com/tests/split.html>

Hop! dans la boite à malices

Je me demande bien ou elle se cache elle.

Erreur : j'aurais dû dire dans "ma" boite à malices, tu sais le coin du
DD où tu mets tous les trucs importants ou intéressants qu'on peut
trouver ici ou là, et qu'on ne retrouve jamais le jour où on pense que
ça pourrait servir.

Ehehe, ok je vois de quoi tu parles, on doit effectivement tous avoir un
coin du disque dur réservé pour cet effet.

C'est l'effet : "c'est quelque part, mais où j'ai foutu ce truc ?" :)

comment passer depuis (tout en frames) :
<http://stephane.moriaux.pagesperso-orange.fr/truc/mondrian/>

OMFG. T'es sérieux ? Le HTML n'est pas prévu pour ce genre de chose
IMO. Mais bon, t'as bien raison, on en fait quand même un peu tout ce
qu'on veut du HTML alors pourquoi pas cette horreur.

Ha! Ben ! Mondrian va apprécier le qualificatif !

Je parlais évidemment de la structure en frames, mais [HS] à bien y
réfléchir, c'est vrai que c'est visuellement horrible ce style de peinture.

Ce truc n'est pas de moi (vient de la fameuse boite) et date du siècle
dernier et du JS 1.0 maxi.
(l'auteur est indiqué dans le head, pas retrouvé l'original sur le Net)
Ça a l'avantage d'être compris par tout navigateur depuis NC3 et IE4 au
moins.

on clique le coin haut-gauche de la couleur pour la changer
et glisse les séparateurs à : slit.html

slit ? :)

C'est t'y pas plus propre ?
(cracher = to split)

Non.

to split = séparer, scinder
to spit = cracher
a slit = une fente

Je pense qu'on peut conserver "split" :)

<http://mokhet.com/tests/mondrian.html>

Ca ira comme ça ? :)

Ha! non ça ne va pas du tout, ce n'est pas en accord avec le travail de
Mondrian qui ne se servait que des couleurs primaires.
<http://www.google.fr/search?q=mondrian>

LOL, parce que tu croyais peut être que ma culture générale me
permettais de connaitre Pieter Cornelis Mondriaan ?

<http://fr.wikipedia.org/wiki/Piet_Mondrian>

Et puis c'était pas dans le cahier des charges initiales, donc oui il y
aura un délai de livraison du produit final :p

Bon, dans la nouvelle version [1], ça n'utilise plus que du blanc et les
couleurs primaires (enfin grosso modo), les splitters sont noirs pour
coller aux horreurs qu'il faisait, et j'ai utilisé une version
prototypée du système de pondération aléatoire que Olivier Miakinen
avait diffusé ici pour obtenir cette couleur.
<http://groups.google.fr/group/fr.comp.lang.javascript/msg/e9a36ffbcd512a7c?hl=fr>

function AleatoirePondere(datas)
{
this.datas = [];
this.total = 0;
return this.setDatas(datas);
}

AleatoirePondere.prototype.setDatas = function(d)
{
var i;
this.total = 0;
this.datas = d;
for ( i = d.length; i--; ) { this.total += d[i][1]; }
return this;
};

AleatoirePondere.prototype.pick = function()
{
var
i,
d = this.datas,
somme = 0,
alea = Math.random() * this.total;
for ( i = 0; i < d.length; i++ )
{
somme += d[i][1];
if (somme > alea) { return d[i][0]; }
}
/* ce cas ne devrait pas arriver : */
return null;
};

var tableau = [
['ff0000',5],['ffff00',5],['00ff00',5],
['00ffff',5],['0000ff',5],['ff00ff',5],
['ffffff',70]
];
var alea = new AleatoirePondere(tableau);
alert(alea.pick());

Et là, non ne rêve pas, il m'a fallu 3 heures, pas juste 1 minute.

T'es complètement dingue !

Bah tu sais, la plupart du temps quand je code un truc que je diffuse
ici c'est avant tout pour moi que je le fais.

En l'occurrence j'ai besoin de splitters génériques. J'utilise depuis
longtemps un système proche de la première version que j'avais proposée,
mais c'est trop contraignant car j'ai trop de répétitions du même code
dans mes pages. Alors en m'essayant à ton petit challenge, ça me permet
de réfléchir à certaines choses pour remettre en question mon code et
l'approche utilisée.

Mébon que sont ces 3 heures à côté des 3 WE qu'il me faudra pour
comprendre ?

Bahh, je peux essayer d'expliquer les morceaux qui passent pas si tu
veux, mais je suis pas forcément très doué pour ça. Et je te l'accorde,
le BorderLayout peut être compliqué à appréhender c'est vrai.

Bon d'accord c'est 6 Ko de HTML/CSS/JS mais pour ce prix là tu as :

quasi pareil que le truc en frames

Nope, je sais pas pourquoi à la relecture j'ai pas vu ça, mais c'est pas
6 mais 20 Ko quand même.

testé OK FF3, OP9.5, Safari (win) 3.1.1

Ça fonctionne aussi avec mon Fx.2

J'en doutais pas une seconde pour lui.

Mon IE Mac cale sur : toLayout.push(root); }

Pff, saloperie de IE Mac, allez juste pour toi j'ai ajouté la gestion de
la méthode push dans la nouvelle version [1]

if ( !Array.prototype.push ) { ... }

iCab.3 se fout comme de ses premières chaussettes des séparateurs, rien
ne bouge.

Snif. Et quid de iCab 4.1.1 ?

Je sais pas c'qu'y veut :
"impossible de créer un objet à partir d'une valeur indéfinie"
ici :
".onmousemove"
dans :
" document.onmousemove = null;"

Quoi ? "document" n'existe pas, on peut pas utiliser onmousemove ou
autre chose encore ? Pfff !

Il veut qu'on utilise exclusivement des addEventListener ? Pfff, j'ai
même pas envie de jouer avec lui.

Mais bon hein, c'est juste pour le fun alors ... :)

Toutafé.

Et sérieusement, qui pourrait avoir envie d'une telle chose en HTML :D

[1] <http://mokhet.com/tests/mondrian2.html>
C'est t'y pas mieux ?

--
laurent

Laurent vilday a écrit :

SAM a écrit :

Laurent vilday a écrit :

SAM a écrit :

Laurent vilday a écrit :

>>>> <http://mokhet.com/tests/split.html>

comment passer depuis (tout en frames) :
<http://stephane.moriaux.pagesperso-orange.fr/truc/mondrian/>

on en fait quand même un peu tout ce
qu'on veut du HTML alors pourquoi pas cette horreur.

Ha! Ben ! Mondrian va apprécier le qualificatif !

Je parlais évidemment de la structure en frames,

Ha! Ouf !

mais [HS] à bien y
réfléchir, c'est vrai que c'est visuellement horrible ce style de peinture.

Rhhhôôô !
Juger ainsi le fabuleux travail d'un artiste qui fait encore référence
en design (de tous types !) Lala ! Misère !
Exemple +/- en charte :
<http://www.macaroondesign.com/index.php?2006/08/23/34-pietr-mondrian-les-fondements-du-graphic-design-moderne>

(cracher = to split)

Non.

to split = séparer, scinder
to spit = cracher
a slit = une fente

M'étonne moins que je fasse tant de contresens en anglais

<http://mokhet.com/tests/mondrian.html>

Ca ira comme ça ? :)

Ha! non ça ne va pas du tout, ce n'est pas en accord avec le travail
de Mondrian qui ne se servait que des couleurs primaires.

LOL, parce que tu croyais peut être que ma culture générale me
permettais de connaitre Pieter Cornelis Mondriaan ?

<http://fr.wikipedia.org/wiki/Piet_Mondrian>

Et puis c'était pas dans le cahier des charges initiales,

C'était assez évident, bien que Mondrian n'ait pas fait que ça
(il lui a fallu beaucoup de temps pour y arriver)

donc oui il y aura un délai de livraison du produit final :p

C'est vrai qu'il faut compter avec le séchage

Bon, dans la nouvelle version [1], ça n'utilise plus que du blanc et les
couleurs primaires (enfin grosso modo), les splitters sont noirs pour
coller aux horreurs qu'il faisait, et j'ai utilisé une version
prototypée du système de pondération aléatoire que Olivier Miakinen
avait diffusé ici pour obtenir cette couleur.
<http://groups.google.fr/group/fr.comp.lang.javascript/msg/e9a36ffbcd512a7c?hl=fr>

Prochain exercice :
<http://www.poster.net/mondrian-piet/mondrian-piet-composition-with-color-areas-2410047.jpg>
(dégradés dans les couleurs à la Mondrian)

Maintenant, si tu préfères plus facile,
en à plats et couleurs quasi primaires il y a ça :
<http://www.poster.net/calder-alexander/calder-alexander-spirals-and-petals-1969-3500740.jpg>
y a plus qu'à arrondir aléatoirement les angles ;-)

Mon IE Mac cale sur : toLayout.push(root); }

Pff, saloperie de IE Mac, allez juste pour toi j'ai ajouté la gestion de
la méthode push dans la nouvelle version [1]

if ( !Array.prototype.push ) { ... }

ligne 342 ou par là :
if ( k && obj.hasOwnProperty(k) )
ne lui plait pas non plus

Mébon vu que personne ne s'en sert ...

iCab.3 se fout comme de ses premières chaussettes des séparateurs,
rien ne bouge.

Snif. Et quid de iCab 4.1.1 ?

Ha .... ben ... j'ai pas toute la collec ... :-(

"impossible de créer un objet à partir d'une valeur indéfinie"
" document.onmousemove = null;"

Quoi ? "document" n'existe pas, on peut pas utiliser onmousemove ou
autre chose encore ? Pfff !

Non, c'est un truc qu'il aime bien dire.
Après ... comprendre vraiment ce qui achoppe ... ma foi ?!
'objet indéfini'
presqu'ausi explicite que les messages d'IE :(

[1] <http://mokhet.com/tests/mondrian2.html>
C'est t'y pas mieux ?

Essayé avec Fx.3
C'est super !
Néanmoins il manque le gris.
Je vais avoir du mal à produire qques faux pour payer mes vacances :-)


Oooops la !
J'ai fais une bêtise :
J'ai glissé le séparateur horizontal milieu de colonne gauche en dehors
de sa case dans la rangée basse.

Zutre !
Incorrigible maladroit ... !
j'ai glissé le séparateur haut vertical col gauche dans col droite :-(


Scrotche !
V'là que je m'emmêle aussi dans Safari.3

<http://cjoint.com/?gBtBFTKhFP>

Mais c'est pas vrai ça !
Quel nigaudin ! j'ai aussi trébuché avec la version précédente.
<http://cjoint.com/?gBtPDIIQok>

--
sm