11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Custom Scrollbar de Malihu

Bonsoir à tous,

Ici, vous trouverez une page web sur laquelle je m'arrache les cheveux. Après avoir lu sa documentation, je n'arrive pas à mettre son plugin en place. J'ai essayé plusieurs choses mais impossible... Le texte dans la div s'affiche et disparait très rapidement après rafraîchissement de la page.

Quelqu'un aurait-il une idée ?

Merci pour votre aide.

Malihu

EDIT : je travaille sous Safari, je viens de tester sous Chrome, ça ne fonctionne pas son ascenseurs est en bas du div. Sous Firefow, même problème avec Safari, le texte disparait !
Modifié par MagicCarpet (28 Dec 2012 - 22:04)
Hello,

a écrit :
The plugin will add all necessary markup for the scrollbars to each of your content blocks. The final markup of each content block after being processed by the plugin script


Tu devrais donc avoir dans ton code html :
<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8" />
  <title>jQquery Scrollbar</title>
  <style>
      Tes styles...
    </style>
    <!-- Custom scrollbars CSS -->
    <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="content">
      <!-- your long content here... -->
    </div>
    <script>tes scripts...</script>
    <script>
      Tes fonctions
    </script>
  </body>
</html>

Le plugin s'occupe du reste Smiley cligne
Une déclaration d'encodage et un titre de document ne sont pas superflus, même pour des tests...
Modifié par 6l20 (23 Dec 2012 - 15:02)
Bon, eh bien merci... Ca me souale parce que la structure complète je l'ai utilisé qu'après, au début j'avais bien 'juste' mon div. Comme maintenant en fait.

Bon c'est ok, c'est l'essentiel... Merci pour ton aide, jolie cadeau de noël pour moi Smiley smile


++
Bon j'ai vraiment un souci avec ce script...

Si je reprends le code que tu m'as donné plus haut, ça fonctionne. Par contre si a la place du :
<!-- your long content here... -->


Je met une structure plus complexe avec d'autres div, ça ne fonctionne plus. J'ai mis le content à plusieurs endroits, essayé de mettre le nom des div à la place, etc. Rien à faire.

<div class="article content" id="dayAnchor">
			<h2 id="day"><span>Fichiers modifiés ce jour :</span></h2>
			<div id="hiddenJQday">
				<table>
					<tr>
						<td>mardi 06 novembre 2012</td>
						<td>20:43:31</td>
						<td>-rw-rw-r--</td>
						<td>kcell</td>
						<td>kcell</td>
						<td>0</td>
						<td>Outil R&amp;D/Script/bash/txt/.fileDayStats.tmp</td>
					</tr>
					<tr>
						<td>mardi 06 novembre 2012</td>
						<td>20:42:02</td>
						<td>-rw-rw-r--</td>
						<td>kcell</td>
						<td>kcell</td>
						<td>8</td>
						<td>Outil R&amp;D/Script/bash/txt/fileWeightStatsVeryLower.txt</td>
					</tr>
					<tr>
						<td>mardi 06 novembre 2012</td>
						<td>20:42:02</td>
						<td>-rw-rw-r--</td>
						<td>kcell</td>
						<td>kcell</td>
						<td>4</td>
						<td>Outil R&amp;D/Script/bash/txt/fileWeightStatsStandard.txt</td>
					</tr>
					<tr>
						<td>mardi 06 novembre 2012</td>
						<td>20:42:02</td>
						<td>-rw-rw-r--</td>
						<td>kcell</td>
						<td>kcell</td>
						<td>4</td>
						<td>Outil R&amp;D/Script/bash/txt/fileWeightStatsLower.txt</td>
					</tr>
					<tr>
						<td>mardi 06 novembre 2012</td>
						<td>20:42:02</td>
						<td>-rw-rw-r--</td>
						<td>kcell</td>
						<td>kcell</td>
						<td>4</td>
						<td>Outil R&amp;D/Script/bash/txt/fileWeekStatsReport.txt</td>
					</tr>
					<tr>
						<td>mardi 06 novembre 2012</td>
						<td>20:42:02</td>
						<td>-rw-rw-r--</td>
						<td>kcell</td>
						<td>kcell</td>
						<td>4</td>
						<td>Outil R&amp;D/Script/bash/txt/fileMonthStatsReport.txt</td>
					</tr>
					<tr>
						<td>mardi 06 novembre 2012</td>
						<td>20:42:02</td>
						<td>-rw-rw-r--</td>
						<td>kcell</td>
						<td>kcell</td>
						<td>4</td>
						<td>Outil R&amp;D/Script/bash/txt/fileEmpty.txt</td>
					</tr>
					<tr>
						<td>mardi 06 novembre 2012</td>
						<td>20:42:02</td>
						<td>-rw-rw-r--</td>
						<td>kcell</td>
						<td>kcell</td>
						<td>4</td>
						<td>Outil R&amp;D/Script/bash/txt/fileDayStatsReport.txt</td>
					</tr>
					<tr>
						<td>mardi 06 novembre 2012</td>
						<td>20:42:02</td>
						<td>-rw-rw-r--</td>
						<td>kcell</td>
						<td>kcell</td>
						<td>0</td>
						<td>Outil R&amp;D/Script/bash/txt/fileWeightStatsveryHigher.txt</td>
					</tr>
					<tr>
						<td>mardi 06 novembre 2012</td>
						<td>20:42:02</td>
						<td>-rw-rw-r--</td>
						<td>kcell</td>
						<td>kcell</td>
						<td>0</td>
						<td>Outil R&amp;D/Script/bash/txt/Higher.txt</td>
					</tr>
					<tr>
						<td>mardi 06 novembre 2012</td>
						<td>20:40:49</td>
						<td>-rw-rw-r--</td>
						<td>kcell</td>
						<td>kcell</td>
						<td>8</td>
						<td>Outil R&amp;D/Script/bash/statFile.bash~</td>
					</tr>
					<tr>
						<td>mardi 06 novembre 2012</td>
						<td>20:40:49</td>
						<td>-rw-rw-r--</td>
						<td>kcell</td>
						<td>kcell</td>
						<td>8</td>
						<td>Outil R&amp;D/Script/bash/statFile.bash</td>
					</tr>
				</table>
			</div>
			<div class="footer">
				<p>Total : 12</p>
			</div>
		</div>


