Show HN: Bootstro.js - intro.js for Bootstrap (opens in new tab)

(github.com)

79 pointsclu313y ago32 comments

32 comments

clu3OP13y ago

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.

cek13y ago

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.

clu3OP13y ago

My pleasure!

Swizec13y ago

"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.

mddw13y ago

Do you know about : https://heatmap.mozillalabs.com/ ?

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

clu3OP13y ago

First off, thanks!

1. I can't really fix the beyond screen edge problem. I guess it's Bootstrap's popover problem. However, in practice, this is probably not a big issue. If you feel like the popover's gonna go off screen, consider adjusting the popover's placement.

2. That's a nice feature to have but probably not a quick fix, I'll put my effort into that asap

afshinmeh13y ago

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?

clu3OP13y ago

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#...

Edit: Typo

afshinmeh13y ago

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.

1 more reply

fduran13y ago

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".

clu3OP13y ago

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

fduran13y ago

perhaps this helps: http://pastebin.com/BkRspQig

saulr13y ago

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.

tomasien13y ago

Arrow keys not working for me - latest version Chrome.

clu3OP13y ago

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-...

Hawkee13y ago

Same here. That's the biggest problem IMO.

turnkey5613y ago

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

_yb13y ago

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

clu3OP13y ago

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

nachteilig13y ago

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

Thanks!

momchenr13y ago

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

clu3OP13y ago

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... because basically I'm a PHP guy coming from Linux C programming world so that post is like spot on for me

johnx123-up13y ago

Why "bootstro" attributes instead of "data"?

clu3OP13y ago

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

jasonquinn13y ago

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

mgkimsal13y ago

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.

clu3OP13y ago

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

treycopeland13y ago

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

clu3OP13y ago

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

manojlds13y ago

The title itself says this is into.js ( the one you mention ) for bootstrap.

afshinmeh13y ago

This is the copied idea of intro.js Shame on the author of this repository for copying the intro.js idea.

j / k navigate · click thread line to collapse

32 comments

clu3OP13y ago

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.

cek13y ago

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.

clu3OP13y ago

My pleasure!

Swizec13y ago

"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.

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

mddw13y ago

Do you know about : https://heatmap.mozillalabs.com/ ?

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

clu3OP13y ago

First off, thanks!

2. That's a nice feature to have but probably not a quick fix, I'll put my effort into that asap

afshinmeh13y ago

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?

clu3OP13y ago

Hi Afshin,

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

Cheers, from Hanoi to Tehran ^^

[1] http://irc.jquery.org/%23jquery/%23jquery_20130309.log.html#...

Edit: Typo

afshinmeh13y ago

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.

1 more reply

fduran13y ago

clu3OP13y ago

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

fduran13y ago

perhaps this helps: http://pastebin.com/BkRspQig

saulr13y ago

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.

tomasien13y ago

Arrow keys not working for me - latest version Chrome.

clu3OP13y ago

Hawkee13y ago

Same here. That's the biggest problem IMO.

turnkey5613y ago

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

_yb13y ago

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

clu3OP13y ago

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

nachteilig13y ago

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

Thanks!

momchenr13y ago

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

clu3OP13y ago

johnx123-up13y ago

Why "bootstro" attributes instead of "data"?

clu3OP13y ago

jasonquinn13y ago

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

mgkimsal13y ago

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.

clu3OP13y ago

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

treycopeland13y ago

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

clu3OP13y ago

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

manojlds13y ago

The title itself says this is into.js ( the one you mention ) for bootstrap.

afshinmeh13y ago

This is the copied idea of intro.js Shame on the author of this repository for copying the intro.js idea.

j / k navigate · click thread line to collapse