jQuery jScrollPane - ça ne marche tout simplement pas! : '(

Question

OK - J'admets que je suis un débutant dans ce département de jQuery.J'ai probablement fait une erreur d'amateur, mais bon, tu dois apprendre quelque part! :)

m en utilisant jScrollPane: http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Je veux utiliser le style de la zone déroulante dans ma deuxième colonne. Spécifiquement, je voudrais appliquer et formater les barres de défilement sur le div #ajaxresults

Ma page est ... plutôt jQuery lourd. Je ne sais pas si des variables sont en conflit ou quelque chose ... en fait, je ne sais vraiment pas du tout pourquoi cela ne fonctionne pas.

Jetez un oeil à ma page problématique:http://furnace.howcode.com

Dans l'en-tête, je me suis fixé ce pour aller:

<!-- Includes for jScrollPane --> 
<script type="text/javascript" src="http://localhost:8888/js/jquery.mousewheel.min.js"></script> 
<script type="text/javascript" src="http://localhost:8888/js/jScrollPane.js"></script> 
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:8888/stylesheets/jScrollPane.css" /> 
<script type="text/javascript"> 
$(function() { 
    $('#ajaxresults').jScrollPane(); 
}); 
</script> 

(j'ai changé localhost sur la copie du serveur si)

Rien ne semble jamais fonctionner avec la division #ajaxresults. J'ai mis, comme le disent les docs de jScrollPane, overflow:auto dessus mais toujours pas de chance. Je trouve que lorsque jScrollPane semble «courir», il déplace simplement le div d'environ 100 pixels. Essayez-le pour vous-même.

Peut-être que quelqu'un pourrait vous aider? Il y a pas mal de plugins jQuery donc je ne sais pas si quelque chose entre en collision/crash etc ...

Veuillez noter que le site est encore en développement entre moi et un ami, ce qui explique les messages personnels que nous nous soumettons ('Salut Donnie!' Etc.: D). En outre, lorsque vous affichez la page, rien ne peut apparaître dans la deuxième colonne pendant quelques secondes - il s'agit simplement de récupérer les données via Ajax. Alors donnez-lui un peu de temps.

Merci beaucoup!

Jack

Answer 1

Après avoir visionné votre code, la première chose qui me frappe est que vous avez placé le code JS à l'intérieur du div "de ajaxresults". Généralement, il est préférable de garder votre code en dehors de la cible div. Placez les div vides comme ceci:

<div id="ajaxresults" class="scroll-pane"></div> 

Au fond et utiliser jQuery pour remplir avec quelque chose comme .append() ou .html(). Il y a beaucoup d'options. Je suis sûr qu'il y a plus de choses que je pourrais choisir, mais cela semble être le premier changement majeur que je suggérerais.

Cela peut être un peu un processus.

En outre, si vous n'avez pas déjà Firebug, je pourrais vous suggérer d'en obtenir une copie. Cela peut vraiment être utile dans le débogage jQuery.