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"
Related
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!
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)
}
});
I am using raty to perform the rating functionality and I am showing it inside a popover.
The problem is that the first time I click on the link, it correctly create the stars but, when I click for the second time, the stars are replicated, so it popups 10 stars instead of 5.
$('#member1').popover({
html: true,
placement: 'bottom',
content: function() {
return $($(this).data('contentwrapper')).html();
}
}).click(function() {
$('.star').each(function(el) {
$(this).raty({
starOff : 'http://wbotelhos.com/raty/lib/images/star-off.png',
starOn : 'http://wbotelhos.com/raty/lib/images/star-on.png',
start: $(this).attr('data-rating')
});
});
});
I replicate the error in this fiddle.
Can anyone let me know how to fix this, and, therefore, only show 5 stars?
Thanks!!!!
I am not overly familiar with raty, but it seems like you need to destroy the existing before running the code a second, or third time.
$(this).raty('destroy');
something like that, check the raty doc for the exact implimentation
please review this code
$('#member1').popover({
html: true,
placement: 'bottom',
content: function() {
return $($(this).data('contentwrapper')).html();
}
}).click(function() {
$('.star').each(function(el) {
$(this).raty('destroy');
$(this).raty({
starOff : 'http://wbotelhos.com/raty/lib/images/star-off.png',
starOn : 'http://wbotelhos.com/raty/lib/images/star-on.png',
start: $(this).attr('data-rating')
});
});
});
Demo :http://jsfiddle.net/x9WhH/3/
I'm using carouFredSel to create multiple carousels on the same page. If you look at this JSFiddle you will see that there are two carousels, but only one is able to be scrolled with the next / prev buttons.
Without adding a class or ID, I am trying to tell the buttons to only scroll the corresponding carousel. I believe this be accomplished with a function, but I'm not entirely sure how. Something like this:
prev: {
button: function() {
$(this).next('.prev');
}
},
Give this a look, it's right in the documentation:
prev: {
button: function() {
return $(this).parent().siblings(".prev");
}
},
next: {
button: function() {
return $(this).parent().siblings(".next");
}
}
Working JSFiddle demo
oh and notice, I took out the key, because then you would have to have the carousels synchronized... and you can have one or the other, not both. (unless you conditionally assigned keys, but there goes your small code)
--
http://caroufredsel.frebsite.nl/code-examples/configuration.php
search: "Get the HTML-elements for the buttons and the container dynamically"
I think thats better set an ID.
$("#list1").carouFredSel({
direction: "up",
auto : false,
items: 3,
prev : "#prev1",
next : "#next1"
});
$("#list2").carouFredSel({
direction: "up",
auto : false,
items: 3,
prev : "#prev2",
next : "#next2"
});
See a working demo.
may be this one is usefull for you.in my page its workin good.
prev: {
button : ".prev"
},
next: {
button : ".next"
},
Bit of a newb but just having a small problem using jquery cycle all plugin. I am trying to create an image gallery, with two buttons next and previous which work fine, and with a counter like (1/10) etc. I've got it to work but for some reason the slideshow never counts the first image so therefore is always one image behind.
Somebody pointed out to me it is probably that the array starts at 0 and something else at 1, but I'm not sure where to find this really so just wondered if somebody could help me. Here is the code in the head of my document.
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
prev:'#prev',
after: onAfter
});
});
function onAfter(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
in use with cycle all plugin.
thanks for any help!
so I've changed to this as instructed.
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
pager: '#caption1',
prev:'#prev',
after: onAfter1
});
});
currentSlide = $("#caption1 a.activeSlide").html()
function onAfter1(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
which works fine after the first slide but the first slide randomly says this:
Prev Next (1/111234567891011)
Then when I press next it dissapears, probably my fault but is it something to do with the pre-existing function I have?
if I change to this:
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'none',
speed:'fast',
timeout: 0,
next:'#next',
pager: '#caption1',
prev:'#prev',
});
currentSlide = $("#caption1 a.activeSlide").html()
});
</script>
It just says 12345678910 instead of 1 of etc.
Edit:
I have changed code as instructed, see here, http://www.amythornley.co.uk/tests/codeplay.html and:
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'fade',
speed:1,
timeout: 0,
pager: '.thepager',
next:'#next',
prev:'#prev',
after: onAfter1
});
});
function onAfter1(curr, next, opts) {
currentSlide = $(".thePager a.activeSlide").html();
if (!currentSlide) currentSlide = "1";
$('.slideCaption').html(currentSlide + '/' + opts.slideCount);
}
</script>
but it still doesn't work even though it works perfectly in your example, getting so annoyed at it! grrr. stupid thing :(
and i know about broken images i havnt uploaded them yet, just a test to see the next/prev problem.
EDIT!
I used my original code simply changing the problem with the 'none' and speed and it appeaars to work fine, maybe this was the problem all along, thanks so much for pointing it out and for all your help even if some of it turned out to be pointless haha
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx:'fade',
speed:1,
timeout: 0,
next:'#next',
prev:'#prev',
after: onAfter1
});
});
function onAfter1(curr,next,opts) {
var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
$('#caption1').html(caption1);
}
</script>
you could "fiddle" with its native navigation and get the current picture number, for example:
$('.selector').cycle({
fx: 'scrollLeft',
pager: '.selctorOfPagination',
timeout: 15000,
pause: 1,
next: '.selectorOfNext',
prev: '. selectorOfPrevious'
});
check the pager example here: http://jquery.malsup.com/cycle/int2.html
EDIT: check my example here:
http://jsfiddle.net/jackJoe/7DRSv/
You can check which is the current image by obtaining the html of the pager:
currentSlide = $(".thePager a.activeSlide").html()
And then you can use that variable which is correct and you don't need to "guess" which image is current.
EDIT 2:
Check my new example:
http://jsfiddle.net/jackJoe/7DRSv/2/
P.S. the first time the slide animates, the caption doesn't get the active one, so we need to set that variable, check my example.
EDIT 3:
New example with a stopped animation, triggered by the next and previous buttons:
http://jsfiddle.net/jackJoe/7DRSv/3/
One thing I found out is that at your site (BTW the images are broken), when not using anykind of animation (fx: "none") the first active slide is one number behind! which takes us back to your original problem!
You need to use somekind of animation (you can specify the speed in miliseconds);
for an alternative to the "none", use the fx = 'fade' and speed: 1...