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

Version imprimable

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

;)

je confirme bien évidement ce qui est dit
Ca plante

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var top = 50;
// ICI cela ne marche pas BODY n'est pas encore defini
document.body.innerHTML += '<div style="position:absolute;top:' +top +'%">ICI<\/div>'
</script>
</head>
<body>
</body>
</html>

Ca marche

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var top = 50;
// ICI cela marche BODY est defini
document.body.innerHTML += '<div style="position:absolute; top:'+top +'%">ICI<\/div>'
</script>
</body>
</html>

ou encore

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
  var oDiv = document.createElement('DIV');
  oDiv.style.position = 'absolute';
  oDiv.style.top = '50%';
  var oTxt = document.createTextNode('ICI');
  oDiv.appendChild( oTxt);
  document.body.appendChild( oDiv);
}
</script>
</head>
<body>
</body>
</html>

Code:

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

En théorie, ça devrait donc marcher...Et ben, non...

20/05/2011, 01h05
Watilin

En fait, qu'est-ce que c'est censé faire pour marcher ? Ta div doit-elle contenir quelque chose ? À quoi correspond le </div> de la ligne 27 ?
20/05/2011, 01h13
Watilin
Encore autre chose : c'est à mon avis plus intéressant de regarder la taille de la fenêtre plutôt que la taille de l'écran, car la barre des tâches, les bords de la fenêtre, les différentes barres d'outils et que-sais-je-encore réduisent la partie visible de ta page.

Le problème c'est que les navigateurs ont chacun leur avis là-dessus (un aperçu du bordel). Pour simplifier les choses, on va déjà mettre ta page en mode standard. Sous Firefox, fais clic-droit > informations sur la page, tu verras cette ligne :

Citation:

Mode de rendu : Mode de compatibilité (quirks)

C'est parce que ton DOCTYPE n'est pas complet. Utilise celui-ci :
Code:

1 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Avec ta page en mode standard, il ne reste plus que deux cas. Dans le cas le plus courant, on a accès à la variable window.innerHeight. Si celle-ci n'est pas définie, on se rabat sur les versions 6 à 8 d'IE qui utilisent document.documentElement.clientHeight. Ce qui donne un bout de code à peine plus long :
Code:

1 2 3 4 5 6 var top, res; if (window.innerHeight) { res = window.innerHeight; } else { res = document.documentElement.clientHeight; }
À ma connaissance, les seuls navigateurs qui passent à la trappe sont IE4 et 5, mais avec de tels ancêtres, connaître la hauteur de la fenêtre est le cadet de nos soucis :roll:
20/05/2011, 18h04
laurentSc

Citation:

À quoi correspond le </div> de la ligne 27 ?

Vu que la div est ouverte ligne 24, il vaut mieux la refermer...:zoubi:

Citation:

En fait, qu'est-ce que c'est censé faire pour marcher ?

que la div soit bien à la position verticale donnée par la variable js top.

Citation:

c'est à mon avis plus intéressant de regarder la taille de la fenêtre plutôt que la taille de l'écran

Mon idée est de placer un truc (un pied de page) en bas de le fenêtre, sachant que la mise en page est "cradement" faite avec des tables html, et donc que si le contenu de la page est tout petit, cela remonte le pied de page ; donc même si la mise en page est crade (elle est faite par l'outil générateur de site web utilisé), utiliser une div placée verticalement uniquement en fonction de la taille de la page devrait placer le pied de page là où il faut. (L'idée tient-elle la route ?)

Je viens de coder ça :

Code:

1
2
3
4
5
6
7
var top, res;
if (window.innerHeight) {
res = window.innerHeight;
} else {
res = document.documentElement.clientHeight;
} 
alert(res);

et le alert(res) donne 0...

Ca marche comme il faut en reprenant le code de NoSmoking :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
var top, res;
if (window.innerHeight) {
res = window.innerHeight;
} else {
res = document.documentElement.clientHeight;
}
//res=screen.height;
alert(res);
switch(res) {
case 800 :
top = 150; alert('ici');
break;
default :
top = 260;
break;
}
window.onload = function(){
var oDiv = document.createElement('DIV');
oDiv.style.position = 'absolute';
oDiv.style.top = top;
var oTxt = document.createTextNode('coucou');
oDiv.appendChild( oTxt);
document.body.appendChild( oDiv);
}
</script>

