Variables en HTML

Bonjour,
J'ai beaucoup travaillé avec PHP et HTML et je commence à me mettre à Javascript.
Mon but :
Réaliser une fenêtre effaçable que je peux disposer où je veux dans ma page.
Tout va bien , ça fontionne, mais à l'usage je me rends compte que mes visiteurs ont des écrans de taille différente et ma fenêtre est mal placée, coupée, ou en dehors de l'écran. C'est original mais peu ergonomique.
Je me suis dit "pas de problème, il suffit d'obtenir la taille de l'écran via javascript et de procéder à un petit calcul pour positionner la fenêtre exactement où je veux". Facile à dire, mais je ne sais pas faire cela facilement !! En effet ma fenêtre est réalisée en HTML.
Et, c'est ce que je crois !!, les variables du module JS ne semblent pas pouvoir être "transcriptes/récupérées" pour écrire la ligne HTML suivante puisqu'il n'y a pas de variable en html :

Code:

---

<div id="texte" class="texte" style="position: absolute; top: 150; left: 20; width: 400; height: 500">

---

Les paramètres top: et left: provenant, après calcul, de la taille de l'écran obtenue par JS.
Comment puis-je en sortir ?
* réaliser ma fenêtre totalement en javascript
* trouver une fonction/module HTML donnant la taille de l'écran ?
* utiliser du css avec une classe spécifique contenant les paramètres, si JS permet de modifier dynamiquement ces paramètres.
** ?

Je suis à l'écoute de vos conseils.
Je vous remercie. Bonne journée.

Marcel Marie

Bonjour,

Fait une petite recherche sur le responsive web design (conception de sites web adaptatifs)

Salut,

En JavaScript tu peux agir sur un élément du DOM avec cette méthode : document.getElementById('ID_HTLML');
Cela fonctionne aussi avec les class (je te laisse faire une recherche sur ce point).

Ensuite, une fois que tu as ciblé ton élément avec la méthode ci-dessus, tu appliques le style que tu veux (en ayant, au préalable, fait tes calculs de position) par : document.getElementById('ID_HTLML').style.<style_css>

Exemple :

Code:

---

1 2 3

var maDiv = document.getElementById('texte'); maDiv.style.backgroundColor = "#ff0000";

---

Après je laisse faire ton imagination.

Bonjour,

Citation:

---

<div id="texte" class="texte" style="position: absolute; top: 150; left: 20; width: 400; height: 500">

---

il serait bon de mettre également des unités à tes valeurs.

Citation:

---

Les paramètres top: et left: provenant, après calcul, de la taille de l'écran obtenue par JS.

---

tu ne peux pas t'en sortir avec les %, mais le top m'intrigue !?!

Citation:

---

trouver une fonction/module HTML donnant la taille de l'écran ?

---

ce n'est pas la taille de l'écran qu'il te faut mais la largeur de la fenêtre.

Bonjour,
Merci pour vos réponses. Des infos vont me servir ...
Ma question n'ayant pas été très précise les réponses l'ont été tout autant (Mea Culpa !).
Je ferme donc cette discussion et j'en ai ouvert une autre afin de ne pas s'égarer "philosophiquement" du résultat souhaité.
Je vous prie de m'excuser.
Bonne journée.

Marcel Marie