Please use the below code in notepad and save as html to see output. There is a login form and an animated background. After adding the background, I am not able to click the username box and not able to write anything in that. Tried changing position in CSS. But it is not happening.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> html,
body {
height: 100%;
margin: 0;
background: rgb(2, 0, 36);
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(149, 199, 20, 1) 0%, rgba(0, 212, 255, 1) 96%);
}
.myForm {
background-color: rgba(0, 0, 0, 0.5) !important;
padding: 15px !important;
border-radius: 15px !important;
color: white;
position: fixed;
transform: translateX(-50%);
}
input {
position: fixed;
border-radius: 0 15px 15px 0 !important;
}
input:focus {
outline: none;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
.br-15 {
border-radius: 15px 0 0 15px !important;
}
.submit_btn {
border-radius: 15px !important;
background-color: #95c714 !important;
border: 0 !important;
}
#particles-js {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
z-index: 1;
}
</style> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <dvi class="container h-200"> <div class="d-flex justify-content-center"> <div class="card mt-5 col-md-4 animated bounceInDown myForm"> <div class="card-header"> <center> <h5>Admin Portal</h5> </center> </div> <form> <div class="card-body"> <div id="dynamic_container"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text br-15"><i class="fas fa-user"></i></span> </div> <input type="text" placeholder="Login ID" class="form-control"/> </div> <div class="input-group mt-3"> <div class="input-group-prepend"> <span class="input-group-text br-15"><i class="fas fa-key"></i></span> </div> <input type="password" placeholder="Login Password" class="form-control"/> </div> </div> </div> <div class="card-footer"><center> <button class="btn btn-success btn-lg submit_btn"> <i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center> </div> </form> </div> </div> </dvi> <div id="particles-js"></div> <script type="text/javascript"> $.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function() {
particlesJS('particles-js', {
"particles": {
"number": {
"value": 80, "density": {
"enable": true, "value_area": 800
}
}
, "color": {
"value": "#ffffff"
}
, "shape": {
"type": "circle", "stroke": {
"width": 0, "color": "#000000"
}
, "polygon": {
"nb_sides": 6
}
, "image": {
"width": 100, "height": 100
}
}
, "opacity": {
"value": 0.5, "random": false, "anim": {
"enable": false, "speed": 1, "opacity_min": 0.1, "sync": false
}
}
, "size": {
"value": 5, "random": true, "anim": {
"enable": false, "speed": 40, "size_min": 0.1, "sync": false
}
}
, "line_linked": {
"enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1
}
, "move": {
"enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "attract": {
"enable": false, "rotateX": 600, "rotateY": 1200
}
}
}
, "interactivity": {
"detect_on": "canvas", "events": {
"onhover": {
"enable": true, "mode": "repulse"
}
, "onclick": {
"enable": true, "mode": "push"
}
, "resize": true
}
, "modes": {
"grab": {
"distance": 400, "line_linked": {
"opacity": 1
}
}
, "bubble": {
"distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3
}
, "repulse": {
"distance": 200
}
, "push": {
"particles_nb": 4
}
, "remove": {
"particles_nb": 2
}
}
}
, "retina_detect": true, "config_demo": {
"hide_card": false, "background_color": "#b61924", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover"
}
}
);
}
);
</script>
You have an error in tag name replace dvi to div line 72.
Just change z-index in #particles-js to 0 and add class:
.container {
position: relative;
z-index: 1;
}
Just add the style:
.card {
z-index: 33;
}
because the input is being rendered behind the canvas.
.card
{
z-index: 33;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,body{
height: 100%;
margin: 0;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(149,199,20,1) 0%, rgba(0,212,255,1) 96%);
}
.myForm{
background-color: rgba(0,0,0,0.5) !important;
padding: 15px !important;
border-radius: 15px !important;
color: white;
position: fixed;
transform: translateX(-50%);
}
input{
position: fixed;
border-radius:0 15px 15px 0 !important;
}
input:focus{
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
.br-15{
border-radius: 15px 0 0 15px !important;
}
.submit_btn{
border-radius: 15px !important;
background-color: #95c714 !important;
border: 0 !important;
}
#particles-js{
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
z-index:1;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Animated Dynamic Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<dvi class="container h-200">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-4 animated bounceInDown myForm">
<div class="card-header">
<center>
<h5>Admin Portal</h5>
</center>
</div>
<form>
<div class="card-body">
<div id="dynamic_container">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-user"></i></span>
</div>
<input type="text" placeholder="Login ID" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-key"></i></span>
</div>
<input type="password" placeholder="Login Password" class="form-control"/>
</div>
</div>
</div>
<div class="card-footer"><center>
<button class="btn btn-success btn-lg submit_btn">
<i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center>
</div>
</form>
</div>
</div>
</dvi>
<div id="particles-js"></div>
<script type="text/javascript">
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function(){
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 6
},
"image": {
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
});
</script>
</body>
</html>
</body>
</html>
Replace this line
<div class="card mt-5 col-md-4 animated bounceInDown myForm" >
with this line
<div class="card mt-5 col-md-4 animated bounceInDown myForm" style="z-index: 999999;">
I have tested your HTML code on my browser and have fixed your problem by just adding a few lines of CSS in style tag. The problem was of z-index
.d-flex.justify-content-center {
position: relative;
z-index: 9999 !important;
}
You can add this css in your style tag and your problem is solved
No need to manage z-index. Just remove the z-index:1 in #particles-js css and move the whole <dvi> block below <div id="particles-js"></div>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,body{
height: 100%;
margin: 0;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(149,199,20,1) 0%, rgba(0,212,255,1) 96%);
}
.myForm{
background-color: rgba(0,0,0,0.5) !important;
padding: 15px !important;
border-radius: 15px !important;
color: white;
position: fixed;
transform: translateX(-50%);
}
input{
position: fixed;
border-radius:0 15px 15px 0 !important;
}
input:focus{
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
.br-15{
border-radius: 15px 0 0 15px !important;
}
.submit_btn{
border-radius: 15px !important;
background-color: #95c714 !important;
border: 0 !important;
}
#particles-js{
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Animated Dynamic Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<div id="particles-js"></div>
<dvi class="container h-200">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-4 animated bounceInDown myForm">
<div class="card-header">
<center>
<h5>Admin Portal</h5>
</center>
</div>
<form>
<div class="card-body">
<div id="dynamic_container">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-user"></i></span>
</div>
<input type="text" placeholder="Login ID" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-key"></i></span>
</div>
<input type="password" placeholder="Login Password" class="form-control"/>
</div>
</div>
</div>
<div class="card-footer"><center>
<button class="btn btn-success btn-lg submit_btn">
<i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center>
</div>
</form>
</div>
</div>
</dvi>
<script type="text/javascript">
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function(){
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 6
},
"image": {
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
});
</script>
</body>
</html>
</body>
</html>
Related
I have a modified Slick slider that has an overlay+text when hovering over each image. The slider, images, hover effect, etc. are working great on codepen.io but it does not work the same when I put it on the website. I am not sure why! The images should be displayed on 1 row with arrows/dots navigating to next image. And it should be resizing based on screen width (that's how its set up on codepen).
$('.slider').slick({
infinite: true,
speed: 800,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
dots: true,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
})
.slide,
.sliderimg {
width: 40%;
height: 40%;
}
.slick-next:before {
content: "→";
}
.slick-prev,
.slick-next {
z-index: 999;
}
.slick-next {
right: 0 !important;
}
.slick-prev {
left: 0 !important;
}
html,
body {
margin: 0;
padding: 0;
}
.main {
width: 100%;
text-align: center;
}
h2 {
font-family: "Poppins", sans-serif;
color: #000;
}
.slider {
width: 90%;
margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide .sliderimg {
width: 100%;
}
.card {
position: relative;
background: #fff;
}
.card:hover {
background: rgb(253, 201, 154, 0.8);
}
.middle {
position: absolute;
visibility: hidden;
}
.card-content {
text-align: center;
color: #ccc;
}
.card-text {
font-size: 15px;
font-weight: 300;
}
.car:hover .sliderimg {
opacity: 0.1;
}
.card:hover .middle {
opacity: 3;
}
/* text on hover */
.car:hover .middle {
background-color: transparent;
color: black;
font-size: 16px;
position: absolute;
top: 47%;
padding: 10px 20px;
left: 35%;
visibility: visible;
}
/*dots*/
.slick-dots button {
display: block;
width: 16px;
height: 16px;
font-size: 0;
cursor: pointer;
font-size: 0;
box-sizing: border-box;
background: #e7dff4;
border-radius: 50%;
/*border: 2px solid #AE95DA;*/
}
.slick-dots button:hover,
.slick-dots .slick-active button {
background: #AE95DA;
opacity: 1;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css'>
<link rel="text/html" href="./style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="main">
<div class="slider">
<div class="car">
<div class="card">
<div class="card-header">
<img class="sliderimg" src="https://images.unsplash.com/photo-1657720209025-e7c1319c1147?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg0OTg1NzQ&ixlib=rb-1.2.1&q=80">
<div id="" class="middle">
<div class="text">Jane Smith<br/>CEO/Founder</div>
</div>
</div>
<div class="card-body">
<div class="card-content">
<div class="card-title"></div>
</div>
</div>
</div>
</div>
<div class="car">
<div class="card">
<div class="card-header">
<img class="sliderimg" src="https://images.unsplash.com/photo-1657720209025-e7c1319c1147?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg0OTg1NzQ&ixlib=rb-1.2.1&q=80">
<div class="middle">
<div class="text">Jennifer Spinner<br/>Company Director</div>
</div>
</div>
<div class="card-body">
<div class="card-content">
<div class="card-title"></div>
</div>
</div>
</div>
</div>
<div class="car">
<div class="card">
<div class="card-header">
<img class="sliderimg" src="https://images.unsplash.com/photo-1657720209025-e7c1319c1147?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg0OTg1NzQ&ixlib=rb-1.2.1&q=80" >
<div class="middle">
<div class="text">Samuel Stopper<br/>Finance Director</div>
</div>
</div>
<div class="card-body">
<div class="card-content">
<div class="card-title">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js'></script>
I have been trying to fix it for hours but with no success. Any help would be be greatly, greatly appreciated!! Thank you.
Tested your code in Xampp localhost and it works with some adjustments.
Our test: at codepen
We realigned the header info scripts so each is apparent (which is needed vs which is not needed). The following should be in header:
slick-carousel/1.8.1/slick.css
slick-carousel/1.8.1/slick-theme.css
2.1.3/jquery.min.js
slick-carousel/1.8.1/slick.js
Note that we are not sure if those other header scripts might be for some other stuff on your webpage that we're not aware of (that is not shown by you in the example provided).
No lower BUTTON will show when all three images are visible.
When two images are visible TWO lower buttons will show.
When one image is visible all THREEE lower buttons will show.
I temporarily added a "1,2,3" number on the overlay to see that we are on the correct overlay image in small screens.
To fix the click arrows (in original CSS or in custom.css):
.slick-slide (margin:0px) to give the click arrows '>' full visibility on page.
Or in a custom.css overwrite original code to bump the arrows ">" in a slight bit. These arrows show up on small screens when the three images are one visible image.
/*--custom bump arrows--*/
.slick-prev {margin-left:20px;}
.slick-next {margin-right:20px;}
Here is the first part of the JS we tried. You might need to adjust it for your needed width factors:
<script>
$('.slider').slick({
dots: true,
infinite: true,
speed: 800,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
autoplaySpeed: 2000,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: true,
dots: true
I have a weird problem with slick slider where if I have less items than the slides to show in my nav and I am not on the first slide, if I then resize my screen, all slides before the active slide get hidden off screen.
In the example below, if you go to full screen, click on the second slide and then resize your browser, the first item in the nav slider disappears as slick transforms it out of view.
Is there a way to stop this?
$(".single-item").slick({
arrows: true,
dots: true,
fade: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
centerMode: false,
dots: false,
focusOnSelect: true,
infinite: false,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.single-item',
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
color: #333;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
.slick-disabled {
cursor: not-allowed;
}
.navigation-item {
display: none;
}
.navigation-item .slick-track {
min-width: 100%;
}
#media screen and (min-width: 796px) {
.navigation-item {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class='container'>
<div class='single-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
</div>
<div class='navigation-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
</div>
</div>
If I have more than the slides to show, it doesn't seem to move to the first slide in the nav - eg below I have 6 slides, and if I select 4 and resize, the 4 stays where it is in the nav and doesn't move to the beginning:
$(".single-item").slick({
arrows: true,
dots: true,
fade: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
centerMode: false,
dots: false,
focusOnSelect: true,
infinite: false,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.single-item',
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
color: #333;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
.slick-disabled {
cursor: not-allowed;
}
.navigation-item {
display: none;
}
.navigation-item .slick-track {
min-width: 100%;
}
#media screen and (min-width: 796px) {
.navigation-item {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class='container'>
<div class='single-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</div>
<div class='navigation-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</div>
</div>
It also didn't happen in earlier versions of slick - eg in the code below using v 1.5.9, it seems to work ok (but I cannot revert to this version as we are using some features in the new slider that aren't present in the old one)
$(".single-item").slick({
arrows: true,
dots: true,
fade: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
centerMode: false,
dots: false,
focusOnSelect: true,
infinite: false,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.single-item',
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css');
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
color: #333;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
.slick-disabled {
cursor: not-allowed;
}
.navigation-item {
display: none;
}
.navigation-item .slick-track {
min-width: 100%;
}
#media screen and (min-width: 796px) {
.navigation-item {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class='container'>
<div class='single-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
</div>
<div class='navigation-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
</div>
</div>
Newer version of slick-carousel applies transform: translate3d(-127px, 0px, 0px); on .slick-track inside .navigation-item, although it's not entirely clear why it does this.
Solution (more of a hack) is to force transform: translate3d(0, 0, 0); on .slick-track:
$(".single-item").slick({
arrows: true,
dots: true,
fade: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
centerMode: false,
dots: false,
focusOnSelect: true,
infinite: false,
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.single-item',
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css');
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
color: #333;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
.slick-disabled {
cursor: not-allowed;
}
.navigation-item {
display: none;
}
.navigation-item .slick-track {
min-width: 100%;
transform: translate3d(0, 0, 0)!important;
}
#media screen and (min-width: 796px) {
.navigation-item {
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class='container'>
<div class='single-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
</div>
<div class='navigation-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
</div>
</div>
I'm making a website with the Bootstrap carousel wich should contains some animated canvas.
I'd like to use Particles.js animation on second slide but It does not work.
It works only on first slide and I can't figure out why.
Can someone help me?
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#myCarousel {
height: 500px
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
canvas {
position: relative;
/*pointer-events:none;*/
top: 0;
left: 0
}
/* Particles Canvas*/
#particles-js{
height: 500px;
width: 100%;
background-color: #D0EDF5;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h1>First Slide</h1>
</div>
<div class="item">
<div id="particles-js"></div>
</div>
<div class="item">
<h1>Third Slide</h1>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script type="text/javascript">
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 60,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#0A8B80"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 50
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 20,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#65BBC4",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 80,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#D0EDF5",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
</script>
</body>
</html>
Moreover, I noticed that the animation starts while open the developer console of the browser like the examples below:
Before
After
Because when particles.js initializes, it reads the offsetHeight and offsetWidth properties[1], where these describe the size of visible area[2]. This might be a bug of particles.js, but you can catch the slide event of Bootstrap carousel then initialize the particles.js.
Additional notes:
Initializing particles.js after the slide event makes sure that when it happens, the target element is already visible, so that particles.js can get valid metrics.
Another solution is to fire a resize event after every slide event. The width and height will be recalculated[3]. This is also why the author of this question can start the animation by opening the developer console.
Ref:
[1]: https://github.com/VincentGarreau/particles.js/blob/d01286d6dcd61f497d07cc62bd48e692f6508ad5/particles.js#L18
[2]: difference between offsetHeight and clientHeight
[3]: https://github.com/VincentGarreau/particles.js/blob/d01286d6dcd61f497d07cc62bd48e692f6508ad5/particles.js#L101
I'm trying to create a single scrolling webpage consisting of three pages
$('a.page-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 60
}, 1000);
event.preventDefault();
});
* {
margin-top: 0;
margin-bottom: 0;
}
#page1 {
height: 1000px;
background-color: #000;
color: white;
}
#page2 {
height: 1000px;
color: white;
background-color: #18121e;
padding-top: 140px;
border-top: 100px;
}
#page3 {
height: 650px;
color: white;
background-color: #233237;
background-size: cover;
padding-top: 200px;
}
body {
padding-top: 0px;
}
#page1 p {
padding-top: 100px;
font-size: 2.5rem;
}
#page1 p #highlight {
color: pink !important;
}
#page2 h3 {
padding-bottom: 80px;
line-height: 1.5;
}
#page3 h3 {
padding-bottom: 100px;
line-height: 1.5;
}
.btn {
color: white;
background-color: #000 !important;
}
.btn:hover {
color: gray;
}
#media screen and (max-width: 990px) {
.btn ~ .btn {
margin-top: 10px;
}
}
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Rashid Naushad</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#about">About</a></li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a></li>
<li><a class="page-scroll" href="#contact">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
<div id="page1">
<div id="particles-js">
<a id="about"></a>
<br>
<br>
<br>
<p class="text-center">Hi !
<br>I'm a self taught web developer based in India.
<br> I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.
<br> I dream of combining my knowledge of programming, economics, and
<br>financial markets for the betterment of the society.
<br> Languages and Frameworks:
<br> HTML5, CSS3, Bootstrap3,
<br> Javascript, jQuery, Angular.js, Meteor.js,
<br> Node.js, React,js,
<br> Python, php..
<br> Tools & expertise: Git, Responsive Web Design.</p>
</div>
</div>
<div id="page2">
<a id="portfolio"></a>
<h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
<!--<div class="row">
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Simple Javascript App by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Tribute to Raghuram Rajan by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>-->
</div>
<div id="page3">
<a id="contact"></a>
<h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
GitHub
<div class="hidden-lg hidden-md">
<br>
</div>
freeCodeCamp
<div class="hidden-lg hidden-md">
<br>
</div>
Gmail
</div>
</div>
I want to add background cover as particles.js for the first page .I tried doing as described in the GitHub particles.js, but failed miserably.
Where exactly am I going wrong?
Here is the JSFiddle.
In your jsfiddle you never actually invoked the particles method. Furthermore, text sitting on top of the particles needs to be absolutely positioned;
Here's your working functional example
Note that particles-js needs to be initialized and configured, here's what I used:
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
$(function() {
$( ".column" ).sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});
$( ".portlet" )
.addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
$( ".portlet-toggle" ).click(function() {
var icon = $( this );
icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
});
});
$(function(json) {
$( "#dialog" ).dialog();
console.log(json);
});
$.getJSON("AnalyticsFoxMain.json", function(json) {
console.log(json); // this will show the info it in firebug console
window.onload = function () {
d3.json("data.json", function(data) {
console.log(data[0]);
});
console.log(json);
$('#jsonImage').attr('src', json.image);
$( '#jsonText' ).text(json.Company);
$('#jsonCde').text(json.Brand);
$('#jsonDesc').text(json.Description);
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "sentiment"
},
animationEnabled: true,
legend:{
verticalAlign: "center",
horizontalAlign: "left",
fontSize: 12,
fontFamily: "Helvetica"
},
theme: "red and blue",
data: [
{
type: "pie",
indexLabelFontFamily: "Garamond",
indexLabelFontSize: 20,
indexLabel: "{label} {y}",
startAngle:-25,
showInLegend: true,
toolTipContent:" {y}",
dataPoints: [
{ y: json.Sentiment.positive},
{ y: json.Sentiment.negative},
]
}
]
});
chart.render();
var chart = new CanvasJS.Chart("chartContainer1",
{
title: {
text: "Source"
},
data: [
{
type: "doughnut",
indexLabel: " {y}",
toolTipContent: "{y}",
dataPoints: [
{ y: json.Source.facebook},
{ y: json.Source.twitter},
{ y: json.Source.mouthshut}
]
}
]
});
chart.render();
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Dealer1', 3540 ],
['Dealer2',1320]
]);
var options = {
title: 'others'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
chart.render();
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Adjectives',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: 'Adjectives',
innerSize: '50%',
data: [
['Space Inside', 2000],
['Looks', 4000],
['Reliability', 3000],
{
name: 'Proprietary or Undetectable',
y: 0.2,
dataLabels: {
enabled: false
}
}
]
}]
});
});
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": [ {
"title": "petrol",
"value": 3540
}, {
"title": "Diesel",
"value": 1320
} ],
"titleField": "title",
"valueField": "value",
"labelRadius": 5,
"radius": "42%",
"innerRadius": "60%",
"labelText": "[[title]]",
"export": {
"enabled": true
}
} );
}
$(function () {
$('#container1').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 350
}
},
title: {
text: 'Issues'
},
subtitle: {
text: ''
},
plotOptions: {
pie: {
innerSize: 50,
depth: 10
}
},
series: [{
name: '',
data: [
['GearProblems', 4000],
['EngineKnocking', 2000],
['PowerWindows',3000]
]
}]
});
});
});
#import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
::selection {
background: transparent;
}
html {
margin:10px 200px 80px 80px;
padding:1px ;
background:white;
}
#content {
text-align:center;
position:absolute;
left:10px;
right:10px;
margin:auto;
padding:120px 0 10px 0;
width:200px;
height:50px;
}
input[type="checkbox"]{display:none;}
.checkbox:checked + .label{
background:#7B7484;
color:#231733;
}
.checkbox:checked ~ .social {
opacity:1;
-webkit-transform: scale(1) translateY(-90px);
-moz-transform:scale(1) translateY(-90px);
-o-transform:scale(1) translateY(-90px);
transform:scale(1) translateY(-90px);
-webkit-transition:.5s;
-moz-transition:.5s;
-o-transition:.5s;
transition:.5s;
}
.label {
font-size:16px;
cursor:pointer;
margin:0;
padding:5px 10px;
border-radius:100%;
color:#7B7484;
}
.social {
transform-origin:50% 0%;
-webkit-transform: scale(0) translateY(-190px);
-moz-transform:scale(0) translateY(-190px);
-o-transform:scale(0) translateY(-190px);
transform:scale(0) translateY(-190px);
opacity:0;
}
ul {
position:bottom;
left:0;
right:0;
margin:auto;
color:#fff;
height:46px;
width:180px;
background:#3B5998;
padding:0;
list-style:none;
}
ul li {
font-size:20px;
cursor:pointer;
width:60px;
margin:0;
padding:12px 0;
text-align:center;
float:left;
display:block;
height:22px;}
ul li:hover {color:rgba(0,0,0,.5);}
ul:after {
content:'';
display:block;
position:absolute;
left:0;
right:0;
margin:35px auto;
height:0;
width:0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #3B5998;
}
li[class*="twitter"]
body {
padding:105px;
vertical-align: Centered;
}
.column {
width: 350px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1.2em 1em 0;
padding: 0.3em;
}
.portlet-toggle {
position: absolute;
top: 10%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0px;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 150px;
}
/**
* Footer Styles
*/
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 20px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
#chartdiv {
width : 100%;
height : 435px;
font-size : 11px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="app.css">
<link href="css/leaf.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
</head>
<body>
<center>
<h1 style="color:blue; font-size:25pt">AUTOLYTICS </h1>
</center>
<div>
<table style="width:550; height:180 ">
<td>
<img src="" id="jsonImage" style="width: 400px; height: 230px;" />
</td>
<td>
<div style="width:550px;height:200px;padding:1px;border:1px hidden; float:right">
<strong>
<p id="jsonText" style="float:left;"></p>
<p id="jsonCde" style="padding-left : 5px;float:left;"></p>
</strong>
<p id="jsonDesc" style="ALIGN:justify ;width: 500px; height: 110px;float:right "> </p>
<button name="button" style="float: right;" >search</button>
<input type="text" placeholder="eg.Mumbai" size= 55; style=" border:1px solid #ff0040;float:right " />
</td>
</div>
</table>
</div>
<div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Sentiment</div>
<div class="portlet-content">
<div id="chartContainer" style="width: 300px; height: 200px;"></div>
</div>
</div>
<div class="portlet">
<div class="portlet-header">Source</div>
<div class="portlet-content">
<div id="chartContainer1" style="width: 300px; height: 200px;"></div>
</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Issues</div>
<div class="portlet-content">
<div id="container1" style="width: 300px; height: 200px;"></div>
</div>
</div>
<div class="portlet">
<div class="portlet-header">Adjectives</div>
<div class="portlet-content">
<div id="container" style="width: 300px; height: 200px;"></div>
</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Type</div>
<div class="portlet-content">
<div id="chartdiv" style="width: 400px; height: 200px;"></div>
</div>
</div>
<div class="portlet">
<div class="portlet-header">others</div>
<div class="portlet-content">
<div id="piechart" style="width: 300px; height: 200px;"></div>
</div>
</div>
</div>
<div id="dialog" title="popup">
</div>
<footer>
<div id="content">
<input type="checkbox" class="checkbox" id="share" checked>
<label for="share" class="label entypo-export"></label>
<div class="social">
<ul>
<li class="entypo-twitter"></li>
<li class="entypo-facebook"></li>
<li class="entypo-gplus"></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
This is my project,in this project how to getting data from .JSON file in pop- window by using JavaScript.
In these code how to render data in popup window by using java-script,in these code multiple JSON files to render
If your JSON file can be retrieved by an url:
in your json file:
data = '[
{"surname" : "Alex", "first_name" : "Chaosman"},
{"surname" : "Ben", "first_name" : "Dickson"},]';
in your html:
<script type="text/javascript" src="file.json"></script>
<script>
var arr = JSON.parse(data);
console.log(arr[0].first_name + ' ' + arr[0].surname);
console.log(arr[1].first_name + ' ' + arr[1].surname);
</script>