Bootstrap carousel does not work in example below. It works when I copy it to .content
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
function Type_Button() {
$("div#content").html('<div id="Doodle" class="carousel slide" data-ride="carousel" data-interval="500"><div class="carousel-inner"><div class="item active" style="padding: 0;"><img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-loteria-2019-6753651837108772.2-2xa.gif"></div><div class="item" style="padding: 0;"><img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-halloween-2016-6753651837108773-2xa.gif"></div></div></div>');
}
window.onload = Type_Button;
</script>
</head>
<body>
<div id="content"></div>
</body>
You need to call the carousel method manually as you're trying to inject the html code after body onload.
Call carousel manually (at the end of Type_Button() function) with:
$('.carousel').carousel()
You can try a bunch of options inside it - check -> https://getbootstrap.com/docs/4.3/components/carousel/#options
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
function Type_Button() {
$("div#content").html('<div id="Doodle" class="carousel slide" data-ride="carousel" data-interval="500"><div class="carousel-inner"><div class="item active" style="padding: 0;"><img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-loteria-2019-6753651837108772.2-2xa.gif"></div><div class="item" style="padding: 0;"><img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-halloween-2016-6753651837108773-2xa.gif"></div></div></div>');
$('.carousel').carousel();
}
window.onload = Type_Button;
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
Related
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 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>
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>
I am trying to use Black Dashboard for my Admin Panel. As I click on my Nav Icons, another HTML file is being loaded into a div tag. The problem is that when I do this using JavaScript, the loaded file is not in full height and appears with a vertical scroll bar.
you can see the main html below:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/53b023e3b1.js" crossorigin="anonymous"></script>
<title>Dashboard</title>
</head>
<body>
<div class="wrapper">
<div class="sidebar" data-color="purple" data-background-color="white">
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#" id="posts"">
<i class="fas fa-newspaper"></i>
<p>Posts</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="main-panel">
<div class="content">
<div class="container-fluid">
<div class="card" id="main-content">
</div>
</div>
</div>
</div>
<link href="black-dashboard.css?v=1.0.0" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="black-dashboard.js?v=1.0.0" type="text/javascript"></script>
<script>
document.getElementById("posts").onclick = function () {
document.getElementById("main-content").innerHTML='<object type="text/html" data="newpost.html" ></object>';
};
</script>
</body>
</html>
The newpost.html file that I want to load:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/53b023e3b1.js" crossorigin="anonymous"></script>
<link href="black-dashboard.css?v=1.0.0" rel="stylesheet" />
<title>new post</title>
</head>
<body>
<div class="card">
<div class="card-header">
Nav Item Title
</div>
<div class="card-body">
<form>
<!-- simple form here -->
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="black-dashboard.js?v=1.0.0" type="text/javascript"></script>
</body>
</html>
I tried different CSS solutions including using height: 100% for parent and child elements and felx but nothing seems to work. You can see the screen shot of the result below:
Any help would be really appreciated <3
UPDATE: The problem was somehow related to my editor. I was using Sublime.
Try adding to your css:
.card {
height:calc(100vh - 40px);
}
And where I have 40px substitute the height needed for your Dashboard header.
Try adding this code to use Black Dashboard for your Admin Panel ;
link href="../assets/css/black-dashboard.css?v=1.0.0" rel="stylesheet"
twitter bootstrap carousel not working. I tried changing the id ('#mycarousel') to .carousel or .mycarousel but nothing is working. when I click on the controls it does not advance. what is wrong with this piece of code?
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js></script>
<script type="text/javascript">
function(){
$('#mycarousel').carousel();
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12 well">
<div id="mycarousel" class="carousel slide span8">
<div class="carousel-inner">
<div class="item active"><img src="car1.jpg"></div>
<div class="item"><img src="car2.jpg"></div>
<div class="item"><img src="car3.jpg"></div>
<div class="item"><img src="car4.png"></div>
<div class="item"><img src="car5.jpg"></div>
</div>
<a class="carousel-control left" href="#mycarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#mycarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<script src="js/carousel.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
The following code will never gets executed, since you never actually call it.
$('#mycarousel').carousel();
You should change the following:
function(){
$('#mycarousel').carousel();
}
to:
$(function(){
$('#mycarousel').carousel();
});
This will make it execute when the dom is ready.
You also do not close you link tag that loads the bootstrap css from being loaded.The following:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"
Should be:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
You load the JS files in an order which I am not sure if it is correct. I suppose they should be in the reverse order.