clu3 / bootstro.js Goto Github PK
View Code? Open in Web Editor NEWTiny JS library using bootstrap's popovers to help guide your users around your website
Home Page: http://clu3.github.io/bootstro.js/
License: MIT License
Tiny JS library using bootstrap's popovers to help guide your users around your website
Home Page: http://clu3.github.io/bootstro.js/
License: MIT License
Windows 7 64-bit
Google Chrome Version 26.0.1410.33 beta-m
I've built bootstro with bootstrap 3.
Since popover's max-width is 276px, so I can't use width of popover more than 276px.
How can i fix it?
Hi,
Just a heads up that your demo is broken in chrome at the moment.
This is because the bootstro.js file is being served with a mime type of plain/text when using the raw URL:
https://raw.github.com/clu3/bootstro.js/master/bootstro.js
Previously this only caused a warning in chrome but now it causes an error and the script no longer executes.
I'm using Chrome 31.0.1650.57 m on Windows 7.
Cheers
Rob
Can we have an option to put the controls in the title area (aligned to the right corner)? Thanks.
Is there anyway to allow bootstro to show popovers for items in button dropdowns?
I did tied by targetting the
I tried to use it with Bootstrap 2.0.4 without success.
It gives me this error in the console:
TypeError: data[option] is not a function
$.fn.popover = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('popover')
, options = typeof option == 'object' && option
if (!data) $this.data('popover', (data = new Popover(this, options)))
if (typeof option == 'string') data[option]()
})
I think you have to mention supported bootstrap version.
I'm trying to add to the three current buttons a start button to restart the tour, can this be done without writing new code, also is it possible to reset the tour. Currently when to you're done viewing the tour, the browser keeps record and on the next launch won't launch the tour. I want to add a Help link that resets this and runs the tour again.
My testing : it doesn't work on ie 8 and 7 and 6.
Minified version does not include onStepFunc as a hook. Also does not contain onCompleteFunc and possibly others. It actually looks like the minified version has removed all hooks? The functionality between the regular and minified versions seem to greatly differ.
With fixed-top navbar doesn't display correctly
Does anyone have a working example for bootstro.js with Bootstrap Modal?
Hi, i have multiple elements in a long height screen, bootstro doesn't scroll to the bottom to make the popover visible, is this a common problem?
Can we call step order from within a json file?
e.g.
"selector":"#profilePic",
"title":"Ajaxed Title 2",
"content":"I was found because I have selector=#demo_ajax",
"width":"400px",
"placement":"bottom",
"step":"2"
You should make it MIT if what you say in your license section is true.
It does the exact same thing as your license but also makes it so that you are not personally liable for any 'damage' caused by your software. Which will probably be nothing forever but may not be.
And people are used to the MIT.
any chances of having support for bootstrap 3?
thanks
It would be great if there was a code example in the tutorial that would contain html code with all of the links to a cdn with every single dependency.
I am currently struggling with getting the dependencies right (as I am not used to working with bootstrap) not to mention the fact that the link to bootstrap popover on your site leads to a dead end ( http://twitter.github.com/bootstrap/javascript.html#popovers ).
I simple code that I could just copy and paste to my header would be nice :)
Hi,
great work you have here :)
Here is a little bug? I´ve found.
The popover was exiting, and I couldnt found what why.
The problem is that I had in the link that start the boostro this:
a class="alert alert-block" id="help" href=""
the fix was to have href="#"
Just a quick advice to turn this even better.
You could use a configuration js like this:
jQuery(function($) {
var tour = new Tour();
tour.addStep({
element: "#passo1",
placement: "bottom",
animation:true,
title: "help ?",
content: "content things"
});
instead of having to change html adding data-bootstro-title and data-bootstro-content.
That example was taken from http://sorich87.github.com/bootstrap-tour/
Thanks,
jcorreia
Bootstro will darkening the '.bootstro-backdrop' each time you click an element that is launching Bootstro. This should be prevented.
I have a button whichs starts the tour. I'm using an ASP.NET Updatepanel.
Every time I call bootstro.start(); the overlay gets darker. This does not happen in your demo.
Maybe the plugin has to be destroyed before ?!
Hello, nice plugin.
Currently it behaves strange, when steps are missing, for instance 1,2,4
This can occur, when some functionality of a page is depending on the role of a user that logs in. So some steps are optional.
Cheers.
P.S: Mentioning intro.js doesn't hurt ;)
Hello all,
I configured bootstro to work with a json file in my bootstrap site (using sb admin 2 theme). I can launch it but the popups are displayed behind the bootstro background (black with 50% transparency)
If i use keys i can change to next or previous step but with the mouse a click closes all.
A z-index issue ?
Thanks (and great job)
Hi there,
Is there a way I can capture keyboard focus within the popover once active. Currently I'm still able to tab through other controls behind the mask.
Thanks for a really useful plugin by the way.
Kind regards,
Brian
The finish bootstro sometimes submits the form.
posible fix:
//end of show
$("html").on('click.bootstro', ".bootstro-finish-btn", function(e) {
e.preventDefault();//add this line
bootstro.stop();
});
(User error)
Been trying to implement this but can't seem to get it to work quite right. Think it's much cleaner to have the finish button only show up on the final slide.
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library clu3/bootstro.js
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "clu3/bootstro.js",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Currently if you define a step on an element with an tooltip already defined (existing data-original-title) this title will get shown in the step header section instead of the bootstro-step-title tag.
After checking the tooltip,js of bootstrap, this is the "default" behavior, but I would wonder if I would be the only one how has this issue and if there would be an way to fix this. E.g. what about a template with already a given counter section?
;)
Shows "next" Button if there is only one step.
First of all, this library is awesome. Now my problem is I want to add a class when tour starts.
I saw callbacks like onstep(), onexit(). is there anything like onStart().
like bootstro.start()... and i want to add class to the popover it creates.
Hi, I'm using bootstro for making a tutorial of a web application and I want to make it a little bit interactive. So I assigned bootstro.next() function to some buttons and I want users pass these steps by only using these buttons, not the "next step" button. So I need to remove them in some steps. Is it possible to do this?
Thanks.
It would be nice to include a class or data attribute that you can add to an individual popover to remove the arrow for only that selected popover.
For example, if you wanted to start a stepped tutorial with a modal like intro that isn't linked to a particular element on the page (hence wouldn't need an arrow).
What I did to hack around this was to change the css to hide the highlighted element but show the popover so it seems like the popover isn't tied to any element on the page. However the arrow still appears which ruins the whole effect.
I tried to target the individual popovers through css to solve this, but the problem is that the popovers are generated in the DOM underneath the elements they're appended to, not INSIDE the elements, so I can't target each popover individually through its parent element id or class. Which leaves only a jquery option.
I started by stripping
<div class="arrow"></div>
out of bootstro.js template and then basically adding it in only when a class in called to a certain id.
$(document).ready(function() {
elem = $('div#name');
if (elem.hasClass('add-arrow')) {
$('.popover').append('<div class="arrow"></div>');
}
});
It seems to work on the element only when the page is first loaded and is the first step. It does not work on subsequent steps or when one goes back to the first step. It appears the bootstro.js is overriding this script except when the page is first loaded. I have placed this script at the bottom of the page for bootstro custom options and not in the bootstro.js itself.
Any ideas on how to modify this or even construct a custom data-attibute that would remove the arrow div? Any help would be greatly appreciated.
Thanks so much!
Mark Genest
Hi,
I´m using bootstrap tabs and I have elements that are inside this diferent tabs.
The problem is that they aren´t showing, if they are on different tabs..can you check this ?
Thanks :)
its not working here is console log
Refused to execute script from 'https://raw.github.com/clu3/bootstro.js/master/bootstro.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. bootstrap2.html:1
Uncaught ReferenceError: bootstro is not defined bootstrap2.html:417
body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode and 'body.scrollTop' only if in quirks mode.
body.scrollLeft is deprecated in strict mode. Please use 'documentElement.scrollLeft' if in strict mode and 'body.scrollLeft' only if in quirks mode.
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
Hey guys,
I'm Afshin, the author of Intro.js.
As you mentioned before in the HN thread, tweets and..., you used Intro.js idea to show steps, present layers and more...
Why you don't mention that in the Github repository and the README?
Modals don't work when you have the popover tutorial on the page. Any way around this that you know of?
Hi,
Would it be possible for you to add a callback which is called before the step is taken?
I have a hidden div (display:none) on the page for showing Alerts and Messages when required. I want a step to describe this but I need to show the div before that step is reached if bootsro is to correctly locate it.
If I could set it's visibility before reaching the step then it would be all good. I currently have to show the message in the previous step which isn't ideal.
Thanks for the great plugin by the way. Was up and running in minutes :-)
i made this change to the code for a website im working on
on line 187 (inside get_popup function)
if ($el.attr('data-bootstro-width'))
{
p.width = $el.attr('data-bootstro-width');
var width_without_px = p.width.substr(0 , p.width.indexOf('px'));
if(width_without_px > $(window).width()){//if bigger then screen
p.width = ($(window).width()-10)+'px';
$el.attr('data-bootstro-width' ,p.width );
p.placement = 'bottom';
}
style = style + 'width:' + $el.attr('data-bootstro-width') + ';'
}
so what it does is if popover width defined check the width and window width, if popover is bigger then screen make it smaller then screen and make placement bottom.
hope youj find it usefull
itamar
I would like to use this on a multilingual page, so I would like to have the possibility to have the labels depending of the current language. It would be no problem to pass this to the JavaScript call, so I just need an option to pass a language and select the needed translation.
Hi, I tried the last code version, but couln't make the fixed navbar works with bootstro. I made this fiddle:
thanks
I'm not sure if this is a bug or I'm wrong about the intended functionality of the onComplete function.
But when bootstro.next is called, the activeIndex is always 2 less than the count. activeIndex being incremented from 0, and count being the total count. E.g. when I am on step 7 of 8 on your demo page, and click next, the activeIndex = 6 and the count is = 8.
Therefore the onComplete call in the below code is never called.
bootstro.next = function()
{
if (activeIndex + 1 == count)
{
if (typeof settings.onComplete == 'function')
settings.onComplete.call(this, {idx : activeIndex});//
}
else
{
bootstro.go_to(activeIndex + 1);
if (typeof settings.onStep == 'function')
settings.onStep.call(this, {idx : activeIndex, direction : 'next'});//
}
};
What confuses me is the "else" statement. Are you intending for the onComplete here to be accesses with a next button located on the last step of the tour? Shouldn't that be an onExit?
What we are trying to use the onComplete for is to flag in our db that the tour has been taken. In that case, the code should read like:
bootstro.next = function()
{
if (activeIndex + 2 == count)
{
//call onComplete callback function if needed
if (this.onCompleteFunc != undefined) {
this.onCompleteFunc.call(this, { idx : activeIndex });
}
}
bootstro.go_to(activeIndex + 1);
if (typeof settings.onStep == 'function')
settings.onStep.call(this, {idx : activeIndex, direction : 'next'});//
};
Can you use version numbers or some mechanism to let users know what version of the script they are running? This makes it easier to know if they need to update or not.
Is it possible to close intro tour after some seconds says having timeout option, if anyone don't click on it?
When the intro'ed control is already entirely visible on the screen, there's no need to scroll it to the very top. Otherwise on the vertically oriented (or just big enough) screens it becomes very inconvenient to read.
I'm trying to add the popover to an element with position fixed. The popover is then absolutely positioned with pixel values so it doesn't follow the element when the browser is resized, like it does with other relative elements.
Any ideas?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.