He means that if intro instructs the user click here, and the browser goes to another page from within the same intro scope, then intro would pick up and continue.
Maybe step 1-3 is on "start.html" and step 4-6 is on "anotherpage.html". So when the user clicks next from step 3, he should be redirected to anotherpage.html and the intro continues.
I got it, I got it. Good idea, I think you submitted an issue on Github also, right?
Thanks for the awesome suggestion, in the next versions we will have that also.
I really like this. I think it would be neat to see a discrete help button or toggle switch, that allows novice users to go into a help mode overlayed on top of a live web app.
I think the work done here is fansastic and presents a great alternative to the zurb joyride / jquery or zepto combination. I agree with some of the other comments about the usability on an ipad and mobile device as well as scrolling the screen to the focused element. I think larger targets would really help with this.
At this point in its development, if you are able to use jQuery or Zepto I think that Joyride 2 offers a much better UI / UX especially if you are planning to use Foundation 3/4.
One item of feedback: the styling of the numbers look nearly identical to the feedback badge on iOS, which made me think for a second that it was some sort of alert, rather than a step in a sequence. Obviously the styling is customizable by the developer, but as a default, I could see it being confusing to iOS users.
Edit: one more tidbit: resizing the browser doesn't force the box(es) to resize. Admittedly an edge case. :)
Yeah correct, there's a problem when you resize the browser. In the next versions I calculate all box(s) position again to keep focus element helper layer updated.
This is very nice but I have some suggestions to improve:
Navigation: The “next” link is very small and it's in different place on every step. A fixed navigation and/or bigger link would be nice.
Also, showing me that it's “Step 3” is useless to me - I can count myself and even if I couldn't, I don't really care how many steps I've already seen. I'm more interested in how many more there are.
There should also be automatic scrolling so that I could actually see the next highlighted area. If you already do the scrolling, remember to scroll in a way that guarantees to show whole area, not only top line.
Thanks for the great work, I think I might use it in my next projet!
I felt the same about the numbers appearing. It reminded me of the numbers that appear on my Facebook notifications/messages, and it made me feel like I needed to click/take some action with the number itself. It didn't really add anything to the experience though.
Other than that, I liked it. I especially appreciated the animated transition to the next step, where the "spotlight" flowed & resized forcing my eyes to follow.
Just give them a less "active" default color and you're halfway there. As they are now, they seem to be asking for action. I'd also write "Step n of N" or simply "n/N" to help clear the meaning.
Congratulations on your good work, by the way. I don't usually vote TFAs up, but you totally deserve it.
I figured the manual scrolling was to train you to navigate the site. I guess scrolling automatically implies this, but maybe the former is more effective?
Looks very cool but the fact that you have to hit the tiny "next" link makes it hard to use on iPad. It's compounded by the fact that the page isn't scrolling down all the way from step 1 to step2 so you have to scroll down manually.
On the computer, though, this looks slick and works reasonably well. Good job!
My suggestion: take all the presentation. Make it less graphical and more scalable, lets say i dont want red circle with number i want just the overlay part.
Overall though its nice to see a non jQuery plugin! And it's very nicely done.
Could use some finessing, on Opera there appears to be a white square/rectangle that appears on the next element for the second and third ones (not sure why). Then it disappears. Maybe it's an Opera thing.
The styles that get applied to the element inside of the "white box" get applied before the white box moves. This is noticeable for the links in the top right. They turn light blue before the box even moves. It should be after the box has moved, since that kind of stuff is pretty much instant.
Just curious ... why is it nice to see a non-jQuery plugin? Isn't the point of jQuery that it's tested and standardized for all browsers, thus theoretically reducing the odds that a plugin won't work on any given browser?
Agreed. That, or put a small reminder on the first step (or on each step) that lets users know they can use the arrow keys. Seeing the arrow in 'Next→' was not intuitive for me (if that was intended to convey that you can change steps with →).
Not at all, I just find it odd. Having a fancy URL is great, but the restrictions in place on certain domains are there for a reason and should be respected.
Certain TLDs have restrictions on their use, and .ca is one of those.
Many registration authorities choose to let anyone buy their domains because it's a big source of income. Libya is one of those (or always used to be. Since the revolution it's been less clear).
Only that at one point, to purchase the rights to that domain name, they effectively paid the Ghaddafi regime a small amount of money, and that they run a popular service that at any time could be hijacked by the current regime in Libya.
You are changing the z-index of the "focused" element but you need to check if one of the parents have z-index defined already because in that case the effect doesn't work.
Instead of looking for a workaround I would suggest that since you are already aiming for modern browsers maybe you should use SVG (clip-path) with CSS {pointer-events: none} so you have a real "hole" and you could use 4 dummy divs if you want to disable interaction with non-focused elements.
Aha, good idea for JSON (but I think attribute is a good one for some frameworks like ExtJs that you don't know your element id or something like that).
What you need by "senario"? Could you please explain it more?
Yea, the support team want multiple scenarios (intros) in a page, we use a param, so they can link to it and push them to users asking how to do stuff,
it becomes for us like an advanced, usable, faq system
Brilliant and almost perfect. I will incorporate it into my project, next week. Thank you so much.
Most people here are asking for more features. Please be careful with that; it would be a pity to see such a pearl to swell into bloatware. You have very good taste, let it be your guide.
You could potentially build a commercial version of this on the same technology, if you wanted to keep the core of it lean. I know several people that would pay money to have this plus analytics about user progress and drop outs, user feedback etc.
I can't speak to the other one, but I will go on to say that Taurus is moving very fast. I was an early adopter, and while I don't use them anymore, I saw them go from a barebones product, to a barebones product with an on-site tutorial builder, to a fairly rich product with customizable themes, etc., in just a few weeks.
I can't speak for what they've done since I stopped using them, but looking at their homepage, the velocity still seems pretty high.
Love the concept, I've been looking for something like this and I'm already deploying it in my app.
Used today's commute to package it into introjs-rails, for anybody that wants to use this in their rails app (assuming you are using the RoR asset pipeline)
Hey, I just added intro.js to my project. One thing I noticed is the tooltip always shows up at the bottom. The most useful thing I can think of is supporting an attribute to display the tooltip on any side of the element.
I can link you to my project if you'd like to see how I use it. Just email me- mariusz.n.lapinski@gmail.com. My app isn't ready for prod just yet.
159 comments
[ 4.6 ms ] story [ 159 ms ] threadIMO not old enough to be not supported, but YMMV.
Maybe step 1-3 is on "start.html" and step 4-6 is on "anotherpage.html". So when the user clicks next from step 3, he should be redirected to anotherpage.html and the intro continues.
However, do note that Foundation's javascript plugins also work with Zepto[1][2] which weighs in at under 10k gzipped.
[1] http://foundation.zurb.com/docs/javascript.html
[2] http://zeptojs.com/
I tend to like the Intro.js page fade animation. Although JoyRide 2 actually scrolls to the highlighted object, whereas intro.js does not.
At this point in its development, if you are able to use jQuery or Zepto I think that Joyride 2 offers a much better UI / UX especially if you are planning to use Foundation 3/4.
One item of feedback: the styling of the numbers look nearly identical to the feedback badge on iOS, which made me think for a second that it was some sort of alert, rather than a step in a sequence. Obviously the styling is customizable by the developer, but as a default, I could see it being confusing to iOS users.
Edit: one more tidbit: resizing the browser doesn't force the box(es) to resize. Admittedly an edge case. :)
Navigation: The “next” link is very small and it's in different place on every step. A fixed navigation and/or bigger link would be nice.
Also, showing me that it's “Step 3” is useless to me - I can count myself and even if I couldn't, I don't really care how many steps I've already seen. I'm more interested in how many more there are.
There should also be automatic scrolling so that I could actually see the next highlighted area. If you already do the scrolling, remember to scroll in a way that guarantees to show whole area, not only top line.
Thanks for the great work, I think I might use it in my next projet!
Other than that, I liked it. I especially appreciated the animated transition to the next step, where the "spotlight" flowed & resized forcing my eyes to follow.
Congratulations on your good work, by the way. I don't usually vote TFAs up, but you totally deserve it.
On the computer, though, this looks slick and works reasonably well. Good job!
Looks good and I will use it no doubt!
Keep going nice work!
I like what seems to be the differentiating feature here -- highlighting the actual elements on the page rather than pointing at it.
I'm looking forward to the pull requests that fix some of the style issues (next button etc, as mentioned already).
Could use some finessing, on Opera there appears to be a white square/rectangle that appears on the next element for the second and third ones (not sure why). Then it disappears. Maybe it's an Opera thing.
The styles that get applied to the element inside of the "white box" get applied before the white box moves. This is noticeable for the links in the top right. They turn light blue before the box even moves. It should be after the box has moved, since that kind of stuff is pretty much instant.
The current implementation feels more like a whack-a-mole game than a guided tour. :)
http://www.cira.ca/why-ca/ca-101/who-can-register-a-ca/
Many registration authorities choose to let anyone buy their domains because it's a big source of income. Libya is one of those (or always used to be. Since the revolution it's been less clear).
Instead of looking for a workaround I would suggest that since you are already aiming for modern browsers maybe you should use SVG (clip-path) with CSS {pointer-events: none} so you have a real "hole" and you could use 4 dummy divs if you want to disable interaction with non-focused elements.
Wow. Wow.
What a great way to do an on-site tutorial.
Thank you!!
First, using data attribute is too intrusive, a json object would have been much better, we just cannot add these attributes everywhere in our app.
Using a json object would also make it possible for anyone to create a UI tool for creating guides.
Also a "scenario" concept would be nice, having the ability to have multiple scenarios in a page is essential for a support team.
Last thing, the UX is fantastic, it's clean and simple :)
What you need by "senario"? Could you please explain it more?
Thanks anyway.
it becomes for us like an advanced, usable, faq system
Most people here are asking for more features. Please be careful with that; it would be a pity to see such a pearl to swell into bloatware. You have very good taste, let it be your guide.
I can't speak for what they've done since I stopped using them, but looking at their homepage, the velocity still seems pretty high.
Used today's commute to package it into introjs-rails, for anybody that wants to use this in their rails app (assuming you are using the RoR asset pipeline)
gem 'introjs-rails'
https://github.com/heelhook/intro.js-rails
I can link you to my project if you'd like to see how I use it. Just email me- mariusz.n.lapinski@gmail.com. My app isn't ready for prod just yet.