We Keep Coding

intro.js show and hide data-hint

I want to have a button that can turn on and off the 'hints' function in intro.js.
I have a working version to show and then hide but the show only works once. How can I get it to work repeatedly? This functionality works for the standard data-intro but not for data-hint.
<div class="jumbotron">
<h1 id='step1'>Hints</h1>
<p class="lead">Adding hints using JSON + callbacks</p>
<a id='step2' class="btn btn-large btn-success" href="javascript:void(0);">Add hints</a>
</div>
function addHints(){
intro = introJs();
intro.setOptions({
hints: [
{
element: document.querySelector('#step1'),
hint: "This is a tooltip.",
hintPosition: 'top-middle'
},
{
element: '#step2',
hint: 'More features, more fun.',
position: 'left'
},
{
element: '#step4',
hint: "<b>Another</b> step.",
hintPosition: 'top-middle'
}
]
});
intro.onhintsadded(function() {
console.log('all hints added');
});
intro.onhintclick(function(hintElement, item, stepId) {
console.log('hint clicked', hintElement, item, stepId);
});
intro.onhintclose(function (stepId) {
console.log('hint closed', stepId);
});
intro.addHints();
}
$(function() {
$('#step2').click(function(){
if ( $('#step2').hasClass('clicked') ) {
introJs().hideHints();
$('#step2').removeClass('clicked');
} else {
addHints();
$('#step2').addClass('clicked');
}
});
});

Instead of using hideHints intro.js API method just remove the div block of intro.js from DOM:
var introDiv = document.getElementsByClassName("introjs-hints")[0];
introDiv.parentNode.removeChild(introDiv);
(You can do the same thing with jQuery if you want to).
When the div is removed from DOM, just initialize hints once again as you do with your addHints method when you want to show hints and it'll work.

Instead of deleting the div block with javascript. You can use .removeHints()
This function is part of intro.js, but is not included in the documentation.

Perhaps a bit hacky, but this works for me...
First, put your hints into their own variable:
hints = [{...}, ...]
then, reset your hints in the intro options
intro.onhintclose(function(stepId) {
if (document.querySelectorAll('.introjs-hidehint').length === hints.length) {
intro.setOptions({hints: hints})
}
})
The hidden hints are given a class of introjs-hidehint, and document.querySelectorAll will return all of them in an array. Once that array is the same size as your hints array, reset your hints in your intro options and that will reset all your hints so you can show them all again.

Here's a more complete example that also allows:
(a) toggling hints on/off by clicking a button (located on a nav bar so used across multiple pages).
(b) once all hints have been clicked, the hints div gets removed so that clicking show hints button will again actually...show hints...
(c) allow you to store hints for multiple pages in a single json object array (re: nav bar).
var jquery = require('jquery');
var introJs = require('intro.js');
* ===========================================================================
* define onclick of hints button
* =========================================================================*/
jquery('#hints_button').on('click', function() {
if (document.getElementsByClassName('introjs-hints').length == 0){
addSomeHints();
}
else {
destroyHints();
};
});
/* ===========================================================================
* Add hints using the IntroJS library
* =========================================================================*/
/* define hints */
var theHints = [
{
element: document.querySelector('#step1'),
hint: "This is a tooltip.",
hintPosition: 'top-middle'
},
{
element: '#step2',
hint: 'More features, more fun.',
hintPosition: 'left'
},
{
element: '#step4',
hint: "<b>Another</b> step.",
hintPosition: 'top-middle'
}
];
/* generate hints with introjs */
function addSomeHints() {
intro = introJs();
intro.setOptions({
hints: theHints
});
intro.onhintclose(function (stepId) {
var remaining_hints = all_hints - document.getElementsByClassName("introjs-hidehint").length;
if (remaining_hints == 0) {
destroyHints();
};
});
/* add hints */
intro.addHints();
/* store number of hints created */
var all_hints = document.getElementsByClassName('introjs-hint').length;
};
/* remove hints div */
function destroyHints() {
var hintsDiv = document.getElementsByClassName("introjs-hints")[0]
hintsDiv.parentNode.removeChild(hintsDiv);
};
... hopefully this saves someone the 20 minutes it took me to piece together the answers and adapt it for what seems like a super common use case.

