Bonjour,
Mon problème est assez étrange et je n'ai rien trouvé sur le net ressemblant à ça. La fonction callback de show() s'éxecute avant d'avoir fini de chargé l'objet jQuery qui appelle show(), sous firefox/edge aucun soucis. Par contre sur Chrome je ne comprend pas, il l'éxcute correctemet le script mais une fois tout les 5 rafraichissements... D'où l'utilisation la fonction setTimeout de 200ms. J'espère que vous comprendrez avec cet exemple :
/css
.main{
position : relative;
height : 0px;
width: 100%;
}
section{
display: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
/js
$(document).ready(function(){
activeItem = {
activeItem : 'informations',
subcat : 'compte'
};
$ctn = $('section#ctn'+capitalizeFirstLetter(activeItem.subcat));
$ctn.css('opacity', 1);
setTimeout(function(){ // ***** CHROME *******
$ctn.show(function(){
height = $ctn.outerHeight(true); // height recuperer de l'objet en absolute
// La valeur height varie selon les rafraichissements
console.log('height apres show', height, $ctn.outerHeight(true), $ctn.height());
$('.main').height(height); // Le main est redimensionner en conséquence
height = $('.main').innerHeight(); // Du coup une dimension tronqué
}).promise().done(function(){
console.log('show est fini');
});
}, 400);
});
Ce que je fais
Le but du code : adapter la hauteur du .main par rapport à un item placé en absolute (son contenu est généré en PHP)
Recuper un container ($ctn = #ctnInformations) puis mettre son opacity à 1
$ctn = $('section#ctn'+capitalizeFirstLetter(activeItem.subcat));
$ctn.css('opacity', 1);
Puis lui appliquer la fonction show() et récupérer ses dimensions
setTimeout(function(){ // FUCKIN CHROME *******
$ctn.show(function(){
height = $ctn.outerHeight(true); // height recuperer de l'objet en absolute
// La valeur height varie selon les rafraichissements
console.log('height apres show', height, $ctn.outerHeight(true), $ctn.height());
$('.main').height(height); // Main est redimensionner en conséquence
height = $('section').innerHeight(); // Du coup une dimension tronqué
}).promise().done(function(){
console.log('show est fini');
});
});
}, 400);
Ce que je veux
Exécuter le script sans TimeOut sur Chrome
Ce que j'obtiens
Si vous enlevez le setTimeout : chrome exécute trop vite le code. Firefox et Edge pas de problème.