11402 sujets

JavaScript, DOM et API Web HTML5

Pages :
Bonjour !
J'aimerais faire une DIV qui fasse la hauteur totale du document, scroll compris, et non pas seulement de la fenetre !.
Si ma fenetre fait 800px de hauteur, et la page 1000px, il faut que cette div fasse 1000 px.

Merci beaucoup !
Modifié par Sylvain (06 Sep 2005 - 19:11)
Bonsoir.
Essaie :


document.getElementById('id_du_div').style.height = document.body.offsetHeight + 'px';
Si j'ai bien compris, il me fallait rajouter entre <head> et </head> le code suivant :

<script type="text/javascript">document.getElementById('fond').style.height = document.body.offsetHeight + 'px';</script>

(excusez moi si j'ai tort, je n'y connais presque rien en javascript)

Ca ne marche malheuresement pas.
La console javascript de firefox m'affiche:
a écrit :
Erreur: document.getElementById('fond') has no properties.
Bonsoir.

Le script exécuté dans le bloc head fait référence à un élément 'fond'
qui n'est pas encore chargé dans dom.

Il faut donc exécuter le script sur l'évenement onload de body qui se produit aprés le chargement.

Par exemple :

<body onload="document.getElementById('fond').style.height = document.body.offsetHeight + 'px'">

Modifié par GeorgesM (04 Sep 2005 - 20:30)
C'est là qu'est le problème:
ma div fond est appelée en XMLHTTPrequest lors d'un clic.

Voici une page de test

