Owlcarousel2 "dots:true" not working?

Owlcarousel2 "dots:true" not working? - javascript

I am trying to make a carousel using the owl-carousel plugin but I am having a problem showing the dots. Dots are not being shown despite they are enabled on the javascript. Is it the problem with owl carousel 2? I have tried adding owl-dots class inside the owl-carousel class. It does produce some result but one extra dot is being shown.Here is the fiddle for you :https://jsfiddle.net/aoa9a457/
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="testimonial-slides" class="owl-carousel owl-theme">
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
</div>
</div>
</div>
</div>
CSS( I am just going to show of owl-carousel)
.owl-carousel .owl-item img{
display: block;
width:160px;
}
.owl-dots {
text-align: center;
position: fixed;
bottom: 5px;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
Javascript
(function ($) {
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
items :4,
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
dots: true,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
}
});
});
}(jQuery));

'owl-dots disabled' class can also show if you do not have enough items to allow the function of the dots.
It seems in your example you have set in the owl carousel config to 'items :4' but only have 3 HTML elements to 'carousel'
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
items :4, <<
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
},
onInitialized:setDots,
onChanged:setDots
});
});
}(jQuery));
This may be just your HTML markup but going by your example code this would display the 'owl-dots disabled' class as there aren't enough items to cycle.

