11528 sujets

JavaScript, DOM et API Web HTML5

Redimensionner un div dynamiquement en fonction de...

Pages :
Bonjour à tous

voilà quelques jours que je me casse les dents la dessus : j'aimerais pourvoir redimensionner une div dynamiquement en fonction de l'espace d'affichage du client.

Par espace d'affichage, j'entends la taille de la fenêtre du navigateur moins toutes les barres d'outils et autre, c.a.d. l'espace qu'il reste pour afficher la page HTML.

Je voudrais faire ça, car j'ai une div en overflow:auto, et je veux que l'ascenseur soit uniquement sur cette div, et non sur toute la page, donc, je veux que la div rentre toujours dans ce qui lui reste de place dans l'espace d'affichage.

Si je n'ai pas été asses claire, ou si vous voulez des précisions, n'hésitez pas.

Merci d'avance pour ceux qui vont m'apporter leur aide
Modifié par Assimil (11 Jul 2007 - 10:18)
Bonjour.

As-tu réellement besoin de Javascript pour ça ? N'y a-t-il réellement aucune solution en CSS ?
Non, pas moyen en CSS pour mon cas. à ma connaissance en tout cas, apres, si tu as une solution, je ne suis pas sectere, au contraire, je préfèrerais utiliser du CSS
sans pouvoir les citer de nom, y'a moyen de calculer la taille de la fenêtre en javascript, et donc de redimensionner les div en conséquence dans un évènement onresize ou onload.

maintenant, c'est pas le plus élégant au chargement..
le CSS serait mieux, mais en effet, c'est pas toujours possible..
Salut,

Le problème c'est que l'implémentation de la transparence en CSS n'est pas encore valable, donc on utilise des propriétés spécifiques aux navigateurs, qui sont bien plus des "trucs de gorets" qu'une simple image transparente. Smiley cligne
Assimil a écrit :
Non, pas moyen en CSS pour mon cas. à ma connaissance en tout cas, apres, si tu as une solution, je ne suis pas sectere, au contraire, je préfèrerais utiliser du CSS
Mon problème c'est que je n'arrive pas à voir ce que tu veux faire donc je ne peux pas trop t'aider ... Si tu as une image ou un exemple en CSS qui fonctionne pour une seule résolution je pourrais peut-être comprendre.
voilà la page en question :
http://polystudio.2.free.fr/test/

la div concerné a l'id "prive_contenu_vue"

de plus, je ne veux pas que ça ce limit au onload, mais aussi à un redimentionnement, qu'il soit manuel ou qu'il soit lors d'une maximisation ou demaximisation, et aussi losque l'on masque le header avec le petit script que j'ai déjà mis en place
De toute façon, j'ai essayé d'intégrer le coup du pixel, mais ça ne marche pas, ça me fait toujours 1 sur la hauteur... alor que ça marche pour la largeur... Je ne comprend pas pourquoi c'est aussi galaire de récupérer la hauteur, si quelqu'un peut m'aider, je luis en serai vraiment reconnaissant, car là, je déprime grave... Smiley bawling
C'est pas que j'ai pas d'idées c'est que je fais autre chose et je n'ai pas encore eu le temps de regarder en détail. Je dois repartir mais je regarderai en revenant si personne n'a encore trouvé.
Je sais pas si j'ai bien compris ton probleme, mais si tu passe ta div "prive_contenu_vue" en "position:absolute", vue que tes div qui se trouvent en haut et a gauche on des tailles constantes, tu peux mettre:

