I'd like to do an animation for my paragraph which's content is being replaced after clicking on a button. So button #start_animation should start the textillate in animation and button #out_animation should cause out animation. And then I click on the third button #replaced_word which replaces the content of my paragraph.
Important: I always click in the same row:
#start_animation
#out_animation
#replaced_word
So the word should come in by an animation (fadeIn) then go out by another animation (fadeOut) then be replaced and then I click again on the first button #start_animation and it goes over and over again. The problem is that it works only for the first time. I mean till I click #start_animation for the second time. I wrote this question before with code but it was way too long so I did it in form of snippet. Any ideas?
$('#start_animation').click(function() {
$('#sample_text').textillate('in');
$('#paragraph').textillate('start');
$('#paragraph').addClass('show');
});
/*-----------------------------------------------*/
$("#out_animation").click(function() {
$('#sample_text').textillate('out');
$('#paragraph').textillate('out');
setTimeout(function() {
$('#paragraph').removeClass('show');
}, 1000);
});
var words = ["peter", "michael", "john", "derek", "chris"];
function replacing() {
document.getElementById('paragraph').innerHTML = getRandomItem(words);
}
var btn2 = document.getElementById("replaced_word");
btn2.addEventListener("click", replacing);
function getRandomItem(array) {
return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}
/*-----------------------------------------------*/
$(function() {
$('#paragraph').textillate({
loop: false,
autoStart: false,
in: {
effect: 'fadeIn',
shuffle: false,
delay: 80
},
out: {
effect: 'fadeOut',
shuffle: false,
delay: 40,
reverse: true
}
});
})
.show {
opacity: 1!important;
}
#paragraph {
opacity: 0;
}
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.rawgit.com/jschr/textillate/3ca7326c/jquery.textillate.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/Lettering.js/d06bb733/jquery.lettering.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<button id="start_animation">start animation</button>
<button id="out_animation">out animation</button>
<button id="replaced_word">replace word</button>
<p id="paragraph">TEST</p>
The thing is, you need to "reset" the plugin for each time you replace the text in the paragraph. Well, you need also to replace the element DOM itself otherwise the plugin will do nothing because it has already a attached DOM element.
$('#start_animation').click(function() {
$('#sample_text').textillate('in');
$('#paragraph').textillate('start');
$('#paragraph').addClass('show');
});
/*-----------------------------------------------*/
$("#out_animation").click(function() {
$('#sample_text').textillate('out');
$('#paragraph').textillate('out');
setTimeout(function() {
$('#paragraph').removeClass('show');
}, 1000);
});
var words = ["peter", "michael", "john", "derek", "chris"];
function replacing() {
$('#paragraph').replaceWith('<p id="paragraph">' + getRandomItem(words) + '</p>');
init();
}
var btn2 = document.getElementById("replaced_word");
btn2.addEventListener("click", replacing);
function getRandomItem(array) {
return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}
function init() {
console.log('init');
$('#paragraph').textillate({
loop: false,
autoStart: false,
in: {
effect: 'fadeIn',
shuffle: false,
delay: 80
},
out: {
effect: 'fadeOut',
shuffle: false,
delay: 40,
reverse: true
}
});
}
/*-----------------------------------------------*/
$(function() {
init();
});
.show {
opacity: 1!important;
}
#paragraph {
opacity: 0;
}
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.rawgit.com/jschr/textillate/3ca7326c/jquery.textillate.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/Lettering.js/d06bb733/jquery.lettering.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<button id="start_animation">start animation</button>
<button id="out_animation">out animation</button>
<button id="replaced_word">replace word</button>
<p id="paragraph">TEST</p>
BTW, why do you need to manually do all of this staff? It seems that the plugin has functionality of replace the text manually with transition.
What's happening is that when you manipulate the DOM to change the paragraph's text, the textillate events are no longer bound to it.
A simple solution is to use <p id="paragraph"><span id="paragraph_text">TEST</span></p> and only perform DOM manipulation on #paragraph_text
Also, I noticed that $('#sample_text') isn't being used and could be removed.
$('#start_animation').click(function() {
$('#paragraph').textillate('start');
$('#paragraph').addClass('show');
});
/*-----------------------------------------------*/
$("#out_animation").click(function() {
$('#paragraph').textillate('out');
setTimeout(function() {
$('#paragraph').removeClass('show');
}, 1000);
});
var words = ["peter", "michael", "john", "derek", "chris"];
function replacing() {
document.getElementById('paragraph_text').innerHTML = getRandomItem(words);
}
var btn2 = document.getElementById("replaced_word");
btn2.addEventListener("click", replacing);
function getRandomItem(array) {
return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}
/*-----------------------------------------------*/
$(function() {
$('#paragraph').textillate({
loop: false,
autoStart: false,
in: {
effect: 'fadeIn',
shuffle: false,
delay: 80
},
out: {
effect: 'fadeOut',
shuffle: false,
delay: 40,
reverse: true
}
});
})
.show {
opacity: 1!important;
}
#paragraph {
opacity: 0;
}
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdn.rawgit.com/jschr/textillate/3ca7326c/jquery.textillate.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/FitText.js/0b4183af/jquery.fittext.js"></script>
<script src="https://cdn.rawgit.com/davatron5000/Lettering.js/d06bb733/jquery.lettering.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<button id="start_animation">start animation</button>
<button id="out_animation">out animation</button>
<button id="replaced_word">replace word</button>
<p id="paragraph"><span id="paragraph_text">TEST</span></p>
Related
I use the jquery easy autocomplete plugin which has an internal event "onSelectItemEvent".
now i want to call this event from outside (since it is bound to an extensive function i wrote already).
I prepared a fiddle, but triggering the plugins event with this doesn't work :)
$("#example-ac").easyAutocomplete(this.list.onSelectItemEvent());
$(document).ready(function() {
var options_ac = {
url: "https://fcgi.msk.link/model-json.pl?site=test",
getValue: function(element) {
//console.log(element);
return element;
},
list: {
match: {
enabled: true
},
sort: {
enabled: true
},
maxNumberOfElements: 8,
onSelectItemEvent: function() {
$("output").html($("#example-ac").val())
}
},
theme: "square"
};
$("#example-ac").easyAutocomplete(options_ac);
$("#trigga").click(function() {
$("#example-ac").easyAutocomplete(this.list.onSelectItemEvent());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.themes.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<input id="example-ac" />
<br>
<input id="example-ac" /><br/>
<output></output>
<button id="trigga">
trigger
</button>
http://jsfiddle.net/Lgetus29/
Thanks for a hint if this works or if the solution has to be done another way. the codepen example is just small code while the real coding for this internal function is massive, so i want to reuse. maybe i better create a function outside the plugin then reuse this function in the "onSelectItemEvent()", is that even possible?
THANKS !!
Why not use it like
$("#trigga").click(function() {
options_ac.list.onSelectItemEvent()
});
So your final code will look like
$(document).ready(function() {
var options_ac = {
url: "https://fcgi.msk.link/model-json.pl?site=test",
getValue: function(element) {
//console.log(element);
return element;
},
list: {
match: {
enabled: true
},
sort: {
enabled: true
},
maxNumberOfElements: 8,
onSelectItemEvent: function() {
$("output").html($("#example-ac").val())
}
},
theme: "square"
};
$("#example-ac").easyAutocomplete(options_ac);
$("#trigga").click(function() {
options_ac.list.onSelectItemEvent();
});
});
I am creating a little game in jquery, where I want to show the user a little box, if they won the game.
The condition here is (correctcards ==10)
I tried to call dialog on it but it wont work.
Can anyone tell me why?
(I also aready tried to create a new div, when correctcards turn 10 and call dialog on it then, but it doesnt work as well)
if (correctCards == 10) {
endTime = new Date().getTime();
time();
console.log('Spiel endet');
$('#myDialog2').dialog({
autoOpen: true,
modal: true,
resizable: false,
draggable: false,
buttons: {
'Next Level': function() {
$(this).dialog('close');
},
'Close': function() {
$(this).dialog('close');
},
}
})
}
<div id="myDialog2">You won</div>
You need to create the dialog outside of your if.
$('#myDialog2').dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
buttons: {
'Next Level': function() {
$(this).dialog('close');
},
'Close': function() {
$(this).dialog('close');
},
}
});
var correctCards = 10;
if (correctCards == 10) {
console.log('Spiel endet');
$('#myDialog2').dialog('open');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<div id="myDialog2" style>You won</div>
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
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'm trying to run 2 animation at the same time on mouseover
However, after using queue:false they still running one after another :(
here's what i got:
$(document.body).on('mouseover', '.j-ad-slide', function(e) {
e.preventDefault();
$('.j-ad-slide').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.side-nav, .sub-menu').animate({
top: '422'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
Any idea on what I'm doing wrong? BTW: .side-nav and .sub-menu elements are position:fixed - I think that's the problem. I'm not sure how to work around that :(
Your code should work fine. Here is a fiddle for you.
$(document.body).on('mouseover', '.animate', function(e) {
e.preventDefault();
$('.animate').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.animate2').animate({
left: '100'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
fiddle with fixed position