Un scrollbar comme facebook.
djun1
Messages postés
30
Statut
Membre
-
djun1 Messages postés 30 Statut Membre -
djun1 Messages postés 30 Statut Membre -
Bonjour,
Je suis un programmeur débutant en jquery et je veux faire un scrollbar comme dans facebook. Alors, je suis aller consulter dans un site(http://ww1.takien.com Mais, j'ai passé ma journée a essayé de resoudre le probleme.
Qui peut m'aider à le faire svp??
Je suis un programmeur débutant en jquery et je veux faire un scrollbar comme dans facebook. Alors, je suis aller consulter dans un site(http://ww1.takien.com Mais, j'ai passé ma journée a essayé de resoudre le probleme.
Qui peut m'aider à le faire svp??
<!doctype HTML> <html> <head> <title>Creation d'un scrollbar comme facebook</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script> <script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script> <linl rel="stylesheet" type="text/css" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css"> <script> $(function() { $('.content-area').jScrollPane(); }); $('.content-area').jScrollPane({ horizontalGutter:5, verticalGutter:5, 'showArrows': false }); $('.jspDrag').hide(); $('.jspScrollable').mouseenter(function(){ $(this).find('.jspDrag').stop(true, true).fadeIn('slow'); }); $('.jspScrollable').mouseleave(function(){ $(this).find('.jspDrag').stop(true, true).fadeOut('slow'); }); </script> <style type="text/css"> #contenue { background-color:green; width:150px; height:150px; } .jspVerticalBar { width: 8px; background: transparent; right:10px; } .jspHorizontalBar { bottom: 5px; width: 100%; height: 8px; background: transparent; } .jspTrack { background: transparent; } .jspDrag { background: url(transparent-black.png) repeat; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; } .jspCorner { display:none } </style> </head> <body> <div id="contenue" class="content-area"> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> </div> </body> </html>
1 réponse
-
J'ai améliorer mon code. Voila, je pense que ce sera plus simple pour m'aider.
<!doctype HTML> <html> <head> <title>Creation d'un scrollbar comme facebook</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.mousewheel.js"></script> <script src="jquery.jscrollpane.min.js"></script> <linl rel="stylesheet" type="text/css" href="jquery.jscrollpane.css"> <script> $(function() { $('.content-area').jScrollPane(); }); $('.content-area').jScrollPane({ horizontalGutter:5, verticalGutter:5, 'showArrows': false }); $('.jspDrag').hide(); $('.jspScrollable').mouseenter(function(){ $(this).find('.jspDrag').stop(true, true).fadeIn('slow'); }); $('.jspScrollable').mouseleave(function(){ $(this).find('.jspDrag').stop(true, true).fadeOut('slow'); }); </script> <style type="text/css"> #contenue { background-color:green; width:150px; height:150px; } .jspVerticalBar { width: 8px; background: transparent; right:10px; } .jspHorizontalBar { bottom: 5px; width: 100%; height: 8px; background: transparent; } .jspTrack { background: transparent; } .jspDrag { background: url(transparent-black.png) repeat; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; } .jspCorner { display:none } </style> </head> <body> <div id="contenue" class="content-area"> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> </div> </body> </html>
