I try to use Velocity.js to do an menu button animation. The code worked well using jQuery but now I'm trying to do it using JavaScript ES6 only and I got an error.
My HTML content is this one :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Hamburger 2</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<hc-hamburger role="button">
<a class="McButton" data="hamburger-menu">
<b></b>
<b></b>
<b></b>
</a>
</hc-hamburger>
<script src="velocity.min.js"></script>
<script src="hamburger.js"></script>
</body>
</html>
And my JavaScript content :
'use strict';
class HCHamburger extends HTMLElement {
get menuButton() {
if (!this._menuButton) {
this._menuButton = this.querySelector("[data=hamburger-menu]");
}
return this._menuButton;
}
get bar() {
if (!this._bar) {
this._bar = this.querySelectorAll('b');
}
return this._bar;
}
attachedCallback() {
this.menuButton.addEventListener('click', _ => {
this.menuButton.classList.toggle("active");
let McBar1 = this.bar[0];
let McBar2 = this.bar[1];
let McBar3 = this.bar[2];
if (this.menuButton.classList.contains("active")) {
McBar1.velocity({ top: "50%" }, {duration: 200, easing: "swing"});
McBar3.velocity({ top: "50%" }, {duration: 200, easing: "swing"})
.velocity({rotateZ:"90deg"}, {duration: 800, delay: 200, easing: [500,20] });
this.menuButton.velocity({rotateZ:"135deg"}, {duration: 800, delay: 200, easing: [500,20] });
} else {
this.menuButton.velocity("reverse");
McBar3.velocity({rotateZ:"0deg"}, {duration: 800, easing: [500,20] })
.velocity({ top: "100%" }, {duration: 200, easing: "swing"});
McBar1.velocity("reverse", {delay: 800});
}
});
}
}
document.registerElement('hc-hamburger', HCHamburger);
When I click on my button I have this error : Uncaught TypeError: McBar1.velocity is not a function
As I said before this code worked with jQuery with a classic selector :
var McBar1 = $('b:nth-child(1)');
I think I have an issue when I get my McBar1 content because when I log it I juste have <b></b> and no the entire object...
We have to use jQuery to get the selection, querySelector is not enough.
Related
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?
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>
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);
});
Any idea about how to get the script below working only on a >767 screen size?
<script>
$(document).ready(function() {
$(window).fadeThis({
baseName: "slide-",
speed: 500,
easing: "easeOutCubic",
offset: 0,
reverse: false,
distance: 50,
scrolledIn: null,
scrolledOut: null
});
});
</script>
Use CSS for this:
<link rel="stylesheet" media="screen and (min-width:767px)" href="yourcssfilefor767.css" type="text/css">
If you have to do this dynamically:
<script>
$(document).ready(function() {
$(window).on("change", function(){
if($(window).width() > 767){
//do stuff here
}
});
});
</script>
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>