onSnapFinish and onSnapStart getting triggered unnecessarily

[rameshteegapur]

Hi,
I am using this plugin for one of my project,everything works fine except that the plugin callback functions(onSnapFinish,onSnapStart) are getting called even when we click anywhere on the website,this happens in Chrome 34.0.1847.137 and Firefox 26.0.

Basically I am doing some animation on onSnapFinish but when user is clicking any menu or anywhere on the page, onSnapFinish gets triggered and my animation runs again.

Can you please check if its a bug or am I doing something wrong

Thanks
Ramesh

[guidobouman]

This should not be possible. Check the demos.

[guidobouman]

By the way, do you have a live demo I take have a look at? That would make it a lot easier for me to help you out.

[rameshteegapur]

Hi guido,
I mailed to you details [e-mail removed] please check

[guidobouman]

*** I removed my e-mail as I prefer not seeing it on public sites like Github... ***

This is the public board where issues can be discussed. No need to e-mail me about that. =]

I took a quick glance at your project, but didn't see onSnapFinish fire twice. Nor did I see any double animations.

Try creating an isolated implementation on jsfiddle.net, and continue from there.

[rameshteegapur]

Sorry about it, I will set it on jsFiddle.

Thank you

[rameshteegapur]

HI there,
Here is the set up that I made to show my issue http://jsfiddle.net/rameshteegapur/42UGQ/2/,
you can see in the fiddle example that onSnapFinish is getting called twice and also it gets called even if we click anywhere on the page document...I have tested it on Chrome 34.0.1847.137

Thanks

[guidobouman]

That is not an isolated or stripped down version of your error. ;)

This is isolated:
http://jsfiddle.net/42UGQ/5/
(A minimal setup where your error still occurs.)

Your errors:

1. You have multiple data-panel bindings with the same name. Every panel needs a unique name.
2. You have CSS margin collapses which causes margins of contained elements to be rendered outside of your panels. Margin collapses on the panel level confuses the plugin which then scrolls to the wrong offset.

Fixed version:
http://jsfiddle.net/42UGQ/6/
Notice how I added padding to the panels? This prevents margin collapsing.

[rameshteegapur]

Thanks for the reply,basically I was following your MENU example where you used data-panel with the same name i.e for menus and sections please check http://postimg.org/image/hj859un3h/

[guidobouman]

Yes, that creates a link between the menu item & the panel. But two panels with the same data-panel value will break that functionality.

[rameshteegapur]

I I just checked my code and I dont see any panel with same data-panel value,please check
http://postimg.org/image/lqirhje9f/

[rameshteegapur]

But yes I am using similar data-panel values for menus because my requirement is something like this
http://postimg.org/image/832vie4jh/

Please check,for circle menus I am using the data-panel values of each panel and also for GO TO LINKS I am using the same data-panel value.

Do you think that is the reason the plugin gets called when we click any where on the page??

[guidobouman]

You had duplicate data-panel values in your jsFiddle demo. That's the demo I was referring to.

And like I said, the actual error that caused onSnapFinish to be triggered multiple times was no. 2, the margin collapse.

[rameshteegapur]

Even in my fiddle also the data-panel is not getting repeated,please check http://jsfiddle.net/rameshteegapur/42UGQ/2/

I am able to handle onSnapFinish if gets triggered multiple times....but the main issue is that it gets triggered on click event..I mean if user clicks any thing on the page it gets triggered that is the main issue

[guidobouman]

Like I told you: Fix your margins and you'll be fine. Your faulty CSS is confusing the plugin.

About the data-panel binding, I'm copying this from your jsFiddle:
Line 49:
<section class="testimonial testimonialcontainer home" data-panel="akzo-nobel" datasrc="akzo-nobel" id="testimonial_1" datafld="nav_1">
Line 78:
<section class="testimonial testimonialcontainer home" data-panel="akzo-nobel" datasrc="akzo-nobel" id="testimonial_1" datafld="nav_1">
Line 100:
<section class="testimonial testimonialcontainer home" data-panel="akzo-nobel" datasrc="akzo-nobel" id="testimonial_2" datafld="nav_2">

So, yes, you are repeating data-panel values. But, for the third time, this is not the underlying problem for your case. The CSS margin collapse is.

[rameshteegapur]

Sorry I just realized that data-panel values were being set dynamically in JS file..but as you said its all because of CSS,I tried giving margins to the sections but the problem still exists.
Please check this http://jsfiddle.net/rameshteegapur/42UGQ/7/
onSnapFinish gets called when clicking anywhere on the document

[guidobouman]

Only on the third panel. And that is still an issue in your CSS.

Remove those padding & margins on your panels & set the height to 100%. Solved.

I'm not really here to fix your errors. Sorry, but this discussion is getting way out of hand. I've proven that the issue is not within my code, and I've told you over 5 times now where to look to fix your code. And for that matter: Clean your code, it's a mess right now.

If you can't find the fix, start from scratch with a working setup (from my demos), and slowly add features until you're at your design.

[rameshteegapur]

I understand that completely and I really appreciate your help..Thanks for everything..I will work on my CSS now...you can close this ticket

[rameshteegapur]

Hi,
I followed, http://jsfiddle.net/42UGQ/5/ this one as a simple example, in this also getting triggered on click event..I mean if user clicks any thing on the page it gets triggered that is the main issue,

[guidobouman]

Please, look at:
http://jsfiddle.net/42UGQ/6/

I told you, the double trigger occurred because you had a margin collapse. See the padding I added? That prevents the issue.

I've explained this over five times now:
YOUR TRIGGER IS HAPPENING BECAUSE YOUR CONFUSING THE PLUGIN WITH IMPROPER CSS.

[rameshteegapur]

Hi guidobouman,
Thanks for your quick response and patience,
We have been solved the issue now its not problem with the padding or margin its problem with the height which we adjusted now to viewport height - 20px

[guidobouman]

The panel height was higher than the viewport because you had collapsing margins. Custom sizing the panels will only bring you more issues in the future.

Try to get a solid understanding of the box-model & margin collapsing. Just google them, there are thousands of articles about those two topics.

[rameshteegapur]

Thank you for your valuable suggestion.