I cannot get animate.js to initiate - javascript

I am fairly new to this, and am unable to figure out why the animation won't trigger. I linked the script source to anime.min.js, I can see it in the sources panel. I even tried to use the cdnjs, but that didn't work either.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- jlondono Stylesheet -->
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css" media="screen"/>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-xs-12">
<div class="bg-primary bluesquare" style="height: 150px; width: 150px;"></div>
</div>
</div>
</div>
<!-- Anime JS -->
<script src="/script/anime.min.js"></script>
<script>
anime({
targets: '.bluesquare',
translatex: 250
});
</script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
anime({
targets: '.bluesquare',
translatex: 250
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://jlondono.me/script/anime.min.js"></script>
<div class="container mt-5">
<div class="row">
<div class="col-xs-12">
<div class="bg-primary bluesquare" style="height: 150px; width: 150px;"></div>
</div>
</div>
</div>


A . is usually used to indicate a class selector.
<div **class**="bluesquare" class="bg-primary" style="height: 150px; width: 150px;"></div>


Okay, so after hours of watching Youtube and looking at forum, its turns out it was a couple of things.
The targets was incorrect (after I changed this, it still didn't work)
I didn't capitalize the "X" in translateX.....
OOF. Thank you everyone


try This
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- jlondono Stylesheet -->
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-xs-12">
<div class="bg-primary bluesquare" style="height: 150px; width: 150px;"></div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Anime JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
anime({
targets: '.bluesquare',
width: '100%', // -> from '28px' to '100%',
easing: 'easeInOutQuad',
direction: 'alternate',
loop: true
});
</script>
</body>
</html>


Add File After Bootstrap.js
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Anime JS -->
<script src="/script/anime.min.js"></script>
<script>
anime({
targets: '.bluesquare',
translatex: 250
});
</script>
</body>
</html>

Related

How do i use coreui?

I am trying to use coreui for a project im starting but for somereasson it dosent work I tried using the template the site gives and I cant get it to work. Am I doing something wrong or am I forgeting something?
`
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CoreUI CSS -->
<link rel="stylesheet" href="https://unpkg.com/browse/#coreui/coreui#2.1.16/dist/css/coreui.min.css">
<title>Hello, world!</title>
</head>
<body class="app">
<h1>Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col">
1/2
</div>
<div class="col">
1/2
</div>
</div>
<div class="row">
<div class="col">
1/3
</div>
<div class="col">
1/3
</div>
<div class="col">
1/3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, Bootstrap, then CoreUI -->
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/browse/#coreui/coreui#2.1.16/dist/js/coreui.min.js"></script>
</body>
</html>
`
I tried following the tutorial on the page but i couldnt get coreui to work.

how to play same song on two different divs in the HTML using wavesurfer.js in jQuery or JavaScript

I want to play same song on 2 different places in the html. I'm using wavesurfer.js to play the song. I want that same song should paly somewhere in the page as well as in the footer of the page. May be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Player</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
</head>
<body>
<div class="container mt-5">
<div class="row border mt-5">
<div id="pageDiv"></div>
</div>
</div>
<footer class="footer bg-secondary border w-100" style="position: fixed; bottom: 0;">
<div class="container">
<div class="row">
<p class="text-white text-center">Footer</p>
<div id="footerDiv"></div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/wavesurfer.js#5.2.0/dist/wavesurfer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
var wavesurfer = WaveSurfer.create({
container: '#pageDiv , #footerDiv',
height:48,
responsive:true,
hideScrollbar:true,
waveColor: '#00000078',
progressColor: '#bbbbbb',
barRadius:4,
scrollParent: false
});
wavesurfer.load('songs/song1.mp3');
wavesurfer.on('ready', function(){
console.log('ready');
wavesurfer.play();
});
</script>
</body>
</html>
How can I play the same song on two different places. using jQuery or JavaScript?

You need to create another Instance for another audio.
const wavesurfer1 = WaveSurfer.create({
container: "#pageDiv"
});
wavesurfer1.load("sample.mp3");
const wavesurfer2 = WaveSurfer.create({
container: "#footerDiv",
});
wavesurfer2.load("sample.mp3");
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<script src="https://unpkg.com/wavesurfer.js"></script>
<div class="container mt-5">
<div class="row border mt-5">
<div id="pageDiv"></div>
</div>
</div>
<footer class="footer bg-secondary border w-100" style="position: fixed; bottom: 0;">
<div class="container">
<div class="row">
<p class="text-white text-center">Footer</p>
<div id="footerDiv"></div>
</div>
</div>
</footer>

I'm trying to create a slick slider, but my slick slider isn't working. No error shows in the console as well

So i've been trying to use slick slider for my website. I have all the files in the correct folder, there is no error in my console. My images are cards are showing but these are in line vertically, and i don't know what I'm doing wrong. here is my HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Palvisha Shoaib</title>
<link rel="stylesheet" type="text/css"href = "style.css">
<link rel="stylesheet" type="text/css"href = "slick.css">
<link rel="stylesheet" type="text/css"href = "slicktheme.css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<div class="box6">
<section class="variable slider">
<div>
<div class="row">
<div class="col s12 m7">
<div class="card" style="width: 250px;">
<div class="card-content">
<p>content</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card" style="width: 250px;">
<div class="card-content">
<p>content</p>
</div></div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

I recommend looking on this website, it has an in-depth tutorial on the slick slider. https://kenwheeler.github.io/slick/
I can see that you don't have this function in your code
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>

Basic Full Page setup is not working?

I am using fullPage.js for my website. I went to test it and it isn't functioning like it is supposed to and creating a full height page. I tried changing the scripts and links around, as well as using different jQuery Libraries. All the sources are 100% correct. Any leads or suggestions? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap / CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
</head>
<body>
<div id="fullpage"> <!-- Contains all content that uses FullPage-->
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
</div>
<script>
$(document).ready(function() {
$('#wrapper').fullpage();
});
</script>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>

library :: https://cdnjs.com/libraries/fullPage.js
so you have to change the src attribute of script file .
since you are using src of full page is jquery.fullPage.js but that is not valid .
use https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js in src attribute .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.css" />
</head>
<body>
<div id="wrapper"> <!-- Contains all content that uses FullPage-->
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
</div>
<script>
$(document).ready(function() {
$('#wrapper').fullpage();
});
</script>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>

Change id="wrapper" to id="fullpage"
Default structure looks like below:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>

how to make fullPage.js plugin to work?

I'm so newbie in javascript !
I need your help, guys (pretty please).
I need to initialize fullPage.js plugin into my webpage, but I don't know what is missing. I've read the tutorial for this but I'm doing something wrong and I don't know what.
This is my html code:
<head>
<title>Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href='css/style.css' type='text/css' media='all' />
<link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
<link rel="shortcut icon" href='img/favicon.ico' type='image/x-icon'/ >
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" /> <!-- fullPage.js plugin -->
<script src="js/script.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script> <!-- fullPage.js plugin -->
<script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script> <!-- fullPage.js plugin -->
<script type="text/javascript" src='js/jquery-migrate.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'],
scrollingSpeed: 1000
});
});
</script>
</head>
<body>
<div class="container-fluid" id="fullpage">
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- fullPage.js plugin -->
</body>
Many thanks,
Sandra P.

I think this can help you.
And I recommend to try to replace it:
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script>
to this
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
This should correct the error TypeError:. $(...).Fullpage.
Just look at the live example.
I changed your example and it works, see this.
Update
Properly include in that order:
Styles;
jQuery;
jQuery Migrate (I think you do not need it);
jQuery FullPage and other jQuery
plugins;
you code.
it should look like this
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<link rel="stylesheet" type="text/css" href="youCSS" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<!--other jQuery plugins-->
<script type="text/JavaScript" src="youJS"></script>
Update 2
Replace youJS :)
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#fullpage').fullpage({
anchors : ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'],
scrollingSpeed : 1000
});
});
</script>
</head>
<body>
<div class="container-fluid" id="fullpage">
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
</div>
</body>

Categories