[DOM] div avant le body (donc avant le contenu du site)

**pas30** · 18/02/2009, 06h35

Bonjour,

J'essaie de créer une petite barre en haut de page mais je n'y arrive pas. L'idée c'est de créer donc une petite barre (div) de la largeur de l'écran et de 20 de hauteur qui s'afficherait au dessus du site sur lequel le code serait collé (insertbefore)
Voici mon code :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<?php
header("Content-Type: text/javascript");
?>
if (window.innerHeight) { 
 
		//Navigateurs sauf Explorer
 
		var fenHeight = window.innerHeight;
 
		var fenWidth = window.innerWidth;
 
	}
 
	else if (document.documentElement && document.documentElement.clientHeight) {
 
		//Internet Explorer mode Strict
 
		var fenHeight = document.documentElement.clientHeight;
 
		var fenWidth = document.documentElement.clientWidth;
 
	}
 
	else if (document.body && document.body.clientHeight) {
 
		//Autres Internet Explorer
 
		var fenHeight = document.body.clientHeight;
 
		var fenWidth = document.body.clientWidth;
 
	}
 
function scroll_fenetre()
{
if (window.innerHeight) { 
 
		//Navigateurs sauf Explorer
 
		var scroll = 0;
 
	}
 
	else if (document.documentElement && document.documentElement.scrollTop) {
 
		//Internet Explorer mode Strict
 
		var scroll = document.documentElement.scrollTop;
 
	}
 
	else if (document.body && document.body.scrollTop) {
 
		//Autres Internet Explorer
 
		var scroll = document.body.scrollTop;
 
	}
	  if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") {
    var scroll=0;
    }
	return scroll;
}
 
function IEFixedElementPos()
{
  // IE 7 en mode standard
  if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") 
  {
	 return ("fixed");
  }
  return ("absolute");
}
 
 document.write('<style type="text/css">\n'+
 '#leader_box \n'+
 '	{\n'+
 '	position:fixed;\n'+
 '	width:\n'+fenWidth+'px;\n'+
 '	height:20px;\n'+
 '	top:0px;\n'+
 '	left:0px;\n'+
 '	position: expression(IEFixedElementPos());;\n'+
 '	top: expression(scroll_fenetre());\n'+
 '	}\n'+
 '</style>');
 
var code="<table id='leader_box'><tr><td bgcolor=#FFFFFF>test</td></tr></table>";
var b = document.getElementsByTagName("body")[0];
b.insertbefore(code,b);

Si quelqu'un a une idée à ce petit problème je suis preneur je pense qu'il y a un petit quelquechose de pas logique dans mon code mais quoi

**SpaceFrog** · 18/02/2009, 08h23

position absolute zindex de premier plan et le div DOIT être dans le body ...

**franculo_caoulene** · 18/02/2009, 09h56

Salut,

Pourquoi le faire en javascript? C'est du pur css.

**Bovino** · 18/02/2009, 10h24

Envoyé par franculo_caoulene

Salut,

Pourquoi le faire en javascript? C'est du pur css.

Parce que les roues rondes ne plaisent pas à tout le monde !

**pas30** · 18/02/2009, 11h56

Tu récupères la largeur de la page comment en css ???
Et pourquoi je dois mettre le div en position absolute ???
J'aimerais qu'il soit en fixed position haute pour que lorsque l'on scrolle elle reste visible
Merci d'avance de votre aide