EDIT : pour résumé, j'ai mis en lien dans ma page HTML le CSS et les deux scripts en plus de jquery et jqueryUI (lié via google).

Ensuite, il suffit de mettre une classe 'content' sur le div ciblé... Et sans oublié le fichier image à mettre dans le même dossier que le CSS. J'ai vérifié mes liens mais soit je n'ai pas d'ascenseur soit j'ai celui du navigateur... Merci pour votre aide.

EDIT 2 : si je fais un copi/coller de ma structure ci-dessus dans ma page de test, cela fonctionne...
Modifié par MagicCarpet (23 Dec 2012 - 18:18)
Hello,

Résolu ou non ?
Chez moi ta page de test fonctionne : Mac OS X sous Safari, Firefox, Opera...
6l20 a écrit :
Hello,

Résolu ou non ?
Chez moi ta page de test fonctionne : Mac OS X sous Safari, Firefox, Opera...


C'est ça qui es curieux, la page de test fonctionne. Par contre, ma 'vrai' page, non...
Modifié par MagicCarpet (28 Dec 2012 - 22:05)
Bonsoir,

Peut-être voir du côté des versions jQuery ? (Modifications de la syntaxe,...)
Pour la page de test :
.../jquery/[b]1.7[/b]/jquery.min.js

Dans ton code :
.../jquery/[b]1.8.3[/b]/jquery.min.js

Je manque de temps pour tester là... Smiley cligne
MagicCarpet a écrit :
Merci pour ta réponse, je teste quand je rentre. L'inverse j'aurais compris mais si c'est ça...

Aucune certitude, juste une piste à explorer Smiley cligne
Alors vu l'heure, je ne m'éternise pas... Mais non, se n'est pas ça Smiley smile enfin plutôt Smiley ohwell

Je ne comprends pas, je pensais avoir résolu le problème sur ma page de test, d'où mon [Résolu], mais là je sèche.
Modifié par MagicCarpet (28 Dec 2012 - 22:06)
Je viens de faire un test... Si je fais un copier/coller de ma page de test à ma page 'finale', ça fonctionne. Donc c'est que mes liens avec le JavaScript, ma structure etc. sont ok !

En poussant un peu plus loin, je m'aperçois que si j'ai un tableau qui es déjà trop petit, ça fonctionne. Par contre, dans le cas de ma page finale, si j'ai un tableau qui n'a pas besoin d'ascenseur et que je réduit sa taille, via un script JS, alors aucune modifications. J'ai toujours l'ascenseur de base du navigateur.

Comment puis-je relancer, ou actualiser le script de Malihu ?
Bonjour,


J'ai eu le même souci avec ce jquery, ainsi qu'avec "tablesorter" ,
et je suis passé avec dataTables !

Et là, quelle simplicité !
Quelle efficacité !

Juste un conseil...
A toi de voir !
jytest a écrit :
Bonjour,


J'ai eu le même souci avec ce jquery, ainsi qu'avec &quot;tablesorter&quot; ,
et je suis passé avec dataTables !

Et là, quelle simplicité !
Quelle efficacité !

Juste un conseil...
A toi de voir !


Ok, je vais voir ça.
C'est con parce que je pensais presque y arrivé vu que j'ai trouvé l'update.
Actuellement, si le div se redimensionne, rien ne se passe.
Par contre, tu changes la taille du navigateur, ça fonctionne... Incompréhensible.
Bien sur, j'ai mis updateOnContentResize à true.

Bon, je fais une recherche Google, merci pour ta réponse.

EDIT : bon ça ne me va pas du tout dataTable. Ca à l'air super je dis pas le contraire. C'est juste que j'ai tout calibré entre HTML / CSS / JS. Là je devrais tout refaire. Bon si vraiment je trouve pas une solution à mon problème, faudra trouver un compromis Smiley smile
Merci quand même, au moins je suis pas seul à me casser les dents dessus.
Modifié par MagicCarpet (28 Dec 2012 - 20:47)
Ca fonctionne. En gros, j'était passé à côté de ce code :

$("#content-1").animate({height:800},"slow",function(){
  $(this).mCustomScrollbar("update");
});


Et c'est exactement se que j'utilisais avec jQuery pour redimensionner mes div.
Donc, un coup de callback et c'est bon, plus quelques touches par ci par là et c'est bon, merci à vous.
Sujet clos
Aller à