Votre question

Ajax et longueur de contenu !

Tags :
  • Ajax
  • Javascript
  • Html
  • Programmation
Dernière réponse : dans Programmation
12 Mars 2012 10:17:30

Bonjour à tous, je fais un site avec un chargement de pages en ajax, cependant, si je charge une page plus plus longue que la div dans laquelle elle est chargé, tout le contenu passe au dessus du footer, et donc ça me fait du scroll et le footer ne bouge pas, en gros je voudrais savoir comment augmenter la div normalement (quand je met du contenu à la main directement dedans le footer, descend en fonction de la longueur du contenu) pour que lors du chargement div+footer ai un comportement normal !merci

code:

  1. $(document).ready(function(){ // le document est chargé
  2. $('#content').load('test.html')
  3. $("a").click(function(){ // on selectionne tous les liens et on d�finit une action quand on clique dessus
  4. page=($(this).attr("href")); // on recuperer l' adresse du lien
  5. $.ajax({ // ajax
  6. url: page, // url de la page � charger
  7. cache: false, // pas de mise en cache
  8. success:function(html){ // si la requêté est un succès
  9. afficher(html); // on execute la fonction afficher(donnees)
  10. },
  11. error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
  12. }
  13. });
  14. return false; // on desactive le lien
  15. });
  16. });
  17.  
  18. function afficher(donnees){ // pour remplacer le contenu du div contenu
  19. $("#content").empty(); // on vide le div
  20. $("#content").append(donnees); // on met dans le div le r�sultat de la requete ajax
  21. }

Autres pages sur : ajax longueur contenu

a c 232 L Programmation
12 Mars 2012 14:34:28

Salut,

Est-ce que tu aurais une page en ligne où on peut voir ça ?
Contenus similaires
Pas de réponse à votre question ? Demandez !
a c 232 L Programmation
12 Mars 2012 14:48:57

Dans ton code, tu as une ligne qui met #content à une hauteur de 817 pixels !
  1. $(document).ready(function(){ // le document est chargé
  2. $('#content').load('test.html')
  3. $('#content').height(817)


C'est pour ça que tu as un soucis, vu que ton contenu est limité à 817 pixels. Si tu l'enlèves ça devrait être bon ;) 

Edit: et je te conseille de mettre des ";" à la fin de tes instructions en JavaScript...
12 Mars 2012 14:54:55

Non enfaite j'ai oublié de préciser que si je met rien, le footer se colle au header !
la div #content ne prend pas en compte la hauteur de la page appelé en ajax enfait !
a c 232 L Programmation
12 Mars 2012 15:09:48

C'est parce que tu as que des éléments de type float dans ton #content, ce qui fait qu'il n'arrive pas à avoir la hauteur de l'élément.
Tu peux ajouter un overflow:auto; (CSS) à ton #content.

Mais généralement, j'aurais plutôt tendance à ajouter un petit br à l'intérieur de #content (à la fin) :
  1. <br style="line-height:0; height:0; clear:both;" />
12 Mars 2012 15:12:23

! MERCI ! Merci beaucoup !
12 Mars 2012 15:15:24

En revanche la solution via le br j'arrive pas à la faire fonctionner !

et si je n'ai pas assez en hauteur, le footer n'est plus fixé en bas >_<
a c 232 L Programmation
12 Mars 2012 15:33:56

Hmm, j'ai essayé d'ajouter le <br ... /> dans ton code, et ça a fonctionné (en enlevant le overflow:auto bien évidemment).
Pas grave de toute manière.


Tu veux que le footer soit fixé en bas ?
12 Mars 2012 15:52:14

si tu retourne sur le site, tu peux voir que y'a le footer de la 1ere page qui n'est pas fixé en bas ! si tu as une meilleur solution hésite pas >_<
a c 232 L Programmation
12 Mars 2012 16:22:32

Bah tu n'as rien mis pour qu'il soit fixé, si ?

Tu mets ça (mix de ce que tu as + ce que j'ai ajouté pour fixer) :
  1. #footer {
  2. width: 100%;
  3. height: 200px;
  4. background-color: #CCC;
  5. clear: both;
  6. border-top: 1px solid white;
  7. position: fixed;
  8. bottom: 0;
  9. left: 0;
  10. }


Et il faut que tu fasses comme pour ton header, tu ajoutes un padding-bottom sur ton #content, égal à la hauteur de #footer.
12 Mars 2012 16:37:50

oki je vais essayer alors !! merci bien !!
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS