11522 sujets
JavaScript, DOM et API Web HTML5
Si j'ai bien compris, il me fallait rajouter entre <head> et </head> le code suivant :
(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:
<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 :
Modifié par GeorgesM (04 Sep 2005 - 20:30)
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...
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
Modifié par GeorgesM (04 Sep 2005 - 21:22)
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é:
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)
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)
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)
ca marche presque:
ca me fait 100% de la fenetre, mais pas du document...
Le code:
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')}
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:
On resserait donc au soucis d'avant ?
Voici mon code du fichier javascript.js tel qu'il est à présent:
désolé de t'embeter autant
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')}Bonjour
... On avance ....
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)
... 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)
