Sideshow is a powerful javascript library which aims to reduce your user's learning curve by providing a way to create step-by-step interactive tours. Explain the features of your application, control your end-user's interaction with your UI, emphasize what you're explaining in each step by masking it. Just think! The sky is the limit!
I need to position the targets arrow to the side, instead of the top of the element. Something like the image below:
I'm looking through the source code on how to achieve this.
I was thinking of adding this as a property for the step, so a step could look like this.
{
title: 'Title',
text: 'Description goes here',
subject: '.main-nav',
targets: '.main-nav li',
arrowPosition: 'right' // positions the arrow to the right of the targets
}
My initial approach would be to pass this arrowPosition (or should we call it targetsPosition?) to the property Arrow class, and adjust the Arrow.positionate() method accordingly.
By default arrowPosition would be top (similar behaviour as happens currently), but we could allow supplying other properties. For now I had top, right, bottom, and left in mind.
We'd also need to provide new icons to the font file (caret-left, caret-right, etc), or we could continue to simply use the same arrow icon, and use transform: rotate(90deg) to make the arrow fit the position.
I've already started on something locally, and once I have something stable I can submit a PR, but advice would always be welcome.
I'll be continuing the conversation in this issue, as this one is more focused on the implementation. For the ones interested, work in progress can be followed on my fork.
I need to position the targets arrow to the side, instead of the top of the element. Something like the image below:![screen shot 2015-03-16 at 14 21 22](https://cloud.githubusercontent.com/assets/52545/6669156/5621088e-cbef-11e4-88ab-f1b195f4c369.png)
I'm looking through the source code on how to achieve this.
I was thinking of adding this as a property for the step, so a step could look like this.
My initial approach would be to pass this
arrowPosition
(or should we call ittargetsPosition
?) to the propertyArrow
class, and adjust theArrow.positionate()
method accordingly.By default
arrowPosition
would betop
(similar behaviour as happens currently), but we could allow supplying other properties. For now I hadtop
,right
,bottom
, andleft
in mind.We'd also need to provide new icons to the font file (caret-left, caret-right, etc), or we could continue to simply use the same arrow icon, and use
transform: rotate(90deg)
to make the arrow fit the position.I've already started on something locally, and once I have something stable I can submit a PR, but advice would always be welcome.