I am using jQuery custom scroller to display bunch of blocks with buttons. those buttons have alert script to show a msg when each button is clicked. Initially visible buttons are working fine as below
but after a scroll the next buttons[image 2]
[
]3
are not showing the alert instead of it skipping the scroller layout to starting like below
Please help me on this to short out this problem.below i added the entire html content run the code snippet with full page
<!DOCTYPE html>
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>jQuery custom scrollbar demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- stylesheet for demo and examples -->
<style>
body{ background:#eee; font-family:arial, sans-serif; font-size:1em; line-height:1.6em; }
h1{ margin:40px 0; }
h1 small{ font-size:.5em; }
hr{ border-top:0; border-bottom:1px solid #ccc; }
a{ color:#0d75ca; }
a:hover{ text-decoration:none; }
header, #demo, footer{ width:70%; margin:0 auto; }
footer p > a{ margin-right:20px; }
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- custom scrollbar stylesheet -->
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css">
<style>
/* mobile first */
#content-1{
width: 260px;
height: 400px;
overflow: hidden;
background: #fdfdfd;
padding: 10px;
margin: 20px 0;
}
#content-1 ul{
width: 230px;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
#content-1 li{
width: 200px;
height: 120px;
margin: 5px;
padding: 5px 10px;
background: #dbf3f7;
}
@media only screen and (min-width: 1024px){
#content-1{
width: 80%;
height: 170px;
}
#content-1 ul{ width: auto; }
#content-1 li{ float: left; }
}
</style>
</head>
<body>
<header>
<h1>custom scroller test</h1>
</header>
<div id="demo">
<section id="examples">
<!-- content -->
<div id="content-1">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li><button type="button" name="button" onclick="mycall()">call</button></li>
<li>Sixth</li>
<li>Seventh</li>
<li><button type="button" name="button" onclick="mycall()">call</button></li>
<li>Eigth</li>
<li>Ninth</li>
<li><button type="button" name="button" onclick="mycall()">call</button></li>
<li>Eleventh</li>
<li>Twelfth</li>
<li>Thirteenth</li>
<li>Last</li>
</ul>
</div>
</section>
</div>
<footer>
</footer>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/minified/jquery-1.11.0.min.js"><\/script>')</script>
<!-- custom scrollbar plugin (latest version) via Github with fallback to local -->
<script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script>window.mCustomScrollbar || document.write('<script src="../jquery.mCustomScrollbar.concat.min.js"><\/script>')</script>
<script>
(function($){
$(window).load(function(){
$("#content-1").mCustomScrollbar({
theme:"inset-2-dark",
axis:"x",
advanced:{autoExpandHorizontalScroll:true},
/* change mouse-wheel axis on-the-fly */
callbacks:{
onOverflowY:function(){
var opt=$(this).data("mCS").opt;
if(opt.mouseWheel.axis!=="y") opt.mouseWheel.axis="y";
},
onOverflowX:function(){
var opt=$(this).data("mCS").opt;
if(opt.mouseWheel.axis!=="x") opt.mouseWheel.axis="x";
},
}
});
});
})(jQuery);
</script>
<script type="text/javascript">
function mycall(){
alert("test");
}
</script>
</body>
</html>
