Nested Scrollbox's

[knvpk]

hi, this is a great tour plugin because of promises so that we can do async stuff while moving to prev/next step, at the same time it is missing the common problem in every tour plugin that is elements inside a parent div overflow:auto, here Im linking a codepen which demonstrate the problem, http://codepen.io/pavankumarkatakam/pen/KrmJwp?editors=1010 , where when we start he tour it shows the first element but from second element it is not working fine, i also used to give config option scrollBox .

[tannerlinsley]

It appears you has the scrollbox option nested inside of a config (a readme artifact from a previous version)

The proper way is as follows (which applies for all other config options):

var tour = {
 scrollBox: '.main_container',
 steps: [{
  target: '#first',
  content: 'This is the first step!',
 },  {
  target: '#second',
  content: 'I guess this is a menu!',
 }, {
  target: '#third',
  content: 'It is over! :(',
 }]
};

Unfortunately, this doesn't solve the problem 100%, as it looks like scroll listeners are not properly set up on the scroll box, and scrolling only the scroll box doesn't not guarantee that the element is visible (sometimes more main content scrolling is necessary, as shown in your codpen)

Here is an updated codepen with the correct options, and showing these other issues: http://codepen.io/tannerlinsley/pen/VjbgbE?editors=1010

[knvpk]

Hi @tannerlinsley , My actual requirement is to intro for all elements (nested ones also), so i think the config option scrollBox should be like for every step, as shown below

var tour = {
 scrollBox: 'body', // Global option/default
 steps: [
{
  target: '#outer',
  content: 'This is the first step!', // here scrollBox not mentioned means body will applied
 },{
  target: '#first',
  content: 'This is the first step!',
  scrollBox:'.main_container'
 },  {
  target: '#second',
  content: 'I guess this is a menu!',
 scrollBox:'.main_container'
 }, {
  target: '#third',
  content: 'It is over! :(',
 scrollBox:'.main_container'
 }]
};

like so . . .

[tannerlinsley]

Interesting. I actually have been playing with step-based overrides for all config options. This would allow what you've proposed here.

[knvpk]

ok, even though it implements the scrollBox for every step, i think if we moving to next/prev step the main scrollbar as well as step scroll bar wants to be scrolled.

[tannerlinsley]

Yeah I would have to write some more logic to allow for nested scroll boxes. I don't think that functionality will come soon on my end, since it is very edge case. I would actually suggest that you use the promise hooks to do the nested scrolling manually for now. Inside the before hook, try to scroll the overflow element until the target is visible, then resolve the promise.

That should hold things over until we can figure out a good built in solution On Sat, Jul 2, 2016 at 12:00 AM Pavan kumar [email protected] wrote:

ok, even though it implements the scrollBox for every step, i think if we moving to next/prev step the main scrollbar as well as step scroll bar wants to be scrolled.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tourjs/tour/issues/8#issuecomment-230085915, or mute the thread https://github.com/notifications/unsubscribe/AFUmCU2OjHKqP1mix0kq2L6aD0ezuBMeks5qRf6agaJpZM4JDmg2 .

[knvpk]

Yeah, i already thought about that approach and also i know that scrolling multiple scrollBox is not an easy thing, but just i want to give info about that it should be in the code to unqiue ness among other tour plugins.

And one more doubt will i get the prev,current and next steps in the callback as arguments.

[tannerlinsley]

That can be arranged. On Sat, Jul 2, 2016 at 12:50 AM Pavan kumar [email protected] wrote:

Yeah, i already thought about that approach and also i know that scrolling multiple scrollBox is not an easy thing, but just i want to give info about that it should be in the code to unqiue ness among other tour plugins.

And one more doubt will i get the prev,current and next steps in the callback as arguments.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tourjs/tour/issues/8#issuecomment-230087525, or mute the thread https://github.com/notifications/unsubscribe/AFUmCT3a1R4LKfkvZ2Ac2Zd0brTBXRS-ks5qRgpJgaJpZM4JDmg2 .

[knvpk]

So im waiting for that to release.

[tannerlinsley]

I'll put the steps in as soon as possible. On Sat, Jul 2, 2016 at 12:57 AM Pavan kumar [email protected] wrote:

So im waiting for that to release.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tourjs/tour/issues/8#issuecomment-230087764, or mute the thread https://github.com/notifications/unsubscribe/AFUmCdcninCp7Hcqb4SeccQQx0LvkTAnks5qRgvJgaJpZM4JDmg2 .