We Keep Coding

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

Bootstrap Pagination Content

I am trying to use the bootstrap pagination plugin but I am a little lost as to how I can display content using this feature. The code will display "page" followed by the page number. Can anyone tell me how to add text in paragraphs? Please see the code below:
<p id="content"></p>
<p id="pagination-here"></p>
<script>
$('#pagination-here').bootpag({
total: 7, // total pages
page: 1, // default page
maxVisible: 5, // visible pagination
leaps: true // next/prev leaps through maxVisible
}).on("page", function(event, num) {
$("#content").html("Page " + num); // or some ajax content loading...
// ... after content load -> change total to 10
$(this).bootpag({
total: 10,
maxVisible: 10
});
});
</script>

Hi Please try this....
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pagination&stacked=h
http://getbootstrap.com/components/#pagination-default
Thanks

I used Interactive Picture jQuery and how do I link the box?

jQuery(document).ready(function(){
$( "#iPicture6" ).iPicture({
animation: true,
animationBg: "bgblack",
animationType: "ltr-slide",
pictures: ["picture1","picture2","picture3","picture4","picture5"],
button: "moreblack",
moreInfos: {"picture1":[{"id":"tooltip1","descr":"Looking at Stars", "top":"200px","left":"103px"},{"id":"tooltip2","descr":"sofa: 199$","top":"346px","left":"483px"},{"id":"tooltip3","descr":"silver candle: 2.99$","top":"461px","left":"556px"}],
I have this code when I put in the javascript for INteractive picture jquery, I was wondering how can I go on about hyperlinking each button/box?
Thanks in advance

You could do something like this:
moreInfos: {
"picture1": [
{
"id":"tooltip1",
"descr":"<a href='http://www.google.com'>furniture: 299$</a>",
"top":"185px",
"left":"393px"
}
// And So on....
You'll see that you'll have a hyperlink in the description of your button/box.

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();
});