Hi! It should work fine.

Hello! There is JS error in fancyscroll init code. Also you are not using any of classes that are necessary to make plugin work properly, and I doubt that markup is correct also. Please check documentation that comes with plugin.

hello, when i load this , everything is ok, but when i click “stuff” and then scale it, the bottom content is nt at the right positione.

sxrg-energy.com/pre/slidertest1/

> when i click “stuff” and then scale it
you mean resize window or zoom in/out?

Hello, hm yes. but the main problem is the fixed size 1600px in the script on the widt. Is their a dynamic sizing possible? i need the “subpages” without margins:)

use low resolution images what will speed up things

Hello! Fancyscroll is content scroller plugin it does not load pages or content.

.fancyscroll-content {
 width: 50%;
 left: 0;
 right: 0;
 margin: 0 auto;
}

Great! Is there any documentation showing how to do this?

Yes, documentation comes with the plugin

Great! Bought!

Thanks! I corrected it.

My plugin works a bit differently. It uses long page with sections, where every section has some content and a background. The background is animated with the plugin what makes it move faster/ slower as main content.

The code’s already optimized for best performance, however if you use a lot of high-resolution images such problem can arise.

Ok. That’s odd. I’m just using the green boxes that came with the demo. It did get better on the iPhone and iPad when I adjusted the “easingRate”, but then Chrome (Mac) didn’t like that.

I also noticed that the navigation is a little buggy on the iPad … After clicking on “page 2” or “page 3”, I need to manually scroll to the top before the links work again. Have you noticed that? Wondering if there is anything I can do to patch that. This is just happening on the iPad, not iPhone.

Not the end of the world, but I’d like to polish it up if possible. Any insight would be great!

Thanks!

Navigation in demo is not a part of fancyscroll plugin, you should create your own navigation and then use my plugin API to link site sections to menu items. In documentation I explain how to do this. Regarding performance I can add that this plugin mainly targets on desktop browsers rather than mobile devices with limited resources.

Here is jQuery code that works with UL list. It adds “menu-active” class to the LI element when link inside is clicked.

$('#mainmenu a').click(function(){    
    $(this).parent().addClass('menu-active').
    siblings().removeClass('menu-active');
});

replace ”#mainmenu” with any other ID of UL list. See http://jsfiddle.net/qAsmM/1/

Yes, it’s maybe works but don’t for mousewheel. You support via email?

yes. I do.

To do this you need to write your own JS code that would add class to the menu item when you click it. This is merely a few lines of code.

I don’t know how can i do this? Please help me.

Do you use a menu from my example page or have own menu?

Hi!

Make sure you have used addScroll() method to add click handlers to the links in menu. Please read in documentation how to do this.

Thanks!

I didn’t notice any problems in safari. But below are some guideline how you can improve its performance.

Basically this script is already optimized for performance as it’s written in pure JS without any unnecessary code what can slow it down. You have few options, however. First of all, to make it work smoother you can try images with lower resolution. The smaller the size the faster browser will render it. This is very important to know if you have a lot of animated background images. Also you can increase easing(animation) time to give browser additional time to render images before their position will change again.

The purpose of my plugin is to create composed background animation when page is being scroll, but if you are interested only in “TOP” button, then first of all you need to create a long page (to have something to scroll), then activate my plugin with this code:

window.onload = function(){
    new fancyScroll({
       easingFunction: 'easeInOutCubic',
       easingTime:1200,
       topButtonText: 'Top',                        //topButton text
       topButtonClass: 'fancyscroll-topButton',     //topButton class
       topButtonShowAfter: '0px',                   //show topButton only after scrolling N pixels
       topButtonTarget: document.body,                //anchor element for topButton (DOM element or ID)
      topButtonHash: '#/',
       });
};

There is no need to create any markup. Just activate plugin and that’s all you need.

I just uploaded new update to fancyScroll plugin and tested it in IE7 ,8 and it works fine for me. What I would recommend you is to clear browser cache, and then reload page and wait until it is completely loaded.

make sure browser finished loading page, because plugin init code start only when everything is loaded including images. Thanks!

Thanks! I never worked with parallax. But as far as I know in parallax animation is based on changing background-position property depending on page scroll. My plugin works a bit differently. First of all it allows to configure “offsets” for backgrounds. The result is that backgrounds move with different speeds and possibly in different directions. Along with this my plugin allows assign click listeners to elements (like menu items) and make them scroll page to the specific position applying easing. The combination of these two effects is what you see in preview : )

Hi, first of all you need to avoid setting initial background position with ‘left’ or 50% for fancyscroll-background divs, use only pixels. If that is not the case, I need to see your work in action to get better understanding of the problem.