DOM et fichier CSS

Marsh Posté le 20-12-2006 à 11:42:33

Bonjour à tous !

J'ai fait des recherches sur le forum et j'ai trouvé entre autre ça : QuirksMode.org

En effet, selon la taille du l'écran, je souhaite paramétré dynamiquement les hauteurs de différents éléments (div) en atteignant les déclarations de mon fichier CSS externe par du DOM.
Le but est que certaines divisions qui ont un background se répétant en y, s'arrêtent lorsque leur conteneur s'arrête, c'est-à-dire en bas de page.
Ainsi admettons que ma page fait 750px de haut, un user A en 800*600 devra scroller à coup sûr (les onglets etc..).
C'est pour cela que je prend la taille de l'espace affiché par le navigateur et non la résolution de l'écran.
Cependant, un user B en 1280*960 ne devra pas scroller mais verra ma page occupé toute la hauteur de l'espace affiché par le navigateur et donc pas mal d'espace vide sur le bas mais peu importe.

Vous me suivez ? Alors commençons donc par le body..

Donc mon script ressemble à ça :

Code :

ie4=document.all
ns6=document.getElementById&&!document.all
function GiveMeSize() {
if(ie4){
document.styleSheets[0].body.height=document.body.clientHeight
}
else if(ns6){
document.styleSheets[0].body.height=window.pageYOffset
}
window.onload = GiveMeSize;

Vous vous en doutez, cela ne donne rien.
Si vous avez des suggestions, je suis prenneur.

Reply

Marsh Posté le 20-12-2006 à 11:42:33

Reply

Marsh Posté le 20-12-2006 à 11:44:54

Ta pseudo détection de navigateur est complètement naze en fait.

Au lieu de triturer document.stylesheet et le body, utilise plutôt un élément parent (genre un div cash dans le body) avec un id :

Code :

document.getElementById('pouet').style.height = window.machinBidule + 'px';

Reply

Marsh Posté le 20-12-2006 à 11:55:43

C'était trop beau.. Ca ne marche pas.

Code :

ie4=document.all
ns6=document.getElementById&&!document.all
function GiveMeSize() {
if(ie4){
Hauteur=document.body.clientHeight;
body.style.height=Hauteur
col-left-shadow.height=Hauteur+500
//document.styleSheets[0].col-left.height=Hauteur+500
}
else if(ns6){
Hauteur=window.pageYOffset;
document.getElementById('body').style.height=Hauteur + 'px'
document.getElementById('col-left-shadow').style.height=Hauteur + 'px'
}
window.onload = GiveMeSize;

Reply

Marsh Posté le 20-12-2006 à 11:59:29

Enlève ta détection qui sert à rien. Attention, t'as pas la même chose entre les deux cas

Reply

Marsh Posté le 20-12-2006 à 12:26:29

Aucun effet, ni sous IE6, ni sous FF :cry:

Code :

...
<script language="JavaScript">
function GiveMeSize() {
var Hauteur=(document.body.clientHeight);
document.getElementById('body').style.height=Hauteur + 'px'
document.getElementById('col-left-shadow').style.height=Hauteur + 'px'
}
</script>
</head>
<body OnLoad="GiveMeSize();">
...

L'inspecteur JavaScript FF me dit que document.getElementById("body" ) has no properties
Alors qu'il en a mais dans un fichier CSS externe..

Message édité par d-Rek le 20-12-2006 à 12:32:24

Reply

Marsh Posté le 20-12-2006 à 12:38:16

C'est normal, je t'ai dit d'utiliser un div avec un id. Là y'a aucun élément avec pour id "body"...

Reply

Marsh Posté le 20-12-2006 à 12:43:53

Astuce du jour, astuce pour toujours !
J'ai mis id="body" sur le body

Ca marche à merveille.
Merci beaucoup FlorentG !

Reply

Marsh Posté le 20-12-2006 à 14:54:06

<body id="body"> <= dans ce cas
on a cette égalité toujours vraie :
document.body ====== document.getElementById('body')

Reply

DOM et fichier CSS

Sujets relatifs:

Leave a Replay