i am making a application layout.
my vertical panel loads in expanded format i want to load as collapsed vertical panel like-
here is my codepen link for code -https://codepen.io/anuj53214/pen/abNRrGO
vertical menu should look like this on load
(i tried with on load jquery event that is written in on click but this worked like first expand then collapse on page laod)
In order to get your result it is enough to trigger the click event at the end of its definition:
$(".rad-toggle-btn").on('click', function() {
$(".rad-sidebar").toggleClass("rad-nav-min");
$(".rad-body-wrapper").toggleClass("rad-nav-min");
}).trigger('click');
^^^^^^^^^^^^^^^^^^
$(".rad-toggle-btn").on('click', function() {
$(".rad-sidebar").toggleClass("rad-nav-min");
$(".rad-body-wrapper").toggleClass("rad-nav-min");
}).trigger('click');
*{box-sizing:border-box}body{background:#f3f3f4;line-height:normal;font-size:16px;font-family:sans-serif}body::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#f5f5f5}body::-webkit-scrollbar{width:10px;background-color:#407396}body::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#407396}a{text-decoration:none}a:hover{text-decoration:none}.rad-navigation{position:fixed;left:0;right:0;top:0;height:50px;box-shadow:0 0 9px 4px rgba(0,0,0,.1),0 -5px 2px 2px rgba(0,0,0,.1);background:#fff;z-index:10000}.links{margin-right:30px;position:relative}.links li{list-style:none;position:relative;margin:10px;display:inline-block}.rad-dropmenu-item.active{display:block;-webkit-animation:flipInX .3s ease}.rad-logo-container{width:225px;text-align:center;height:50px;float:left;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-top-nav-container{float:right;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-logo,.rad-toggle-btn{text-decoration:none;position:relative;height:50px;line-height:50px;padding:0 15px;font-size:22px;font-weight:900;text-transform:uppercase;text-decoration:none;color:#222533;display:inline-block}.rad-toggle-btn:hover{background:#9494b8}.rad-menu-item{position:relative;padding:0 10px;line-height:30px;height:30px;color:#89949b;z-index:5}.rad-menu-badge{position:absolute;min-width:20px;min-height:20px;line-height:20px;font-weight:700;color:#fff;border-radius:100%;font-size:12px;background:#e94b3b;box-shadow:.5px .2px 1px rgba(0,0,0,.5);display:inline-block;text-align:center;top:-10px;z-index:1}.rad-dropmenu-item{position:absolute;right:0;top:40px;min-width:250px;background:#fff;border-top:5px solid #2f4050;border-radius:2px;box-shadow:0 0 5px rgba(0,0,0,.15);display:none}.rad-dropmenu-item:before{content:"";position:absolute;border-width:0 10px 10px 10px;border-style:solid;border-color:#2f4050 transparent;top:-14px;right:8px}.rad-dropmenu-footer,.rad-dropmenu-header{display:block!important;background:#f9fafb;text-transform:uppercase;font-weight:700;font-size:12px;margin:0!important;padding:6px;text-align:center}.rad-dropmenu-footer>a{color:#98a0a3;line-height:12px;text-decoration:none}.rad-dropmenu-header{border-bottom:1px solid #f2f2f2}.rad-dropmenu-header>a{color:#98a0a3;line-height:12px;text-decoration:none}.rad-dropmenu-footer{border-top:1px solid #f2f2f2}.rad-sidebar{z-index:9999;position:fixed;background:#2f4050;width:225px;height:100vh;top:50px;left:0;box-shadow:0 0 4px rgba(0,0,0,.14),2px 4px 8px rgba(0,0,0,.28);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-sidebar li{text-align:left;height:50px}.rad-sidebar li a{text-decoration:none;height:50px;display:block;color:#fff}.rad-sidebar li a i{position:relative;width:50px;height:50px;line-height:50px;text-align:center}.rad-sidebar li a i:before{z-index:10;position:relative}.rad-sidebar li a>span{display:inline-block;padding-left:10px;-webkit-transition:all .2s ease-in-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.rad-sidebar li:hover{background:#263340}.rad-sidebar li:hover .icon-bg{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.icon-bg{position:absolute;left:0;top:0;bottom:0;z-index:1;width:100%;-webkit-transform:translate3d(-47px,0,0);transform:translate3d(-47px,0,0);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-bg-primary{background:#1c7ebb}.rad-bg-success{background:#23ae89}.rad-bg-danger{background:#e94b3b}.rad-bg-warning{background:#f98e33}.rad-bg-violet{background:#6a55c2}.rad-sidebar.rad-nav-min{width:50px!important}.rad-sidebar.rad-nav-min .rad-sidebar-item{-webkit-transform:translate3d(-200px,0,0);transform:translate3d(-200px,0,0)}.rad-sidebar.rad-nav-min .icon-bg{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.rad-sidebar.rad-nav-min .icon-bg:hover{opacity:.4}.rad-body-wrapper{position:absolute;left:250px;top:75px;width:auto;right:0;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rad-body-wrapper.rad-nav-min{left:50px}.rad-chart{height:250px}#-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}#media screen and (max-width:850px){.rad-navigation{height:100px}.rad-logo-container{display:block;float:none;width:100%;border-bottom:1px solid #f2f2f2}.rad-top-nav-container{display:block;float:none;height:50px;font-size:12px;background:#fff}.rad-menu-badge{font-size:10px;min-width:15px;min-height:15px;line-height:15px}.links{float:right}.rad-sidebar{top:100px}.rad-sidebar.rad-nav-min{-webkit-transform:translate3d(-200px,0,0);transform:translate3d(-200px,0,0)}.rad-body-wrapper{top:125px;position:relative}.rad-body-wrapper.rad-nav-min{left:0}}.panel{box-shadow:0 2px 5px 0 rgba(0,0,0,.26);border-radius:0!important}.panel-heading{background:#2f4050!important;border-radius:0;padding:15px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}.panel-heading .panel-title{text-transform:uppercase;font-weight:600;font-size:12px;color:#dce0f3}#areaChart path[AttributesStyle]{fill:#39c7aa;stroke:none;fill-opacity:1}.menu{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;justify-content:space-around;max-width:700px;margin-left:auto;margin-right:auto}.menu a{color:#fff;margin:10px;padding:20px;text-align:center;font-size:14px;text-decoration:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);border-radius:0!important;background-color:#2f4050!important;-webkit-transition:all ease-in-out 350ms;transition:all ease-in-out 350ms}.menu a:hover{color:#9ab9ce;background-color:#4b667f!important}.overlay{height:0%;width:100%;position:fixed;z-index:1;top:0;left:0;background-color:#000;background-color:rgba(0,0,0,.99);overflow-y:scroll;-webkit-transition:.5s;transition:.5s}.overlay::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px;background-color:#f5f5f5}.overlay::-webkit-scrollbar{width:10px;background-color:#407396}.overlay::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#407396}.overlay-content{position:relative;top:25%;width:100%;text-align:center;margin-top:30px}.overlay a{padding:8px;text-decoration:none;font-size:36px;color:#818181;display:block;-webkit-transition:.3s;transition:.3s}.overlay a:focus,.overlay a:hover{color:#f1f1f1}.overlay .closebtn{position:absolute;top:100px;right:45px;font-size:60px}.overlay-c{max-width:300px;margin-left:auto;margin-right:auto}.field-container{-webkit-box-flex:1;flex:1 100%;margin-bottom:20px;margin-top:-1px;border-width:0 0 1px 0;border-style:solid;border-color:#407396}.field-container .input{width:100%;margin:0;padding:0 6px;border:none;outline:0;background:0 0;color:#fff}.field-container .text-area{min-height:38px;height:50px;margin:2px 0 3px;overflow-y:scroll;resize:none;-webkit-transition:height .1s;transition:height .1s}.field-container :-moz-placeholder,.field-container :-ms-placeholder,.field-container ::-webkit-input-placeholder{color:#407396}.button-container{display:-webkit-box;display:flex;margin:10px}.button-container a:hover{color:#fff}.button-container a{color:#407396;margin:5px;margin-right:40px;font-size:20px;text-decoration:none;-webkit-transition:all ease-in-out 350ms;transition:all ease-in-out 350ms}p{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;color:#fff;font-size:40px;padding-bottom:50px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container"><a class="rad-logo" href="#">p.m.s</a><a class="rad-toggle-btn pull-right" href="#"><i class="fa fa-bars"></i></a></div>
<div class="rad-top-nav-container">
<ul class="links">
<li><a class="rad-menu-item" href="#"><i class="fa fa-comment-o"> </i></a></li>
<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-envelope-o"><span class="rad-menu-badge">3</span></i></a>
<ul class="rad-dropmenu-item">
<li class="rad-dropmenu-header">Your Notifications</li>
<li class="rad-notification-item"><a class="rad-notification-content" href="#"></a></li>
<li class="rad-dropmenu-footer">See all notifications</li>
</ul>
</li>
<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-bell-o"><span class="rad-menu-badge">49</span></i></a>
<ul class="rad-dropmenu-item">
<li class="rad-dropmenu-header">Your Alerts</li>
<li class="rad-notification-item"><a class="rad-notification-content" href="#"></a></li>
<li class="rad-dropmenu-footer">See all alerts</li>
</ul>
</li>
<li><a class="rad-menu-item" href="#"><i class="fa fa-sign-out"> </i></a></li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar">
<ul>
<li><a class="inbox" href="#"><i class="fa fa-dashboard"><span class="icon-bg rad-bg-success"></span></i><span class="rad-sidebar-item">Dashboard</span></a></li>
<li><i class="fa fa-wrench"><span class="icon-bg rad-bg-violet"></span></i><span class="rad-sidebar-item">Settings</span></li>
</ul>
</nav>
</aside>
<main>
<section>
<div class="rad-body-wrapper">
<div class="container-fluid">
<div class="menu">ADD TEAM MEMBERCREATE PROJECTSET TASK</div>
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">team members</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">projects</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">event notification</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">project task progress</h3>
</div>
<div class="panel-body">
<div class="rad-chart" id="areaChart"></div>
</div>
</div>
</div>
<!-- here-->
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">number of project</h3>
</div>
<div class="panel-body">
<div class="rad-chart" id="donutChart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">project stage</h3>
</div>
<div class="panel-body">
<div class="rad-chart" id="barChart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
Related
I am deploying my webiste to production and running the Lighthouse audit. The audit is throwing an error when running the audit. It is tell me that the "The viewport size of 373px does not match the window size of 360px". I have validated my HTML and CSS but have not found the specific error. I am not sure if it is in the .style.width of my side nav bars.
Javascript:
function openNav() {
document.getElementById("mySidenav").style.width = "150px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
function openNav2() {
document.getElementById("mySidenav2").style.width = "150px";
}
function closeNav2() {
document.getElementById("mySidenav2").style.width = "0";
}
function openNav3() {
document.getElementById("mySidenav3").style.width = "150px";
}
function closeNav3() {
document.getElementById("mySidenav3").style.width = "0";
}
CSS
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.imgHoover:hover {
box-shadow: 1px 3px 5px rgba(0,0,0,0.1);
}
.imgHoover {
padding: 10px 16px;
margin: 10px 0;
/*box-shadow: 2px 2px grey;*/
border-bottom: 1px solid #fafafa;
/*border: 5px solid #fab95b;*/
}
#form1 {
padding: 10px;
border: 1px solid #666;
background: #fff;
display: none;
justify-content: center;
}
#form2 {
padding: 10px;
border: 1px solid #666;
background: #fff;
justify-content: center;
}
/* card center */
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
/*box-shadow: 5px 5px grey*/
}
.card:hover {
box-shadow: 4px 8px 12px rgba(0,0,0,0.1);
}
/* side-nav */
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #818181;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
html{overflow-x: hidden;}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="manifest" href="manifest.json">
<!-- ios support -->
<link rel="apple-touch-icon" href="images/logo/icon-96x96.png">
<meta name="apple-mobile-web-app-status-bar" content="#292927">
<meta name="theme-color" content="#292927">
<title>Home-Online Supplements</title>
</head>
<body>
<nav class="navbar navbar-light" style="background-color: #b8dff0;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="images/logo/logo.png" alt="" width="30" height="24" class="d-inline-block align-top">
NextGen-Fitness</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#" id="formButton">Login</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Categories
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Protein</a></li>
<li><a class="dropdown-item" href="#">Vitamins</a></li>
<li><a class="dropdown-item" href="#">Preworkout</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html" tabindex="-1" >Contact Us</a>
</li>
</ul>
<a class="nav-link text-left" href="#" id="userRegistered" style="color:black;" ></a>
<!-- <form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark" type="submit">Search</button>
</form> -->
</div>
</div>
</nav>
<div class="center-block">
<form id="form1">
<input type="text" name="firstName" placeholder="First Name" id="fname">
<br><br>
<input type="text" name="lastName" placeholder="Last Name" id="lname">
<br><br>
<input type="text" name="email" placeholder="Email" id="email">
<br><br>
<button type="button" class="btn btn-dark" id="btnUser" onclick="funcUser()">Login</button>
</form>
</div>
<!--Side Navbar #1 -->
<div id="mySidenav" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/fatburner-logo2.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--Side Navbar #2 -->
<div id="mySidenav2" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/preworkout-logo.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/preworkout-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--Side Navbar #3 -->
<div id="mySidenav3" class="sidenav">
×
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/protein-logo.png" alt class="img-fluid" style="width:100%">
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-1.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-2.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-3.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/protein-4.png" alt="fatBurner" style="width:100%" class="imgHoover">
</div>
</div>
</div>
</div>
About
</div>
<!--<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>-->
<div class="bg-light">
<div class="container">
<div class="row align-items-center no-gutter">
<div class="col-xl-5 col-lg-6 col-md-12">
<div class="py-5 py-lg-0">
<a class="btn btn-ligth" style="background-color: #fab95b;" href="products.html">Browse all Products</a>
<!--<a class="btn btn-light" style="background-color: #fab95b;">Are you a Store Owner?</a>-->
</div>
</div>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/gym-page.jpg" alt class="img-fluid">
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="img-area">
<div class="row">
<div class="column">
<img src="images/fatburner-logo2.png" alt="fatBurner" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav()">Fatburner</a>
</div>
<div class="column">
<img src="images/preworkout-logo.png" alt="preWorkout" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav2()">Preworkout</a>
</div>
<div class="column">
<img src="images/protein-logo2.png" alt="protein" style="width:100%" class="imgHoover">
<a class="nav-link" href="#!" onclick="openNav3()">Protein</a>
</div>
</div>
</div>
</div>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/supplement-frontpage.jpg" alt class="img-fluid" style="width:100%">
</div>
<br>
<div class="container">
<p class="text-black-50 mb-4 lead">
" Hand-picked ingredients and expertly crafted products,
designed for the modern athletes and trainers."
</p>
</div>
<br>
<div class="col-xl-7 col-lg-6 col-md-12 text-lg-rights text-center">
<img src="images/protein-frontpage.png" alt class="img-fluid" style="width:100%">
</div>
<br>
<div class="container">
<p class="text-black-50 mb-4 lead">
Benefits Of Protein Supplementation<br>
1.Fast digesting and more easily absorbed than other protein sources<br>
2.Increased muscle mass, especially when taken post-workout<br>
3.Improved appetite control, and greater feelings of fullness when dieting<br>
</p>
</div>
<div class="footer">
<div class="container">
<div class="row align-items-center no-gutters border-top py-2">
<div class="col-md-6 col-12">
<span> 2021 NextGen. All Rights Reserved</span>
</div>
<div class="col-12 col-md-6">
<nav class="nav justify-content-center justify-content-md-end">
<a class="nav-link active pl-0" href="#!">Privacy</a>
<a class="nav-link" href="#!">Terms</a>
<a class="nav-link" href="#!">Feedback</a>
</nav>
</div>
</div>
</div>
</div>
<script src="js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="js/scripts.js" ></script>
</body>
</html>
You could try docking the devtools at the bottom, or in a different window, as in this answer. Sadly, this is still an issue in 2021.
I am assigning a href links to 12 anchor tags out of 12 only the first 6 are getting assigned and the other 6 are not getting assigned. anchor tags are in the owl carousel. Following is the code
$("#australia").on("click",function(e) {
$("#link1").attr("href", "aust");
$("#link2").attr("href", "aust");
$("#link3").attr("href", "aust");
$("#link4").attr("href", "aust");
$("#link5").attr("href", "aust");
$("#link6").attr("href", "aust");
$("#link7").attr("href", "aust");
$("#link8").attr("href", "aust");
$("#link9").attr("href", "aust");
$("#link10").attr("href", "aust");
$("#link11").attr("href", "aust");
$("#link12").attr("href", "aust");
});
HTML code:-
<div class="pricing-area section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-tittle text-center">
<h2>Choose your Plan</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 flags">
<p>Select server location to host your VPS</p>
<div id="australia" class="flag active"><img src="img/flags/australia.png" alt="australia"><span>Australia</span></div>
<div id="canada" class="flag"><img src="img/flags/canada.png" alt="canada"><span>Canada</span></div>
<div id="france" class="flag"><img src="img/flags/france.png" alt="france"><span>France</span></div>
<div id="germany" class="flag"><img src="img/flags/germany.png" alt="germany"><span>Germany</span></div>
<div id="poland" class="flag"><img src="img/flags/poland.png" alt="poland"><span>Poland</span></div>
<div id="singapore" class="flag"><img src="img/flags/singapore.png" alt="singapore"><span>Singapore</span></div>
<div id="uk" class="flag"><img src="img/flags/uk.png" alt="uk"><span>UK</span></div>
</div>
</div>
<div class="row completed-cases">
<div class="col-xl-12 col-lg-12 col-md-12">
<div class=" completed-active owl-carousel">
<div class="single-cases-img">
<div class="single-pricing">
<div class="pricing-header">
<h4>PLAN 1</h4>
</div>
<div class="pricing-body">
<div class="pricing-price">
<h3><sup>$</sup>1<sub>/mo</sub></h3>
</div>
<ul>
<li><i class="fa fa-tasks"></i> CPU Cores : <strong>1 vCore</strong></li>
<li><i class="fa fa-magic"></i> Guaranteed RAM : <strong>2 GB</strong></li>
</ul>
</div>
<div class="pricing-footer">
Included Features
<a id="link1" href="" class="boxed-btn">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think this is a DOM problem........how to solve it??
Thanks in advance.
Hard to debug the issue with limited resources of the actual problem :).
I think you're using the loop param of Owl? That will clone the items. The cloned id's of the tag will not be changed. Therefore it's better to hook on the class of the instead.
(Please don't mind the ugly style of the example ;) )
$('.owl-carousel').owlCarousel({
items: 1,
nav: true,
dots: false,
loop: true
});
$("#australia").on("click",function(e) {
$('.boxed-btn').attr("href", "aust");
});
/**
* Owl Carousel v2.3.4
* Copyright 2013-2018 David Deutsch
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
*/
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}#keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
/* Additional for buttons */
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
background-color: #f5f5f5;
padding: .5em 1em !important;
margin: 1em;
border: 1px solid #ccc;
font-size: 20px;
border-radius: .1em;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</head>
<body>
<div class="pricing-area section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-tittle text-center">
<h2>Choose your Plan</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 flags">
<p>Select server location to host your VPS</p>
<div id="australia" class="flag active"><img src="img/flags/australia.png" alt="australia"><span>Australia</span></div>
<div id="canada" class="flag"><img src="img/flags/canada.png" alt="canada"><span>Canada</span></div>
<div id="france" class="flag"><img src="img/flags/france.png" alt="france"><span>France</span></div>
<div id="germany" class="flag"><img src="img/flags/germany.png" alt="germany"><span>Germany</span></div>
<div id="poland" class="flag"><img src="img/flags/poland.png" alt="poland"><span>Poland</span></div>
<div id="singapore" class="flag"><img src="img/flags/singapore.png" alt="singapore"><span>Singapore</span></div>
<div id="uk" class="flag"><img src="img/flags/uk.png" alt="uk"><span>UK</span></div>
</div>
</div>
<div class="row completed-cases">
<div class="col-xl-12 col-lg-12 col-md-12">
<div class=" completed-active owl-carousel">
<div class="single-cases-img">
<div class="single-pricing">
<div class="pricing-header">
<h4>PLAN 1</h4>
</div>
<div class="pricing-body">
<div class="pricing-price">
<h3><sup>$</sup>1<sub>/mo</sub></h3>
</div>
<ul>
<li><i class="fa fa-tasks"></i> CPU Cores : <strong>1 vCore</strong></li>
<li><i class="fa fa-magic"></i> Guaranteed RAM : <strong>2 GB</strong></li>
</ul>
</div>
<div class="pricing-footer">
Included Features
<a id="link1" href="" class="boxed-btn">Buy Now</a>
</div>
</div>
</div>
<div class="single-cases-img">
<div class="single-pricing">
<div class="pricing-header">
<h4>PLAN 2</h4>
</div>
<div class="pricing-body">
<div class="pricing-price">
<h3><sup>$</sup>1<sub>/mo</sub></h3>
</div>
<ul>
<li><i class="fa fa-tasks"></i> CPU Cores : <strong>2 vCore's</strong></li>
<li><i class="fa fa-magic"></i> Guaranteed RAM : <strong>4 GB</strong></li>
</ul>
</div>
<div class="pricing-footer">
Included Features
<a id="link2" href="" class="boxed-btn">Buy Now</a>
</div>
</div>
</div>
<div class="single-cases-img">
<div class="single-pricing">
<div class="pricing-header">
<h4>PLAN 3</h4>
</div>
<div class="pricing-body">
<div class="pricing-price">
<h3><sup>$</sup>1<sub>/mo</sub></h3>
</div>
<ul>
<li><i class="fa fa-tasks"></i> CPU Cores : <strong>4 vCore's</strong></li>
<li><i class="fa fa-magic"></i> Guaranteed RAM : <strong>8 GB</strong></li>
</ul>
</div>
<div class="pricing-footer">
Included Features
<a id="link3" href="" class="boxed-btn">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have code for mega dropdown menu on click. It works fine but code is Substandard, wrong. Is it possible to simplify it as anything? Here i writed the same action code for others
Look at the code:
$('.main-nav .first').click(function () {
$('.drop-down-container').toggleClass('visible');
});
$('.main-nav .sec').click(function () {
$('.drop-down-container-sec').toggleClass('visible')
});
$('.main-nav .rd').click(function () {
$('.drop-down-container-rd').toggleClass('visible');
});
$('.main-nav .fth').click(function () {
$('.drop-down-container-fth').toggleClass('visible');
});
$('.main-nav .fvth').click(function () {
$('.drop-down-container-fvth').toggleClass('visible');
});
HTML:
<li class="nav-item sec ">JAMOA VA O`QITUVCHILARGA<i class="fa fa-angle-down"></i>
<div class="drop-down-container-sec d-n" style="margin-left: -13em;">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 left " style="height: 510px;">
<h4 style="color: white">Tezkor menyu</h4>
<ul class="list-menu">
<li>Dars ishlanmalari</li>
<li>Ilg`or texnologiyalar</li>
<li>Tajriba sinovlari</li>
<li>Kasaba uyushmamiz</li>
<li>Moddiy-texnika bazamiz</li>
<li>Davlat dasturlari ijrosi</li>
<li>Me`yoriy hujjatlar</li>
<li>Maktab konsepsiyasi</li>
<li>Ustozlarimiz</li>
<li>Maktab rahbariyati</li>
<li>Kadrlar salohiyati</li>
<li>Hisobot o`rnida</li>
<li>Doimiy komissiyalar</li>
<li>Homiylarimiz</li>
<li>Hamkorlik</li>
<li>Ijodkor o`qituvchilar</li>
<li>Yilning eng yaxshi fan o`qituvchisi</li>
<li>Attestasiya materiallari</li>
<li>O`quv rejalari</li>
</ul>
<p class="all">
Umumiy yig'inda
</p>
</div>
<div class="col-md-8 col-sm-8 col-xs-12 right">
<li class="nav-item rd ">MAKTAB VA TA`LIM<i class="fa fa-angle-down"></i>
<div class="drop-down-container-rd d-n" style="margin-left: -28em">
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12 left">
<h4 style="color: white">Elektron kutubxona</h4>
<ul class="list-menu">
<li>Bitiruvchilar vinetkalari</li>
<li>Maktab Nizomi</li>
<li>Maktabimiz pasporti</li>
<li>Ichki tartib-qoidalar</li>
<li>Ona-vatan madhi</li>
<li>Alifbe bayramlari</li>
<li>To`garaklarimiz</li>
<li>"Bilimlar bellashuvi" akademiya klublari</li>
<li>Fotoalbom</li>
<li>Videolavhalar</li>
<li>Tibbiy xizmat</li>
<li>Ogohlik va xavfsizlik</li>
</ul>
<p class="all">
Barcha darsliklar
</p>
</div>
<div class="col-md-8 col-sm-8 col-xs-12 right">
<div class="row">
<div class="col-md-4 col-sm-6">
<h5>Imtihonlar jadvali</h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
<div class="col-md-4 col-sm-6">
<h5><a href="#">
Imtihonlar jadvali
</a></h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
<div class="col-md-4 col-sm-6">
<h5>Imtihonlar jadvali</h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">
<h5><a href="#">
Imtihonlar jadvali
</a></h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
<div class="col-md-4 col-sm-6">
<h5>Imtihonlar jadvali</h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
<div class="col-md-4 col-sm-6">
<h5>Imtihonlar jadvali</h5>
<p style="color: white; font-size: 12px">Diqqat, diqqat, diqqat! Imtihon-2017. Sinovga puxta tayyorlaning!</p>
<p class="button_red_small">Batafsil</p>
</div>
</div>
</div>
</div>
</div>
</li>
So dropdown menu is huge
Guys if it possible to Simplify and fix this code please help me! I just hate that kind of code.
Well, your HTML code does not contain any element with the class main-nav. But you can short your code down to something like the following.
$('.main-nav .first, .main-nav .sec, .main-nav .rd, .main-nav .fth, .main-nav .fvth').click(function() {
var s = $(this).attr("class") == "first" ? "" : "-" + $(this).attr("class")
console.log('.drop-down-container' + s)
$('.drop-down-container' + s).toggleClass('visible');
});
$('.main-nav .first, .main-nav .sec, .main-nav .rd, .main-nav .fth, .main-nav .fvth').click(function() {
var s = $(this).attr("class") == "first" ? "" : "-" + $(this).attr("class")
console.log('.drop-down-container' + s)
$('.drop-down-container' + s).toggleClass('visible');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
<div class="first">first
</div>
<div class="sec">sec
</div>
<div class="rd">rd
</div>
<div class="fth">fth
</div>
<div class="fvth">fvth
</div>
</div>
Let me simplify your code. Instead of handling each and every block separately with individual class names, change them to have common class names. Now you can easily do the toggling with any number of elements.
$('.nav-item .dropdown-toggle').click(function(){
$(this).closest('.nav-item').find('.drop-down-container').toggle('slow');
$('.navigation-tabs .dropdown-toggle').not(this).closest('.nav-item').find('.drop-down-container').hide('slow');
});
.drop-down-container {display: none;}
.navigation-tabs {padding: 0;}
.nav-item {display: block; border: 1px solid #ccc; padding: 5px; margin: 5px;}
.nav-item a {display: block; text-decoration: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="navigation-tabs">
<li class="nav-item">
<a class="dropdown-toggle" href="#">
JAMOA VA O`QITUVCHILARGA<i class="fa fa-angle-down"></i>
</a>
<div class="drop-down-container">First container</div>
</li>
<li class="nav-item">
<a class="dropdown-toggle" href="#">
MAKTAB VA TA`LIM<i class="fa fa-angle-down"></i>
</a>
<div class="drop-down-container">Second container</div>
</li>
</ul>
You can use a code like the following.
const array = ['first', 'sec', 'rd', 'fth', 'fvth'];
array.forEach(x => {
$(`.main-nav .${x}`).click(() => $(`.drop-down-container${x === 'first' ? '' : '-'+x}`).toggleClass('visible') );
});
it will iterate the array and add the click function for .main-val .YourClass that will toggle the class for .drop-down-container-YourClass
Hello I work on create bootstrap testimonials using bootstrap carousel, so I Divided every item into 3 boxes and it's work well but the problem will be appear in responsive media screen that the section height will be not proper:
so my Idea is the JQuery code will check If the window width is less than 767px then will cut the .col-xs-12:eq(1) and append it after .item then wrap it in row Div then Wrap it in .item Div:
Here a simple example:
Before:
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
After: the code will check if the window width is less than 767px then will do this actions:
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4 moved">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4 moved">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
Here my snippet:
; (function ($) {
"use strict";
var $windowWidth = $(window).width();
if ($windowWidth < 767) {
$('#pencil-testimonials_2 .item').each(function (index, element) {
$(this).find(".col-xs-12:eq(1)").addClass('moved').appendTo($(this)).wrap('<div class = "row"> </div>').wrap('<div class = "item" > </div>');
$(this).find(".col-xs-12:eq(2)").addClass('moved').appendTo($(this)).wrap('<div class = "row"> </div>').wrap('<div class = "item" > </div>');
});
}
})(jQuery);
#pencil-testimonials_2 {
min-height: 375px;
padding: 50px 0;
position: relative;
background-color:aquamarine;
}
#pencil-testimonials_2 .carousel-indicators {
width: 100%;
height: auto;
position: absolute;
bottom: 20px;
left: 0;
margin: 0;
list-style: none;
text-align: center;
}
#pencil-testimonials_2 .carousel-indicators > li {
display: inline-block;
width: 14px;
height: 14px;
margin: 0;
margin-right: 3px;
border:1px solid #838383;
background-color:transparent;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#pencil-testimonials_2 .carousel-indicators > li.active {
width: 14px;
height: 14px;
background-color: #838383;
border: 1px solid transparent;
margin-right: 3px;
}
#pencil-testimonials_2 .text-image{
height:150px;
border:1px solid #ffffff;
margin: 0 0 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="pencil-testimonials_2" class="carousel slide" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_2" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="2">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="3">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="4">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="5">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of First Slide -->
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of Second Slide -->
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of Third Slide -->
</div>
</div>
</div>
Here's what you can do:
.carousel.slide {
min-height: 375px;
padding: 50px 0;
position: relative;
background-color:aquamarine;
}
.carousel.slide .carousel-indicators {
width: 100%;
height: auto;
position: absolute;
bottom: 20px;
left: 0;
margin: 0;
list-style: none;
text-align: center;
}
.carousel.slide .carousel-indicators > li {
display: inline-block;
width: 14px;
height: 14px;
margin: 0;
margin-right: 3px;
border:1px solid #838383;
background-color:transparent;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.carousel.slide .carousel-indicators > li.active {
width: 14px;
height: 14px;
background-color: #838383;
border: 1px solid transparent;
margin-right: 3px;
}
.carousel.slide .text-image{
height:150px;
border:1px solid #ffffff;
margin: 0 0 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="pencil-testimonials_1" class="carousel slide hidden-xs hidden-sm" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_1" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_1" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_1" data-slide-to="2">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 1
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 2
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 3
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 4
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 5
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 6
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 7
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 8
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pencil-testimonials_2" class="carousel slide hidden-md hidden-lg" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_2" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="2">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="3">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="4">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="5">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="6">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="7">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="8">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 1
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 2
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 3
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 4
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 5
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 6
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 7
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 8
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Basically, you just create two carousels and hide the one you don't want using Bootstrap's utility classes: hidden-xs, hidden-sm, hidden-md and hidden-lg. If you need more control, you can always create a third one for tablets.
I'm having a small styling issue with Bootstrap's accordion panel. For some reason when the first panel is clicked the background image inside panel-body is temporarily pushed to the right of the screen. I tried to fix it by adding margin-left: 0 and left: 0 but it didn't affect it at all. I'll be truly grateful for any help. Thanks
My HTML:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div id="collapseOne" class="panel-collapse collapse in bgImg1">
<div class="panel-body">
<div class="collapse1 ">
<div class="col-md-12 ">
<div class="row">
<div class="col-md-6 col-md-push-6">
<div class="introText">
<hr />
<hr />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg1 closedPanel activePanel">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
<h4 class="panel-title caps">
<a>
Hear the News
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</h4>
</div>
</div>
</div>
<!-- end panel -->
<div class="panel panel-default">
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="collapse2">
<div class="row">
<div class="col-md-6 col-md-push-6">
<div class="introText">
<hr/>
<h2 class="caps">SEE WHAT WE</h2>
<h1 class="caps">CHANGED</h1>
<hr/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg2 closedPanel">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<h4 class="panel-title caps">
<a>
See What We Changed
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</h4>
</div>
</div>
</div>
<!-- end panel -->
<div class="panel panel-default">
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="collapse3">
<div class="row">
<div class="col-md-6">
<img src="img/coupon-tubs.png" class="tubsCoupon">
</div>
<div class="col-md-6">
<div class="introText">
<hr/>
<h2 class="caps">ENJOY A LITTLE</h2>
<h1 class="caps">INCENTIVE.</h1>
<hr/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg3 closedPanel">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<h4 class="panel-title caps">
<a class="coupon">Get A Coupon
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</h4>
</div>
</div>
</div>
<!-- end panel -->
</div>
My CSS
.collapse1{
background: url("../img/bg1.jpg");
background-repeat: no-repeat;
width: 1020px;
height: 569px;
margin-left: 0;
left: 0;
}
.collapse2{
background: url("../img/bg2.jpg");
background-repeat: no-repeat;
width: 1020px;
height: 569px;
}
.collapse3{
background: url("../img/bg3.jpg");
background-repeat: no-repeat;
width: 1020px;
height: 569px;
}
.panel-group{
margin-top:3px;
}
.activePanel {
display:none;
}