mais juste avec la hauteur de l'écran, pas celle de la fenêtre : qu'est-ce qui ne va pas ?

Citation:

Envoyé par laurentSc

et le alert(res) donne 0...

Tu as bien mis le DOCTYPE que je t'ai donné ?

Citation:

Envoyé par laurentSc

Vu que la div est ouverte ligne 24, il vaut mieux la refermer...:zoubi:

Ah ok, j'ai compris sur quoi on se comprenait pas :mouarf: En fait, la <div> de la ligne 24 est bel et bien fermée. Je t'ai déjà parlé de la console F12, regarde l'onglet HTML : tu vois le DOM, la représentation arborescente des éléments de la page. Le innerHTML ne fait rien de plus qu'insérer des objets dans le DOM, et pour ça, il doit refermer les balises qui sont laissées ouvertes.

Citation:

Envoyé par laurentSc

utiliser une div placée verticalement uniquement en fonction de la taille de la page devrait placer le pied de page là où il faut. (L'idée tient-elle la route ?)

Oui, elle est tout à fait pertinente. Cependant, il y a beaucoup plus simple : la propriété CSS bottom :)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>CSS bottom</title> <link rel="stylesheet" type="text/css" href="footer.css" /> </head> <body> <div id="content"> <div id="orange"></div> <div id="vert"></div> <div id="bleu"></div> </div> <div id="footer"> <p>coucou</p> </div> </body> </html>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 html { /* important pour positionner le footer */ position: relative; } body { /* doit être égal à la hauteur totale du footer (hauteur + padding) */ padding-bottom: 3em; } #footer { height: 2em; /* je rajoute un padding pour que les marges des éléments internes ne dépassent pas */ padding-bottom: 1em; position: absolute; bottom: 0; left: 0; } /* le dernier élément du footer doit avoir une marge inférieure au padding du footer */ #footer p { margin: 0.8em; } /* le reste c'est juste pour mieux voir */ body { width: 150px; margin: 0; } #footer { width: 100%; background: gray; color: white; } #content div { width: 200px; height: 500px; margin: 1em; } #orange { background: #fd9; } #vert { background: #df9; } #bleu { background: #ccf; }
Il reste un léger problème : cette solution ne marche pas sous IE7 et moins. Si tu penses que tu ne peux pas te permettre de laisser de côté tes visiteurs qui utilisent toujours IE7-, on repartira sur la solution JavaScript ;)

23/05/2011, 18h10
laurentSc
Je n'ai pas encore regardé la solution CSS (je ne sais pas s'il est important que ça marche pour IE7 ou moins, vu que ce n'est pas pour moi), mais j'ai regardé la solution js ; en effet le doctype n'était pas à jour ; je l'ai fait, mais encore problème : avec
Code:

1 2 3 4 5 6 7 8 9 var top, res; if (window.innerHeight) { res = window.innerHeight; } else { res = document.documentElement.clientHeight; } alert('res='+res);
(désolé, pas encore passé à la console) Le alert me donne 0...
23/05/2011, 23h04
Watilin

Hmm :koi: Je ne comprends pas. Que t'indique la console pour « mode navigateur » et « mode de document » ?
23/05/2011, 23h16
laurentSc

c'est en anglais, même si la langue du PC est le français
Browser mode : IE8
Document mode : Quirks
23/05/2011, 23h28
Watilin

Tu es toujours en mode quirks (= non standard), donc c'est normal que ça donne 0. Re-vérifie ton DOCTYPE, ça ne peut venir que de là ;) Et vérifie aussi qu'il n'y aucun caractère avant, pas même un espace ou un saut de ligne.

Ça peut être aussi un problème d'encodage, regarde la config de ton éditeur de texte : il y a un mode UTF8 bizarre qui rajoute un caractère invisible en début de fichier.
23/05/2011, 23h43
laurentSc

Bien vu : avant le doctype, il y avait des lignes de PHP et notamment des echos ; je les ai déplacés juste après le doctype, et maintenant, ça affiche 571...
Et pour un étudiant, tu en connais un rayon...
24/05/2011, 00h13
Watilin

Merci du compliment :D Ça fait pas mal de temps que je bourlingue sur les fora d'entraide, et j'aime bien vérifier ce que je dis avant de répondre. En passant du temps sur Google, j'ai appris des tas de trucs…