"right:0px;
bottom:0px;
left:181px;
top:...(j'ai la flemme de le calculer, il y a trop de div!)"

J'espere que je t'ai aidé!

+++
maxroucool a écrit :
Je sais pas si j'ai bien compris ton probleme, mais si tu passe ta div "prive_contenu_vue" en "position:absolute", vue que tes div qui se trouvent en haut et a gauche on des tailles constantes, tu peux mettre:

"right:0px;
bottom:0px;
left:181px;
top:...(j'ai la flemme de le calculer, il y a trop de div!)"

J'espere que je t'ai aidé!

+++


Oui, d'accord, et qu'est ce que ça change de la passer en absolu par rapport à mon probleme ? je ne comprend pas bien, tu m'expliquer plus avant stp (oui, je sais, je suis un boulet...)


ha, si, j'ai essayé, mais en fait, non, ça marche pas, car ça reporte le probleme que j'avais au niveau de la hauteur sur la largeur, qu'il faudra aussi gérer en fonction de la taille du navigateur, dans ce cas... Smiley edit Modifié par Assimil (09 Jul 2007 - 16:23)
Le fait de passé en absolu, fait que lorsque tu va redimensionner ta page, ta div "prive_contenu_vue" va toujours garder une marge par rapport au bord de la fenetre du navigateur de 0.
Du moins, c'est ce qu'il me semble. Si tu fais un test avec ceci, et que tu redimensionne la fenetre de ton navigateur, tu vas voir la div se redimensionner toute seule:

#prive_contenu_vue{
	background:#000000;
	position:absolute;
	top:100px;
	bottom:0px;
	right:0px;
	left:181px;
	overflow:auto;
	z-index:1;
}


Apres, peux etre que j'ai mal compris ton probleme!

+++
Modifié par maxroucool (09 Jul 2007 - 16:23)
Comme je l'ai dit dans mon edit, ça ne fait que reporter le probleme que j'ai sur la hauteur, au niveau de la largeur...
je voix pas pourquoi puisque ton menu de gauche a une taille fixe de 181px, donc si tu mets "left:181px;" il n'y aura pas de probleme.

Edit: Je viens d'essayer avec FireBug en direct sur ta page, et ca marche.
Modifié par maxroucool (09 Jul 2007 - 17:49)
Je suis de retour et je pense avoir compris ce que tu veux faire ( vaut mieux tard que jamais Smiley lol ).

La position absolue est une bonne idée, elle doit être appliqué à un grand nombre des cadres, au moins au menu, au contenu et au pied.

Le pied doit être placé en bas ( logique jusque là Smiley smile ) et avoir une hauteur. Le menu et le contenu doivent être décalés du bas de la page de la hauteur du pied et avoir un "overflow: auto" ( il faut peut-être réfléchir un peu à la façon de le mettre en place pour le menu afin que cela reste esthétique ). Enfin, dans le script qui gère l'ouverture et la fermeture du div du haut il faut insérer du code pour agrandir en même temps le contenu et le menu vers le haut.

Bonne chance. Si tu n'y arrives pas ou que je me suis mal exprimé bien sûr je reste dans les parages.
maxroucool a écrit :
je voix pas pourquoi puisque ton menu de gauche a une taille fixe de 181px, donc si tu mets "left:181px;" il n'y aura pas de probleme.

Edit: Je viens d'essayer avec FireBug en direct sur ta page, et ca marche.

je parle de probleme au niveau de la largeur de la div : en effet, elle se calle automatiquement à la largeur du contenu, alor que, bien évidemment, je souhaiterais qu'elle ai la largeur de ce qu'il reste sur la page... et comme une parte de la largeur est en pixel, je ne peut rien définir en %

par rapport à la largeur, pour t'en convaincre, regarde le dégradé orange tout en bas
Modifié par Assimil (09 Jul 2007 - 18:47)
CNeo a écrit :
Je suis de retour et je pense avoir compris ce que tu veux faire ( vaut mieux tard que jamais Smiley lol ).

La position absolue est une bonne idée, elle doit être appliqué à un grand nombre des cadres, au moins au menu, au contenu et au pied.

Le pied doit être placé en bas ( logique jusque là Smiley smile ) et avoir une hauteur. Le menu et le contenu doivent être décalés du bas de la page de la hauteur du pied et avoir un "overflow: auto" ( il faut peut-être réfléchir un peu à la façon de le mettre en place pour le menu afin que cela reste esthétique ). Enfin, dans le script qui gère l'ouverture et la fermeture du div du haut il faut insérer du code pour agrandir en même temps le contenu et le menu vers le haut.

Bonne chance. Si tu n'y arrives pas ou que je me suis mal exprimé bien sûr je reste dans les parages.


Excuse moi, mais je n'ais rien compris, j'ai essayé deux trois truc, par rapport à ce que tu dit, mais rien de bien concluent...
Pages :
Sujet clos
Aller à