Lorsque l'on clique sur la malle, à droite, elle apparait au milieu de la page.
Il s'agit en fait d'un autre fichier qui est inclu en temps réel dans la page (c'est beau la technologie).
C'est le fond gris que j'essaie de faire couvrir toute la page.
Malheuresement, il ne se charge pas en meme temps que la page...
Normalement, xmlhttprequest permet de placer un contenu importé dans un conteneur.
Il faudrait, juste après, modifier les propriétés du contenu importé.

Est-ce qu'on peux voir le bout de code avec xmlhttp... ?

il est du genre

if (xmlhttp.readyState==4) 
{
conteneur.innerHTML = xmlhttp.responseText;
}

Modifié par GeorgesM (04 Sep 2005 - 21:22)
le code qui permet d'importer les pages dans une div est ici

Je l'affiche ici pour plus de simplicité:
//Permet d'inclure des pages en utilisant XMLHTTPrequest
function sendData(data, page, method, div){
if(document.all){var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;}
else{var XhrObj = new XMLHttpRequest();}
var content = document.getElementById(div);
if(method == "GET"){if(data == 'null'){XhrObj.open("GET", page);}else{XhrObj.open("GET", page+"?"+data);}}
else if(method == "POST"){XhrObj.open("POST", page);}
[i]XhrObj.onreadystatechange = function(){if (XhrObj.readyState == 4 && XhrObj.status == 200)content.innerHTML = XhrObj.responseText ;}	[/i]
if(method == "GET"){XhrObj.send(null);}else if(method == "POST"){XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');XhrObj.send(data);}}
function getFile(page){sendData('null', page, 'GET', 'cache')}
function description(page){sendData('null', page, 'GET', 'description')}

et j'ai mis en italique la partie qui t'interressait (ligne 8).
Au fait, j'ai pris ce code d'un site, mais je suis certain que certaines parties ne me concernent pas;
Modifié par Sylvain (04 Sep 2005 - 21:25)
C'est classique.

content.innerHTML = XhrObj.responseText;

Je pense qu'il faut agir sur le contenu importé.
Comme "content" a la bonne hauteur, la hauteur du contenu importé devrait être réglé à 100%,
et remplirait tout... enfn, j'imagine..., mais ça dépend de la structure
du contenu importé.
Modifié par GeorgesM (04 Sep 2005 - 21:37)
excuse moi, mais je n'ai pas trop compris ta dernière réponse Smiley confused
Si tu pouvais t'expliquer comme pour un noob (car je suis un noob en javascript).
Si je met 100% en CSS, ca ne remplit que la fenetre, et moi, je veux la page...

Merci d'avance Smiley smile
Si on connait l'id du contenu importé, alors on peut agir sur lui avec


content.innerHTML = XhrObj.responseText;
document.getElementById('contenu_importé').style.height = ...

Modifié par GeorgesM (04 Sep 2005 - 21:48)
ca marche presque:
ca me fait 100% de la fenetre, mais pas du document...

Le code:

//Permet d'inclure des pages en utilisant XMLHTTPrequest
function sendData(data, page, method, div){
if(document.all){var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;}
else{var XhrObj = new XMLHttpRequest();}
var content = document.getElementById(div);
if(method == "GET"){if(data == 'null'){XhrObj.open("GET", page);}else{XhrObj.open("GET", page+"?"+data);}}
else if(method == "POST"){XhrObj.open("POST", page);}
XhrObj.onreadystatechange = function(){if (XhrObj.readyState == 4 && XhrObj.status == 200)content.innerHTML = XhrObj.responseText ;document.getElementById('fond').style.height = document.body.offsetHeight + 'px';}	
if(method == "GET"){XhrObj.send(null);}else if(method == "POST"){XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');XhrObj.send(data);}}
function getFile(page){sendData('null', page, 'GET', 'cache')}
function description(page){sendData('null', page, 'GET', 'description')}
Essaie de remplacer
document.body.offsetHeight
par
document.body.scrollHeight

attention : si tu es en XHTML 1.0 strict, en raison d'un bug sur IE, remplacer par document.documentElement.scrollHeight.
les deux remplacements ne marchent pas Smiley bawling
Le premier affiche 100% de la fenetre, le second me met une erreur javascript (je pense qu'il y a une faute de frappe pour ce second)
Je pense que scrollHeight doit fonctionner..

document.getElementById('fond').style.height = document.body.scrollHeight;

Modifié par GeorgesM (04 Sep 2005 - 22:45)
Il n'y as plus d'erreur de syntaxe maintenant, mais le code ne fait aucun effet, la div s'adapte à son contenu.
Si ca peut t'aider, la console javascript m'indique le meme mesage:
a écrit :
Erreur: document.getElementById('fond') has no properties.

On resserait donc au soucis d'avant ?
Voici mon code du fichier javascript.js tel qu'il est à présent:
//Permet d'inclure des pages en utilisant XMLHTTPrequest
function sendData(data, page, method, div){
if(document.all){var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;}
else{var XhrObj = new XMLHttpRequest();}
var content = document.getElementById(div);
if(method == "GET"){if(data == 'null'){XhrObj.open("GET", page);}else{XhrObj.open("GET", page+"?"+data);}}
else if(method == "POST"){XhrObj.open("POST", page);}
XhrObj.onreadystatechange = function(){if (XhrObj.readyState == 4 && XhrObj.status == 200)content.innerHTML = XhrObj.responseText ;document.getElementById('fond').style.height = document.documentElements.scrollHeight + 'px';}	
if(method == "GET"){XhrObj.send(null);}else if(method == "POST"){XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');XhrObj.send(data);}}
function getFile(page){sendData('null', page, 'GET', 'cache')}
function description(page){sendData('null', page, 'GET', 'description')}


Smiley confus désolé de t'embeter autant
Salut,

tu vas utiliser ce système pour l'affichage de tes pages sur ton site? ou bien c'est pour intégrer une fonctionnalité précise?
Modifié par solo (05 Sep 2005 - 07:58)
Bonjour

... On avance ....



//Permet d'inclure des pages en utilisant XMLHTTPrequest
function sendData(data, page, method, div)
{
if(document.all)
{
var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
}
else
{
var XhrObj = new XMLHttpRequest();
}
var content = document.getElementById(div);
if(method == "GET")
{
if(data == 'null')
{
XhrObj.open("GET", page);
}
else{XhrObj.open("GET", page+"?"+data);
}
}
else if(method == "POST")
{
XhrObj.open("POST", page);
}
XhrObj.onreadystatechange = function()
{
if (XhrObj.readyState == 4 && XhrObj.status == 200)
{                                                      [b]// içi rajouter "brace" ouvrante[/b]
content.innerHTML = XhrObj.responseText ;
document.getElementById('fond').style.height = document.body.scrollHeight + 'px';
}                                                      [b]//içi rajouter "brace" fermante[/b]
if(method == "GET")
{
XhrObj.send(null);
}
else if(method == "POST")
{
XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');XhrObj.send(data);
}
}
} [b]// Correction[/b]
function getFile(page){sendData('null', page, 'GET', 'cache')}
function description(page){sendData('null', page, 'GET', 'description')}


Voilà le code javascript avec une petite correction. (condition if doit exécuter deux lignes de code.)
En effet, avant importation du contenu, 'fond' n'existe pas. C'est normal.

Maintenant, il me reste un petit doute, mais j'ai déjà une petite solution.
Le doute: pour d'obscures raison liées à l'interpréteur javascript, au fait qu'on manipule dom en direct,
et que les systèmes d'exploitations agissent par threads, il se peut qu'après importation,
le node 'fond' ne soit pas disponible "de suite". Dans ce cas, on appliquera une petite temporisation. Mais ce n'est qu'un doute.
Donc pas de panique.
Modifié par GeorgesM (06 Sep 2005 - 18:51)
solo a écrit :
Salut,

tu vas utiliser ce système pour l'affichage de tes pages sur ton site? ou bien c'est pour intégrer une fonctionnalité précise?


C'est pour une fonctionnalité précise, l'affichage de la malle.
La navigation dans le site ce fait très bien sans, ce n'est qu'un "plus".

Pour GeorgesM, je teste ta solution, et te donne ma réponse très bientôt ! (j'ai compris une phrase sur 2, mais je ne m'inquiete pas, je m'y interresserais bientôt au javascript et dom)
Après essai, il semble qu'il manque un } quelque part (la console me dit à la dernière ligne, mais c'est certainement autre part... Smiley biggol
Pages :