
Show HN: Bootstro.js - intro.js for Bootstrap - clu3
https://github.com/clu3/bootstro.js
======
clu3
Hi all, I'm so surprised that this made HN front page, even though I thought
Bootstro.js would be nice because I had a tough time looking for something
like that. I guess I rarely get a chance like this so I'm very excited and
therefore would like to share here that I love HN so much. Actually there are
two things that have changed my profession quite _dramatically_

1\. HN, before HN, i.e about 3 years ago, I was with webmasterworld.com but
somehow I didn't get much out of it. At HN i'm mostly just lurking but I
learned so much from it 2\. Coding-wise, Bootstrap made my life a hell lot
easier since I'm basically so dumb at CSS. Bootstrap gave me a chance to
execute my idea in a timeframe which otherwise would have taken me months, and
getting bored of talking to my colleague CSS'er

Those 2 things have changed my career alot, believe it or not. I don't know
what's the point of saying that but I'd like to express what I love & really
appreciate.

~~~
cek
Well done. I've been thinking we need something like this for our app, but
haven't poked around yet. Thanks for making this available.

~~~
clu3
My pleasure!

------
Swizec
"I can resize my width too", that is really cool of you, but it would be nice
if you also didn't go beyond my screen edge. Especially if the Next button is
there.

Also consider adding push history support or whatever that's called. I'd like
to click back in my browser to go back in the intro.

This is mostly because the back/forth touchpad gesture added in some version
of MacOS or another, combined with the back/forth buttons on the mouse I use
on the linux machine, have made me big users of the Back functionality.
Something I would never click on "manually" and wouldn't even consider exists
otherwise[1].

[1] Before those two developments I spent 5+ years convinced that nobody ever
clicks Back in a browser.

~~~
mddw
Do you know about : <https://heatmap.mozillalabs.com/> ?

The back button is heavily used, even without gestures/mouse.

------
afshinmeh
I'm Afshin, the author of intro.js

As you mentioned in this thread, you just used intro.js idea to show the
steps, showing tooltips and more...

Why you didn't mention that in the Github repository also?

~~~
clu3
Hi Afshin,

I'd love to so had Bootstro.js been a follow-up of intro.js. But it is not.

I already said so in the demo that I had this idea & implementation _before_
intro.js was released , I even asked around #css & #jquery for some help on
how to highlight the div and I also expressed my idea there in the channel [1]

Apart from trying to show the authenticity of Bootstro.js so that you & others
don't take me wrong, I'd like to thank you for releasing intro.js and
triggering HN's love of the idea which made me excited to try modularizing
Bootstro.js & release. Being on HN's front page is a lot more "sexy".

Cheers, from Hanoi to Tehran ^^

[1]
[http://irc.jquery.org/%23jquery/%23jquery_20130309.log.html#...](http://irc.jquery.org/%23jquery/%23jquery_20130309.log.html#t00:06:34)

Edit: Typo

~~~
afshinmeh
but I really confused that if you have this idea before, why you didn't
published it on the Github partially?

You oldest commit is for 1 day ago.

~~~
clu3
I made it as part of SandPHP's JS suite and SandPHP is still a private repo.
OTOH, I've just checked your first intro.js commit is Mar 10, 2013 and I asked
around IRC on the 9th and you're asking for a DMCA takedown sigh...

------
fduran
Good. Only issue I have so far is that in links to modal windows the bootstro-
title takes over the title causing: a) the mouse-over tooltip (with original
title) disappears and b) the bootstro pop-over title is the original "title".

~~~
clu3
Would be great if you could provide me with a jsfiddle,thanks. i'm kinda not
getting it.

~~~
fduran
perhaps this helps: <http://pastebin.com/BkRspQig>

------
saulr
Flicking between steps results in the window scroll animations queueing. You
may wish to replace

$('html,body').animate({

in bootstro.go_to, with:

$('html,body').stop(true).animate({

This clears the animation queue and stops the current animation between
animating.

------
tomasien
Arrow keys not working for me - latest version Chrome.

~~~
clu3
Hi, thanks for the bug report , it's fixed now. I used keypress event and
somehow it doesn't work. Changing it to keydown event now has fixed it, at
least in my Ubuntu box. Thanks to
[http://stackoverflow.com/questions/3417938/binding-
keypress-...](http://stackoverflow.com/questions/3417938/binding-keypress-
event-using-jquery-not-working-in-chrome)

------
turnkey56
On iPad Chrome the 5, 6, and 7 popovers are dark (no focus) until the screen
is touched again.

------
_yb
I was expecting that clicking on the darker areas would exit the intro,
consider to do that.

~~~
clu3
Thanks for the suggestion. I've added an option stopOnBackdropClick and
defaulted to true. Demo updated too ^^

------
nachteilig
Seems like this addresses a lot of the problems with intro.js.

Thanks!

------
momchenr
I like this a lot, thanks for taking the time.

~~~
clu3
Thanks, it's been my pleasure. I also learned quite a bit of good JS
practices, especially from this post [http://enterprisejquery.com/2010/10/how-
good-c-habits-can-en...](http://enterprisejquery.com/2010/10/how-good-c-
habits-can-encourage-bad-javascript-habits-part-1/) because basically I'm a
PHP guy coming from Linux C programming world so that post is like spot on for
me

------
johnx123-up
Why "bootstro" attributes instead of "data"?

~~~
clu3
Since data-title, data-content are pretty kinda popular in bootstrap in many
different plugins, I thought I'd use bootstro- to avoid any accidental
mistake. TBH, I'm not even sure if it's good or bad practice

~~~
jasonquinn
It should really be data-bootstro-whatever so it validates as a custom data
attribute in HTML

------
mgkimsal
was just showing bootstrap and intro.js off to a team on saturday - this is a
nice combo.

safari 6 - arrow keys didn't work for me.

~~~
clu3
Thanks for your complement. It's fixed now. keypress changed to keydown event
handler

------
treycopeland
someone just showed off a clone of this sometime last week I believe.

~~~
clu3
I think probably you're talking about <http://usablica.github.com/intro.js/>
which I mentioned in the demo