I couldn't debug why your dots aren't appearing... that been said you can use this work around that removes the disabled class from your DOM, which is currently hiding them. with css you can fix your dots style...
(function ($) {
function setDots(){
$("#testimonial-slides .owl-dots").removeClass('disabled');
}
$(document).ready(function() {
$("#testimonial-slides").owlCarousel({
//items :4,
margin: 10,
loop: true,
autoplay: true,
smartSpeed: 1000,
center:true,
responsive:{
0:{
items:1
},
600:{
items:3
}
},
//onInitialized:setDots,
//onChanged:setDots
});
});
}(jQuery));
.owl-carousel .owl-item img{
display: block;
width:160px;
}
.owl-dots {
text-align: center;
position: fixed;
bottom: 5px;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="testimonial-slides" class="owl-carousel owl-theme">
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
<div class="testmonial-slide-single-item text-center">
<img src="assets/image.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, excepturi?</p>
<h5>Sabal Parajuli<span>Infotech</span></h5>
</div>
</div>
</div>
</div>
</div>
EDITION As suggested #navigator you are setting 3 elements and declaring four, if you add more elements and set the default configuration you will see the dots appearing...

Related

My Transition property did not working when I click one button from another

Here is the code. where I try to create a restaurant menu page. There are five buttons. Problem is when I click one to another button the .active class transition property does not working. What I did wrong here?
// selecting menu btn DIV
var menuDiv = document.querySelectorAll(".menu-btns button");
console.log(menuDiv);
// selecting all menu button
var allMenu = document.querySelector(".all");
// selecting asian menu item
var asianMenu= document.querySelector(".asian");
// selecting chinese menu item
var chnsMenu = document.querySelector(".chinese");
// selecting desi menu item
var desiMenu = document.querySelector(".desi");
// selecting desert menu item
var desertMenu = document.querySelector(".desert");
// selecting the cuisine DIV
var asianCuisine = document.querySelector(".asian-cuisine");
var chineseCuisine = document.querySelector(".chinese-cuisine");
var desiCuisine = document.querySelector(".desi-cuisine");
var desertCuisine = document.querySelector(".desert-cuisine");
// add eventlister to all the buttons
for (let i=0;i<menuDiv.length;i++){
menuDiv[i].addEventListener("click", function(e){
e.target.preventDefault;
if(e.target == asianMenu){
asianCuisine.classList.replace("hidden" ,"active");
chineseCuisine.classList.add("hidden");
desiCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
}
if(e.target == chnsMenu){
console.log("Kazi");
chineseCuisine.classList.replace("hidden","active");
desiCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if(e.target == desiMenu){
console.log("Kazi");
desiCuisine.classList.replace("hidden","active");
chineseCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if(e.target == desertMenu){
console.log("Kazi");
desertCuisine.classList.replace("hidden","active");
chineseCuisine.classList.add("hidden");
desiCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if(e.target == allMenu){
console.log("Kazi");
desertCuisine.classList.replace("hidden","active");
chineseCuisine.classList.replace("hidden","active");
desiCuisine.classList.replace("hidden","active");
asianCuisine.classList.replace("hidden","active");
}
})
}
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* working with the title */
.title{
text-align: center;
font-size: 4rem;
font-family: 'Poppins', sans-serif;
}
.underline{
position: absolute;
width: 600px;
height: 2px;
background-color: black;
left: 50%;
transform: translate(-50%);
}
/* working with the menu buttons */
.menu-btns{
text-align: center;
margin-top: 30px;
}
.menu-btns button{
padding: 10px 20px;
margin-left: 30px;
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.menu-btns button:hover{
background-color: chartreuse;
transition: 0.5s ease-out;
}
/* menu display area */
/* .display-Area{
margin-top: 60px;
margin-left: 10%;
display: grid;
grid-template-columns: auto auto;
} */
.display-Area img{
/* border: 1px solid black; */
width: 500px;
height: 300px;
border-radius: 5px;
box-shadow: 0px 0px 15px 0px black;
cursor: pointer;
}
.display-Area img:hover{
transform: scale(1.1);
transition: 0.5s ease-out;
}
/* display flex for every cuisine */
.asian-cuisine{
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.chinese-cuisine{
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.desi-cuisine{
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.desert-cuisine{
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
/* for the javascript manipulation class */
.active .asian-cuisine.chinese-cuisine.desert-cuisine.desi-cuisine{
display: flex;
justify-content: space-around;
gap: 20px;flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s all ease-out;
}
.hidden{
display: none;
transition: 0.5s all ease-out;
}
<div class="wrapper">
<div class="home-container">
<div class="title">Restaurent Menu</div>
<div class="underline"></div>
<div class="menu-btns">
<button class="all">All Items</button>
<button class="asian">Asian Cuisine</button>
<button class="chinese">Chinese Item</button>
<button class="desi">Desi Item</button>
<button class="desert">Desert Item</button>
</div>
<!-- item display Area -->
<div class="display-Area">
<!-- Asian Cuisine -->
<div class="asian-cuisine">
<div class="asianItem">
<div class="img"><img src="images/asian01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, sit.</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, aliquam?</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique, iste?</div>
</div>
</div>
</div>
<!--Chinese Item -->
<div class="chinese-cuisine">
<div class="chineseItem">
<div class="img"><img src="images/chi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi03.jpeg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
<!-- Desi Item -->
<div class="desi-cuisine">
<div class="desiItem">
<div class="img"><img src="images/desi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi03.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
<!-- Desert Item -->
<div class="desert-cuisine">
<div class="desertIitem">
<div class="img"><img src="images/chi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi03.jpeg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
</div>
</div>
</div>

There are some problems with your understanding of a class compared to an element in your javascript code.
You are trying to call javascript functions for an element on a query you made on a class. For example, in the query below, you're returning a class to the variable asianCuisine when you intended to return an element. The "." returns a class and a "#" returns an element. In html, an element's id attribute relates to the "#" and the element's class attribute relates to the "."
var asianCuisine = document.querySelector(".asian-cuisine");
var asianCuisine = document.querySelector("#asian-cuisine");
You must also remove hidden and active attributes at the proper time.
Try the code in the jsfiddle below. It should get you where you need to be for a good start on your project. Please do more research into html classes & ids and also how they related to javascript & css "#" vs. "."
Keep in mind that there are much easier ways to do this but if someone just gives some fancy code you won't learn anything.
Code that works ---> https://jsfiddle.net/larrygrobertson/y52m1ok6/54/
I have modified your code and attempted to keep as much as I could intact.
HTML:
<div class="home-container">
<div class="title">Restaurent Menu</div>
<div class="underline"></div>
<div class="menu-btns">
<button id="all" class="all">All Items</button>
<button id="asian" class="asian">Asian Cuisine</button>
<button id="chinese" class="chinese">Chinese Item</button>
<button id="desi" class="desi">Desi Item</button>
<button id="desert" class="desert">Desert Item</button>
</div>
<!-- item display Area -->
<div class="display-Area">
<!-- Asian Cuisine -->
<div id="asian-cuisine" class="asian-cuisine">
<div class="asianItem">
<div class="img"><img src="images/asian01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, sit.</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, aliquam?</div>
</div>
</div>
<div class="asianItem">
<div class="img"><img src="images/asian04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title Asian</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique, iste?</div>
</div>
</div>
</div>
<!--Chinese Item -->
<div id="chinese-cuisine" class="chinese-cuisine">
<div class="chineseItem">
<div class="img"><img src="images/chi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi03.jpeg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="chineseItem">
<div class="img"><img src="images/chi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
<!-- Desi Item -->
<div id="desi-cuisine" class="desi-cuisine">
<div class="desiItem">
<div class="img"><img src="images/desi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi03.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desiItem">
<div class="img"><img src="images/desi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
<!-- Desert Item -->
<div id="desert-cuisine" class="desert-cuisine">
<div class="desertIitem">
<div class="img"><img src="images/chi01.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">1st Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi02.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">2nd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi03.jpeg" alt=""></div>
<div class="des-Area">
<div class="item-title">3rd Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
<div class="desertIitem">
<div class="img"><img src="images/chi04.jpg" alt=""></div>
<div class="des-Area">
<div class="item-title">4th Title</div>
<div class="item-des">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti, tenetur?</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* working with the title */
.title {
text-align: center;
font-size: 4rem;
font-family: 'Poppins', sans-serif;
}
.underline {
position: absolute;
width: 600px;
height: 2px;
background-color: black;
left: 50%;
transform: translate(-50%);
}
/* working with the menu buttons */
.menu-btns {
text-align: center;
margin-top: 30px;
}
.menu-btns button {
padding: 10px 20px;
margin-left: 30px;
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.menu-btns button:hover {
background-color: chartreuse;
transition: 0.5s ease-out;
}
/* menu display area */
/* .display-Area{
margin-top: 60px;
margin-left: 10%;
display: grid;
grid-template-columns: auto auto;
} */
.display-Area img {
/* border: 1px solid black; */
width: 500px;
height: 300px;
border-radius: 5px;
box-shadow: 0px 0px 15px 0px black;
cursor: pointer;
}
.display-Area img:hover {
transform: scale(1.1);
transition: 0.5s ease-out;
}
/* display flex for every cuisine */
.asian-cuisine {
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.chinese-cuisine {
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.desi-cuisine {
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
.desert-cuisine {
/* border: 2px solid black; */
margin-top: 60px;
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s ease-out;
}
/* for the javascript manipulation class */
.active .asian-cuisine.chinese-cuisine.desert-cuisine.desi-cuisine {
display: flex;
justify-content: space-around;
gap: 20px;
flex-wrap: wrap;
align-items: center;
text-align: center;
transition: 0.5s all ease-out;
}
.hidden {
display: none;
transition: 0.5s all ease-out;
}
JAVASCRIPT:
// selecting menu btn DIV
var menuDiv = document.querySelectorAll(".menu-btns button");
console.log(menuDiv);
// selecting all menu button
var allMenu = document.querySelector("#all");
// selecting asian menu item
var asianMenu = document.querySelector("#asian");
// selecting chinese menu item
var chnsMenu = document.querySelector("#chinese");
// selecting desi menu item
var desiMenu = document.querySelector("#desi");
// selecting desert menu item
var desertMenu = document.querySelector("#desert");
// selecting the cuisine DIV
var asianCuisine = document.querySelector("#asian-cuisine");
var chineseCuisine = document.querySelector("#chinese-cuisine");
var desiCuisine = document.querySelector("#desi-cuisine");
var desertCuisine = document.querySelector("#desert-cuisine");
// add eventlister to all the buttons
for (let i = 0; i < menuDiv.length; i++) {
menuDiv[i].addEventListener("click", function(e) {
//e.target.preventDefault;
if (e.target == asianMenu) {
console.log(asianCuisine);
removeAllActive(asianCuisine);
removeAllHidden(asianCuisine);
asianCuisine.classList.add("active");
chineseCuisine.classList.add("hidden");
desiCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
}
if (e.target == chnsMenu) {
console.log("Kazi");
removeAllActive(chineseCuisine);
removeAllHidden(chineseCuisine);
chineseCuisine.classList.add("active");
desiCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if (e.target == desiMenu) {
console.log("Kazi");
removeAllActive(desiCuisine);
removeAllHidden(desiCuisine);
desiCuisine.classList.add("active");
chineseCuisine.classList.add("hidden");
desertCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if (e.target == desertMenu) {
console.log("Kazi");
removeAllActive(desertCuisine);
removeAllHidden(desertCuisine);
desertCuisine.classList.add("active");
chineseCuisine.classList.add("hidden");
desiCuisine.classList.add("hidden");
asianCuisine.classList.add("hidden");
}
if (e.target == allMenu) {
console.log("Kazi");
desertCuisine.classList.replace("hidden", "active");
chineseCuisine.classList.replace("hidden", "active");
desiCuisine.classList.replace("hidden", "active");
asianCuisine.classList.replace("hidden", "active");
}
})
}
function removeAllActive(e) {
// Get the first sibling to this button
var sibling = e.parentNode.firstChild;
// Loop through each sibling and remove active
while (sibling) {
if (sibling.nodeType === 1 && sibling !== 'elem') {
// Remove active class
sibling.classList.remove("active");
}
sibling = sibling.nextSibling
}
}
function removeAllHidden(e) {
// Get the first sibling to this button
var sibling = e.parentNode.firstChild;
// Loop through each sibling and remove active
while (sibling) {
if (sibling.nodeType === 1 && sibling !== 'elem') {
// Remove active class
sibling.classList.remove("hidden");
}
sibling = sibling.nextSibling
}
}

How to put content under fixed header or nav when opened in browser?

Hello I have problem when I make header using html and css. I have my header in fixed position, but the content is covered up my header. I want my content position under header when I run it. One more, I set header width 100% but it shift to the right so it doesn't cover up whole width on the screen.
[UPDATED]
<style>
#media(min-width: 468px) {
body{
background-color: aqua;
}
.container-1{
display: flex;
/*
align-items: flex-start; -->box 1 lebih sempit ke atas
align-items: flex-end; -->box 1 lebih sempit ke bawah
align-items: center; -->box 1 lebih sempit ke tengah (atas bawah)
flex-direction: column; -->flex box menjadi kolom
*/
}
.container-2{
display: flex;
/*
justify-content: flex-end;
justify-content: flex-start;
*/
justify-content: space-between; /*ada spasi diantara kotak*/
}
}
.container-3{
display: flex;
flex-wrap: wrap;
}
.container-1 div, .container-2 div, .container-3 div{
border:1px #000000 solid;
padding:10px;
}
.box-1{
flex:2;
order:2;
}
.box-2{
flex:1;
order:1;
}
.box-3{
flex: 1;
order:3;
}
.container-2-box{
flex-basis:20%;
}
.container-3-box{
flex-basis: 10%;
}
header{
padding: 0.5rem;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: beige;
position: fixed;
width: 100%;
margin:0;
}
.whole-container{
margin-top:2.0rem;
}
</style>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Flexbox</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<header>
<h1> Flexbox</h1>
</header>
<div class="whole-container">
<div class="container-1">
<div class="box-1">
<h3>Box 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-2">
<h3>Box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-3">
<h3>Box 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="container-2">
<div class="container-2-box">
<h3>Box 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-2-box">
<h3>Box 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-2-box">
<h3>Box 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="container-3">
<div class="container-3-box">
<h3>Box 7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 9</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 10</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 11</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container-3-box">
<h3>Box 12</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</body>
</html>

Without seeing your HTML code it is a bit guessing, but I'll give it a go.
Adding a position: fixed to an element will make it flow above the other content. The element is taken out of the document flow. So the overlapping is natural behavior.
To prevent the content to be hidden, you should add a padding to the parent of the boxes. I'm guessing that when you add the following code, it solves the problem
body {
padding-top: 3rem; /* should be at least the height of the header*/
}
The second question about the position of the header can be fixed by the following code:
/* option 1, add a left position:*/
header {
...
left: 0;
}
/* option 2, remove the width, use left and right position instead: */
header {
...
/* width: 100%; remove this line */
left: 0;
right: 0;
}

body {
margin: 0;
}
body {
margin: 0;
}
header {
padding: 0.5rem;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: beige;
position: fixed;
width: 100%;
/*not cover whole width*/
margin: 0;
}
.whole-container {
margin-top: 2.0rem;
}
<body>
<header>
0000
</header>
</body>

divs height and width are not fixed in carousel slider

Visit this link for code snippet https://codepen.io/arunkayathi/pen/dRPYzz
html
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>
<body>
<section id="projects">
<div class="content-box">
<div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
<h3>My Projects</h3>
<div class="content-title-underline"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="my-projects" class="owl-carousel owl-theme">
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1-NNfLpNtsFQY25z7A4u9pp2D_vJHTNU70RDupydx4i7BrMKYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus voluptatibus obcaecati temporibus, eligendi harum in iusto quasi dicta. Sunt tempora magnam eveniet, adipisci modi quos maxime sint expedita repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit Website</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid consequuntur . </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" target="_blank">visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQAOoZwRkgQ3KDjCJ2-GRtjKDc88iUqU6mJva17ym63D2W0XwnYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, omnis, </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint similique earum labore quos quidem ab! Quibusdam fugit consectetur tenetur odit, fuga amet aliquam architecto modi sequi ea, delectus, quisquam atque.</p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#projects" role="button">Visit site</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<body>
css
#projects {
background-color: #f65d52;
/* background-color: #2098D1;*/
}
#projects .content-title h3 {
color: #fff;
}
.project-info {
padding: 25px 0 25px 0;
color: #fff;
}
.project-info h5 {
font-size: 25px;
font-weight: 700;
}
.project-image img {
max-width: 480px !important;
max-height: 480px !important;
margin: 0 auto;
object-fit: contain;
}
.project-info-text {
line-height: 170%;
letter-spacing: 1px;
color: #fff !important;
font-weight: 500;
width: 70%;
margin: 0 auto;
}
.project-btn {
padding-top: 30px;
}
js
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true
});
});
Hello all,
I am having a problem with arranging divs in a carousel slider. As you can see from the above link the position of project title in each slid is changing.So can somebody help me in fixing the width and height of each divs, so that text and images will not overflow and in every slide all divs starts at same position instead of going up or down.

Your images need a fixed height otherwise things will get pushed down or up.
if you can't set a fixed height on the images then I suggest just a fixed position of the project title and description div. Maybe make it absolute of its parent.

Just simply use a fixed height for images:
.project-image img {
width: 100%;
max-width: 480px;
height: 480px;
margin: 0 auto;
}

Try this, set fixed height to your images.
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true
});
});
#projects {
background-color: #f65d52;
/*background-color: #2098D1;*/
}
#projects .content-title h3 {
color: #fff;
}
.project-info {
padding: 25px 0 25px 0;
color: #fff;
}
.project-info h5 {
font-size: 25px;
font-weight: 700;
}
.project-image img {
max-width: 480px !important;
max-height: 480px !important;
margin: 0 auto;
object-fit: contain;
height: 340px;
}
.project-info-text {
line-height: 170%;
letter-spacing: 1px;
color: #fff !important;
font-weight: 500;
width: 70%;
margin: 0 auto;
}
.project-btn {
padding-top: 30px;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>
<body>
<section id="projects">
<div class="content-box">
<div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
<h3>My Projects</h3>
<div class="content-title-underline"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="my-projects" class="owl-carousel owl-theme">
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1-NNfLpNtsFQY25z7A4u9pp2D_vJHTNU70RDupydx4i7BrMKYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus voluptatibus obcaecati temporibus, eligendi harum in iusto quasi dicta. Sunt tempora magnam eveniet, adipisci modi quos maxime sint expedita repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit Website</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid consequuntur . </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" target="_blank">visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQAOoZwRkgQ3KDjCJ2-GRtjKDc88iUqU6mJva17ym63D2W0XwnYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, omnis, </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint similique earum labore quos quidem ab! Quibusdam fugit consectetur tenetur odit, fuga amet aliquam architecto modi sequi ea, delectus, quisquam atque.</p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#projects" role="button">Visit site</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</body>

Add responsiveClass for set all slide responsive.
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true,
responsiveClass:true
});
});

