11540 sujets

JavaScript, DOM et API Web HTML5

Bug scrollbar dans div cacher

Bonjour,
Voilà j'essaie de faire un scrollbar à l’intérieur d'un div qui s'affiche lors d'un clic sur un lien href.

J'utilise le script suivant http://manos.malihu.gr/ pour le scrollbar.

Le problème est : Si je mets le "div caché" en visible (display : block ) alors le scrollbar s'affiche normalement et si je cache mon div et le fait apparaître lors du clic sur l'image alors le scrollbar n’apparaît pas ...

Aurez-vous une idée de l'origine de ce bug?

Ci-dessous mon code :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link href="style.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<!-- SCRIPT affichage/cache du div input_more -->
	<script language='javascript'>
	$(document).ready(function(){
		$("#displayBloc").click(function () {
			$("#input_inside_skill_hidden").slideToggle("slow");
			$(this).toggleClass("input_inside_skill_act"); 
			return false;
		});
	});
	</script>
	<link href="jquery.mCustomScrollbar.css" rel="stylesheet" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="jquery.mCustomScrollbar.concat.min.js"></script>
	<script>
		(function($){
			$(window).load(function(){
				$(".content").mCustomScrollbar();
			});
		})(jQuery);
	</script>
</head>
<body>
	<form method="post" action="#" id="form_presta">							
		<a href="#" id="displayBloc" class="input_inside input_inside_skill"></a>
		<input type="text" placeholder="Entrez un pseudo" value ="Entrez un pseudo" name="pseudo" >
		<div id="input_inside_skill_hidden">
				<div id="content_1" class="content">
					<p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
					<p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
					<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
			</div>
		</div>
	</form>
</body>
</html>


MON CSS

body {
	background-color: grey;
}
form#form_presta input[value] {
	color:#7f7f7f;
	padding-left : 10px;
}
form#form_presta input {
	width: 287px;
	height: 43px;
	border: none;
}

.input_inside {
	width: 55px;
	height: 43px;
	margin-left : 230px;
	margin-top:0px;
	position : absolute;
}
.input_inside_skill {
	background-image: url("images/icon_metier/input_plus.png");
	background-repeat: no-repeat;
}
#input_inside_skill_hidden {
	display : none;
	position:absolute;
	width: 296px;
	height: 338px;
	margin-top:0px;
	margin-left : 3px;

}
.content{margin:0px; width:210px; height:300px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
		.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;}
		.content p:nth-child(3n+0){color:#c96;}


Merci de votre aide =)
++
Modifié par sniffle83 (25 Feb 2013 - 17:52)
J'ai trouvé une première solution :
En fait comme mon bloc est cacher au chargement de la page alors le scrollbar ne detecte pas de texte et donc ne s'affiche pas.
J'ai donc remplacé ceci :

<script language='javascript'>
	$(document).ready(function(){
		$("#displayBloc").click(function () {
			$("#input_inside_skill_hidden").slideToggle("slow");
			$(this).toggleClass("input_inside_skill_act"); 
			return false;
		});
	});
	</script>
	<script>
		(function($){
			$(window).load(function(){
				$(".content").mCustomScrollbar();
			});
		})(jQuery);
	</script>


PAR 


<script language='javascript'>
	$(document).ready(function(){
		$("#displayBloc").click(function () {
			$("#input_inside_skill_hidden").slideToggle("slow");
			$(this).toggleClass("input_inside_skill_act"); 
			$(".content").html();
			$(".content").mCustomScrollbar();
			return false;
		});
	});
	</script>


Mais j'ai un new PB :
En fait des que je clic sur le href mon scrollbar se duplique Smiley ohwell
Des idées ?

++
Sujet clos
Aller à