clavier virtuel (suite)

Le 10/30/08 8:08 AM, J-F Portala a écrit :

Bonjour,
j'ai enfin réussi à faire créer un clavier virtuel.
Le seul probleme est qu'il apparait à un endroit bien défini, et lorsque
j'ai une liste un peu longue,
et que je dois scroller plusieurs pages, le calvier virtuel reste à sa
position.

Je le fais apparaitre sur l'evenement focus du champ.
Est il possible de faire apparaitre le clavier à proximité du champ.

savoir repérer la position du champ
corriger celle du clavier qui sera en position:absolute;
relativement au body

trouver la position :
<http://www.quirksmode.org/js/findpos.html>

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
while (obj = obj.offsetParent);
}
return [curleft,curtop];
}


css:
=== #clavier { position: absolute; border: 1px solid; left: 300px;
background:#ffc; height: 150px; display: none }

JS:
== function clavier(where) {
var c = document.getElementById('clavier');
var pos = 0;
if(where.offsetParent) {
do {pos += where.offsetTop;} while(where = where.offsetParent);
}
c.style.top = pos + 'px';
c.style.display = 'block';
}

html:
==== <form>
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
</form>
<div id="clavier">#### clavier ####</div>

--
sm

SAM a écrit :

Le 10/30/08 8:08 AM, J-F Portala a écrit :

Bonjour,
j'ai enfin réussi à faire créer un clavier virtuel.
Le seul probleme est qu'il apparait à un endroit bien défini, et
lorsque j'ai une liste un peu longue,
et que je dois scroller plusieurs pages, le calvier virtuel reste à sa
position.

Je le fais apparaitre sur l'evenement focus du champ.
Est il possible de faire apparaitre le clavier à proximité du champ.

savoir repérer la position du champ
corriger celle du clavier qui sera en position:absolute;
relativement au body

trouver la position :
<http://www.quirksmode.org/js/findpos.html>

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
while (obj = obj.offsetParent);
}
return [curleft,curtop];
}


css:
=== > #clavier { position: absolute; border: 1px solid; left: 300px;
background:#ffc; height: 150px; display: none }

JS:
== > function clavier(where) {
var c = document.getElementById('clavier');
var pos = 0;
if(where.offsetParent) {
do {pos += where.offsetTop;} while(where = where.offsetParent);
}
c.style.top = pos + 'px';
c.style.display = 'block';
}

html:
==== > <form>
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
</form>
<div id="clavier">#### clavier ####</div>

Je prends le fil en cours, donc je vais probablement dire une bêtise,
mais pourquoi utiliser JS alors que le positionnement relatif sert à ça ?
Et si on veut utiliser le positionnement absolu (par exemple parce que
les input ne sont pas dans le flux), il est bon de savoir que ce dernier
se fait par rapport au dernier conteneur positionné. Donc pas besoin
d'utiliser du JS.

Merci beaucoup

cela marche.

Encore deux petites questions:
A quoi sert la boucle
if(where.offsetParent) {

do {pos += where.offsetTop;} while(where = where.offsetParent);
}

J'ai un peu de mal à saisir. (on parcourt tous les objets, mais en partant
duquel?).

Est ce qu'il m'est possible de gérer le debut et la fin de page.
Lorsque je suis sur les derniers champs le bas du clavier est masqué, et si
je le relève c'est lorsque je suis en haut de la page que ceal pose un léger
probleme.
Est ce que je peux connaitre la taille de la page et donc modifier la
position du clavier si je risque d'être en dehors de la page.
Je ne vois pas comment régler cela autrement.

Encore merci de ton aide efficace.

Jeff


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

Le 10/30/08 8:08 AM, J-F Portala a écrit :

Bonjour,
j'ai enfin réussi à faire créer un clavier virtuel.
Le seul probleme est qu'il apparait à un endroit bien défini, et lorsque
j'ai une liste un peu longue,
et que je dois scroller plusieurs pages, le calvier virtuel reste à sa
position.

Je le fais apparaitre sur l'evenement focus du champ.
Est il possible de faire apparaitre le clavier à proximité du champ.

savoir repérer la position du champ
corriger celle du clavier qui sera en position:absolute;
relativement au body

trouver la position :
<http://www.quirksmode.org/js/findpos.html>

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
while (obj = obj.offsetParent);
}
return [curleft,curtop];
}


