Positionnement de textes avec javascript [Résolu]

Signaler
Messages postés
33
Date d'inscription
samedi 28 février 2004
Statut
Membre
Dernière intervention
8 mai 2016
-
Messages postés
279
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
-
Bonjour à tous
Voila mon probleme, je souhaiterai positionner des textes deja extraits d'une base de donneé avec ajax (texte, pos x, pos y, longueur, hauteur,etc...), et les positionner d'apres leur coordonnée respective X et Y, sans avoir a recharger la page.
exemple :
texte BLABLABLA1 positionné en X=100 et Y=1000
texte BLABLABLA2 positionné en X=500 et Y=400
etc.......

merci à ceux qui pourrais avoir des solutions aux probleme que je me pose
VOL68

3 réponses

Messages postés
279
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
3
Une solution pourrait consister à prévoir des réponses sous forme de chaînes de caractères contenant le texte à insérer puis, séparées par deux |, les coordonnées en X et Y.

Alors, avec un container (identifié par edt) en position absolute, la fonction de callback, n'aurait plus qu'à «spliter» cette chaîne (après un responseText) pour placer le dit container.

Un simple exemple de placement 3 secondes après l'ouverture de la page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Placer un container</title>
<style type="text/css">
#edt {display:none;position:absolute;width:200px;height:200px;border:1px solid red;}
</style>
</head>



<script type="text/javascript">
var chn="Bonjour, voici un test de positionnement X=200 Y=100|200|100";

function rtrAjx(c){var o=document.getElementById('edt'),s;
s=c.split(/\|/g);
o.innerHTML=s[0];
o.style.display='block';
o.style.left=s[1]+'px';
o.style.top=s[2]+'px';
}
setTimeout('rtrAjx(chn)',3000);
</script>

</html>

Si les coordonnées devaient toujours figurer, sous une forme convenue, dans le texte à insérer, elles pourraient être recherchées avec une ou plusieurs expressions régulières...
Le code suivant permettrait, par exemple, de retrouver la valeur de X avec un chaîne de la forme indiquée.
var chn="Bonjour, voici un test de positionnement X=200 Y=100";
var x=parseInt(chn.substr(chn.search(/X=/)+2));
Messages postés
279
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
3
Le innerHTML est une propriété (read-write property) qui permet ici de lire et de modifier immédiatement le contenu du container edt et, plus généralement, tout élément du document.
Le setTimemout sert simplement à simuler un retour Ajax au bout de 3 secondes (3000 millisecondes) après l'ouverture de la page.
Il convient de noter que le script est situé à la fin du body de manière à ce qu'il soit lancé après que le container ait été installé.

Bonne continuation...
Messages postés
33
Date d'inscription
samedi 28 février 2004
Statut
Membre
Dernière intervention
8 mai 2016

oui effectivement c'est ce que j'ai tenté et reussi à faire, merci de ton aide, c'est la solution j'y etais pratiquement parvenu, mais à quoi sert ton timeout ? mettre fin à la fonction innerHTML ?

merci encore @+ vol68