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!
Related
I'm very new to JQuery/Ajax and I haven't done any HTML for a long time, so please do forgive me if this is a dumb question. I've done a fair amount of reading, and I'm at a loss.
In a nutshell, on completion of a FlipClock.js countdown timer, the clock should slide off the page to the right, which works. However, on starting the timer, I'd like the div to slide onto the page from the right, but I cannot get the div to move. Here's my code:
function showTimer() {
$(".clock").show("slide", {direction: "left"}, 2000); //Does nothing, seemingly
timerRunning= true;
var clock = $('.clock').FlipClock(3, {
countdown: true,
clockFace: 'MinuteCounter',
callbacks: {
stop: function() {
timerStopped();
}
}
});
}
function timerStopped() {
console.log("Test function on clock stop!");
$('.clock').hide('slide',{direction:'right'},1000);
}
I've not set up any CSS for the clock div, so I'm not sure if I need to position it off screen to begin with, but hide works, so I'm a little confused.
Any input or advice would be greatly appreciated.
Thanks
After a long time of debugging, I have found a solution. Please try it out in jsfiddle here: https://jsfiddle.net/mLkfyrd8/1/
Things that may have gone wrong:
Forgot to wrap in $(document).ready()
Forgot to include jQuery/jQuery UI library
Forgot to call $(".clock").hide()
UPDATE: There seems to be an issue with the clock moving up/down. See this new fiddle for the fixed version (added padding.)
Demo:
$(document).ready(function() {
$(".container").hide();
function showTimer() {
$('.clock').FlipClock(3, {
countdown: true,
clockFace: 'MinuteCounter',
callbacks: {
stop: function() {
timerStopped();
}
}
});
$(".container").show("slide", {direction: "left"}, 2000);
}
function timerStopped() {
console.log("Test function on clock stop!");
$('.container').hide('slide',{direction:'right'},1000);
}
showTimer();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/objectivehtml/FlipClock/master/compiled/flipclock.css">
<script src="https://cdn.rawgit.com/objectivehtml/FlipClock/master/compiled/flipclock.min.js"></script>
<div class="container" style="padding: 20px;"><div class="clock"></div></div>
You should set dimensions and position to your clock div. Look it up with e.g. firebug (hit F12) and search your clock div. There you should see where the div is and it might be outside of your viewport. And do you get the console log output?
In a web page I'm writing a user plays a game, once they win, text is supposed to flash. Once the user hits restart the text flashes. I would like to know how I can use Jquery(I have to use jquery as a requirement) to do this?
Thank you for your help!
Below is a snippet that I believe exhibits the requirements you're looking for.
This depends on setInterval and clearInterval to handle a a repeating callback that toggles a CSS class. You can use further css animations / transitions to spruce up the effect more.
(function() {
var flasherInterval = 0,
$flasher = $('#flasher');
$('#win').on('click', function() {
if (!flasherInterval) {
flasherInterval = setInterval(function() {
$flasher.toggleClass('hidden');
}, 250);
}
});
$('#restart').on('click', function() {
console.log(flasherInterval);
clearInterval(flasherInterval);
if (!$flasher.hasClass('hidden')) {
$flasher.toggleClass('hidden');
}
flasherInterval = 0;
});
}());
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="win">Win</button>
<button id="restart">Restart</button>
<p id="flasher" class="hidden">Flashing text!</p>
$(function(){
// loop showing and hiding for 1.5 seconds
while(blink){
setTimeout(function(){ $('#myDiv').hide() , 1500);
setTimeout(function(){ $('#myDiv').show() , 1500);
}
});
don't actually use this code - it's pretty bad , and meant to get you started ... just an idea - this shows for to set a delay , how to show and hide
You could also use the blink plugin. http://antiyes.com/2009/08/24/jquery-blink-plugin/
I'm trying to write a step that clicks a more button until that button changes to display: none;.
CLARIFICATION: The page I'm working with is a Google+ business page. There is a more button that loads about 10 reviews at a time until they are all loaded. Once they are, Google sets the button to display: none;
I've played around with a ton of different ways to accomplish it. Right now I'm working with something like:
This one is not working, and I'm sure there is an elegant way to accomplish this.
casper.then(function() {
while (this.visible('.d-s.L5.r0')){
console.log("Click");
this.click('.d-s.L5.r0');
}
});
This new code is working, but I have to set how many times it repeats which is pretty hacky:
casper.repeat(15, function() {
console.log("Click");
this.click('.d-s.L5.r0');
this.wait(400);
});
You need proper status handling of the button. By clicking the more button it will be invisible, but another loading span will be visible until the next items are loaded. Then it is exchanged again. You need to reflect the change in your code.
if (this.visible(moreButton)) { // synchronous
// asynchronous steps...
this.thenClick(moreButton);
this.waitUntilVisible(loadingButton);
this.waitUntilVisible(moreButton);
this.then(function(){
this.capture("business.png"); // overwrite the current screenshot
// recursion here
});
}
Additionally, it is good practice to write the thing recursive, because you don't know the number of steps until you try the steps. So the complete code would be:
var casper = require('casper').create({
waitTimeout: 10000,
viewportSize: {
width: 900,
height: 720
}
});
var moreButton = '[id*="about-page"] span.d-s.L5.r0',
loadingButton = moreButton + ' + span.dP.PA';
function clickMore(max, i){
i = i || 0;
if ((max == null || i < max) && this.visible(moreButton)) { // synchronous
// asynchronous steps...
this.thenClick(moreButton); // sometimes the click is not properly dispatched
this.waitUntilVisible(loadingButton);
this.waitUntilVisible(moreButton, null, function onTimeout(){
// only placeholder so that the script doesn't "die" here if the end is reached
});
this.then(function(){
this.capture("business_"+i+".png");
clickMore.call(this, max, i+1); // recursion
});
}
}
casper.start("https://plus.google.com/101200069268247335090/about?hl=en").then(function(){
clickMore.call(casper);
}).then(function(){
this.capture("business_end.png");
}).run(function(){
this.echo("DONE");
this.exit();
});
You can also call clickMore with an argument setting the maximum number of clicks like this:
clickMore.call(casper, 10);
A problem remains. The click on the more button is sometimes not dispatched. You should explore other approaches clicking that button.
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"
Im using http://sorgalla.com/projects/jcarousel/ as a slider....
It shows one image at a time, and a total of four images... When displaying the first image, i dont want the prev arrow to be visible, and the same if im at number 4 image, i dont want the next arrow to be visible...
How do i do this?
I initialize the script like this:
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
You can use CSS to hide the arrows. Adding the disabled classes is handled by the plugin itself.
.jcarousel-prev-disabled, .jcarousel-next-disabled
{
visibility:hidden;
}
Demo: http://jsfiddle.net/ubanC/88/
You can cheat by using two below options:
Using CSS,you should override to set some below classes:
<style>
jcarousel-prev-disabled,
jcarousel-next-disabled,
jcarousel-prev-disabled-horizontal,
jcarousel-next-disabled-horizontal{
background-position:0 0;
}
</style>
Using Javascript, this solution is same as the first. We should remove the classes: disable for next and previous buttons:
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
itemFirstOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled");
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled-horizontal");
}
},
itemLastOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-next").removeClass("jcarousel-next-disabled");
$(".jcarousel-next").removeClass("jcarousel-next-disabled-horizontal");
}
}
});
});
</script>
P/S: I just try to read it's document and use Firebug(~Edit on the fly) to detect. If you could, you can try. It's fun.