Good day SO, just want to ask the community regarding my problem with the scroll bar I’m trying to implement on my website. Basically after i successfully implemented a custom scroll bar on my page some of the jquery plugins i have developed doesn’t seem to be working correctly.
Here is the link to the page -
http://digitalspin.ph/redchina/200/
Whenever i click the left and right buttons on the slider the page seems to be scrolling back to the top which is weird. I’m also using jQuery waypoints on the page so when the user scrolls down to a certain portion more items will be visible and loaded. The only feature that is working fine is the lightbox/fancybox
Here is the link to the page without a custom scroll bar
http://digitalspin.ph/redchina/menu/
everything seems to be working fine without the custom scroll bar being implemented. I really hope someone can help me implement the custom scroll bar without having any conflicts with the other features.
[B]HTML/PHP[/B]
<div class="post_slider" id="scroll" > <!--START POST SLIDER -->
<?php //RED ROAST SLIDER ?>
<div class="slider_container hide">
<div class="category">
<h2 class="category_title controls">Red Roast
<input id="prev_btn_redroast" class="prev_btn" type="button" value="Prev">
<input id="next_btn_redroast" class="next_btn" type="button" value="Next">
</h2>
</div>
<?php query_posts('posts_per_page=-1&cat=3'); if(have_posts()) : while(have_posts()) :the_post(); ?>
<?php $url = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image'); ?>
<div class="post post_redroast">
<?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<img src="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" alt="' . the_title_attribute('echo=0') . '">'; } ?>
<div class="large_item">
<a class="fancybox" href="<?php echo $url; ?>"><span><?php the_title(); ?></span></a>
</div>
<h2><span><?php the_title(); ?></span></h2>
</div>
<?php endwhile; endif; wp_reset_query();?>
</div>
</div>
[B]JQUERY ITEM SLIDER[/B]
//RED ROAST
$(document).ready(function(){
var $item = $('div.post_redroast'),
w = $item.outerWidth( true ),
visible = 1,
index = 0,
endIndex = $item.length - Math.floor($("div.post_slider").width()/w);
$('input#next_btn_redroast').click(function(){
if(index < endIndex ){
index++;
$item.animate({'left':'-=' + w + 'px'}, "fast");
}
});
$('input#prev_btn_redroast').click(function(){
if(index > 0){
index--;
$item.animate({'left':'+=' + w + 'px'}, "fast");
}
});
});
[B]JQUERY WAYPOINT[/B]
<script type="text/javascript">
$(document).ready(function(){
$(".slider_container").waypoint(function(){
$(this).addClass("animated slideInLeft").removeClass("hide");
}, {offset: '80%', context: '.post_slider'});
});
</script>
[B]JQUERY CUSTOM SCROLL BAR[/B]
$(document).ready(function(){
$("#scroll").mCustomScrollbar({
theme:"light-thick",
autoHideScrollbar:false,
autoDraggerLength: true
});
});