placer un bloc à une hauteur qui dépend de résolution écran

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour,

je souhaite, comme le dit le titre, positionner un bloc selon la taille de l'écran. Pour l'instant, je n'ai fait qu'un tout petit test, mais qui ne marche pas :
Code:

1 2 3 4 5 <script type="text/javascript"> res=screen.height; alert(res);switch(res) {case 800 : top=700;alert('ici'); break;default:top=600;break;} document.write('top='+top+'<br>'); document.write('<div style="position: absolute; top:'+top+';>'); </script> <p>coucou</p>
(800px, c'est la hauteur de mon écran).

19/05/2011, 14h34
SpaceFrog

heu % ne te convient pas ?
19/05/2011, 14h38
laurentSc

Mais où est-ce que j'aurais dû mettre ce % ?
19/05/2011, 14h40
SpaceFrog

Code:

top:20%;

Et là
Code:

1 2 3 4 5 <script type="text/javascript"> res=screen.height; alert(res);switch(res) {case 800 : top=700;alert('ici'); break;default:top=600;break;} document.write('top='+top+'<br>'); document.write('<div style="position: absolute; top:'+top+ '%;>'); </script> <p>coucou</p>
qu'est-ce qui coïnce ? (Pas de alert('ici'); ni de document.write('top='+top+'<br>'); ce qui prouve qu'il y a une erreur js avant...

19/05/2011, 16h13
SpaceFrog

ben un top à 700 % ... ça fait un gros scroll ^^

essaye plutot 10%

Oui, d'accord :P, mais même maintenant avec 10 ou 20%, je n'ai toujours pas de alert('ici'), ce qui prouve qu'il y a une erreur avant...
Code:

1 2 3 4 5 <script type="text/javascript"> res=screen.height; alert(res); switch(res) {case 800 : top=20;alert('ici'); break;default:top=60;break;} document.write('top='+top+'<br>'); document.write('<div style="position: absolute; top:'+top+ '%;>'); </script> <p>coucou</p>

19/05/2011, 16h26
Bovino

Citation:

ce qui prouve qu'il y a une erreur js avant...

Probablement, mais on n'a pas le code qu'il y a avant :aie:

Si, tout y est :question: :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <script></script>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>test</title>
</head>
<body>
<script type="text/javascript"> res=screen.height; alert(res); switch(res) {case 800 : top=20;alert('ici'); break;default:top=60;break;}
document.write('top='+top+'<br>');
document.write('<div style="position: absolute; top:'+top+ '%;>');
</script>
<p>coucou</p>
</body>
</html>

19/05/2011, 17h16
Bovino

Code:

document.write('<div style="position: absolute; top:'+top+ '%;>');

Non seulement utiliser document.write() est à proscrire, mais si en plus la portion HTML que tu lui passe est mauvaise incorrecte...
19/05/2011, 17h49
laurentSc

Si document.write est à proscrire, comment tu ferais ?
Et j'ai essayé de corriger le html que je lui passe, mais ça ne marche toujours pas :

Code:

document.write('<div style="position: absolute; top:'+top+'%">');

Je compte mettre un switch dans mon code, mais il doit y avoir une erreur, vu que si je le commente, ce code marche :
Code:

1 2 3 4 5 6 7 <script type="text/javascript"> res=screen.height; alert(res); switch(res) { case 800 : top=20; alert('ici'); break; default : top=60; break; } document.write('<div style="display:block; position:absolute; left:250px; top:60px; '); </script> <p>coucou</p>
Donc, quel est le bug dans ce switch ?

une bonne habitude est de ne pas oublier de déclarer les variables avec le mot clé var
Code:

1 2 3 4 5 6 7 8 9 10 11 var top, res = screen.height; alert(res); switch(res) { case 800 : top = 20; alert('ici'); break; default : top = 60; break; }
l'indentation n'est pas non plus forcément un luxe...

19/05/2011, 23h09
laurentSc

Merci.:ccool:

Citation:

l'indentation n'est pas non plus forcément un luxe...

Je croyais que si en js,croyant que ce langage ne supportait pas les retours à la ligne...mais pas sûr vu que ça marche comme ça.
19/05/2011, 23h17
NoSmoking

Citation:

Envoyé par laurentSc

Merci.:ccool:
Je croyais que si en js,croyant que ce langage ne supportait pas les retours à la ligne...mais pas sûr vu que ça marche comme ça.

ce n'est pas dans ton cas l'indentation qui est en cause mais la non déclaration des variables correctement

ligne pour test

Code:

var top,res=screen.height;alert(res);switch(res){case 800:top=20;alert('ici');break;default:top=60;break;}
19/05/2011, 23h25
laurentSc

Citation:

ce n'est pas dans ton cas l'indentation qui est en cause mais la non déclaration des variables correctement

Oui, j'avais bien compris (l'indentation, juste pour la lisibilité). Mais pourquoi tu me mets une ligne de test ?
19/05/2011, 23h25
Watilin

@Laurent : Voici deux petits conseils à titre personnel, vu que tu as l'air d'avoir hérité de toutes les mauvaises techniques du siècle dernier :mrgreen: Je ne te blâme pas, ce n'est probablement pas ta faute.

Premièrement, à la place de document.write(bidule), utilise document.body.innerHTML += bidule, c'est quand même (un peu) moins crade.
Secondement, utilise une console plutôt que ce vieux alert, c'est bien plus pratique. Quel navigateur tu utilises habituellement pour développer ?
19/05/2011, 23h26
NoSmoking

oubli, je n'avais pas compris que tu avais compris que c'était la déclaration des variables le soucis...
19/05/2011, 23h54
laurentSc
Citation:

c'est quand même (un peu) moins crade

OK, mais avec ça :
Code:

1 2 document.body.innerHTML +='<div style="position: absolute; top:'+top+ '%">';
, ça ne marche pas (et pas étonnant, vu qu'il y a une variable js au milieu) ; donc, comment faire ?

Citation:

Quel navigateur tu utilises habituellement pour développer ?

IE8

Citation:

utilise une console plutôt que ce vieux alert

c'est-à-dire ?
20/05/2011, 00h11
Watilin

Sous IE8, fais juste F12 et tu as la console :)
Quand la console est activée, tu peux utiliser console.info à la place de alert.

Le problème de innerHTML ce n'est pas la variable, c'est un détail que j'ai oublié : si le body n'existe pas encore au moment où cette instruction est exécutée, ça plante. Je peux voir où tu as mis ce script par rapport à la balise <body> ?

;)

Voir 40 message(s) de cette discussion en une page