How can I make multipage intro by using Intro.js programmatic

Hello I just start learning with javascript and I would like to know how to make multipage intro by using intro.js
function beginer() {
var intro = introJs();
intro.setOptions({
steps: [
{
element: '#beginer1',
intro: "This is a <b>bold</b> tooltip."
},
{
element: '#beginer2',
intro: "Ok, <i>wasn't</i> that fun?",
position: 'bottom'
},
]
});
intro.setOptions({
'showStepNumbers': false
});
intro.start();
}

It is as simple as combining the options given in the multipage and programmatic examples in the repo. The multipage example is here
All you got to do is add an onComplete listener on the first page like so:
function beginer() {
var intro = introJs();
intro.setOptions({
showStepNumbers: false,
doneLabel: "Next page",
steps: [
{
element: '#beginer1',
intro: "This is a <b>bold</b> tooltip."
},
{
element: '#beginer2',
intro: "Ok, <i>wasn't</i> that fun?",
position: 'bottom'
},
]
});
intro.start().oncomplete(function() {
window.location.href = 'second.html?multipage=true';
});
}
I have sanitized the setOptions call in your function and combined all the options there. So that you don't have to do setOptions multiple doneLabel param. I guess, it triggers the oncomplete method which is defined after intro.start(). It redirects to the next page which in my case is second.html. Remember to pass the param multipage=true.
second.html is a regular HTML file but you need to start the introJs function to make the whole transition mulitpage. All you do is:
<script type="text/javascript">
if (RegExp('multipage', 'gi').test(window.location.search)) {
introJs().start();
}
</script>
This in essence triggers the introJs().start() function after it finds the word multipage in the url or href in your browser address bar. Remember we called second.html like second.html?multipage=true. This just starts another intro instance on the second page. Now you can define the options here in form of JSON if you want or just use the data-step attributes on DOM as defined in the docs.
Hope it gets you started in the right direction.

javascript function affect a class with many elements without affecting on a spesific class

I'am trying to develop a function to affect a class which has many elements in it. But I don't want that js function to effect on a specific class which is also an element in that previously mentioned class.
The thing is when I run that project as a html document simply on the browser, the code I've got works perfectly fine. But when I convert it to jade and run through node js the console error says a bracket is missing after the argument and it does not work too. I think its supposed to work as it does when I test the code using the html file.The path spesifications and hrefs are all correct. I've tested them.
the js code I've got
$window.on('load', function() {
$('.thumbnails:not('bton')').poptrox({
onPopupClose: function() { $body.removeClass('is-covered'); },
onPopupOpen: function() { $body.addClass('is-covered'); },
baseZIndex: 10001,
useBodyOverflow: false,
usePopupEasyClose: true,
overlayColor: '#000000',
overlayOpacity: 0.75,
popupLoaderText: '',
fadeSpeed: 500,
usePopupDefaultStyling: false,
windowMargin: (skel.breakpoint('small').active ? 5 : 50)
});
});
I tried changing the quotations to double quotations and single quotations in every possible way. Please be kind enough to point my mistake here. Thank you in advance
Edit :
html sample of my page.
<section class="thumbnails">
<div>
<a href="images/thumbs/OG1.jpg">
<img src="images/thumbs/OG1.jpg" alt="" />
<h3>Description</h3>
</a>
<a class="bton" href="#"><b>Click Here &nbsp</b><i class="fa fa-eye"></i></a>
</div>
</section>

bton is a class ive given for some anchor tags
In this case your selector should be
$('.thumbnails:not(.bton)')

Why Dont you use your code like these,
$window.on('load', function() {
$('.thumbnails:not (.bton)').poptrox({
onPopupClose: function() { $body.removeClass('is-covered'); },
onPopupOpen: function() { $body.addClass('is-covered'); },
baseZIndex: 10001,
useBodyOverflow: false,
usePopupEasyClose: true,
overlayColor: '#000000',
overlayOpacity: 0.75,
popupLoaderText: '',
fadeSpeed: 500,
usePopupDefaultStyling: false,
windowMargin: (skel.breakpoint('small').active ? 5 : 50)
});
});

