Positionnement de textes avec javascript [Résolu]

Messages postés
33
Date d'inscription
samedi 28 février 2004
Statut
Membre
Dernière intervention
8 mai 2016
- - Dernière réponse : 007Julien
Messages postés
279
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
- 25 févr. 2011 à 10:26
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
Afficher la suite 

3 réponses

Meilleure réponse
Messages postés
279
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
2
3
Merci
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));

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 210 internautes nous ont dit merci ce mois-ci

Commenter la réponse de 007Julien
Messages postés
279
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
2
3
Merci
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...

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 210 internautes nous ont dit merci ce mois-ci

Commenter la réponse de 007Julien
Messages postés
33
Date d'inscription
samedi 28 février 2004
Statut
Membre
Dernière intervention
8 mai 2016
0
Merci
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
Commenter la réponse de vol68