?
Solved

jQuery smooth scroll Problem

Posted on 2013-10-23
3
Medium Priority
?
535 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Interactive Way of Training for the AWS CSA Exam

An interactive way of learning that will help you visualize core concepts so that you can be more effective when taking your AWS certification exam.  Built for students by a student to help them understand the concepts that they are being taught.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses

765 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