Javascript Girl
  1. Javascript Girl
  3. Dans Chrome, la page ne redimensionnera pas après la chargement d'Ajax
Intereting Posts
Pratiques recommandées par Javascript orientées objet? Emulate / polyfill history.pushstate () dans IE Cross Domain AJAX prétravail échouant Vérification d'origine Passer des valeurs de JavaScript à PHP en utilisant AJAX Django vérifie si JavaScript est activé Comment ajouter des valeurs de listbox de tinymce dans windowmanager Produira dynamiquement du contenu via Javascript due SEO Lier le texte à la propriété de l'objet enfant Comment faire pour détecter les modules ES6 Alertes lors de la navigation à partir d'une page Web Comment ajouter des classes aux colonnes jquery.datatables? Changer un tableau en un objet (majuscule) en ajoutant une valeur à l'aide d'un point Le service WCF hébergé en application ne peut pas être consulté à partir de javascript? En-tête autocollant après défilement vers le bas Passer une variable globale à une fonction

Dans Chrome, la page ne redimensionnera pas après la chargement d'Ajax

J'ai été fébrilement CSSing mon chemin à travers la dernière étape d'un site que je construis et je me heurte à un curieux bizarre avec Chrome uniquement. FF et IE semblent bien fonctionner.

J'utilise jQuery pour charger des stubs HTML et, dans ce cas, beaucoup de contenu d'un blog externe, mais lorsque je passe des pages vraiment longues aux très courtes, j'arrive à environ un mille de page inutilisée encore clouée à la fin de la page document.

Voici ce que le corps de la page où les talons sont chargés ressemble à: 

<body> <div id="page"> <div id="mainWrapper"> <div id="headerFullWidth"></div> <div id="fixedwidthcontainer"> <div id="header"> <div id="logo"><img src="images/logo.png" height="85px" width="187px"></div> <div id="shoppingcart"></div> </div> <div id="shoppingCartIcon"></div> </div> <div class="contentSpacer"></div> <div id="contentwrapper"> <div id="content"></div> </div> <div class="contentSpacer"></div> <div id="footer"> <div id="footerContent"> <a href="#contactPopupContent" id="contactfooter">Contact Us</a><a href="#privacyPopupContent" id="privacyfooter">Privacy Policy</a><a href="#shippingPopupContent" id="shippingfooter">Shipping & Returns</a> <div id="copyrightfooter">&copy; 2011 Victory Barbers and Brand</div> </div> </div> <div id="fullWidthFooter"></div> </div> </div> </div> </body>

Toutes mes charges sont effectuées en utilisant jQuery load() et j'ai eu une itération du site qui n'a pas eu ce problème. J'ai évolué vers un style plus 100% large et ce problème est apparu dans le processus.

Ma question est la suivante: existe-t-il un moyen de forcer la page à vérifier sa taille lors du passage à un contenu différent / plus court?

Je pense que j'ai trouvé une solution à cela. (Au moins, je ne l'ai pas vu se produire dans quelques minutes). Dans le rappel de .ajax, après avoir configuré le contenu avec $('div').html(data); , Je redimensionne la fenêtre entière avec $(window).resize();

Exactement le même problème que j'ai rencontré, et la réponse que je suis arrivée n'est pas.

J'ai réussi à résoudre ce problème en vérifiant la hauteur de la nouvelle div avec le nouveau contenu après la charge AJAX, et en réglant la hauteur avec jQuery.

Ce serait vraiment bien si quelqu'un pouvait trouver un moyen de forcer un redimensionnement automatique, mais pendant ce temps, cette solution fonctionnait parfaitement indépendamment de la quantité de contenu.

J'ai pu le réparer en fait avec juste le css. Le problème était que j'avais absolument positionné mon élément d'enveloppe de page, de sorte qu'il était effectivement assis à l'extérieur de l'élément du corps. J'ai supprimé le poste: absolue; Top: 0; Gauche: 0; Et mettez simplement une bordure: 0; Et rembourrage: 0; Sur l'élément du corps.

Ce devrait être un problème CSS pur, je n'ai pas utilisé jQuery pour AJAX moi-même mais quand le contenu est appelé, vous utilisez cela? 

 document.getElementById('myDiv').innerHTML=myResult

Ou utilisez-vous jQuery 

 $('#myDiv').html(myResult); $('#myDiv').append(myResult);

Si vous utilisez jQuery, vous devez d'abord nettoyer le div, comme ceci: 

 $('#myDiv').html(''); $('#myDiv').html(myResult);

Et si cela ne vous aide pas à utiliser une hauteur fixe et à utiliser une propriété css de débordement 

  #myDiv { height:600px overflow:auto; }

Bien sûr, une hauteur fixe n'est pas toujours la meilleure solution, mais cela pourrait vous aider.

Si la poussée vient pousser, vous pouvez toujours forcer la hauteur après la charge avec quelques javascript.

J'essaie de rester loin de la position:absolute autant que possible.

Vous pouvez utiliser css pour résoudre: 

 #myDiv{max-height:value; overflow:auto;}

AsyncBoolean

Par défaut: vrai

Par défaut, toutes les requêtes sont envoyées de manière asynchrone (c'est-à-dire que cette valeur est définie par défaut par défaut). Si vous avez besoin de requêtes synchrones, définissez cette option sur false. Demandes entre domaines et dataType: les requêtes "jsonp" ne prennent pas en charge le fonctionnement synchrone. Notez que les requêtes synchrones peuvent temporairement verrouiller le navigateur, désactivant toutes les actions pendant que la requête est active. "