Discussion :

[liryks_6]

Bonjour,

Je fais actuellement du design (CSS/JS) sur un petit site. J'aimerai définir la hauteur d'une div en fonction de la hauteur d'une autre. Pour cela j'ai créé cette fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(document).ready(function(){
 
    if($("#main").height() > $("#rightSidebar").height()){
            $("#rightSidebar").height($("#main").height());
 
    }
});

Malheureusement ma div #rightsidebar ne se paramètre pas avec une hauteur (height) égale à celle de la div #main. Pourtant lorsque je fais un alert au début du script comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(document).ready(function(){
 
alert('HELLO WORLD');
    if($("#main").height() > $("#rightSidebar").height()){
            $("#rightSidebar").height($("#main").height());
 
    }
});

Ma div #rightsidebar prend bel et bien la taille de ma div #main. Pourquoi?
Moi j'en déduis que c'est parce que mon DOM ou alors ma div #main a besoin de temps pour se "charger" complètement. Du coup le alert lui donne ce temps et ma fonction peut ensuite fonctionner correctement. Ai-je raison?

Pourriez-vous m'éclairer sur ce genre de problème? (J'ai déjà rencontrer des problèmes similaire avec des chargement d'images.)

Merciiiiiiiiii d'avance.

[Bovino]

ready() va détecter la fin de chargement du DOM.
Ceci dit, si un élément contient des éléments dits remplacés, comme des images, des iframes ou des balises <object>, alors ces éléments n'ont pas fini de se charger lorsque le DOM est prêt.
Dans ce cas, il faut repasser au classique

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(window).load(function(){
    // Tous les éléments de la page ont été chargés
});

[liryks_6]

Ok super merci ça marche... effectivement je n'avais jamais cherché à comprendre la différence entre le document.ready et le window.load. J'ai trouvé une courte explication ici si jamais :-)