I stated my problem in the title. I want to put the container(ID is about) div
below the image. I tried many methods, but now my brain is burned :D I think it's related to position. I would be very happy if you help. Thanks in advance. (Note: I will make the design responsive near completion. You'll get the best results if you work on a 1920x1080 screen.)
My Code:
window.addEventListener("scroll", function(){
var header = document.querySelector("nav");
header.classList.toggle("sticky",window.scrollY > 0);
})
.fs-xl {
font-size: 3rem;
}
.about{
position: absolute;
}
.loginbutton {
border: transparent;
background-color: transparent;
display: block !important;
}
.gotham-ultra {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
transform: translate(-50%, 85%) !important;
}
.mainpageanimate {
animation: mpa 1s ease-in-out forwards;
animation-delay: 1s;
opacity: 0;
}
.navbar {
transition: 0.25 ease;
}
.sticky {
background-color: #f8f9fa !important;
}
.sticky .container-fluid .collapse ul li a {
color: #212529 !important;
}
.sticky .container-fluid .collapse ul li .loginbutton {
display: none !important;
}
#keyframes mpa {
0% {
transform: translateY(70px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Yottalogy - Ana Sayfa</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.ico" type="image/x-icon" />
<link rel="stylesheet" href="http://fonts.cdnfonts.com/css/montserrat">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body class="bg-dark">
<nav id="header" class="navbar navbar-dark navbar-expand-lg fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" ria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav me-auto mx-auto my-1">
<li class="nav-item mx-3">
<a class="nav-link text-light" aria-current="page" href="#">Ana Sayfa</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link text-light" href="#">Dersler</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link text-light" href="#">Blog</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link text-light" href="#">Forum</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link text-light" href="#">Destek</a>
</li>
</ul>
<ul class="navbar-nav position-absolute end-0 me-5">
<li class="nav-item mx-3">
<button type="button" class="nav-link text-light loginbutton">Giriş Yap</button>
</li>
<li class="nav-item">
<button type="button" class="btn btn-success">Hesap Aç</button>
</li>
</ul>
</div>
</div>
</nav>
<img src="https://cdn.statusqueen.com/desktopwallpaper/thumbnail/city-Hd_4k_desktop_wallpaper_photos-512.jpg" class="img-fluid opacity-50 position-absolute">
<div class="position-relative mainpageanimate">
<p class="fs-xl text-light text-center position-absolute top-50 start-50 gotham-ultra">BİLGİNİN
EFENDİSİ OLMAK İÇİN ÇALIŞMANIN UŞAĞI OLMAK GEREKİR.</p>
</div>
<div id="about" class="container about">
<div class="row">
<div class="col-4">
<img src="" alt="">
</div>
<div class="col-8">
<h1 class="text-light">Lorem Ipsum</h1>
<p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet nisi nec lorem dictum
pellentesque. Integer semper risus tortor, in ornare nisi interdum nec. Cras sit amet orci eros.
Pellentesque pulvinar suscipit turpis, nec sodales turpis tincidunt quis. Integer a ipsum a ligula
pharetra maximus sed placerat lectus. Curabitur euismod a est vitae malesuada. Phasellus elementum
eleifend risus, non porttitor sapien dictum mattis.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">
</script>
</body>
</html>
There is a lot of position absolute elements in your page that doesn't seem to need it.
Put the image as background and remove the all absolute positioning styles.
You can use flex for centering elements instead.
Also if you want some section to be full height of screen, then use 100vh for that.
Do this and all the issues that burning your head will be gone.
Also if you're a beginner, then try creating some pages from scratch to get an idea how things work, rather that start with a template.
Related
I have a Bootstrap 4 card carousel with multiple items and when clicked on next or prev button there is some strange transition effect also in the mobile version buttons are not working.
when the card slides to the next or prev cards seem to be on top of one another or of a sec you can see that there are two cards in transiton.
here is my code
<div id="carouselExampleIndicators" class="carousel slide" data-ride=" false">
<div class="carousel-inner py-5">
<div class="carousel-item active ">
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
<div class="col-md-4 newscard">
<div class="card card-body">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span> <i class="bi bi-chevron-left"></i>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span> <i class="bi bi-chevron-right"></i>
</a>
</div>
CSS
border: 5px solid red !important;
border-radius: 43px;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
padding: .8rem;
height: 480px;
}
.card-img-top .img-fluid {
border-radius: 30px !important;
margin-bottom: 1.5rem;
}
.newscard .card-body h2{
color: var(--secondaryColor);
text-align: left;
font-size: 1.2rem;
}
.newscard .card-body p{
text-align: left;
font-size: 0.7rem;
}
.bi-chevron-left::before, .bi-chevron-right::before {
content: "\f284";
color: white;
opacity: 1;
background: var(--maincolor);
padding: 5px 15px;
border-radius: 50px;
position: absolute;
}
.bi-chevron-left::before {
left: -10px;
}
.bi-chevron-right::before{
right: -10px !important;
}
.carousel-control-prev, .carousel-control-next{
font-size: 1.5rem;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
background: transparent no-repeat center center !important;
}
.carousel-control-next, .carousel-control-prev{
opacity: 1 !important;
}
.carousel-item.active {
display: flex !important;
}
#media (max-width: 768px) {
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex !important;
}
}
/* display 3 */
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.333%);
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}
}
Jquery and JS
$('#recipeCarousel').carousel({
interval :5000
});
$('.carousel .carousel-item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
<script>
(function($) {
"use strict";
$('.next').click(function() {
$('.carousel').carousel('next');
return false;
});
$('.prev').click(function() {
$('.carousel').carousel('prev');
return false;
});
})
</script>
it may be possibility that you have linked the cdn of other than Bootstrap 4 or you can also try Owl Carousel for responsive layout
Bootstrap 4 Carousel code
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<!-- items or elements that will be used in carousel -->
</div>
<div class="carousel-item">
<!-- items or elements that will be used in carousel -->
</div>
<div class="carousel-item">
<!-- items or elements that will be used in carousel -->
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
please check your cdn or compare your code with this one.
I'm suggesting you to use the Boostrap 5 which is upgrated version
I am using bootstrap 4 with CDN.
The problem is that I have a boostrap4 carousel (taken from their official site) and it works great, but when I run a js code the carousel images disappear.
this is the carousel code and it works great
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class='col-7 mx-auto'>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ-yiYswFmMD0pScf5VgsHoOmITBngv2NlYeg&usqp=CAU" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRs8rzKLMYWBvde8Rv7xpJszIb3bvcOd7N4eQ&usqp=CAU" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://blog.es.playstation.com/tachyon/sites/14/2020/09/50375482006_7c978f60f7_o.jpg?resize=1088,612&crop_strategy=smart" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
But when I click on a button in another div, the carousel images disappear and only the arrows remain on the sides
This is what the other code does:
var jsaccordion = {
init: function(target) {
var headers = $("." + target + " .accordion-btn");
if (headers.length) {
headers.on('click', jsaccordion.select);
}
},
select: function() {
var tar = $(this).closest('.accordion-container');
$('#shared-container').remove();
if (tar.hasClass('active')) {
tar.removeClass('active')
} else {
$('.active').removeClass('active')
tar.addClass('active');
var targText = tar.find('.accordion-text').html();
var sharedCont = "<div id='shared-container'>" + targText + "</div>";
if($('body').width() > 768){
tar = tar.parent();
}
tar.after(sharedCont);
}
}
}
window.addEventListener('load', function() {
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
}
.accordion-container {
position: relative;
}
.accordion-container button::before {
content: '+' !important;
}
.accordion-container.active button::before {
content: '-' !important;
}
.accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
.accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
text-align: center;
}
#shared-container p {
margin: 0;
}
#media (max-width : 768px){
.col-6{
max-width: 100%;
min-width: 100%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Testing testing testing</h1>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class='row'>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis
convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
</div>
</div>
</div>
</div>
I tried with the js code in the same file and also from another file, but the same thing keeps happening
The problem is that I have a boostrap4 carousel (taken from their
official site) and it works great, but when I run a js code the
carousel images disappear.
Firstly you need to include boostrap libs, not only the css.
Instantiate the carousel with:
$('.carousel').carousel();
Finally, if you need to toogle active between the accordions this line:
$('.active').removeClass('active')
needs to be changed in:
tar.siblings().removeClass('active'); // toogle active state....
The snippet:
$(function () {
$('.carousel').carousel();
var jsaccordion = {
init: function (target) {
var headers = $("." + target + " .accordion-btn");
if (headers.length) {
headers.on('click', jsaccordion.select);
}
},
select: function () {
var tar = $(this).closest('.accordion-container');
$('#shared-container').remove();
if (tar.hasClass('active')) {
tar.removeClass('active')
} else {
tar.siblings().removeClass('active');
tar.addClass('active');
var targText = tar.find('.accordion-text').html();
var sharedCont = "<div id='shared-container'>" + targText + "</div>";
if ($('body').width() > 768) {
tar = tar.parent();
}
tar.after(sharedCont);
}
}
}
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
}
.accordion-container {
position: relative;
}
.accordion-container button::before {
content: '+' !important;
}
.accordion-container.active button::before {
content: '-' !important;
}
.accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
.accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
text-align: center;
}
#shared-container p {
margin: 0;
}
#media (max-width: 768px) {
.col-6 {
max-width: 100%;
min-width: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class='col-7 mx-auto'>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ-yiYswFmMD0pScf5VgsHoOmITBngv2NlYeg&usqp=CAU"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRs8rzKLMYWBvde8Rv7xpJszIb3bvcOd7N4eQ&usqp=CAU"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://blog.es.playstation.com/tachyon/sites/14/2020/09/50375482006_7c978f60f7_o.jpg?resize=1088,612&crop_strategy=smart"
class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class='row'>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas
pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis
natoque penatibus et magnis. Duis convallis
convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet.
Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium
lectus quam id leo.</p>
</div>
</div>
</div>
</div>
I'm working on tabs. Multiple tabs on the same page are working fine now I'm trying to add tab inside the tab. Nested Sub tabs default, current active class, is not coming i have tried using $(this).parent() and $(this).closest() in jquery but not achieve the result.Here I was not used any id's because I want multiple tabs on the same page which is coming dynamically. Can anyone point me in the right direction nested tab default active tab and I have added the current class in HTML but because of for each loop current class is removing. How to target only the current parent tab, not sub nested tabs.
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var $mainContainer = $(this);
var $menuContainer = $(this).find('.at-tabs-nav__item');
var $label = $(this).find('.at-tab-__title_text');
var $content = $(this).find('.at-tabs-content__item');
$content.hide();
//adding data attribute
$label.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$($menuContainer[0], $label[0]).addClass('current');
$($content[0]).show();
//Display current tab content
$(this).find('.at-tabs-nav__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').find('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-tab-__title_text').addClass('current');
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').hide();
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show()
});
});
}
atscTabs();
.tab-warp {
width: 500px;
margin: 0 auto;
}
.at-tabs-nav__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tabs-nav {
display: flex;
padding: 28px 0px;
}
a.at-tabs-title {
text-decoration: none;
font-size: 18px;
color: black;
}
.current a.at-tabs-title {
color: #fff;
}
.at-tabs-nav__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-tabs-content {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
/* Vertial tabs */
.at-tabs.at-vertical {
display: flex;
}
.at-vertical .at-tabs-nav {
display: flex;
flex-direction: column;
padding: 28px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tab-warp">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Sub Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sius, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adnec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
click on tabs and again come back to the first tab then nested tab current class is not showing.
The problem is that the find method will find matches in the whole DOM subtree, so when you apply it to a top level tab, it will also match items in the subtabs.
You can solve this by using the children method instead -- sometimes chained to get grandchildren. That way you control at which depth in the DOM tree you want to inspect and modify things.
So change this:
$(this).find('.at-tabs-nav__item').click(function(ele) {
$(this).closest('.at-tabs').find('.current').removeClass('current');
// ...
to:
$(this).children('.at-tabs-nav').children('.at-tabs-nav__item').click(function(ele) {
$(this).closest('.at-tabs').children('.at-tabs-nav')
.children('.current').removeClass('current')
.children('.current').removeClass('current');
// ...
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var $mainContainer = $(this);
var $menuContainer = $(this).find('.at-tabs-nav__item');
var $label = $(this).find('.at-tab-__title_text');
var $content = $(this).find('.at-tabs-content__item');
$content.hide();
//adding data attribute
$label.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$($menuContainer[0], $label[0]).addClass('current');
$($content[0]).show();
//Display current tab content
$(this).children('.at-tabs-nav').children('.at-tabs-nav__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tabs-nav').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-tab-__title_text').addClass('current');
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').hide();
$(this).closest('.at-tabs').find('.at-tabs-content:first > .at-tabs-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.tab-warp {
width: 500px;
margin: 0 auto;
}
.at-tabs-nav__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tabs-nav {
display: flex;
padding: 28px 0px;
}
a.at-tabs-title {
text-decoration: none;
font-size: 18px;
color: black;
}
.current a.at-tabs-title {
color: #fff;
}
.at-tabs-nav__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-tabs-content {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
/* Vertial tabs */
.at-tabs.at-vertical {
display: flex;
}
.at-vertical .at-tabs-nav {
display: flex;
flex-direction: column;
padding: 28px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-warp">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current">Sub Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text">Sub Tab #3</span>
</div>
</a>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sius, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
</div>
<div class="at-tabs-content__item">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item">
I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adnec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>
Sorry for the bad question title but I could'nt find a better one that suite my need..
So far I have a situation like this where a specific div is hidden when the page is on a small device and so far the behaviour is correct, when I click on the hamburger button the div it shows correctly, but the problem is: when the page is loaded on a larger screen that div is hidden, I can't find a way to make it show on a larger screen.
<body style="padding-top: 70px;">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#formOra" aria-expanded="false" aria-controls="form">
<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="#">Piant.ino</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<!-- <a class="navbar-brand" href="#">
<img alt="Brand" src="plant.png">
</a> -->
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<form class="form collapse" id="formOra">
<div class="form-group">
<div class="col-lg-1 col-md-2 col-sm-2 col-xs-3">
<div class="panel panel-default">
<div class="panel-body">
<label class="checkbox-inline">
<input type="checkbox" name="inlinecheckboxOptions" id="inlinecheckbox0" value="option1" onclick="salvaSettings();">00
</label>
</div>
</div>
</div>
.
.
.
.
.
</div>
</form>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec efficitur tellus. Etiam nulla leo, hendrerit eget porta vitae, placerat sit amet neque. Mauris at efficitur quam. Aliquam ac ante vitae erat tincidunt lacinia eget quis
</p>
</div>
</body>
EDIT:
It is alright also if I can have the button always shown on any device size.
This is something you can solve by CSS media queries which you can control on and assign different styles based on the screen size.
You can read also about responsive web desgin
So yours will be something like this:
#media (max-width: 600px) {
#myDiv {
display: none;
}
}
That's because Bootstrap hides the hamburger button by default on screens with width greater than 768px. If you don't want such a behavior you can disable it with a media query like this:
#media(min-width: 768px){
.navbar-toggle{
display: inline-block !important;
position: absolute;
right: 0;
}
}
i think I found a better solution in the meantime.. By simply overriding the css:
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
JSFIDDLE
I am using Bootstrap 3, navbar-fixed-top class in particular. I have two menus that I fix to top with JQ as shown below. I see a weird bug only on short pages - only when the page height is almost exactly as long as page content: when I try to scroll, the page flickers and I am forced back to top. This happens with hand scroll or by using the scroll wheel. As a result, I can never see the last copyright line. See video of this.
EDITED:
When I remove this line $('nav').addClass('navbar-fixed-top'); the issue goes away (but obviously I need that line). How do I fix this?
Also, when class navbar-fixed-top is applied to nav, the scroll happens smoothly (hence, I don't see the bug on long pages). When it's not applied - the bug comes back.
var navFixStart;
var subFixStart;
var xs = 480;
var lg = 1200;
var mobileStart = (992 - 15);
if ($('body').hasClass('min')) {
navFixStart = 40;
subFixStart = 40;
} else {
navFixStart = 0;
subFixStart = 160;
}
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).width() < mobileStart) {
// stuff
} else {
if ($(window).scrollTop() > navFixStart) {
$('nav').addClass('navbar-fixed-top'); // problem line
} else {
$('nav').removeClass('navbar-fixed-top');
}
}
});
$(window).on('load resize', function() {
if ($(window).width() < mobileStart) {
//mobile stuff
} else {
$('nav').removeClass('navbar-inverse').removeClass('navbar-fixed-top');
$('nav>div').removeClass("container-fluid").addClass("container");
if ($(window).scrollTop() > navFixStart) {
$('nav').addClass('navbar-fixed-top');
} else {
$('nav').removeClass('navbar-fixed-top');
}
}
});
});
/* Nav */
nav {
border: none !important;
padding-top: 15px;
z-index: 1000;
-webkit-transition: 0.3s all ease;
-moz-transition: 0.3s all ease;
-ms-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
transition: 0.3s all ease;
}
nav div>ul>li>a:link {
padding: 20px;
}
nav.navbar-fixed-top {
background-color: rgba(244, 242, 239, 0.95);
}
nav.navbar-fixed-top.shad-bottom,
.subnav {
box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
}
.navbar-brand {
width: 145px;
margin-left: 15px;
margin-top: -5px;
}
.navbar-fixed-top .navbar-brand {
width: 115px;
}
.navbar-fixed-top {
margin-top: 0 !important;
padding-top: 0 !important;
}
.navbar-fixed-top .navbar-brand>img {
height: auto;
}
.navbar-fixed-top .navbar-brand {
margin-top: 5px;
}
.navbar-toggle {
padding: 9px;
}
.navbar-toggle .icon-bar {
width: 20px;
}
nav .dropdown .dropdown-menu {
border: 0;
}
nav .dropdown .dropdown-menu a:link {
line-height: 32px;
}
nav .navbar-collapse {
padding: 0;
}
nav .navbar-collapse.collapsing,
nav .navbar-collapse.in {
padding-right: 15px;
padding-left: 15px;
}
.navbar-collapse .nav {
position: relative;
top: -7px;
}
.navbar-fixed-top .navbar-collapse .nav {
position: static;
}
.navbar-nav>li>.dropdown-menu {
margin-top: 7px;
}
.navbar-fixed-top .navbar-nav>li>.dropdown-menu {
margin-top: inherit;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="top" ontouchstart="">
<nav class="navbar navbar-default shad-bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li>Support
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid intro">
<div class="container">
<div class="row">
<div class="no-pad">
<h1>Support</h1>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end container-fluid -->
<div class="container-fluid block">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet blandit lectus, quis auctor ante posuere sit amet. Fusce venenatis, arcu non viverra pulvinar, augue metus laoreet leo, sed convallis orci nisi vitae turpis. Cras sed euismod
ligula. Sed id nulla elit. Aenean dapibus condimentum ex nec fermentum. Aliquam accumsan velit in dui sagittis cursus. Vestibulum id scelerisque risus, at efficitur turpis.
<p>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end container-fluid -->
<div class="container-fluid block block-dark">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet blandit lectus, quis auctor ante posuere sit amet. Fusce venenatis, arcu non viverra pulvinar, augue metus laoreet leo, sed convallis orci nisi vitae turpis. Cras sed euismod
ligula. Sed id nulla elit. Aenean dapibus condimentum ex nec fermentum. Aliquam accumsan velit in dui sagittis cursus. Vestibulum id scelerisque risus, at efficitur turpis.
<p>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end container-fluid -->
<div class="container-fluid footer">
<div class="container no-pad">
<footer class="row">
<div class="col-sm-12 text-center visible-xs" style="background-color:#45555f;">
<div class="to-top"><span class="glyphicon glyphicon-chevron-up"></span>back to top
</div>
</div>
<!-- end col -->
<div class="col-sm-12 text-center visible-xs">
<div class="pad-bottom-md pad-top-sm">Products | Services | News | Jobs | Company
</div>
</div>
<!-- end col -->
<div class="col-sm-4">
<h6>Company Name</h6>
<address>
Address 1<br>
Address 2<br>
Address 3<br>
<span>555-555-5555</span>
</address>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4 pad-bottom-md">
<h6>Connect</h6>
<div class="social"> <span class="mu-icon-twitter"></span> <span class="mu-icon-linkedin2"></span> <span class="mu-icon-youtube"></span>
</div>
<!-- end social -->
</div>
<div class="col-sm-12 pad-bottom-md">
<div class="copy">© 2016 Company Name, LLC. <span style="white-space:nowrap;">Privacy | Terms | Disclaimer</span>
</div>
</div>
</footer>
</div>
<!-- end container -->
</div>
<!-- end container-fluid -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script-prototype-only.js"></script>
</body>
</html>
JS
$(window).scroll(function () {
if ($(window).width() < mobileStart) {
$('.subnav').removeClass('navbar-fixed-top');
} else {
if ($(window).scrollTop() > navFixStart) {
$('nav').addClass('navbar-fixed-top');
if ($(window).scrollTop() > subFixStart) {
$('.subnav').addClass('navbar-fixed-top'); // bugger!!!
} else if ($(window).scrollTop() <= subFixStart) {
$('.subnav').removeClass('navbar-fixed-top');
}
} else {
// some more stuff
}
}
});
<div class="container-fluid block">
You have to add padding-top to this div equal to the height of your subnav element when the subnav is fixed.
For example if your subnav has 50px height your code may look like this:
$(window).scroll(function () {
if ($(window).width() < mobileStart) {
$('.subnav').removeClass('navbar-fixed-top');
} else {
if ($(window).scrollTop() > navFixStart) {
$('nav').addClass('navbar-fixed-top');
if ($(window).scrollTop() > subFixStart) {
$('.subnav').addClass('navbar-fixed-top');
$('.container-fluid.block').css('padding-top', '50px');
} else if ($(window).scrollTop() <= subFixStart) {
$('.subnav').removeClass('navbar-fixed-top');
$('.container-fluid.block').css('padding-top', '0');
}
} else {
// some more stuff
}
}
});
If your block with form already has padding-top (for example 20px) you have to add 50px to it (so in javascript change 50px to 70px and 0 to 20px)