placer un bloc à une hauteur qui dépend de résolution écran [Résolu]

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

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

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.

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.

NoSmoking · 19/05/2011, 23h17

Citation:

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

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 ?

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

Citation:

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 ?

Citation:

Quel navigateur tu utilises habituellement pour développer ?

IE8

Citation:

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

19/05/2011, 14h34	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 018 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 018 Points : 45 108 Points : 45 108	heu % ne te convient pas ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

19/05/2011, 14h40	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 018 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 018 Points : 45 108 Points : 45 108	Code : Sélectionner tout - Visualiser dans une fenêtre à part top:20%; __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

19/05/2011, 16h13	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 018 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 018 Points : 45 108 Points : 45 108	ben un top à 700 % ... ça fait un gros scroll ^^ essaye plutot 10% __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

19/05/2011, 17h16	#10
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 803 Points : 35 803	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... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

19/05/2011, 17h49	#11
laurentSc Débutant Laurent Webmaster Inscription : octobre 2006 Messages : 2 873 Détails du profil Informations personnelles : Nom : Laurent Âge : 48 Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Webmaster Secteur : Industrie Informations forums : Inscription : octobre 2006 Messages : 2 873 Points : 1 320 Points : 1 320	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+'%">');
	00

19/05/2011, 14h38	#3
laurentSc Débutant Laurent Webmaster Inscription : octobre 2006 Messages : 2 873 Détails du profil Informations personnelles : Nom : Laurent Âge : 48 Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Webmaster Secteur : Industrie Informations forums : Inscription : octobre 2006 Messages : 2 873 Points : 1 320 Points : 1 320	Mais où est-ce que j'aurais dû mettre ce % ?
	00

19/05/2011, 23h25	#17
Watilin Membre Expert Matilin Torre Étudiant Inscription : juin 2010 Messages : 679 Détails du profil Informations personnelles : Nom : Matilin Torre Âge : 23 Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2010 Messages : 679 Points : 1 202 Points : 1 202	@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 ? __________________ Disposition de clavier ergonomique française : Bépo
	00

19/05/2011, 23h26	#18
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 939 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 939 Points : 4 767 Points : 4 767	oubli, je n'avais pas compris que tu avais compris que c'était la déclaration des variables le soucis...
	00

20/05/2011, 00h11	#20
Watilin Membre Expert Matilin Torre Étudiant Inscription : juin 2010 Messages : 679 Détails du profil Informations personnelles : Nom : Matilin Torre Âge : 23 Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2010 Messages : 679 Points : 1 202 Points : 1 202	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> ? __________________ Disposition de clavier ergonomique française : Bépo
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email