Sliding menu/notebook/tablet error (to fast)

Hi guys,

I have a problem with the animation of the menu, sliding notebook and sliding tablet, it´s way too fast. I have installed the template (3.0 version) and not done anything else and there are issues with the animation of the template. When I browse the site/template the animation of a) the menu, b) the sliding notebook, c) the sliding tablet is not working as it should and it´s not working in the same way as it works on the Gavick demo site and also on other developers which has used this template´s site. The animation of the menu is working but looks a bit strange when shifting from mode 1 to mode 2. The animation of the sliding notebook and sliding tablet are to fast so whenever I scroll down on the page the notebook/tablet is sliding forward before I have even gotten down the page so it´s almost like it´s already "out" when I come to that section. If I compare the sliding function of my template compared to the demo site etc. it´s a big difference. On the demo site etc. the sliding function slides the image out when I have gotten a bit in/down on the section in question, creating the cool effect (i.e. it works as it should).

PS: I have gone over all setting of the template but can´t find a setting for this and I have also played around with the menu animation setting but when changing the ms, nothing happens. I have also looked at the css file and compared my css file with css files from "working" developers sites and there is no difference (none that I can see at least. The file I mainly looked at was the "templates/gk_simplicity/css/gk.stuff.css" file)

My site URL is: <removed>

Please advice on this, how I can fix it?
Thanks in advance, regards Henrik

I have checked your site and it acts exactly as our demo page.
Could You specify on what browser and operating system have You tested?

Hi Cyberek,
Thanks for looking into this. I have tested this on Windows 7, Windows server 2008 and on browsers Chrome v29, Firefox v22, IE v10 and Safari v6.1 (i.e. all the newest versions of the most commonly used browsers).

To reproduce the error, do the following:
- Open up your demo site and my website
- Test your demosite first, either by using your mouse scroll wheel or by clicking on the downward navigation control in the browser. Go 1 step at a time downward. Do the same thing on my website. You will now see that on your demosite e.g. the sliding notebook slides out further down / "faster" / "earlier" than on my website. I have for example counted the number of mouse clicks on the downward navigation control and it´s 32 clicks on your site and 28 on mine (to get to where the notebook slides out).

Thanks again, regards Henrik

You will now see that on your demosite e.g. the sliding notebook slides out further down / "faster" / "earlier" than on my website.

Sorry, mistype. What I meant was:
You will now see that on your demosite e.g. the sliding notebook slides out further down / "slower" / "later" than on my website.

Hello again,
Cyberek, Gavick support or other developers. Has anyone experience this issue before / know how to fix it? Thanks in advance, regards Henrik

Have been testing and honestly I can't tell there is something wrong.
I'll ask our dev team for support, perhaps they will know what might be wrong.

Hello again. Ok, did you try the outline from my last post (testing/comparing 1 step at a time e.g the downward navigation control)?
Thanks for passing this along to support. Regards Henrik

Please open file gk.script.js from template/js directory and find this part :

Code: Select all

// iterate throught the elements to animate
      if(elementsToAnimate.length) {
         for(var i = 0; i < elementsToAnimate.length; i++) {
            if(elementsToAnimate[i][2] < currentPosition + (windowHeight / 1.4)) {


Then change the 1.4 value to 2 so i result you should get code like

Code: Select all

// iterate throught the elements to animate
      if(elementsToAnimate.length) {
         for(var i = 0; i < elementsToAnimate.length; i++) {
            if(elementsToAnimate[i][2] < currentPosition + (windowHeight / 2)) {


Thanks bkrztuk, That did the trick. Now it works as it should.

Also regarding the sliding tablet, this animation also needs some tweaking as it has the same problem (slides out to fast). Could you please also provide the .js code to change for that animation? (I did look through the same js file but could not make out if/where I would find this animation).

Thanks in advance, regards Henrik

PS: By the way, the setting was 1.2 and not 1.4. I tried 1.4 first but it was not enough so 2 was perfect. Will Gavick update the template js file so this is the standard value or is this a change I have to do after each template update?

This issue is also on the animation of the prices tables. Could you please also provide the js code to change for that animation?

Coming back to this again, will Gavick change this so the standard is a working setting or do I have to change these settings (sliding notebook, sliding tablet, animated prices tables) after each template update?

Thanks again, regards Henrik

Will Gavick update the template js file so this is the standard value or is this a change I have to do after each template update?

Yes we include fix for this in next template version. This code change affect to all animations, could you show me your website ?

Hello again,
Great regarding the template update. When it comes to the template issues sliding tablet and price tables. These were not corrected by the code you previously gave me. The code only corrected the sliding notebook. If you compare my site with your demosite you will see a clear difference.

My site URL is: <removed>

Thanks again, regards Henrik

This is the screenshot when on our demo the tablet is visible

http://cl.ly/image/093Q1M3Q3r2B

Here is the the screenshot with your site when table is visible :

http://cl.ly/image/2E0x221x1x3Z

I don't see the difference here.

Hello again,
After some more testing it seems as though the browser causing the most problems is Chrome. There is a big difference in Chrome and only a small difference in Firefox and IE. With the Firefox and IE, I can live with that small difference but the difference in Chrome is no good. Here are screenshots of the various browsers/differences. When it comes to the price table I only took screenshots of the problem in Chrome.

Sliding tablet:
Chrome:
https://dl.dropboxusercontent.com/u/498 ... gavick.png
https://dl.dropboxusercontent.com/u/498 ... omeptc.png

Firefox:
https://dl.dropboxusercontent.com/u/498 ... gavick.png
https://dl.dropboxusercontent.com/u/498 ... %20ptc.png

IE:
https://dl.dropboxusercontent.com/u/498 ... gavick.png
https://dl.dropboxusercontent.com/u/498 ... %20ptc.png

Price table:
Chrome:
https://dl.dropboxusercontent.com/u/498 ... gavick.png
https://dl.dropboxusercontent.com/u/498 ... %20ptc.png

Thanks

OS: I am using Chrome Version 29.0.1547.57 m

Could you provide me details to your administrator area via PM ? Please remember to include link to this forum thread in message.

bkrztuk, PM sent

Thanks, Regards Henrik