**franculo_caoulene** · 18/02/2009, 12h25

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
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
   <title>fixed</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   * {margin:0;padding:0;background:#000;color:#ccc;}
   body {height:2000px;}
   div {width:100%;position:fixed;}
   p {background:#333;}
   </style>
</head>
<body>
   <div><p>blah</p></div>
   <script type="text/javascript">
   </script>
</body>
</html>

Pour IE6 il y a la FAQ. Personnellement, vu mes utilisateurs, j'ai abandonné le développement pour IE6.

**SpaceFrog** · 18/02/2009, 13h11

c'est crossbrowser position:fixed; ????

**Bovino** · 18/02/2009, 13h17

Non, c'est pas cross-browser, c'est pourquoi :

Envoyé par franculo_caoulene

Pour IE6 il y a la FAQ. Personnellement, vu mes utilisateur, 'jai abandonné le développement pour IE6.

**SpaceFrog** · 18/02/2009, 13h30

alors position absolute zindex et un autre div pour le contenu de la
page ...

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html>
<head>
<title>Mon bouton mouvant</title>
<style type="text/css">
body{overflow:hidden;margin:0px;}
#fixed 	{position:absolute;
			 top:0px;
			 left:0px;
			 width:100%;
			 height:5%;
			 border : solid 1px red;
			 text-align:center;
			 z-index:2;
			 ;}
</style>
</head>
 
<body onselectstart="return false;">
 
<div id="fixed">
ici ton menu
</div>
 
<div id="cont" style="position:absolute; top:5%;width:100%; height:95%; overflow:auto;">
 
<div style="height:1200px;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Mon beau Site</h1>
<p>Amusez vous à défiler la page.</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Mon beau Site</h1>
<p>Amusez vous à défiler la page.</p>
 
</div>
 
</div>
 
</body>
</html>

**franculo_caoulene** · 18/02/2009, 13h57

Ce code donne la sensation (peut-être désagréable) d'être dans une frame. Peut-être faudrait-il proposer ce code en alternative dans la FAQ alors? En attendant, je préfère un simple position:fixed; tout court avec un menu restant en haut sous IE6.

**SpaceFrog** · 18/02/2009, 14h22

oui mais y'a pas de frame

**pas30** · 25/02/2009, 00h50

Tout çà ne répond pas à ma question de départ

Le code s'éxécutera sur d'autres sites que le mien donc il faut aller mettre une div en position fixed en haut de page du site sur lequel sera affiché le code et pour celà il paraît que le seul moyen est d'utiliser insertbefore() mais celà ne fonctionne pas pour l'instant

**Bovino** · 25/02/2009, 07h03

Euh... si :

Envoyé par SpaceFrog

le div DOIT être dans le body ...

répond bien à :

div avant le body (donc avant le contenu du site)

Ensuite, insertBefore étant une méthode propre au DOM, lui passer des arguments non valides (au sens du DOM) peut effectivement être problématique !

**pas30** · 28/02/2009, 01h38

çà ne répond en rien à ma question de départ qui était je le rappelle de savoir comment on pouvait insérer une barre de 15 pixels de hauteur par exemple au dessus d'un site sachant que j'avais entendu parlé de la méthode insertbefore mais que je ne parviens pas à la faire fonctionner
Insertbefore ne signifie pas "avant" mais "au début" il me semble donc pour mettre en haut de page il faut bien indiquer de faire un insertbefore du body donc au début du body
Quelqu'un a déjà utilisé cette méthode pour afficher des éléments dans du html à une position définie avec insertbefore ?

**SpaceFrog** · 02/03/2009, 09h42

Insertbefore ne signifie pas "avant" mais "au début"

heu non tout faux là...
Before veut bien dire avant !

Donc

Code :

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

document.body.insertBefore(NouveauDiv,document.body.childNodes[0]

ou firstChild...

Insèrera bien le noeud au debut ...

Mas cela n'en assurera pas la position en bandeau en haut de page ...
Comme sus-dit tu peux appender en fin de page

Code :

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

document.body.appendChild(nouveauDiv)

et à partir du moment ou ton div est en position absolute, en zindex de premier plan, et que le reste du contenu de la page est dasn un div en overflow auto en dessous, tu auras l'effet souhaité...

Donc toutes les réponses ont bien été données ...

[DOM] div avant le body (donc avant le contenu du site)

JavaScript

Discussions similaires

Partager

Partager