I've used the rcarousel plugin a couple of times without encountering any problem.
While implementing it on a new website, rcarousel suddenly duplicates the first slide (I'm showing 3).
This is happening on both slides on the bottom of this page:
http://www.expertmarketermagazine.com/en/home
When you navigate the slider you can see that the "duplicate" reverts to the correct slide just before the whole thing slides away.
Has anyone encountered something similar before?
change your rcarousel selectors to:
<script>
$(function() {
$("#carousel-authors .wrapper").rcarousel({
visible: 3,
step: 3,
width: 127,
height: 200,
navigation: {
prev: "#ui-carousel-next-authors",
next: "#ui-carousel-prev-authors"
}
});
$("#carousel-books .wrapper").rcarousel({
visible: 3,
step: 3,
width: 127,
height: 200,
navigation: {
prev: "#ui-carousel-next-books",
next: "#ui-carousel-prev-books"
}
});
});
</script>
Related
I've started trying to make a game with kaboom.js and have come across a problem where the animation for an arrow which flashes isn't playing, it just freeze frames at the first frame. Does anybody know what I'm doing wrong?
The Code
const k = kaboom({
width: 320,
height: 240,
scale: 2,
});
k.loadSprite("selArrow", "sprites/selArrow.png", {
sliceX: 2,
sliceY: 2,
anims: {
main: {
from: 0,
to: 3,
speed: 2,
loop: true}
}});
const selArrow = k.add([
k.sprite("selArrow", {anim: "main"}),
k.pos(50),
k.scale(1.5),
k.origin("center"),
]);
The Spritesheet
I am building a website that has some parallax on the site. Below is what the console says is in the javascript file. I keep getting cannot read data destroy property, because the program has nothing to delete. The picture at the bottom is what I wrote vs what showed up? This is bootstrap studio and I was wondering if anyone has had this problem before?
window.addEventListener("resize", colReset);
let col = document.querySelectorAll(".col-xxl-6");
function colReset() {
window.matchMedia("(min-width: 992px)").matches ? VanillaTilt.init(col, {
max: 15,
speed: 400,
perspective: 750,
scale: 1.005
}) : col.vanillaTilt.destroy()
}
VanillaTilt.init(col, {
max: 15,
speed: 400,
perspective: 750,
scale: 1.005
});
We are using owl slider in tabbing but its not working when moving to another tab and again come back to the tab of the slider.
Slider all items hide when coming back to slider tab.
We have tried below code but its not working.
var owl = $('.frame_wrapper .options-list');
owl.owlCarousel({
margin: 10,
nav: true,
loop: false,
responsive: {
0: {
items: 2
},
300: {
items: 3
},
600: {
items: 5
},
1000: {
items: 6
}
}
});
owl.trigger('refresh.owl.carousel');
Any help will be appreciated.
Thank you.
Just in case if somebody is looking for the help. Owl2 doesn't have re-init options. You can use workaround - trigger "destroy.owl.carousel" event and then initialize it again:
function reinit() {
var el = $('.frame_wrapper .options-list');
el.trigger('destroy.owl.carousel');
el.owlCarousel({...});
}
With the rise of CSS3, I'd like to control the animation used by the mootools accordion class via css transitions, and I figure the best way to do that is to assign an active class to both the toggler and element parts of the accordion.
I've been able to do that for the toggler element, but after many attempts, I can't figure out how to give the element an active class.
The mootools code I've got so far is:
var myAccordion = new Fx.Accordion($$('.toggler'), $$('.services-element'), {
display: 1,
fps: 24,
duration: 400,
onActive: function(toggler) { toggler.addClass('active-accordion'); },
onBackground: function(toggler) { toggler.removeClass('active-accordion'); },
show: 0,
height: false,
width: false,
opacity: 0.3,
fixedHeight: 320,
fixedWidth: null,
alwaysHide: true,
initialDisplayFx: false
});
If anyone can help with this, I'd be most appreciative.
Thanks to the info provided by Johan, I've amended the onActive and onBackground rules as follows:
onActive: function(toggler, element) { toggler.addClass('active-accordion'), element.addClass('active-accordion') ; },
onBackground: function(toggler, element) { toggler.removeClass('active-accordion'), element.removeClass('active-accordion'); },
This gives me what I need.
I'm running this script on a page which shows a box with more information when you roll over it.
site for review
The script works fine, except theres a flicker of the box before it actually scales.
What is causing this? I use the same thing in the main navigation with the same flicking.
Any ideas whats causing this?
//work page springing box
$$('.box').each(function(s) {
var more = $(s).down(2);
$(s).observe('mouseenter', function(e) {
$(more).show();
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
});
});
$(s).observe('mouseleave', function(e) {
new Effect.Fade(more, {
duration: 0.2
})
});
});
Thanks.
Rich
I should note, I am testing in Safari 4.0.4
#Allen is correct. When you call $(more).show(); The entire box is shown. Then, when you call new Effect.Scale(more the box is scalled down and slide in. So $(more).show(); is what's causing the flickering. You could try:
$(more).show.bind(more).delay(0.01);
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
})
The site looks fine to me. I did notice a very little something, but it could be my imagination.
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
});
$(more).show();
You may want to try this though, it seems to show it, then update it, as the code says. Update it first, then show it.
Firefox, fully updated btw.