How to fit iframe and div in 100% height combined?

I'm having difficult times to find a way to fit an iframe and div both with 100% full height on the page. Ideally I need to have a footer menu with 280px height and the iframe div needs to cover the rest of the page.
As far as I researched, it will be possible only with jQuery. I tried CSS Flex without success.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<header class="header-flex">
<div class="map">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div class="footer">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
</header>
</div>
</div>
</body>
</html>
Any idea?
Thanks

Working example with CSS Flexbox:
body,
html {
min-height: 100%;
height: 100%;
margin: 0;
}
.header-flex {
display: flex;
flex-direction: column;
height: 100%;
}
.map {
background: red;
flex: 1;
}
.footer {
background: blue;
}
<header class="header-flex">
<div class="map">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
<div class="footer">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
</div>
</header>

Add class when flexslider slide is active(flex-active-slide)

I'm trying to figure out on how i can modify the plugin to add class when the current slide is show or active. I'm using woothemes flexslider. The reason for this is so that i can add some animation(http://daneden.github.io/animate.css/) on the text when the current slider is active.
-HTML MARKUP-
<div class="flexslider">
<ul class="slides">
<li>
<div class="slide_content slide_copy1">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices lectus a arcu semper convallis. </p>
</div>
<img src="<?php bloginfo('template_url'); ?>/images/standard_slide2.jpg" />
</li>
<li>
<div class="slide_content slide_copy2">
<iframe src="//www.youtube.com/embed/XjWOqinu_q0" frameborder="0" allowfullscreen></iframe>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices lectus a arcu semper convallis. </p>
</div>
<img src="<?php bloginfo('template_url'); ?>/images/standard_slide3.jpg" />
</li>
</ul>
</div>
-CSS-
.slides li{position:relative}
.slide_content{position:absolute; }
.slide_copy1{top:50%; left:200px; width:500px; }
.slide_copy1 h2, .slide_copy1 h3{
text-transform:uppercase;
background-color:#0062ad;
display:inline-block;
padding:5px;
margin-bottom:3px;
color:white;
font-family: 'caviar_dreamsregular', sans-serif;
font-size:35px
}
.slide_copy1 p{font-family:'Calibri', sans-serif; color:#0062ad; background-color:white; padding:10px; line-height:20px;}
.slide_copy2{top:25%; right:75px; width:500px}
.slide_copy2 h2{
text-transform:uppercase;
color:#0062ad;
font-family:'caviar_dreamsregular', sans-serif;
font-size:35px;
margin-bottom:20px
}
.slide_copy2 p{
color:#0062ad;
font-family:'Calibri', sans-serif;
line-height:20px;
font-weight:bold
}
-JAVASCRIPT-
<script>
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
slideshow: true,
direction: "vertical",
slideshowSpeed: 4500,
animationSpeed: 2000,
mousewheel: false,
});
});
</script>

This is how I fixed mine:
after: function(slider){
var thumnails = $('.gallery-thumbnails').children();
thumnails.removeClass('active');
thumnails.eq(slider.currentSlide).addClass('active');
}

We Keep Coding

JavaScript is the programming language of the Web.

Owlcarousel2 "dots:true" not working? - javascript

Related

My Transition property did not working when I click one button from another

How to put content under fixed header or nav when opened in browser?

divs height and width are not fixed in carousel slider

How to fit iframe and div in 100% height combined?

Add class when flexslider slide is active(flex-active-slide)

Categories

Resources