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

**laurentSc** · 19/05/2011, 14h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

**SpaceFrog** · 19/05/2011, 14h34

heu % ne te convient pas ?

**laurentSc** · 19/05/2011, 14h38

Mais où est-ce que j'aurais dû mettre ce % ?

**SpaceFrog** · 19/05/2011, 14h40

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

top:20%;

**laurentSc** · 19/05/2011, 16h10

Et là

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**SpaceFrog** · 19/05/2011, 16h13

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

essaye plutot 10%

**laurentSc** · 19/05/2011, 16h23

Oui, d'accord

, 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Bovino** · 19/05/2011, 16h26

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

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

**laurentSc** · 19/05/2011, 16h40

Si, tout y est

:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Bovino** · 19/05/2011, 17h16

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**laurentSc** · 19/05/2011, 17h49

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**laurentSc** · 19/05/2011, 22h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**NoSmoking** · 19/05/2011, 22h53

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**laurentSc** · 19/05/2011, 23h09

Merci.

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.

**NoSmoking** · 19/05/2011, 23h17

Envoyé par laurentSc

Merci.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

var top,res=screen.height;alert(res);switch(res){case 800:top=20;alert('ici');break;default:top=60;break;}

**laurentSc** · 19/05/2011, 23h25

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 ?

**Watilin** · 19/05/2011, 23h25

@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

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 ?

**NoSmoking** · 19/05/2011, 23h26

oubli, je n'avais pas compris que tu avais compris que c'était la déclaration des variables le soucis...

**laurentSc** · 19/05/2011, 23h54

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

OK, mais avec ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

Quel navigateur tu utilises habituellement pour développer ?

IE8

utilise une console plutôt que ce vieux alert

c'est-à-dire ?

**Watilin** · 20/05/2011, 00h11

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> ?

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

JavaScript

Discussions similaires

Partager

Partager