I am using the below code to show data on my web page with some animate effect
.done(function (response) {
$(".loadig-overlay").hide();
$('#Container').toggle('slide', {
direction: 'left'
}, 250, function () {
$("#Container").html(response);
$('#Container').toggle('slide', {
direction: 'right'
}, 250);
});
})
The #container html gets replaced by that received in the response but the animate effect is not applied
$('#Container').toggle('slide', {
direction: 'left'
}, 500, function () {
$("#Container").html('abc');
$('#Container').toggle('slide', {
direction: 'right'
}, 500);
});
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<div id="Container">
</div>
It appears that everything is okay with your script. Only thing which comes to my mind is that element containing 'Container' is too small so you don't see the effect. Or maybe you've been playing with z-index of neighbouring elements?
Related
I'm using the javascript library tooltipster and I don't know why the text is wrapping in the tooltip box.
HTML:
<div id="spanBackground" style="background: rgba(238, 0, 140, 120);"
class="tooltipjs" title="Touch to interact">
Javascript:
function AnimateUpDown(toolTipElement) {
$(toolTipElement).animate({ top: '+=20' }, 1000);
$(toolTipElement).animate({ top: '-=20' }, 1000, AnimateUpDown);
}
$(document).ready(function () {
$('.tooltipjs')
.tooltipster(
{
animation: 'grow',
arrow: false,
//Custom trigger effectively disables the default onhover trigger
trigger: 'custom',
functionReady: function (instance, helper) {
AnimateUpDown(helper.tooltip);
}
});
toolTipOpenAndClose();
});
There is an open issue about that, that's the first place to check. Should be fixed in a few days. https://github.com/iamceege/tooltipster/issues/600
I'm using fullpage.js to create my website, and I'm trying to incorporate wow.js and animate.css to create some cool animations. Everything is working fine on desktop, but when I resize the browser to mobile-size, I cannot scroll at all. The animations at the top of my page load, but I cannot scroll at all until I resize to a bigger viewport.
I've tried the 'scrollOverflow: true' on fullpage, but it's not working.
This is what my app.js looks like:
$(document).ready(function() {
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: false,
live: true // default
}
)
wow.init();
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'left',
navigationTooltips: ['Home', 'About Me', 'Skills', 'Portfolio', 'Contact', 'Hire Me'],
resize: false,
scrollBar: true,
scrollOverflow: false,
//RESPONSIVE
responsiveWidth: 800,
afterResize: function () {
if ($(window).width() < 800) {
//$.fn.fullpage.setAutoScrolling(false);
var verticalNav = document.getElementById("fp-nav");
$(verticalNav).hide();
}
}
});
});
I've tried the 'scrollOverflow: true' on fullpage, but it's not working.
And... why are you using it? The purpose of it has nothing to do with your problem... so you should turn it off...
I figured out the problem....
I had overflow: hidden !important on both my html and body in my CSS. Took them off and they both work now.
Thanks for the help Alvaro!
THEY WORK
I am using FullPage.js, scrollOverflow and WOW Animations altogether and they work perfectly fine.
HERE ARE MY SETTINGS
In the HEAD ELEMENT I have these Links
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
And at the bottom before the ending BODY tag I have all these scripts.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/vendors/scrolloverflow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.js"></script>
<script>
/*** Call function after page has loaded ***/
$(document).ready(function() {
/*** Call FullPage.js option ***/
pageScroll();
new WOW().init();
$(window).resize(function() {
pageScroll();
});
});
/*** FullPage.js Function ***/
function pageScroll(){
$('#fullpage').fullpage({
sectionsColor: ['#06C', '#C06', '#930', '#06C'],
anchors: ['aa', 'bb', 'cc', 'dd'],
menu: '.menu',
navigation: true,
scrollOverflow: true,
scrollBar:true,
fixedElements: '.header',
paddingTop: '3em',
slidesNavigation: true,
paddingBottom: '1em'
});
}
</script>
Here is a live working site.
https://cleansites.us/
The Page executes javascript notification (Noty Plugin) again and again (almost every second). (Platform is : Wordpress)
It happens only on post pages post page example except homepage Homepage link and other pages.
The Original Code Of Javascript notification added in header is
<link rel="stylesheet" type="text/css" href="http://cdn.frkmusic.info/static/buttons.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.frkmusic.info/static/animate.css"/>
<script src="http://cdn.frkmusic.info/static/jquery-1.7.2.min.js"></script>
<!-- noty -->
<script type="text/javascript" src="http://cdn.frkmusic.info/static/js/noty/packaged/jquery.noty.packaged.min.js"></script>
<script type="text/javascript" src="http://cdn.frkmusic.info/static/notification_html.js"></script>
<script type="text/javascript">
function generate(type, text) {
var n = noty({
text : text,
type : type,
dismissQueue: true,
layout : 'topRight',
closeWith : ['click'],
theme : 'relax',
maxVisible : 10,
animation : {
open : 'animated bounceInLeft',
close : 'animated bounceOutRight',
easing: 'swing',
speed : 500
}
});
console.log('html: ' + n.options.id);
}
function generateAll() {
generate('alert', notification_html[0]);
}
$(document).ready(function () {
setTimeout(function() {
generateAll();
}, 500);
});
</script>
Try clearing the timeout... not tested though :-/
var timeout = null;
function generate(type, text) {
var n = noty({
text : text,
type : type,
dismissQueue: true,
layout : 'topRight',
closeWith : ['click'],
theme : 'relax',
maxVisible : 10,
animation : {
open : 'animated bounceInLeft',
close : 'animated bounceOutRight',
easing: 'swing',
speed : 500
}
});
clearTimeout(timeout);
console.log('html: ' + n.options.id);
}
function generateAll() {
generate('alert', notification_html[0]);
}
$(document).ready(function () {
timeout = setTimeout(function() {
generateAll();
}, 500);
});
Recently I came across vegas.js plugin
not sure how to use it... Read the documentation but did not get a clear idea. http://vegas.jaysalvat.com/documentation/setup/
Did the steps accordingly but no images are showing.
<script>
$.vegas('slideshow', {
backgrounds:[
{ src:'img/F1.jpg', fade:1000 },
{ src:'img/f2.jpeg', fade:1000 },
]
})('overlay', {
src:'/vegas/overlays/11.png'
});
</script>
Could you try using firebug/inspector, click on console, and paste in what is going on. There will be errors in there. Also could you post how you're including the file? Post with your html if possible.
As you can se in the settings section the overlay property goes inside of the vegas function.
$(document).ready(function() {
var imagecollection = [{
src: 'https://i.stack.imgur.com/oURrw.png'
},
{
src: 'http://i.imgur.com/SZPjHwz.jpg'
},
{
src: 'http://www.boyter.org/wp-content/uploads/2016/08/ChJzv9lUYAA9D5E.jpg'
},
{
src: 'https://pbs.twimg.com/media/Cg0x8vnXEAEB2Le.jpg'
}
/* Slideshow not working? Check your image links. */
];
$("#ShowSlideShowHere").vegas({
slides: imagecollection,
transition: 'fade',
preloadImage: true,
timer: true,
shuffle: true,
delay: 5000,
animation: 'kenburns',
cover: true,
overlay: 'https://media.istockphoto.com/vectors/isolated-christmas-falling-snow-overlay-on-transparent-background-vector-id628152000'
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.js"></script>
</head>
<body>
<div style="height:100vh">
<div id="ShowSlideShowHere" style="height:100vh">sadasdasdas</div>
</div>
So I used a tutorial from codrops to create a carousel. I am not super savvy with JS or using anything JS related without reference code, so I merely adopted and modified the existing code from the tutorial. The issue that I am having is relating to the loopback. While using the carousel cycling through, the content works fine, but when you open one of the items and cycle through, it causes the carousel to get out of order.
Huge problem because items start disappearing when you press left-right. Anyone able to help on this one?
Below is the code I'm using on the site page.
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/jquery.carouFredSel-packed.js'></script>
<script type="text/javascript">
jQuery(function () {
jQuery('#leaderthumbs').carouFredSel({
synchronise: ['#leaderdetails', false, true],
auto: false,
width: '100%',
items: {
visible: 3,
start: 0
},
scroll: {
onBefore: function (data) {
data.items.old.eq(1).removeClass('selected');
data.items.visible.eq(1).addClass('selected');
}
},
prev: '#prev',
next: '#next'
});
jQuery('#leaderdetails').carouFredSel({
auto: false,
items: 1,
scroll: {
fx: 'fade'
}
});
jQuery('#leaderthumbs div').click(function () {
$('#leaderthumbs').trigger('slideTo', [this, -1]);
});
jQuery('#leaderthumbs div:eq(1)').addClass('selected');
});
</script>