Mobile support, or mobile usage recommendations
jabbett opened this issue · comments
After trying, and liking, jquery-tourbus on my desktop browser, I opened it up on my iPhone, and saw several problems.
- First step is too wide for the screen.
- Image steps are off the right side of the screen (you can drag screen over to see)
- Screen doesn't scroll when you advance most steps. It does, however, scroll down to the "it also scrolls for you" step, and then back up for the final step.
- Coffeescript/CSS steps are off the left side of the screen (you cannot drag screen over to see)
Perhaps there's just a particular way I could use tourbus that's friendlier to my mobile visitors?
Ah yes you have noticed TourBus' achilles heel haven't you :)
Honestly, I haven't considered mobile at all at this point. I made this library so that I could run tours for web apps I run (Bugrocket which is rolling out it's tour in the next week or so, and CourseCraft which I have yet to implement a tour for). These apps are not really mobile apps at this time either, so I focused on the functionality I actually needed.
That's not to say TourBus should not support mobile. I think it will really just require media queries for both the demo/docs site and for the provided leg css. My issue is that some of the options for alignment of legs and whatnot will probably be problematic and need to be ignored or defaults changed…
Consider it on my todo list!
I'm in need of the same thing, and it's pretty urging so I'm probably going to do it and send a pull request soon
I'm not sure yet how to approach this to be honest.
The current plugin has options to overwrite top-left, which won't work in a responsive env.
How about..
- Put a config for responsive breakpoint. Let's say 768px (bootstrap default), let's call it options.responsiveBreakpoint
- Add options called responsive-orientation. Only allow top or bottom
- When initializing, check if the current viewport is under responsiveBreakpoint, set it as var so we don't have to query the viewport everytime. Also add a method and events in case someone wants to recalculate it.
- if it's under the breakpoint
- Center the leg in the screen.
- Only move the arrow to match the element queried
It'll look like this
I'll try to make it so that most of the responsive leg will be modifiable by CSS, and only rely on JS to position the arrow.
I think it's going to work.
Tell me what you think. Cheers.
Adding configuration options and special attributes doesn't sit very well with me. If it can't be css-only, maybe it could be done with a plugin approach (use expose to patch in this feature) instead?
I see. Even if they are optionals? I can make it so that if it's not defined (by default: null), it'll works as it is now, no breakage would be done.
I'm just focused on keeping the thing simple that's all. I want to avoid a confusing api where it's like "define this property if you want x, otherwise y, but don't define y if you define x because it won't work...", etc. Basically my order of preference is like this:
- if it can be done only by the user with their own CSS media queries/config options that would be ideal
- next would be providing only some kind of css override inside tourbus that solves it (probably not possible?)
- after that some kind of hack/plugin you can apply if you need responsive features, i'd be more interested in changing tourbus to more easily support this kind of plugin than adding features
- and finally adding of config/leg options
I see.
Then we can make it but it'll require more DOM calculations.
We can check if the leg is out of bound. If it is, make it not out of bound and reposition the arrow.
If the leg is set as bigger than the current viewport, set the width at 80% and reposition arrow.
By having no options, you won't have possibility to define whether to show the leg on the upper side or bottom side of the element.
Hmm.
I might have an idea, but it'll require 1 new option.
how about having data-extraclass="" as an optional option, like width and the recently added zindex, that tourbus will add to the leg?
I'll try something.
The user can write javascript which does the same breakpoint stuff you were describing earlier though, right? Just do your calculations beforehand and change the legs appropriately. You can still position above/below using the existing orientation option.
extraclass is a perfect example of something you can easily add yourself as the user. See the 'Advanced Usage' section of the docs where extra custom options on the leg are used in the javascript.
Okay.
Because you assign the width by javascript, my media queries doesn't work, and we have a strict rule of no !important in CSS.
I can't spend any more time on this, so I made my changes (it works!) and will use my fork.
Cheers.
Hi guys, I second this. Everything is going to responsive and being able to support responsive is a big deal these days.
I am also contemplating what to do. I like tourbus, but everything I do these days needs to be responsive. I can take @maktouch 's semi-hacked version, or would have to implement something else.
Even on the desktop, the legs will sometimes not fit on the screen and float off too, so there are overlapping functionality that could be added to help improve the usability.
What do you think @rfunduk ? I like your solution better than the others out there, but not supporting mobile could be a deal breaker for many people.
Hi @crwang, I've been thinking about this for a while now. At the moment you basically are stuck with making 2 tours and deciding which one to use (eg, when on mobile and when on desktop), or just not showing the tour at all on mobile. Not ideal :(
2 main reasons why jquery-tourbus isn't 'responsive' today:
- I wrote this with my own 2 products in mind, and those 2 products (and the tours even more so) that are meant to be used on a large monitor, with a keyboard and a mouse, etc.
- I really want to keep this library small and light-weight.
So that's not to say some kind of responsive considerations can't be added, I just haven't figured out how I want to approach it yet.
I think if you really need a responsive tour, then you might be better off with an alternative project for now.
If/when I eventually decide on something, I will for sure update this bug.
Thanks, I've had to take your suggestion and go onto an alternative project that supports mobile web.
Too bad it didn't work out. jQuery Tourbus is pretty sweet.
@crwang what did you end up going with?
@mysmallidea I ended up going with http://bootstraptour.com/