Try this:
$(".thumbnails, .thumbnails *:not(a.bton)").poptrox(...);
You need .thumbnails by itself to select the whole section, and then .thumbnails *:not(a.bton) selects all elements within the section except the anchor with class="bton".

how do i limit the number of tweets to one using jquery

i am trying to display just the most recent tweet on my home page i see a working example however it is not limited to one how do i make this return just one tweet?
example: http://jsfiddle.net/pborreli/pJgyu/
Thanks

If you change your code to -
$(function(){
$('#tweets').tweet({
count: 1,
username: "jquery"
});
});
And your external reference in jsfiddle to -
http://tweet.seaofclouds.com/jquery.tweet.js
Then it should work.
http://jsfiddle.net/zSLWt/1/

You can use another jquery twitter plugin
Steps:
Add a markup
<div id="twitter">
results will be here
</div>
Call plugin method like
<script type="text/javascript">
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "jquery",
numTweets: 5,
loaderText: "Loading tweets...",
slideIn: true,
slideDuration: 750,
showHeading: true,
headingText: "Latest Tweets",
showProfileLink: true,
showTimestamp: true
});
});
</script>

Javascript modal window code reconfigured to load on page load rather than onclick. Help :)

I have a js modal window which opens with an onclick function in a page on my site:
<a class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'groupC0', wrapperClassName: 'wide-border', outlineType : 'rounded-white', dimmingOpacity: 0.8, align : 'center', transitions : ['expand', 'crossfade'], fadeInOut: true });" href="/images/phocagallery/thumbs/phoca_thumb_l_jen raymond_067 copy.jpg" title="jen raymond_067 copy">
<img alt="jen raymond_067 copy" src="/images/phocagallery/thumbs/phoca_thumb_m_jen raymond_067 copy.jpg">
</a>
I need this triggered as the page loads (not onclick, as above). I've been playing around with this js
<script type="text/javascript">
$(document).ready(function() {
window.location.href = "/images/phocagallery/thumbs/phoca_thumb_l_jen raymond_067 copy.jpg";
});
</script>
But of course it only loads the image (href) - can you help include the class, title and onclick attributes to this js function - or is there a better way?
Please show me the light :)

You can try the following (keeping in mind I have no idea what this function does):
$(document).ready(function(){
hs.expand($('.highslide'), {
slideshowGroup: 'groupC0',
wrapperClassName: 'wide-border',
outlineType : 'rounded-white',
dimmingOpacity: 0.8,
align : 'center',
transitions : ['expand', 'crossfade'], fadeInOut: true });
});
Thats the best I can come up with without looking up the hs(highlide?) api.

Try this:
$(function() {
var yourAElement = $('.highslide')[0];
hs.expand(yourAElement, { slideshowGroup: 'groupC0', wrapperClassName: 'wide-border', outlineType : 'rounded-white', dimmingOpacity: 0.8, align : 'center', transitions : ['expand', 'crossfade'], fadeInOut: true });
});

Thanks for the solutions above, maybe I'm just not knowledgable with JS, but I couldn't see my way using either, however I did get what I wanted using this method:
1) Add an ID to the Anchor tag
<a id="autoClick" class="highslide" onClick="return hs.expand(this, { slideshowGroup: 'groupC0', wrapperClassName: 'wide-border', outlineType : 'rounded-white', dimmingOpacity: 0.8, align : 'center', transitions : ['expand', 'crossfade'], fadeInOut: true });" href="/images/phocagallery/thumbs/phoca_thumb_l_jen raymond_067 copy.jpg" title="jen raymond_067 copy">
<img alt="jen raymond_067 copy" src="/images/phocagallery/thumbs/phoca_thumb_m_jen raymond_067 copy.jpg">
</a>
2) Load JQuery if not already present
3) Add this function
$(document).ready(function() {
$('#autoClick').click();
});