Content scroll is not smooth. Probably a jquery conflict

I have a problem with the scrolling of content when my website is viewed on an iphone or ipad.

Infact, if you try this website on an iphone (not by shrinking the browser window) http://www.piedicosta.com/jnuovo/it you see that the content do not scroll fluently.

It seems this is a conflict between the responsive navigation and the flexslider animation for background images because if I cancel the div that contain the flexslider image, everything seems to be fine.

Do you have an idea about how to solve this issue?

I thank you very much in advance for your kind help.

Filippo
d-forceAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
Hi,

The main problem you have is you are calling jquery more than one time in your script this is not good.
You need to keep only one link to the jquery and it's need to be the fist javascript in order for other pluging to work ok.

So keep the first link a round line 31 and remove the others jquery links (the one that is in the <head> </head> )
and remove jquery link that's are in the <body> around line 182 and one on line 516

Also the jquery are not the same version so try the one that is the most recent one to see if this is compatible with all scripts else try another one for that you will need to change the link to point to the correct one
You have jquery 1.8.3 (line 516), another one which is v1.11.3 (line 182), and another one that is jQuery v1.11.1 (line 31)

Keep one remove the 2 others and make test to find the good version, that's should fix the problem.

Also you have some errors to fix:
Make sure the images are in the folder
Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.piedicosta.com/jnuovo/templates/MENU-RESPONSIVE%202%20-%20Copy/cssplay-menu-jquery/down.png
http://www.piedicosta.com/jnuovo/templates/MENU-RESPONSIVE%202%20-%20Copy/cssplay-menu-jquery/right.png
http://www.piedicosta.com/jnuovo/templates/MENU-RESPONSIVE%202%20-%20Copy/cssplay-menu-jquery/left.png
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
d-forceAuthor Commented:
Hello lenamtl thank you for your kind reply!

I have solved the problem with the images not found.

Now I will follow your suggestion about the jquery callings. But probably some calls are made from the joomla core. However I will search better.

Can I ask you to solve an issue with css? I would like to add a white border of 25px all around the images of the slider but I cannot be able to do it...
Could you be so kind to help me?
Thanks a lot.

d-force
0
lenamtlCommented:
Hi,

Try to edit slider.css that is located in slidercss folder
line 26
add a line to the actual class and remove background size cover.
It will probably not work as expect because the image is set as background.
you may also want to adjust the height and the width...

.flexslider .slides li 	{
				 width:100%;
				 height:100%!important;
				 margin:0px;
				 padding:0;
				 /* -webkit-background-size: cover!important;
				-moz-background-size: cover!important;
				 -o-background-size: cover!important;
				 background-size: cover!important; */
				 border: solid 25px #FFF;
		}

Open in new window


You can ask your question on the official board for better solution:
https://github.com/woothemes/FlexSlider/issues

PS don't forget to add the arrow image that are still missing 404 error.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.