Develop Reference

Delayed FancyBox open *WITH* "don't show this again" link

So I'm attempting to combine the working solutions given in two different threads, I found here :
1) Delay pop-up for 10 seconds, only pop up once
2) FancyBox - "Don't show this message again" button?
I want my Fancybox to open after x seconds and then automatically close after xx seconds. I got that working just great!
Then when I want to add the link into my modal box that sets a cookie when the user clicks on that, to not ever show the box again to them for x days, it doesn't seem to set the cookie to do that effectively.
This is what I've got so far :
<script type="text/javascript">
function openFancybox() {
setTimeout( function() {$('#testbox').trigger('click'); }, 15000);
}
function dontshow(){
$.fancybox.close(); // Use this line if I want the button to close fancybox.
$.cookie('visited', 'yes', { expires: 7300 }); // Set the cookie.
}
$(document).ready(function() {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$("#testBox").fancybox({
'hideOnContentClick': false,
'hideOnOverlayClick': true,
'showCloseButton': true,
'overlayShow': true,
'overlayOpacity': 0.3,
}); // ready
setTimeout( function() {$.fancybox.close(); },22000); // additive, so 15secs + 7secs open time = 22 secs
});
</script>
Yes, I have the JQuery cookie script on my server.
I'm suspecting that calling openFancybox() twice might be the problem (I dunno much about Javascript) .. but when I try to stick the :
{
setTimeout( function() {$('#testbox').trigger('click'); }, 15000);
}
after this bit :
else {
openFancybox()
... and I then just get lost with how many { and ; or ) I may / may not need!
(have tested endless combinations! .. a bit like trying to find a black cat in the dark when I don't really know what I'm doing .. just know what I want it to do!)
The inline code for my modal FancyBox box is :
<!-- INLINE FANCYBOX-->
<a id="testbox" href="#target"></a>
<div style="display:none"><div id="target">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<br>
<a id="noShow" href="javascript:dontShow()">Don't show this message again</a>
<br>
</div></div>
My test page URL : http://www.wayofthewomb.com/timed_pop_up_TESTER.html
Thank you for any suggestions / advice / guidance!
So grateful for this amazing resource, here!

You've nearly got it, but there are a couple of problems:
most importantly, you're missing the jquery.cookie dependency! This plugin is superceded by js-cookie. Include it in your page like:
<script src='//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.4/js.cookie.min.js'></script>
You've got some mismatched casing between your html and JS: note testbox vs testBox
Otherwise you're good to go!
Here's a working fiddle: http://jsfiddle.net/memeLab/pr1f1cys/8/
function openFancybox() {
setTimeout(function () {
$('#testbox').trigger('click');
}, 5000);
}
function dontShow() {
$.fancybox.close();
// Set the cookie.
Cookies('visited', 'yes', {
expires: 7300
});
}
$(document).ready(function () {
var visited = Cookies('visited');
if (visited == 'yes') {
console.log('Theres a visited cookie');
return false;
} else {
openFancybox();
}
// create an event listener: when #noShow is clicked, run dontShow
$('#noShow').click(dontShow);
$('#testbox').fancybox({
'hideOnContentClick': false,
'hideOnOverlayClick': true,
'showCloseButton': true,
'overlayShow': true,
'overlayOpacity': 0.3
});
// additive, so 15secs + 7secs open time = 22 secs
setTimeout(function () {
$.fancybox.close();
}, 22000);
});
I suggest creating the most basic, reduced example using jsfiddle or codepen, etc when asking this kind of question: it simplifies the issue, and means that when your test page inevitably disappears, Those Who Come After can still see the code.
There are a couple of other issues in your page that are worth checking out:
looks like you're loading jquery more than once.. could be problematic!
you've nested an html comment <!-- --> inside a <style> tag, which is may be throwing off the syntax highlighting in your editor (doens't make life any easier!).
I suggest using a click handler on DocReady, rather than using the onClick html attribute (see #noShow)
Comment Syntax:
html comments: <!-- commented out -->
Javascript single line comments: // commented out
Javascript multiline / block comments: /* commented \n out */
CSS comments (may be multiline): /* commented out */
hope that helps!

intro.js steps and tooltip position works fine, except when "back" is pressed

I have set up an intro of a web page using the steps and setoptions functionality, and it works fine except when the user presses back.
The two issues I find are:
scrolltoelement works fine going forward, but the tooltip goes partly off screen when going backwards
the element selected in the first step is the entire page, so I use an "onafterchange" callback to reset the tooltip top and right offset. This works fine, except it appears to be ignored (or overwritten) when the back key is pressed
The javascript is:
var introProfile = introJs();
introProfile.setOptions({
tooltipPosition : 'top',
steps: [
{
element: '#intro_step1',
intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...',
position: 'top'
}, {
element: '#intro_step2',
intro: 'Your profile contains important information which is important to complete so that...',
position: 'bottom'
},
{
element: '#intro_step3',
intro: 'Make sure your attribute is included in your profile because the client may express a preference.',
position: 'top'
},
{
element: '#intro_step4',
intro: 'Click here to add a photograph of yourself.',
position: 'top'
},
{
element: '#intro_step5',
intro: 'Your photograph will appear when your profile matches a ...',
position: 'top'
},
{
element: '#intro_step6',
intro: 'Take example.com with you, on your Android or Apple phone by clicking here.',
position: 'top'
}
]
});
introProfile.oncomplete(function() {
;
});
introProfile.onexit(function(){
;
});
introProfile.onchange(function(targetElement) {
; //add change bits here
});
introProfile.onafterchange(function(targetElement) {
console.log(targetElement.id);
switch (targetElement.id){
case "intro_step1":
$('.introjs-tooltip').css({top:'80px',left:'200px'});
}
});
introProfile.onbeforechange(function(targetElement) {
; // add change bits here
});
introProfile.start();
All I am doing in the HTML is setting the element id for intro_step1 to intro_step6
You can see the fiddle here: https://jsfiddle.net/brianlmerritt/3ocyuu65/10/
Any idea why "back" functionality is different from forward?

The problem was you wanted to change the position of the tooltip for the 1st step by using -
$('.introjs-tooltip').css({top:'80px',left:'200px'});
This was added in the "onafterchange" function -
introProfile.onafterchange(function(targetElement) {
console.log(targetElement.id);
switch (targetElement.id){
case "intro_step1":
$('.introjs-tooltip').css({top:'80px',left:'200px'});
}
});
Now this function was as expected called when you initialised the introjs - meaning after the position was changed by the introjs and then was overridden by your positions in the "onafterchange" function
But in case of when you hit back this function was called after the position was changed by introjs. So to fix this i used "setTimeout"
setTimeout(function(){
$('.introjs-tooltip').css({top:'80px',left:'200px'});
},600)
So now your positions are now overridden for the tooltip
Note: Your code would have worked if the poition changes for the tooltip was completed first and then the "onafterchange" function was called.
Fiddle: https://jsfiddle.net/kushal812/3ocyuu65/11/
Let me know if you find a better way!!

Really IntroJS is showing some errors when using the Back button. Here is the solution using Ionic with the Typescript Framework:
export class HomePage {
introApp = introJs.introJs(); //Declared the IntroJS
...
this.intro(); // Call the method
...
intro() { this.introApp.setOptions({...})} //Set the options in IntroJS
//Bug Correction
this.introApp.onafterchange(function(targetElement) {
console.log(targetElement.id);
switch (targetElement.id){
case "b1":
setTimeout(function(){
var element = document.getElementsByClassName('introjs-tooltip');
var boxArrow = document.getElementsByClassName('introjs-arrow top');
var numberLayer = document.getElementsByClassName('introjs-helperNumberLayer');
element.item(0).setAttribute("style", "top:210px;");
boxArrow.item(0).setAttribute("style", "display: block");
numberLayer.item(0).setAttribute("style", "left: 0; top:0;");
},600)
}
});

JQuery Tooltip effects not working

I'm using jquery-1.7.2.min.js and jquery-ui.min.js and wanted to implement a Tooltip. It worked right out of the box, but later I planned to customize some of the default effects and they don't seem to work.
Here's the code:
$(function () {
var temp = $("#tooltipname").attr('title');
$("#tooltipname").tooltip({
content: temp,
position: "top",
opacity: 0.1,
effect: 'fade',
predelay: 3000,
fadeInSpeed: 3000,
});
})
the strange thing is that the content attribute works fine and as you can see I assign it a value of temp variable. The value of temp is read from the title value of HTML span tag. Nevertheless the other attributes don't work at all.
I've played a bit with my code after getting help from you guys and decided to share the code I made in jsFiddle. I show how to implement not only one tooltip but all tooltips designated by #tooltipname on the whole page. Moreover the code shows how to break lines (multiline tooltip), which was not trivial to achieve.
Here's the HTML code:
<br />
<br />
<br />
<span title="my tooltip1 <br> new line" id="tooltipname">Hover me</span>
<span title="my tooltip2 <br> new line" id="tooltipname">Hover me2</span>
Here's the jQuery code:
$(document).ready(function () {
var temp = $("#tooltipname").attr('title');
$(this).tooltip({
content: function () {
return $(this).attr("title");
},
position: {
at: "center bottom",
my: "center top"
},
opacity: 0.1,
show: {
effect: 'fadeIn',
duration: 500,
delay: 500
},
});
});
Hope it's helpfull for other newcomers to JQuery.
For those of you who'd like to play with this code -> jsFiddle Code

It is working as expected. Your p is taking the 100% width of the page, and the tooltip is positioning on the top and center of that. You need to set your '#tooltipname' as 'inline-block' or something like that.
And according to the documentation you need to set the my and at values.
Fiddle

bootstrap popover 3.0 with tables

When I use bootstrap 3.0 popover with placement: auto right inside tables it doesn't work, and it flows away from the table size.
placement: auto right (means popover should flow to the right if it has a place otherwise flow to the left)
Check this link:
http://jsfiddle.net/DTcHh/65
However, when I place it outside a table it works as it's supposed to be!
$('button.hey').popover({
placement: 'auto left',
html: true,
//selector: '[rel="popover"]',
content: function () {
return "Hi man";
}
})
Any idea?

In your case I suggest you to write your own callback for placement rather using 'auto'.
If you want 'right' for your all buttons except last td. Here is how placement can be written
$('button.hey').popover({
placement: function(context,source){
//check if current td is last one
var td = $(source).closest('td');
console.log(td);
if(td.next().length == 0) {
return 'left';
}
return 'right';
},
html: true,
//selector: '[rel="popover"]',
content: function () {
return "Hi man";
}
})
If you want to handle based on position, you can handle that in placement callback.
check this fiddle http://jsfiddle.net/codejack/DTcHh/66/

.load() doesn't like my slider

I have a page with a slider showing posts from a category. When the user clicks "next category", the content goes left and the new content is loaded along with it's slider.
This .load() is making a request to the same page, with different parameters (don't really know if this is relevant to the question).
Problem is, the loaded slider doesn't work. You can see it here, click on the top right arrow and you'll see my problem.
This is the script I'm using:
function carousels(){
if ($("#projectos-carousel").length) {
$("#projectos-carousel").carouFredSel({
items: { visible: 5 },
circular: false,
infinite: false,
auto: false,
prev: { button : "#prev-proj" },
next: { button : "#next-proj" },
pagination : "#pager-proj",
});
}
}
...
$('.right-trigger').click(function () {
var toLoad = $(this).attr('href')+' #container';
$('#container').attr('id','to-go');
$('#to-go').css({'position': 'absolute'});
$('#wrapper').append('<div id="newcontainer"/>');
$('#newcontainer').load(toLoad, function () {
$('#newcontainer').append($('#container').children()).css({'position': 'absolute', 'left': '942px'});
$('#to-go, #newcontainer').animate({left:'-=937'},600, function () {
$('#to-go').remove();
});
$('#container').remove();
$('#newcontainer').attr('id','container');
searchform();
triggers();
carousels();
});
return false;
});
searchform() and triggers() functions work but not carousels(). I've already tried using setTimeout(); with carousels() in the last part of the code but it only works on this example, not where I really want to.
Thank you for your time!

It appears to work for me. One problem that I see in your code that will manifest itself as a bug in Internet Explorer is that you have a trailing comma on this line:
pagination : "#pager-proj",
Removing the comma may fix everything for you. Additionally, I would suggest wrapping all of your object properties in single or double quotes. For example, the previous line would become:
"pagination": "#pager-proj"