JQuery pour régler la hauteur d'une div au chargement de la page

OK, donc j'ai un div conteneur de chargement de certains contenu qui est généré par php. Je ne sais pas ce que la hauteur du contenu et il est absolu positionné de sorte que le div conteneur ne sais pas comment élevés jusqu'à ce que tout le contenu est là. Je collectionne les de la hauteur qu'il doit être dans une variable php et que vous voulez utiliser jquery pour définir le div conteneur à cette hauteur, mais il ne fonctionne pas encore.

J'ai mis ce code en bas de la page:

<script type="text/javascript">
$(document).ready(function () {
$("#DynContainer").css({height:<?php echo $containerHeight; ?>px})
});
</script>

Il ne fonctionne pas actuellement, mais en regardant le code de la variable php est fait l'écho dans correctement. E. g:

<script type="text/javascript">
$(document).ready(function () {
$("#DynContainer").css({height:440px})
});
</script>

EDIT:

Comme beaucoup l'ont gentiment suggéré que je devais fournir un code valide pour le CSS. Depuis, j'ai changé pour générer ce code:

<script type="text/javascript">
$(document).ready(function () {
var containerHeight = "440px";
$("#DynContainer").css({height: containerHeight})
});

Cependant cela ne fonctionne toujours pas. L'ID de référence est reviendrais sans aucun doute correct.

EDIT2:

À la recherche au niveau de la console, j'obtiens cette erreur:

[15:46:29.460] TypeError: $ is not a function @ http://localhost/serge/?page_id=2045:242

Suggérant jQuery n'est pas chargé, mais il est certainement appelé à la haut de la page. Voici tout le code de la page: http://pastebin.com/tGadjaRA

RÉSOLU: c'était un jQuery noconflict question.
Merci à tous

  • Hm #DynContainer correctement orthographié? Vérifier les cas.
  • vous avez besoin de mettre 440 dans une chaîne de caractères ("440") car c'est ce qu'il est: {height:"440"}
InformationsquelleAutor harryg | 2012-09-04
  1. 4

    Mettre des guillemets autour de la valeur, puisque c'est une chaîne de caractères:

    <script type="text/javascript">
$(document).ready(function () {
$("#DynContainer").css({height:'<?php echo $containerHeight; ?>px'})
});
</script>

    http://jsfiddle.net/mblase75/GF3EK/

    Vous pouvez également supprimer le "px" et les guillemets c'est donc analysé comme un entier ("px" est l'unité par défaut):

    <script type="text/javascript">
$(document).ready(function () {
$("#DynContainer").css({height:<?php echo $containerHeight; ?>})
});
</script>

    http://jsfiddle.net/mblase75/GF3EK/1/

    InformationsquelleAutor Blazemonger
  2. 0

    Le "px" et en résulte non valide javascript. Comme d'autres réponses suggèrent, vous pouvez mettre des guillemets autour d'elle ou vous pouvez retirer le px complètement:

    $(document).ready(function () {
    $("#DynContainer").css({height:<?php echo $containerHeight; ?>})
});
    InformationsquelleAutor John Koerner
  3. 0

    Je recommande de passer des variables PHP JS au début du script:

    <script type="text/javascript">
var containerHeight = <?php echo $containerHeight; ?>;
//from now, it's pure JS. both better maintainable and readable
$(document).ready(function () {
    $("#DynContainer").css({'height': containerHeight})
});
</script>
    • Un grand merci à tous mais je suis toujours avoir des ennuis. J'ai changé le code et en regardant le code source de la page, le code javascript généré est: <script type="text/javascript"> $(document).ready(function () { var containerHeight = "440px"; $("#DynContainer").css({height: containerHeight}) }); </script>
    • Il fonctionne pour moi, regarde ici: jsfiddle.net/2MuD3/2 avez-vous des ID correct correspondant à la DynContainer élément?
    • Je sais que c'est très tard, mais si vous avez essayé de jouer avec le style qu'il pourrait fonctionner mieux. $("élément").attr("style", "hauteur:" + containerHeight); je sais que vous avez probablement déjà résolu ce problème
    InformationsquelleAutor Pavel S.