Solved

jQuery smooth scroll Problem

Posted on 2013-10-23
3
495 Views
Last Modified: 2013-10-24
Hi,

I have an issue with a smooth scroll plugin I am using, it seems straight forward enough but for some reason the last image is not showing, it appears as though the right amount of white space is being left to display the image however.

This is what I have for this template page

<?php get_header(); ?>

<script src="<?php bloginfo("template_url"); ?>/js/jquery-ui-1.8.23.custom.min<?php echo $GLOBAL_GZSTRING;?>.js" type="text/javascript"></script>
<script src="<?php bloginfo("template_url"); ?>/js/jquery.mousewheel.min<?php echo $GLOBAL_GZSTRING;?>.js" type="text/javascript"></script>
<script src="<?php bloginfo("template_url"); ?>/js/jquery.kinetic<?php echo $GLOBAL_GZSTRING;?>.js" type="text/javascript"></script>
<script src="<?php bloginfo("template_url"); ?>/js/jquery.smoothdivscroll-1.3.min<?php echo $GLOBAL_GZSTRING;?>.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function () {
		$(".gallery-size-full dl").replaceWith(function() { return $(this).contents(); });
		$(".gallery-size-full dt").replaceWith(function() { return $(this).contents(); });
		$(".gallery-size-full p").remove();
		//$(".gallery-size-full dd").remove();
		
		$(".gallery-size-full").smoothDivScroll({
			hotSpotScrolling: true,
			touchScrolling: true,
			mousewheelScrolling: "allDirections"
		});
	});
</script>

<script type="text/javascript">$("#logo").html("Furniture");Cufon.now();</script>

<?php add_filter( 'use_default_gallery_style', '__return_false' ); ?>

<?php if(have_posts()): ?><?php while(have_posts()): the_post(); ?>
<?php the_content();?>
<?php endwhile; ?><?php endif; ?>

<?php get_footer(); ?>

Open in new window


Resulting page can be seen working here
http://cubbinandbregazzi.scorchsolutions.co.uk/furniture/chairs

Open in new window

http://cubbinandbregazzi.scorchsolutions.co.uk/furniture/chairs
0
Comment
Question by:ScorchD
  • 2
3 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39594327
How are you setting the width?
because in fact if you add a single pixel plus on the scrollableArea div everything will work correctly
0
 
LVL 4

Author Comment

by:ScorchD
ID: 39594438
Hi Alex,

I realise that if I can add some pixels to one side it will probably resolve the fact that the image is falling below but that does not help me closer to a solution.

I dont seem to be able to affect the final width as calculated by the plugin nor can I seem to resolve by adding padding or margins to the images themselves.

Many thanks
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 39596091
I think this might be a math problem with the plugin itself because to solve it you need to add 1 pixel only to the calculated width.

Have you tried with a different set of images to see if it works properly?

Another thing you can try is to fix the plugin itself.
If you go here: https://github.com/tkahn/Smooth-Div-Scroll/blob/master/js/jquery.smoothDivScroll-1.3.js
On line 1000 you have the function that does the calculation.

Try using this non-minified version of the plugin and, on line 1014 (currently empty) add the following:
tempScrollableAreaWidth = tempScrollableAreaWidth  + 1;

Open in new window

0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now