Closed cilia closed 7 years ago
I sort of accomplished this using css:
.introjs-skipbutton {
display: none;
}
Pair that with disabling exitOnEsc
and exitOnOverlayClick
so only if the user manually edits your css he can skip.
Making .introjs-skipbutton display: none; is wrong, because this also hides "Done' button.
Aaahhh yes, didn't notice that :relieved: Nice catch.
Both skip and done buttons have same class of "introjs-button introjs-skipbutton". So just CSS can't come to our help.
This is my way, temporary solution.
var tour = introJs();
tour.start();
$('.introjs-skipbutton').hide();
tour.onafterchange(function(){
if (this._introItems.length - 1 == this._currentStep || this._introItems.length == 1) {
$('.introjs-skipbutton').show();
}
});
Tanks xuanlt !
+1, please fix this
+1 would be awesome when skip and done buttons are really separate and deactivatable :-) and for a little more neatness, could be nice to disable prevbutton on first step
hacked the plugin to disable skip button, but couldn't disable prevbutton on first step easily.. :/
Saludos, nevertheless thanks for the nice plugin! Tried many other webguide plugins, but intro.js works the best for me!
+1
will fix it guys, thanks.
+1
+1 (7 months later)
Having skip and done be indistinguishable from a CSS perspective makes Intro.js a lot less flexible. I'm styling the "Skip" button to be a small, unobtrusive, "x" icon. However, I want to leave the "Done" button styled similarly to the "Next" button. With the current implementation, this requires a funky workaround.
Is @waynn's solution acceptable? If so, can he/she open a PR to be accepted into master?
Looks like there's already a PR - @afshinm, can you please Merge this PR?
Just merged that PR. I will test it myself today and will include it for the next release. Sorry for this delay.
Apparently it did create a bug. I made a fix here: #675
I will have a look @radumpopescu
thanks.
Please fix this....And, I have a problem, please see this, Why the highlight part covered by white?
the introjs-disabled class is added to the 'previous' button on the first step, and the 'next' button on the last step. i really just wanted them hidden, so i added the below to my css. Poof! Done!
.introjs-disabled { display: none !important; }
SOLUCIONADO CON CSS
ANGULAR ::ng-deep .introjs-skipbutton{ visibility: hidden !important; } ::ng-deep .introjs-donebutton{ visibility: visible !important; }
SIN ANGULAR .introjs-skipbutton{ visibility: hidden !important; } .introjs-donebutton{ visibility: visible !important; }
+1 (a few years on)
Please fix this....And, I have a problem, please see this, Why the highlight part covered by white?
hmmm.
you can use highlightClass attribute for this:
steps: [ { title: 'Farewell!', element: document.querySelector("#elCreateNew"), title: 'MyTitleIntro', intro: "This whole area does something.", highlightClass: "highlighted-element" }, ]
css:
.highlighted-element { border: 2px solid #3498db; background-color: rgba(52, 152, 219, 0.3); }
In certain situations, I want to make sure that the users complete the tour, so an option for disabling the 'Skip' button would be nice.
Can we do this in intro.js at the moment?