tour popup doesn't relocate when trigger position changes

[argonautical]

I'm using smallipop (super job btw) on a form wizard. When the user reaches a particular step in the "tour" I'm dynamically expanding a section of the page to show more details of the form. The problem is that the tour trigger changes position on the page when I expand the form, thus causing the smallipop popup to display at the old position for the trigger, not the new position.

I didn't see anywhere in the specs where I could call a "refresh" or "redraw" to get the currently displayed popup to update its position.

If there's a workaround you can suggest that'd be great but possibly implementing a "redraw" method would work?

[Sebobo]

Hi,

thank you. I will think about a way to auto-detect this change.

Meanwhile you can use this private call to refresh the visible smallipops:

$.smallipop._refreshPosition(false);

It's a good idea to add this call to the public api calls.

Regards

[argonautical]

Thanks so much, that's great. Maybe I'm missing something though, but the only way I can trigger the update in position is using onAfterShow. The onBeforeShow doesn't seem to fire with a tour. I thought about capturing the change in element position from the tour step before it, but the onAfterHide and onBeforeHide don't seem to fire on tour either.

To elaborate, the form loads in the "normal" state, then the tour starts. The first tour popup is displayed. Then when the tour proceeds to the next step, the form elements dynamically change position and the 2nd tour popup shows. Using the _refreshPosition definitely moves the 2nd popup to the new position for the trigger element, but it always shows up in the original position first, then does a visible "jump" to the new position which makes it feel a little bit kludgy. I wanted to call the _refreshPosition before it shows so it fades in at the correct location in the first place, but like I said, onBeforeShow doesn't fire. The only event callback I could get working of the 4 was the onAfterShow.

Is that a known condition of using the tour feature, that the other 3 events don't fire (onBeforeShow, onBeforeHide, onAfterHide)?

Thanks again for the quick feedback. Knowing there's a built in method to at least get it updated is great .

[Sebobo]

Is the form change triggered by the tour callback (onTourNext)?

I'm currently working on good examples for the tour feature. So it would be great if you could provide an example of your implementation. Would be easier for debugging too.

[argonautical]

Yes it is. Maybe I'm going about this incorrectly but here's the breakdown.

I'm using a jQueryUI accordion on a form. The tour event triggers are the DIVs that make up each accordion panel content. So on first pageload they are all collapsed except for the first one. The tour starts and the first popup displays correctly.

In the smallipop setup I've got the following

onTourNext: function(trigger) {
// the next line calls two custom functions that retrieve the current stage of the tour based on the trigger and then manually trigger the accordion to open the appropriate panel based on the stage of the tour
setTourStatge(getTourStage(trigger)); 
var x = setTimeout(function(){$.smallipop._refreshPosition(false)},500);
}

I've also tried using the code in the onAfterShow and get the same results, a jump in position after it's been displayed.

I originally tried calling the _refresh without the setTimeout but it doesn't move because the new accordion panel isn't completely open yet. I needed to wait 500 milliseconds for the accordion panel animation to complete, and then update the location but I still get a "jump" in the popup position because it displays on the screen BEFORE the onTourNext event is completed. I'm guessing onTourNext fires technically after the next tour popup has already been told to display. So the result is that the step 2 tour popup displays at the same time the accordion panel animation runs, then when it's done animating, the popup jumps to the new position.

This is why my original approach was to trigger the form updates based on the previous tour event by capturing the onAfterHide or the onBeforeHide of the previous step. This would allow me time to change the form accordion after step 1 is hidden and before step 2 is displayed, then continue with the display of the step 2 popup only after the accordion is done opening.

Again, I'm totally willing to admit I'm going about this the wrong way and I've missed something.

Also, as you can see I've written my own custom function to parse the trigger and figure out what stage the tour is in (called getTourStage() in the above code). I didn't see a method in the docs to retrieve the currently tour step but I saw in the internal code you're doing something with looking for a particular class. I wasn't familiar with how reliable that would be so I wrote my own function to analyze the trigger. If there's already method in there that would do this for me, I'd love to know. Certainly don't want to reinvent the wheel :)