css:
=== > #clavier { position: absolute; border: 1px solid; left: 300px;
background:#ffc; height: 150px; display: none }

JS:
== > function clavier(where) {
var c = document.getElementById('clavier');
var pos = 0;
if(where.offsetParent) {
do {pos += where.offsetTop;} while(where = where.offsetParent);
}
c.style.top = pos + 'px';
c.style.display = 'block';
}

html:
==== > <form>
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
</form>
<div id="clavier">#### clavier ####</div>

--
sm

Le 11/2/08 9:22 AM, J-F Portala a écrit :

Merci beaucoup

cela marche.

Encore deux petites questions:
A quoi sert la boucle
if(where.offsetParent) {

do {pos += where.offsetTop;} while(where = where.offsetParent);
}

J'ai un peu de mal à saisir. (on parcourt tous les objets, mais en partant
duquel?).

IE bouillonne dans un sens (l'objet est repéré / window)
je suppose donc que :
pos += where.offsetTop;
suffit à IE
d'autres brouteurs bouillonnent dans l'autre sens
et pour eux il faut reparcourir l'imbrication des conteneurs de l'objet,
chaque objet prenant ses repères par rapport à son conteneur.
(à ce que j'ai compris ! ?)

Lorsque je suis sur les derniers champs le bas du clavier est masqué, et si
je le relève c'est lorsque je suis en haut de la page que ceal pose un léger
probleme.

On peut tout bonnement le placer relativement à la fenêtre.
Il suffit de le placer :
- en fixed pour les brouteurs normaux
- en absolute (+ adaptation JS) pour IE
Voir :
<http://cjoint.com/?lcllcAENyh>

Est ce que je peux connaitre la taille de la page et donc modifier la
position du clavier si je risque d'être en dehors de la page.
Je ne vois pas comment régler cela autrement.

en rajoutant du blanc en fin de page ?

--
sm

Le 10/31/08 9:22 AM, Olivier Masson a écrit :

SAM a écrit :

Le 10/30/08 8:08 AM, J-F Portala a écrit :

Bonjour,
j'ai enfin réussi à faire créer un clavier virtuel.

Je le fais apparaitre sur l'evenement focus du champ.
Est il possible de faire apparaitre le clavier à proximité du champ.

(...)

css:
=== >> #clavier { position: absolute; border: 1px solid; left: 300px;
background:#ffc; height: 150px; display: none }

JS:
== >> function clavier(where) {
var c = document.getElementById('clavier');
var pos = 0;
if(where.offsetParent) {
do {pos += where.offsetTop;} while(where = where.offsetParent);
}
c.style.top = pos + 'px';
c.style.display = 'block';
}

html:
==== >> <form>
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
<p><input onfocus="clavier(this);">
</form>
<div id="clavier">#### clavier ####</div>

Je prends le fil en cours, donc je vais probablement dire une bêtise,
mais pourquoi utiliser JS alors que le positionnement relatif sert à ça ?

Il me semble que ça avait été proposé dans la démo première.
<http://cjoint.com/?lckrc5T6AY>

Et si on veut utiliser le positionnement absolu (par exemple parce que
les input ne sont pas dans le flux), il est bon de savoir que ce dernier
se fait par rapport au dernier conteneur positionné. Donc pas besoin
d'utiliser du JS.

Oui mais le JS c'est trop cool ! ;-)

--
sm

Le 11/2/08 9:22 AM, J-F Portala a écrit :

if(where.offsetParent) {

do {pos += where.offsetTop;} while(where = where.offsetParent);
}

J'ai un peu de mal à saisir. (on parcourt tous les objets, mais en partant
duquel?).

Ben ... à partir de 'where'
c a d 'this' dans ;
<input onfocus="clavier(this);">
où 'this' est donc cet input là.

On parcourt l'imbrication des objets/éléments/balises à partir de celui
concerné, en remontant jusqu'à body.

--
sm

merci beaucoup
Jeff

Le 11/3/08 3:22 PM, J-F Portala a écrit :

merci beaucoup
Jeff

sauf que offsetTop se réfère à son conteneur (offsetParent)
aussi bien dans IE que Fx

<http://msdn.microsoft.com/en-us/library/ms534303(VS.85).aspx>
<http://msdn.microsoft.com/en-us/library/ms534302(VS.85).aspx>
<https://developer.mozilla.org/Fr/DOM/Element.offsetTop>

--
sm

Encore merci

Jeff