Solved

jQuery smooth scroll Problem

Posted on 2013-10-23
3
520 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 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

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Survey branching tutorial 11 45
PHP Web Development 6 30
How to add custom html-5 element to a dynamically generated link? 4 25
Diff of the day 2 11
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
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 …

730 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