SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2013
    Location
    Philippines
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Conflict and Problems when implementing custom scroll bar

    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.
    Code:
    HTML/PHP
    
        <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>
    Code:
    JQUERY ITEM SLIDER
    
        //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");
                }
            });
        });
    Code:
    JQUERY WAYPOINT
    
        <script type="text/javascript">
    
        $(document).ready(function(){
          $(".slider_container").waypoint(function(){
    	    $(this).addClass("animated slideInLeft").removeClass("hide");
      
              }, {offset: '80%', context: '.post_slider'});	
        });
    </script>

    Code:
    JQUERY CUSTOM SCROLL BAR
    
            $(document).ready(function(){
                $("#scroll").mCustomScrollbar({
    			theme:"light-thick",
    			autoHideScrollbar:false,
    			autoDraggerLength: true
    			});
            });

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,089
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    If you examine either page in the console, you see:

    Code:
    Uncaught TypeError: Cannot call method 'removeAttribute' of null (index):887
    That would be the first thing to look at.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •