2010-11-22 24 views
1

J'essaie de créer un plugin jQuery pour un site Web mobile qui transforme un conteneur div dans un conteneur déroulant. J'accomplis cela en enveloppant tous les enfants qui sont à l'intérieur du conteneur div dans un autre conteneur div qui est absolument positionné. Ensuite, je modifie les styles css supérieur ou gauche du div intérieur pour simuler le déplacement du texte vers le haut et vers le bas ou vers la gauche et la droite. J'utilise des écouteurs d'événements tactiles pour déterminer quand déplacer le div défilant.jQuery Div Divisible pour les sites Web mobiles

Cependant, j'ai quelques difficultés à définir la largeur() de mon div de défilement interne. Voici un exemple du code:

myObj.ready(function(){ 
myObj.css({ 'position' : 'relative', 'overflow' : 'hidden' }).wrapInner('<div id="scrollCntr">'); 
$('#scrollCntr').prepend("<img src='scrollBar.png' id='scrollBar' class='horizontal'"); 
$('#scrollCntr').height(myObj.height()); 

if (config.width <= 0) { 
    $('#scrollCntr').children().each(function(){ 
     if ($(this).css('display') == 'inline' || $(this).css('float') == 'left' || $(this).css('float') == 'right') { 
      totalWidth += $(this).width(); 

      for(var i = 0; i < boxProps.length; i++) 
       if ($(this).css(boxProps[i]) != "") 
        totalWidth += parseInt($(this).css(boxProps[i]).replace(/px/i, '').replace(/em/i, '').replace(/pt/i, '')); 
     } 
    }); 
} else { 
    totalWidth = config.width; 
} 

console.log(totalWidth); 
$('#scrollCntr').width(totalWidth); 
console.log($('#scrollCntr').width()); 

});

Dans ce cas, config.width est défini sur 719 et myObj est le conteneur div en cours de défilement. Je ne suis pas vraiment sûr du problème. Je n'ai eu aucun problème avec ça dans ma démo, quand mes éléments enfants ne contenaient que des images, mais quand je l'ai appliqué sur mon site mobile, où les éléments enfants étaient divisés, ça avait été des problèmes. Peut-être que les éléments enfants ne sont pas chargés à temps? Mais cela n'expliquerait pas pourquoi je ne peux pas définir la largeur de la div de défilement. C'est définitivement chargé. Je n'ai aucune idée de ce que le problème est ...

+0

Je pense avoir trouvé ce que le problème est. Le conteneur div est défini pour afficher: none jusqu'à ce qu'une action spécifique soit prise par l'utilisateur. Par conséquent, il peut définir des largeurs, mais il ne peut pas récupérer ces largeurs. Existe-t-il un moyen d'ajouter un gestionnaire d'événements à écouter lorsque mon div conteneur est affiché (display: block)? –

Répondre