2nd centred leg positioned strangely
jessewallace opened this issue · comments
Weird issue, can't seem to figure it out.
I have a tour that's working great, starts with a centered leg.
The last leg I intend to have position in the middle of the viewport where I am, much like the first leg, but instead, its rendering almost as if took the first modal offset and applied its top property to that.
Check out the screencast:
http://screencast.com/t/NvsIRs2HS
Code is below:
<script type="text/javascript">
$(document).ready( function() {
$('.tourbus').tourbus( {
autoDepart: false,
leg: {
scrollContext: 250,
width: '350px',
orientation: 'top',
align: 'center',
margin: 10,
},
onLegStart: function( leg, bus ) {
// highlight where required
if( leg.rawData.highlight ) {
leg.$target.addClass('intro-tour-highlight');
$('.intro-tour-overlay').show();
}
// fade/slide in first leg
if( leg.index == 0 ) {
leg.$el
.css( { visibility: 'visible', opacity: 0, top: leg.options.top / 2 } )
.animate( { top: leg.options.top, opacity: 1.0 }, 500,
function() { leg.show(); } );
return false;
}
},
onLegEnd: function( leg ) {
// remove highlight when leaving this leg
if( leg.rawData.highlight ) {
leg.$target.removeClass('intro-tour-highlight');
$('.intro-tour-overlay').hide();
}
},
});
$('#invite-tour').trigger('depart.tourbus');
});
</script><ol class='tourbus-legs tourbus' id='invite-tour'>
<li data-highlight='true' data-orientation="centered" data-top='250' data-scroll-to="0">
<h2>Welcome!</h2>
<p>Congratulations on creating your first outing! Let me show you around just a bit so that you'll be able to jump in.</p> <p>First, let's take a look at the Invite Tab, which we are already on, and see what you can do here.</p>
<a href='javascript:void(0);' class='tourbus-next btn btn-sm green pull-right'>Next</a>
</li>
<li data-el='.invite-header' data-align="left">
<p>Use the tools hereto invite golfers to your outing through GottaGolf, from social networks, email or even by sending them a link directly to this outing. </p>
<a href='javascript:void(0);' class='tourbus-prev btn-sm btn gray pull-left'>Back</a>
<a href='javascript:void(0);' class='tourbus-next btn-sm btn green pull-right'>Next</a>
</li>
<li data-el='.list-invited'>
<p>You'll see all the golfers you have invited that haven't yet responded in this list. If you made a public outing, you'll also see any golfers who have requested an invitation.</p>
<a href='javascript:void(0);' class='tourbus-prev btn-sm btn gray pull-left'>Back</a>
<a href='javascript:void(0);' class='tourbus-next btn-sm btn green pull-right'>Next</a>
</li>
<li data-el='.list-accepted'>
<p>In this list, you'll see all of the golfers who have accepted your invitation to play.</p>
<a href='javascript:void(0);' class='tourbus-prev btn-sm btn gray pull-left'>Back</a>
<a href='javascript:void(0);' class='tourbus-next btn-sm btn green pull-right'>Next</a>
</li>
<li data-el='.list-declined'>
<p>In this last column is all the golfers who've responded that the won't be able to make your outing...bummer. Maybe next time!</p>
<a href='javascript:void(0);' class='tourbus-prev btn-sm btn gray pull-left'>Back</a>
<a href='javascript:void(0);' class='tourbus-next btn-sm btn green pull-right'>Next</a>
</li>
<li data-highlight='true' data-orientation="centered">
<p>Go ahead and invite some golfers to get started. Once you are ready, head over to the Organize Tab and we will continue the tour. See you there!</p>
<a href='javascript:void(0);' class='tourbus-prev btn-sm btn gray pull-left'>Back</a>
<a href='javascript:void(0);' class='tourbus-stop btn-sm btn green pull-right'>Finish</a>
</li>
</ol>
Hey so I did some testing and I can't seem to reproduce this.
One thing to do that doesn't seem related but would be a good idea is to cleanup the handling of highlight. You aren't passing an el to be highlighted, so the JavaScript that adds a class to leg.$target is just going to add intro-tour-highlight to the body element.
Other than that, I can really only suggest that you might have an unclosed div somewhere or something along those lines that's causing it to get confused and put the final modal at the bottom. A quick work-around would be to just put data-top=250 and/or data-scroll-to=0 to the last leg.
You know, I actually tried your last suggestions about data-top and data-scroll, and it actually offset even further down. As if it were calculating the offset after it placed below the first offset. So weird. I can't really figure it out. I'm thinking I might be able to just set up a one step tour for that additional modal at the end, but it doesnt seem i should have to.
The legs don't even know about each other, so I don't think it's some kind of 'below the first' situation. Here's the offsets calculation.
Maybe copy your tour to a stripped down sample page and see if you can reproduce. If you can, turn on the debug option and see if that sheds any light. If you still can't figure it out then jsbin or gist me the stripped down reproduction and I can spend some time fiddling with it.
So I whipped up a fiddle that I/we might use to narrow this down. I realized you were talking about having the centred leg appear wherever the user is, but that's not how it works by default, so the example also adds a custom data- attribute and an onLegStart that does that. Maybe give something like that a try?
http://jsfiddle.net/rfunduk/q8p9xxvy/
For now I'll close this issue, but feel free to re-open it if you can get that fiddle to reproduce the problem - that'll help me fix whatever elusive bug might be causing your issue.
Thanks, this should work fine!