Few issues : scrolling, and reloading

[jance...@gmail.com]

Hello,

I tried to set up the scrollbar on a full page, but it seems not to work at all.
I explain : my page can be viewed enterily on a 1080p screen, but it need to set a scrollbar for tinier screen.

The thing is that the handle take 100% of the screen (I set it to 50px), no matter the size.
So I think I got a problem with the reload function in addition of the issue of the scrollbar that doesn't scroll

PS: I went through a lot of forums, and the wiki, but I didn't find a solution
I'm using jQuery 1.11

Here is the JS code :
-------------------------
/*global Sly */

var mySlySlider;

$(function () {
'use strict';

var frame = $('#frame');

mySlySlider = new Sly(frame, {
scrollBy: 50,
speed: 50,
easing: 'easeOutQuart',
scrollBar: $('#scrollbar'),
dynamicHandle: 1,
dragHandle: 1,
clickBar: 1,
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1
}).init();

$(window).on('resize', function () {
frame.sly('reload');
});
});

[lex....@gmail.com]

Hi,

try mySlySlider.reload();

instead of

frame.sly('reload');

[jance...@gmail.com]

I tried ... the JS execute the code (I use an alert function), but the scrollbar keep the same height ...

[jance...@gmail.com]

I thought re-using the full page tutorial will be okay, I thought wrong
But I still want this to work correctly.
It's one of the best scrollbar that I tested.

[Sly.js]

I don't quite understand what you're trying to do. When dynamicHandle is enabled, the scrollbar handle size always represents the relation of visible frame to the invisible part of the content. If you see 10% of the content, the scrollbar handle will be 10% of the size of the scrollbar. If you see the whole content, the handle will be 100% the size of the scrollbar, representing that you see it all and there is nowhere to scroll.

If you want handle to always be the size defined in CSS, don't enable dynamicHandle.

If you want to hide the scrollbar when it is useless (nowhere to scroll), listen on 'load' event, check if sly.pos.start === sly.pos.end (start position equal end position = nowhere to scroll), and hide the scrollbar, show otherwise.

[jance...@gmail.com]

What I'm trying to do is the full page tutorial.
I load my website with a smaller screen to see what's happening, but the xcrollbar doesn't even work at all. I tried various thing, but it doesn't to work correctly.

[Sly.js]

Well than without the case being isolated on jsfiddle I can't do much to help you.

[jance...@gmail.com]

Here is the jsfiddle (sorry for not using first, but i'm not used to it) :
http://jsfiddle.net/wsu8G/2/

[Sly.js]

There you go! You haven't read the markup documentation: https://github.com/darsain/sly/wiki/Markup

You are missing the slidee element.

Also, if you create a Sly instance directly (new Sly(frame)), using jQuery proxy on that frame wont work. Meaning this:

var sly = new Sly(frame, options);
$(frame).sly('method');// won't work
sly.method() // works

Either use only sly object (recomended), or only jQuery proxy. More on this in Calling documentation: https://github.com/darsain/sly/wiki/Calling

[jance...@gmail.com]

Thank you for help, I managed to resize the scrollbar.
But it always loads at 100% of its size, no matter the size of the screen.

http://jsfiddle.net/wsu8G/5/

[Sly.js]

So I've reverse engineered your site (as you didn't actually isolate the case, you just copy pasted the whole thing), and this dude, this:

body {

    padding-top: 70px;

    min-width:400px;

}

You are setting min width on a body. Frame is than always at least 400px big, and content never expands past this 400px, so Sly rightfully thinks there is nowhere to scroll. The issue is completely in your styles.

This is the fix:

html, body {

    height: 100%;

    overflow: hidden;

}

And here is the fixed fork: http://jsfiddle.net/wsu8G/6/

Scrolling doesn't work because you are using custom easing without actually including easing functions.

I expect beer money coming my way :)

[jance...@gmail.com]

If I could ... I would pay you a dozens of belgium beer !
Thank you !!
(the thing is that I use a bunch of frameworks, and I'm not the front end dev kind ... I'm more like back end, much simplier)

[Sly.js]

That's what the reward link on the homepage is for :)