colonne fixed devient float si overflow: comment?

Version imprimable

27/04/2011, 21h12
BlindeKinder

colonne fixed devient float si overflow: comment?

Salut,
j'ai trouvé cette page, dont le comportement de la colonne #sidebar correspond à ce que j'aurais besoin:
si la fenêtre est assez grande pour contenir toute la colonne, elle est 'fixed', sinon elle passe en float et défile avec le contenu.
J'ai remarqué qu'il y a deux propriétés pour #sidebar: une normale qui 'float', et l'autre #sidebar.lock, qui est 'fixed'... mais je ne retrouve pas de code js qui fait ça... est-ce une propriété de html6/css3?
28/04/2011, 16h59
Bisûnûrs

C'est du Javascript.
On le retrouve en faisant une recherche sur "sidebar" dans ce fichier :
http://jeremie.patonnier.net/themes/.../js/scripts.js
28/04/2011, 23h29
BlindeKinder

oups... j'avais manqué celui là... je vais devoir décortiquer tout ça jusqu'à user mes touches enter et tab... ;) ...
ce qui est étrange, c'est que firebug ne me signale rien au redimensionnement dans le profiler... en-même temps je ne suis pas une brute en js...
je regarde tout ça et je donne des nouvelles

bon, j'ai récupéré le code tout propre grâce à ça...
C'est en jQuery, je l'ai réécrit et adapté en simple JS. Pour qui ça intéresse:

Code:

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
 
function fixColonne() {
	//récupération de la colonne:
	var colonne = document.getElementById('header') ;
	//Récupération de la hauteur selon le navigateur:
	if ( colonne.offsetHeight ) {
		var hautColonne = colonne.offsetHeight ;
	}
	else if ( colonne.style.pixelHeight ) {
		var hautColonne = colonne.style.pixelHeight ;
	}
	//Récupération de la hauteur de la fenêtre:
	hautWindow = window.innerHeight ;
	//si body plus grand que colonne:
	if ( hautWindow - hautColonne > 0 ) {
		colonne.style.position='fixed';
	}
	else {
		colonne.style.position='absolute';
	}
}
 
//appel de la fonction au chargement:
if( window.attachEvent ) {
	window.attachEvent("load", fixColonne );
}
else if( window.addEventListener) {
	window.addEventListener("load", fixColonne , false);
}
 
//appel de la fonction on resize:
if( window.attachEvent ) {
	window.attachEvent("onresize", fixColonne );
}
else if( window.addEventListener) {
	window.addEventListener("resize", fixColonne , false);
}

Et en bonus une petite question JS: pourquoi dans un addEventListener on met la fonction sans les ( )? Et si on doit placer des arguments?

13/05/2011, 00h01
NoSmoking

Citation:

Et en bonus une petite question JS: pourquoi dans un addEventListener on met la fonction sans les ( )? Et si on doit placer des arguments?

la méthode addEventListener attend en 2éme paramètre, la référence à un fonction et non pas le résultat de celle ci.

Pour le passage de paramètre il suffit de passer par une fonction anonyme.
13/05/2011, 00h43
BlindeKinder

c'est clair, merci :)