How to display my sorted prices by click event?

How to display my sorted prices by click event? - javascript

I am not sure how to sort my menu items by their price. I would like the user to click the sort:price low to high / high to low button and it will arrange the menu items accordingly. Would I have to add another div class for these menu items in order to effectively arrange them? I am not sure if I would have to do something like my first function filterItems to achieve this effect as well?
function filterItems(e) {
const items = document.querySelectorAll(".item"); //selects all menu items
let filter = e.target.dataset.filter; //grabs value in the event target's data-filter attribute
// if filter all button is clicked, loop through all items and remove the hidden class
if (filter === "*") {
items.forEach(item => item.classList.remove("hidden"));
} else {
//loops through all items
items.forEach(item => {
item.classList.contains(filter) //does item have the same data-filter in its class list
? item.classList.remove('hidden') //if true ?, make sure css class .hidden is NOT applied
: item.classList.add('hidden'); // if false : does not have same filter tag, apply .hidden css class
});
};
};
//Select all h4 elements with class "price"
const priceElements = document.querySelectorAll("h4.price");
//Create an empty array to store the prices
let prices = [];
//Loop through the h4 elements and push the text content to the prices array
//priceElements.forEach(price => {
//prices.push(parseFloat(price.textContent)); //parsing the float value
//});
function renderPrice(newPrices) {
for (let i = 0, max = priceElements.length; i < max; i++){
priceElements[i].textContent = newPrices[i]
}
}
for (let priceElement of priceElements){
priceElement.textContent = Math.floor();
prices.push(priceElement.textContent);
}
//Sort the prices array in ascending order
//prices.sort((a, b) => a - b);
//For descending order
//prices.sort((a, b) => b - a);
document.querySelector('#sort-price-low').addEventListener('click', function () {
prices.sort(function (a, b){
return a - b;
});
renderPrice(prices);
});
*{
box-sizing:border-box;
}
body {
background:#e5e5e5;
color:#14213d;
font-family: 'Montserrat', sans-serif;
margin:0;
}
/* everything in the middle */
.container {
margin:auto;
max-width:1170px;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
align-items:center;
}
h1{
margin-bottom:12px;
}
hr.solid {
width:150px;
border-top: 3px solid #fca311;
}
/* button styles */
button {
padding: 6px 15px;
font-weight:bold;
border: 2px solid #14213d;
color:#14213d;
background-color:#e5e5e5;
margin: 4px 2px;
border-radius: 8px;
transition-duration: 0.4s;
cursor: pointer;
}
button:hover{
color:#fff;
background-color:#14213d;
}
#flex-buttons {
margin-top:10px;
}
/*CSS GRID Menu Section */
.food-items-container {
width: 90vw;
/* it aligns the items inside their grid areas on the inline axis */
justify-items: center;
display:grid;
gap: 1rem 2rem;
grid-template-columns:1fr 1fr;
margin-top:50px;
}
.food-items-container img {
width:220px;
height:200px;
object-fit:cover;
border: 2.8px solid #fca311;
}
hr.border {
width:100%;
border:none;
border-bottom: 1px solid #fca311;
}
/* Item Content */
.item {
display: grid;
gap: 1rem 2rem;
max-width: 25rem;
}
.item-info header {
display: flex;
/* Indents Price */
justify-content: space-between;
}
.item-info h4 {
margin-top:5px;
}
.item-text {
text-align:left;
}
.price {
color:#fca311;
}
.hidden {
display:none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e5e5e5;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #14213d;
padding: 6px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.checked {
color: orange;
}
.stars {
text-align:left;
margin-top:-10px;
}
#media screen and (min-width: 768px) {
.item {
grid-template-columns: 225px 1fr;
gap: 0 1.25rem;
max-width: 40rem;
}
.food-items-container img {
height: 175px;
}
}
#media screen and (min-width: 1200px) {
.food-items-container {
width: 95vw;
grid-template-columns: 1fr 1fr;
}
.food-items-container img {
height: 150px;
}
}
<!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.0">
<title>Restaurant-Menu-App</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" href= "style.css">
</head>
<body>
<div class ="container">
<h1>Our Menu</h1>
<hr class="border">
<!--Filter Buttons -->
<!--adding event listener to each of filters to call function, passing filter value -->
<div id ="flex-buttons">
<button type ="button" class="filter" data-filter="*" onclick=filterItems(event)>All</button>
<button type ="button" class="filter" data-filter="breakfast" onclick=filterItems(event)>Breakfast</button>
<button type ="button" class="filter" data-filter="lunch" onclick=filterItems(event)>Lunch</button>
<button type ="button" class="filter" data-filter="drink" onclick=filterItems(event)>Drinks</button>
<button type ="button" class="filter" data-filter="dinner" onclick=filterItems(event)>Dinner</button>
<div class="dropdown">
<button type ="button" class="dropbtn">Sort</button>
<div class="dropdown-content">
<button type ="button" role ="btn" id="sort-price-low">Sort: Price Low to High</button>
<button type ="button" role ="btn" id="sort-price-high">Sort: Price High to Low</button>
Sort: Rating
</div>
</div>
</div>
<!-- Menu Section -->
<div class="food-items-container">
<div class="item breakfast">
<img src="/img/avocado.jpg">
<div class="item-info">
<header>
<h4>Avocado Toast</h4>
<h4 class="price">$16.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Nesciunt ipsum dolor sit amet excepturi adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi!
</p>
</div>
</div>
<div class="item lunch">
<img src="/img/burger.jpg">
<div class="item-info">
<header>
<h4>Big Burger</h4>
<h4 class="price">$25.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem consectetur dolor sit laboriosam elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt.
</p>
</div>
</div>
<div class="item drink">
<img src="/img/gentleman.jpg">
<div class="item-info">
<header>
<h4>The Gentleman</h4>
<h4 class="price">$10.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem reprehenderit dolor sit elit reprehenderit. Repudiandae, sint quam. Et reprehenderit fugiat.
</p>
</div>
</div>
<div class="item drink">
<img src="/img/marg.jpg">
<div class="item-info">
<header>
<h4>Silly Margarita</h4>
<h4 class="price">$12.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis.
</p>
</div>
</div>
<div class="item drink">
<img src="/img/mojito.jpg">
<div class="item-info">
<header>
<h4>Clean Mojito</h4>
<h4 class="price">$13.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi.
</p>
</div>
</div>
<div class="item drink">
<img src="/img/old.jpg">
<div class="item-info">
<header>
<h4>Old Fashioned</h4>
<h4 class="price">$13.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</div>
<div class="item breakfast">
<img src="/img/om.jpg">
<div class="item-info">
<header>
<h4>Cheddar Omelette</h4>
<h4 class="price">$17.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam.
</p>
</div>
</div>
<div class="item breakfast">
<img src="/img/pancakes.jpg">
<div class="item-info">
<header>
<h4>The Stacked Pancake</h4>
<h4 class="price">$17.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</p>
</div>
</div>
<div class="item dinner">
<img src="/img/pasta.jpg">
<div class="item-info">
<header>
<h4>Meat Pasta</h4>
<h4 class="price">$28.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</div>
<div class="item dinner">
<img src="/img/pizza.jpg">
<div class="item-info">
<header>
<h4>Spinach Pizza</h4>
<h4 class="price">$20.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<hr class="border">
<p class="item-text">
Vivamus elementum semper nisi.
</p>
</div>
</div>
<div class="item lunch">
<img src="/img/salad.jpg">
<div class="item-info">
<header>
<h4>Salad</h4>
<h4 class="price">$12.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</div>
<div class="item dinner">
<img src="/img/salmon.jpg">
<div class="item-info">
<header>
<h4>Atlantic Salmon</h4>
<h4 class="price">$30.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex
</p>
</div>
</div>
<div class="item lunch">
<img src="/img/sandwhich.jpg">
<div class="item-info">
<header>
<h4>BLT Sandwhich</h4>
<h4 class="price">$20.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</div>
<div class="item dinner">
<img src="/img/steak.jpg">
<div class="item-info">
<header>
<h4>Steak Filet</h4>
<h4 class="price">$38.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</div>
<div class="item breakfast">
<img src="/img/waffle.jpg">
<div class="item-info">
<header>
<h4>Strawberry Waffle</h4>
<h4 class="price">$17.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<hr class="border">
<p class="item-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae, sint quam. Et reprehenderit fugiat nesciunt inventore
laboriosam excepturi! Quo, officia.
</p>
</div>
</div>
<div class="item lunch">
<img src="/img/wrap.jpg">
<div class="item-info">
<header>
<h4>Thai Chicken Wrap</h4>
<h4 class="price">$21.99</h4>
</header>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr class="border">
<p class="item-text">
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.
</p>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Related

White Space at bottom of page

I'm trying to create a page without scroll and I don't have much content to show on the page while I'm designing a web page I face an issue I try to search and try to follow the step to solve the issue but my issue does not solve so if anyone can help me
the issue I'm facing white space at the bottom of my page after the footer I'm sharing example code with my issue
screenshot of the issue
you can see white space right after the footer
Code
<!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.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Document</title>
<style>
.img-thumbnail{
height: 150px;
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row d-flex flex-row flex-nowrap">
<div class="col-12 p-0">
<div class="card">
<h4 class="font-weight-light text-center">Bootstrap 4 Horizontal Scrolling Cards with Flexbox</h4>
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<img src="AboutUs.jpeg" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<h4>Lorem ipsum dolor sit, amet consectetur</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum, architecto magni? Rem, ipsam ipsa sit, maxime deserunt officiis consequatur cumque libero illum consectetur illo maiores iusto pariatur sapiente necessitatibus magni?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum,
Read More
</p>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<img src="AboutUs.jpeg" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<h4>Lorem ipsum dolor sit, amet consectetur</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum, architecto magni? Rem, ipsam ipsa sit, maxime deserunt officiis consequatur cumque libero illum consectetur illo maiores iusto pariatur sapiente necessitatibus magni?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum,
Read More
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="bg-dark-08">
<div class="container-fluid p-0 m-0 bg-dark">
<div class="row no-gutters text-center d-flex justify-content-center">
<div class="p-2">
<p class="text-light text-center">Example Address</p>
<p class="text-light text-center">example#example.com</p>
</div>
</div>
</div>
</div>
</footer>
<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://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>
Thank you

You should make use of the #media query. If the screen is smaller than your content, make the footer relative. If the screen is bigger than your content, use position absolute.
footer{
position:relative;
}
#media screen and (min-height:800px){
footer{
position: absolute; // or fixed
bottom:0;
width:100%;
  }
}

Because, you dont have much content to fill entire page. You can use something like this.
if($(window).height() > $("body").height()){
$("footer").css({"position" : "fixed", "bottom" : "0" , "width" : "100%"});
} else {
$("footer").css("position", "relative");
}

This looks like bootstrap. Try having a look at the sample code they provide for this kind of thing. Specifically, there is a sticky footer example https://getbootstrap.com/docs/4.0/examples/sticky-footer/

What about:
footer {
position: fixed;
width: 100%;
bottom: 0px;
}
.container-fluid{
margin-bottom: 100px; //Height of your footer
}
Fiddle

html, body {
margin: 0;
padding: 0;
}
.mainContainer {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header {
width: 100%;
height: 100px;
background: blue;
}
.mainContent {
flex: 1;
text-align: center;
font-size: 40px;
padding: 40px;
}
footer {
width: 100%;
height: 100px;
background: red;
}
<html>
<head></head>
<body>
<div class='mainContainer'>
<header></header>
<div class='mainContent'>
All your content goes here
</div>
<footer></footer>
</div>
</body>
</html>
This should work for you. Basically make the page a vertical flexbox with min-height: 100vh and flex the middle element. Then the footer is always anchored to the bottom of the page.

Testimonial slider with object constructor

I would like to have the first testimonial shown when you land on the page without hard coding it in the html. I want the page to land on the first customers object when run.
When this loops over the customers object it doesn't include the hard coded html elements. So I would like it to just have the object constructed shown when the code is run. Obviously I am having trouble forming this question and therefore finding a solution.
(function(){
const customerImage = document.querySelector('#customer-img')
const customerName = document.querySelector('#customer-name')
const customerText = document.querySelector('#customer-text')
const buttons = document.querySelectorAll('.btn')
let index = 0
const customers = []
//Create a new customer using a customer constructor
//Customer Constructor
function Customer(img, name, text) {
this.img = img
this.name = name
this.text = text
}
//Create new customer using the constructor function
function createCustomer(img, name, text) {
let fullImg = `./img/customer-${img}.jpg`
let customer = new Customer(fullImg, name, text)
customers.push(customer)
}
createCustomer(0, 'John', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?')
createCustomer(1, 'Sandy', 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock')
createCustomer(2, 'Amy', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable.')
createCustomer(3, 'Tyrell', 'If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text.')
createCustomer(4, 'Wanda', 'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.')
buttons.forEach(function(button){
button.addEventListener('click', function(e){
if (e.target.parentElement.classList.contains('prevBtn')){
if(index === 0){
index = customers.length
}
index--
customerImage.src = customers[index].img
customerName.textContent = customers[index].name
customerText.textContent = customers[index].text
}
if (e.target.parentElement.classList.contains('nextBtn')){
index++
if(index === customers.length){
index = 0
}
customerImage.src = customers[index].img
customerName.textContent = customers[index].name
customerText.textContent = customers[index].text
}
})
})
})()
.max-height{
min-height: 100vh;
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) ,url('../img/questionBcg.jpeg')center/cover no-repeat fixed;
}
.title-heading{
color:#f15025;
}
.title-subheading{
color: white;
}
.customer-card{
background: transparent!important;
color:white;
border:0.05rem solid white;
padding-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
position: relative;
}
.img-card{
border-radius: 50%;
margin-bottom: 1rem;
margin-top: -3rem;
}
.star-icon{
color: #f15025;
}
.quote-icon{
font-size: 2rem;
color: #f15025;
}
.prevBtn,.nextBtn{
font-size: 1.5rem;
padding: 0.1rem;
color:#f15025;
border:0.1rem solid #f15025;
display: inline-block;
position: absolute;
padding: 0.4rem;
border-radius: 50%;
transition: all 1s ease-in-out;
}
.prevBtn:hover{
background: #f15025;
color: white;
}
.nextBtn:hover{
background: #f15025;
color: white;
}
.prevBtn{
top: 50%;
left: 0;
transform: translate(-120%,-50%);
}
.nextBtn{
top: 50%;
right: 0;
transform: translate(120%,-50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- main css -->
<link rel="stylesheet" href="css/main.css">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<!-- font awesome -->
<script src="js/all.js"></script>
<title>Starter Template</title>
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row max-height align-items-center">
<!-- col -->
<div class="col-10 mx-auto col-md-6">
<div class="row">
<div class="col text-center my-5">
<h4 class="title-heading text-uppercase">client</h4>
<h1 class="title-subheading text-uppercase">testimonials</h1>
</div>
</div>
<div class="card my-5 text-center customer-card ">
<img src="img/customer-0.jpg" width="150" id="customer-img" class="img-card mx-auto" alt="">
<h4 id="customer-name" class="text-uppercase">John</h4>
<div class="review-icons my-2">
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star"></i>
</span>
<span class="star-icon">
<i class="fas fa-star-half"></i>
</span>
</div>
<p id="customer-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?</p>
<span class="quote-icon">
<i class="fas fa-quote-left"></i>
</span>
<i class="fas fa-chevron-left"></i>
<i class="fas fa-chevron-right"></i>
</div>
</div>
<!-- end of col -->
</div>
</div>

I put this iffe function at the beginning to fix this problem.
(function(){
var img = document.getElementById('customer-img').src = 'img/customer-0.jpg';
var name = document.getElementById("customer-name")
name.innerHTML = "John";
var text = document.getElementById("customer-text")
text.innerHTML = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?";
})();

How to set a position that changes when the window size changes

I'm creating a web page for my grandpa, and I'm going to have this lil biker dude, that runs across the screen and when hovered over, stops and says"wear a helmet". I got him to move back and forth and it is fixed to the navbar, but the problem is that when the screen size changes, say it's on a smaller phone or computer, then the biker dude turns around at a different spot and it runs infront of the navbar stuff.
here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>CountrySideBycicling</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
<script src="https://kit.fontawesome.com/8333c8288f.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- lil dude -->
<h6 id="message"></h6>
<img src="../lil dude/riding.gif" alt="riding" id="riding">
<script>
let message = document.getElementById('message');
let speed = 5;
let lastspeed = 0;
let counter = 0;
let x = 50;
let y = 25;
let mX = 0;
let mY = 0;
//flipping and animating
function move() {
x += speed;
document.getElementById('riding').style.left=(x + "px");
if (x + document.getElementById('riding').style.width >= window.innerWidth - 550) {
speed = -5;
document.getElementById('riding').style.transform="rotateY(150deg)";
}
if (x <= 200) {
speed = 5;
document.getElementById('riding').style.transform="rotateY(0deg)";
}
if (speed == 0) {
document.getElementById('riding').src="../lil dude/stop.gif";
message.style.top = (y - 40 + "px");
message.style.left = (x + 50 + "px");
message.innerHTML = "Wear a Helmet!";
setTimeout(reset, 2000);console.log('hi');
}
else requestAnimationFrame(move);
}
//mouse move collision detection
window.addEventListener('mousemove', function(e) {
mX = e.clientX;
mY = e.clientY;
if (mX >= x && mX <= x + 50 && mY >= y && mY <= y + 40) {
lastspeed = speed || lastspeed;
if (counter == 0) {
slow();
counter = 1;
}
}
console.log(mX + " " + mY)
});
//braking it
function slow() {
document.getElementById('riding').src="../lil dude/brake.gif";
do {
if (speed > 0){
speed -= 0.1;
} else if(speed < 0) {
speed += 0.1;
}
}
while (Math.abs(speed)>0.01);
speed=0;
}
//reset
function reset() {
document.getElementById('riding').src="../lil dude/riding.gif";
message.innerHTML = "";
do {
if (lastspeed > 0) {
speed += 0.1;
} else if (lastspeed < 0) {
speed -= 0.1;
}console.log(lastspeed,speed);
}
while(5-Math.abs(speed) > 0.01);
move();
counter = 0;
}
move();
</script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<!-- logo -->
<img class = "navbar-brand" src="https://w7.pngwing.com/pngs/764/321/png-transparent-bicycle-shop-cycling-logo-fixed-gear-bicycle-cyclist-top-sport-bicycle-logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="brands.html.html">Brands</a>
</li>
</ul>
</div>
</div>
</nav>
<div style="height: 50;"></div>
<div class="jumbotron text-center">
<div class="container">
<div style="height: 25px;"></div>
<h1>CountrySideBycicling</h1>
<div style="height: 25px;"></div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam officiis aperiam temporibus exercitationem hic provident nesciunt,
quod officia neque quam sint dicta, mollitia commodi illo necessitatibus inventore blanditiis eveniet maiores.
</p>
<div style="height: 25px;"></div>
<button class="btn btn-primary">Read More</button>
</div>
</div>
<!-- Page Content -->
<div class="container">
<!-- Heading Row -->
<div class="row align-items-center my-5">
<div class="col-lg-7">
<img class="img-fluid rounded mb-4 mb-lg-0" src="http://placehold.it/900x400" alt="">
</div>
<!-- /.col-lg-8 -->
<div class="col-lg-5">
<h1 class="font-weight-light">Business Name or Tagline</h1>
<p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
<a class="btn btn-primary" href="#">Call to Action!</a>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
<!-- Call to Action Well -->
<div class="card text-white bg-secondary my-5 py-4 text-center">
<div class="card-body">
<p class="text-white m-0">This call to action card is a great place to showcase some important information or display a clever tagline!</p>
</div>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Content section -->
<section class="py-5">
<div class="container">
<h1>Section Heading</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</section>
<!-- Image Section - set the background image for the header in the line below -->
<section class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1081');">
<!-- Put anything you want here! There is just a spacer below for demo purposes! -->
<div style="height: 200px;"></div>
</section>
<!-- Content section -->
<section class="py-5">
<div class="container">
<h1>Section Heading</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</section>
<!-- slider -->
<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" role="listbox">
<div class="carousel-item active"></div>
<div id="target" class="carousel-item"></div>
<div class="carousel-item"></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 style="height: 50px;"></div>
</div>
</div>
<div class="container">
<!-- Content Row -->
<div class="row">
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card One</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card Two</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.</p>
</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card Three</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small mdb-color pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Footer links -->
<div class="row text-center text-md-left mt-3 pb-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">CountrySideBycicling</h6>
<p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
consectetur
adipisicing elit.</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Brand Sites</h6>
<p>
Bikesite
</p>
<p>
Bikesite
</p>
<p>
Bikesite
</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Useful links</h6>
<p>
Gallary
</p>
<p>
Brands
</p>
<p>
About
</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6>
<p>
<i class="fas fa-home mr-3"></i> windsor, oh, cox road</p>
<p>
<i class="fas fa-envelope mr-3"></i> grandpa#gmail.com</p>
<p>
<i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
</div>
<!-- Grid column -->
</div>
<!-- Footer links -->
<hr>
<!-- Grid row -->
<div class="row d-flex align-items-center">
<!-- Grid column -->
<div class="col-md-7 col-lg-8">
<!--Copyright-->
<p class="text-center text-md-left">© 2020 Copyright:
<a href="http://www.countrysidebicycling.com/">
<strong>countrysidebicycling.com</strong>
</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-5 col-lg-4 ml-lg-0">
<!-- Social buttons -->
<div class="text-center text-md-right">
<ul class="list-unstyled list-inline">
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-facebook"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-instagram"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-twitter"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-pinterest"></span>
</a>
</li>
</ul>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
</footer>
<script src="jquery.slim.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
here is the css
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 100%;
}
.navbar-default {
background: none;
}
.navbar{
position: fixed;
z-index: 10;
padding: 10px 0 10px 10px;
top: 0;
width: 100%;
}
footer{
background-color:#e6e6e6;
}
.jumbotron{
background-image: url('download.jpeg');
color: white;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
min-height: 400px;
margin-top: 0px;
margin-bottom: 8px;
}
a{
color:#2e5984;
}
.navbar-brand{
height: 60px;
width: 100px;
}
#aboutusimg{
background-size: 100%;
background-image: url(download.jpeg);
background-repeat:no-repeat;
height: 400px;
}
/* slider */
.carousel .carousel-item {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
}
.carousel .carousel-item:first-of-type {
background-image: url('download.jpeg');
}
.carousel .carousel-item:nth-of-type(2) {
background-image: url("download.jpeg");
}
.carousel .carousel-item:last-of-type {
background-image: url("download.jpeg");
}
.carousel-control-prev-icon, .carousel-control-next-icon {
width: 50px;
height: 50px;
}
/* partners slider, about page */
/* carousel */
h2{
text-align:center;
padding: 20px;
}
/* Slider */
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* lil dude */
#riding{
width: 50px;
height: 40px;
z-index: 30;
position: fixed;
top: 25px;
left: 0px;
transform: rotateY(0deg);
}
#message{
color: white;
position: fixed;
top: 0;
left: 0;
}
keep in mind that there are other files, this is just the index.html, so the css has other stuff in it, but the little dude is at the bottom of the css, and before the navbar in the html.

The hardcoded values of 200 and 550 will not work when the navbar dimensions are adjusted for diffeerent size screens. I've changed it to retrieve the offsetWidth and offsetLeft of the (.navbar-toggle button or .nav-item[0]) and .navbar-brand image to bounce back.
body {
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 100%;
}
.navbar-default {
background: none;
}
.navbar{
position: fixed;
z-index: 10;
padding: 10px 0 10px 10px;
top: 0;
width: 100%;
}
footer{
background-color:#e6e6e6;
}
.jumbotron{
background-image: url('download.jpeg');
color: white;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
min-height: 400px;
margin-top: 0px;
margin-bottom: 8px;
}
a{
color:#2e5984;
}
.navbar-brand{
height: 60px;
width: 100px;
}
#aboutusimg{
background-size: 100%;
background-image: url(download.jpeg);
background-repeat:no-repeat;
height: 400px;
}
/* slider */
.carousel .carousel-item {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
}
.carousel .carousel-item:first-of-type {
background-image: url('download.jpeg');
}
.carousel .carousel-item:nth-of-type(2) {
background-image: url("download.jpeg");
}
.carousel .carousel-item:last-of-type {
background-image: url("download.jpeg");
}
.carousel-control-prev-icon, .carousel-control-next-icon {
width: 50px;
height: 50px;
}
/* partners slider, about page */
/* carousel */
h2{
text-align:center;
padding: 20px;
}
/* Slider */
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* lil dude */
#riding{
width: 50px;
height: 40px;
z-index: 30;
position: fixed;
top: 25px;
left: 0px;
transform: rotateY(0deg);
}
#message{
color: white;
position: fixed;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>CountrySideBycicling</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
<script src="https://kit.fontawesome.com/8333c8288f.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- lil dude -->
<h6 id="message"></h6>
<img src="../lil dude/riding.gif" alt="riding" id="riding">
<script>
let message = document.getElementById('message');
let speed = 5;
let lastspeed = 0;
let counter = 0;
let x = 50;
let y = 25;
let mX = 0;
let mY = 0;
//flipping and animating
function move() {
x += speed;
document.getElementById('riding').style.left=(x + "px");
var v=document.getElementsByClassName('navbar-toggler')[0];
if(v&&v.offsetLeft===0) v=document.getElementsByClassName('nav-item')[0];
var w=document.getElementsByClassName('navbar-brand')[0];
if (speed > 0 && x + document.getElementById('riding').style.width >= (v&&(v.offsetLeft-v.offsetWidth))) {
speed = -5;
document.getElementById('riding').style.transform="rotateY(150deg)";
}
if (speed < 0 && x <= (!w||(w.offsetLeft+w.offsetWidth))) {
speed = 5;
document.getElementById('riding').style.transform="rotateY(0deg)";
}
if (speed == 0) {
document.getElementById('riding').src="../lil dude/stop.gif";
message.style.top = (y - 40 + "px");
message.style.left = (x + 50 + "px");
message.innerHTML = "Wear a Helmet!";
setTimeout(reset, 2000);console.log('hi');
}
else requestAnimationFrame(move);
}
//mouse move collision detection
window.addEventListener('mousemove', function(e) {
mX = e.clientX;
mY = e.clientY;
if (mX >= x && mX <= x + 50 && mY >= y && mY <= y + 40) {
lastspeed = speed || lastspeed;
if (counter == 0) {
slow();
counter = 1;
}
}
console.log(mX + " " + mY)
});
//braking it
function slow() {
document.getElementById('riding').src="../lil dude/brake.gif";
do {
if (speed > 0){
speed -= 0.1;
} else if(speed < 0) {
speed += 0.1;
}
}
while (Math.abs(speed)>0.01);
speed=0;
}
//reset
function reset() {
document.getElementById('riding').src="../lil dude/riding.gif";
message.innerHTML = "";
do {
if (lastspeed > 0) {
speed += 0.1;
} else if (lastspeed < 0) {
speed -= 0.1;
}console.log(lastspeed,speed);
}
while(5-Math.abs(speed) > 0.01);
move();
counter = 0;
}
move();
</script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<!-- logo -->
<img class = "navbar-brand" src="https://w7.pngwing.com/pngs/764/321/png-transparent-bicycle-shop-cycling-logo-fixed-gear-bicycle-cyclist-top-sport-bicycle-logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="brands.html.html">Brands</a>
</li>
</ul>
</div>
</div>
</nav>
<div style="height: 50;"></div>
<div class="jumbotron text-center">
<div class="container">
<div style="height: 25px;"></div>
<h1>CountrySideBycicling</h1>
<div style="height: 25px;"></div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam officiis aperiam temporibus exercitationem hic provident nesciunt,
quod officia neque quam sint dicta, mollitia commodi illo necessitatibus inventore blanditiis eveniet maiores.
</p>
<div style="height: 25px;"></div>
<button class="btn btn-primary">Read More</button>
</div>
</div>
<!-- Page Content -->
<div class="container">
<!-- Heading Row -->
<div class="row align-items-center my-5">
<div class="col-lg-7">
<img class="img-fluid rounded mb-4 mb-lg-0" src="http://placehold.it/900x400" alt="">
</div>
<!-- /.col-lg-8 -->
<div class="col-lg-5">
<h1 class="font-weight-light">Business Name or Tagline</h1>
<p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
<a class="btn btn-primary" href="#">Call to Action!</a>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
<!-- Call to Action Well -->
<div class="card text-white bg-secondary my-5 py-4 text-center">
<div class="card-body">
<p class="text-white m-0">This call to action card is a great place to showcase some important information or display a clever tagline!</p>
</div>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Content section -->
<section class="py-5">
<div class="container">
<h1>Section Heading</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</section>
<!-- Image Section - set the background image for the header in the line below -->
<section class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1081');">
<!-- Put anything you want here! There is just a spacer below for demo purposes! -->
<div style="height: 200px;"></div>
</section>
<!-- Content section -->
<section class="py-5">
<div class="container">
<h1>Section Heading</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</section>
<!-- slider -->
<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" role="listbox">
<div class="carousel-item active"></div>
<div id="target" class="carousel-item"></div>
<div class="carousel-item"></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 style="height: 50px;"></div>
</div>
</div>
<div class="container">
<!-- Content Row -->
<div class="row">
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card One</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card Two</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.</p>
</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card Three</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small mdb-color pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Footer links -->
<div class="row text-center text-md-left mt-3 pb-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">CountrySideBycicling</h6>
<p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
consectetur
adipisicing elit.</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Brand Sites</h6>
<p>
Bikesite
</p>
<p>
Bikesite
</p>
<p>
Bikesite
</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Useful links</h6>
<p>
Gallary
</p>
<p>
Brands
</p>
<p>
About
</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6>
<p>
<i class="fas fa-home mr-3"></i> windsor, oh, cox road</p>
<p>
<i class="fas fa-envelope mr-3"></i> grandpa#gmail.com</p>
<p>
<i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
</div>
<!-- Grid column -->
</div>
<!-- Footer links -->
<hr>
<!-- Grid row -->
<div class="row d-flex align-items-center">
<!-- Grid column -->
<div class="col-md-7 col-lg-8">
<!--Copyright-->
<p class="text-center text-md-left">© 2020 Copyright:
<a href="http://www.countrysidebicycling.com/">
<strong>countrysidebicycling.com</strong>
</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-5 col-lg-4 ml-lg-0">
<!-- Social buttons -->
<div class="text-center text-md-right">
<ul class="list-unstyled list-inline">
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-facebook"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-instagram"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-twitter"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-pinterest"></span>
</a>
</li>
</ul>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
</footer>
<script src="jquery.slim.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
here is the css

Sidebar Open By Default on Desktop, Closed on mobile

I'm having some real trouble trying to get my sidebar/navigation content (using Bootstrap) to show (be expanded) by default on desktop and closed by default on mobile and have the icon showing only on mobile. I cannot seem to get this to work.
<nav class="menu menu-open" id="theMenu">
<div class="menu-wrap">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i>
</button>
<div id="menu-logo">
<img src="Final_Logo.png" width="210" height="214" alt="">
</div>
<div id="navbarToggleExternalContent">
<ul id="main-menu">
Home
About
Writing
Events
Speaking
Music
</ul>
<ul id="social-icons">
<li class="facebook"><i class="fab fa-facebook fa-2x"></i></li>
<li class="twitter"><i class="fab fa-twitter fa-2x"></i></li>
<li class="instagram"><i class="fab fa-instagram fa-2x"></i></li>
</ul>
</div>
</div>
</nav>
I have tried using this javascript code, but to no avail:
$('.menu-close').on('click', function(){
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toright');
$('#theMenu').toggleClass('menu-open');
alert("Test");
});

It looks like this has been answered here: https://stackoverflow.com/a/36289507/378779
Basically, add one of the navbar-expand-* classes to your <nav>, e.g.:
<nav class="menu menu-open navbar-expand-md" id="theMenu">

First just a couple points:
You said sidebar, but your markup doesn't really look like a sidebar to me, it looks like a responsive topnav. I'll try to make sense of it as best I can, and I will demonstrate a working sidebar as well, in case that is what you really do want.
Your menu items are in a <ul> (unordered list) without any <li> (list items). The bootsrap js/css probably needs the <li>s in order to function correctly. Technically a <ul> without any <li> is valid html, but the only content allowed in a <ul> are <li>s so anchors (or anything else) inside a <ul> must be contained within <li>s to be valid.
I'm not sure what exactly you are trying to do with the social icons so I just adjusted them slightly in a way that seems sensible.
I added overflow-y: scroll; on the <html> element so that when you open the menu on a small screen it won't cause shifting if a scrollbar gets added. May not be needed depending on your site design and content layout.
So lets start with a very basic responsive menu.
Basic Bootstrap Responsive Menu
html {
overflow-y: scroll;
}
.social {
padding: 4px 8px;
}
<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.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Writing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Speaking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Music</a>
</li>
</ul>
<a class="social" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="social" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="social" href="#"><i class="fa fa-instagram fa-2x"></i></a>
</div>
</nav>
Okay, that looks okay, but you had an image in the menu. So I'll put an image in the menu and give it a little css to style it. Then with the image, we'll need a little extra CSS to position menu elements nicely:
Position the hamburger button so it sits on the bottom of the navbar. I'll use the 200px of the picture and substract a few rem. You could change the top: calc(100px - 1rem); to top: 1rem; to put the hamburger on top, or bottom: 1rem; if you wanted the hamburger to stick to the bottom of the nav even when opened. Or just delete that whole rule to use the bootstrap default which puts the hamburger in the vertical middle.
Position the menu items to also rest on the bottom of the menu bar when not collapsed.
position the social icons on the bottom also but push them over to the right hand side.
Numbers 2 & 3 above should only apply above the medium breakpoint when the menu is not collapsed so I'll put them in a media query to target over 768px (bootstrap's medium breakpoint). This could also be done with bootstraps sass breakpoint mixins, but we'll just use plain css here. You can see the positioning of these elements within the #media query rule in the css, where you could change it to push them to the top of the bar. Or just remove those rules to revert to bootstrap defaults, which vertically centers menu elements, and puts the social icons beneath them. You could also put the social icons into <li> elements within the menu <ul> if you just wanted the icons to fall right into the menu like the other menu items.
with image in menu
html {
overflow-y: scroll;
}
.social {
padding: 4px 4px;
}
.nav-logo {
width: 200px;
height: 100%;
}
.navbar-toggler {
position: absolute;
top: calc(100px - 1rem);
right: 1rem;
}
#media all and (min-width: 768px) {
.navbar-nav {
position: absolute;
bottom: 0;
}
.social-list {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
}
}
<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.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#"><img class="nav-logo" src="https://i.postimg.cc/nckTrT6T/21.jpg"></a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Writing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Speaking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Music</a>
</li>
</ul>
<div class="social-list">
<a class="social" href="#"><i class="fa fa-facebook fa-2x"></i></a>
<a class="social" href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a class="social" href="#"><i class="fa fa-instagram fa-2x"></i></a>
</div>
</div>
</nav>
Okay, but you said it was a sidebar. I'm not that familiar with bootstrap, but I gather that neither v3 nor v4 provide a sidebar nav by default. Several bootstrap sidebar tutorials can be found here. I have simply used the most basic version from the tutorials linked above to create an example here.
Collapsible Sidebar
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<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.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
Download source
</li>
<li>
Back to article
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fa fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
<button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
</ul>
</div>
</div>
</nav>
<h2>Collapsible Sidebar Using Bootstrap 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

You can use CSS Media Query to hide/show content at different viewport/device.

Here is the link what you need axactly. I have created pen for you. Please have look into link below.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="theMenu">
<a class="navbar-brand" id="menu-logo">
<img src="Final_Logo.png" width="210" height="214" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto" id="main-menu">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Writing</a></li>
<li class="nav-item"><a class="nav-link" href="#">Events</a></li>
<li class="nav-item"><a class="nav-link" href="#">Speaking</a></li>
<li class="nav-item"><a class="nav-link" href="#">Music</a></li>
<li class="facebook"><i class="fab fa-facebook fa-2x"></i></li>
<li class="twitter"><i class="fab fa-twitter fa-2x"></i></li>
<li class="instagram"><i class="fab fa-instagram fa-2x"></i></li>
</ul>
</div>
</nav>
https://codepen.io/pgurav/pen/abbQZJL

I have created an example for you, based on the bs4 documentation regarding external content.
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
Within this example the code collapse from the top - instead of the right. Actually I am on leave and wil try to complete the example to fit your needs.
Additional JavaScript:
var externalContent = $('#navbarToggleExternalContent'),
execOnResize = function(){
// also the next line was only for use in jsfiddle
// in the real world you need to use window.outerWidth
// 992 pixel is the width of breakpoint corresponding to the class "navbar-expand-lg". Feel free to adapt it to fit your needs.
if(window.innerWidth >= 992){
externalContent.addClass('show');
}else{
externalContent.removeClass('show');
}
};
// the next line was only addded for jsfiddle
execOnResize();
window.onresize = function(event) {
execOnResize();
};
window.addEventListener('load', function() {
execOnResize();
})
I have also created a fiddle fiddle
To see it in action, please resize the inner window in jsfiddle

Your current Javascript code will always run, regardless of the device. What you need is a way to check if the device is a computer or a mobile phone.
One way would be to use the browser's UserAgent:
$('.menu-close').on('click', function(){
if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
//mobile
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toright');
$('#theMenu').toggleClass('menu-open');
alert("Test");
}
});
Or, you could simply rely on the window's width (but small desktop windows will be treated like the mobile version):
if(window.innerWidth <= 767) { // a certain threshold value, in pixels
//mobile
//do something
}

swapping div content using jquery [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I found a pretty sweet codepen regarding buttons/aesthestics and re-purposed it to fit what our team is trying to build. Basically we want buttons going down vertically on the left hand side with a large div on the right hand side. When a certain button is clicked on the left, the div on the right will change to show the appropriate content. After doing some reading, it looks like jQuery is the answer to this functionality. I've never actually coded jQuery and couldn't get anything to work correctly yet. There are two things we need:
When the button is clicked on the left, we need the div on the right to change content.
When the button on the left is active, I want the styling to remain what it looks like when it's hovered.
Can someone provide some guidance? Thanks!
#wrapper {
text-align: center;
}
.bt_wrap {
display: flex;
flex-direction: column;
width: auto;
height: auto;
background: gray;
width: 100px;
height: 100px;
cursor: pointer;
perspective: 200px;
transition: background 0.2s ease-out;
}
.box {
position: absolute;
perspective-origin: 50px 50px;
transform-origin: 50px 50px;
transition: transform 0.2s ease-out;
transform-style: preserve-3d;
}
.icon,
.icon2 {
position: absolute;
top: 0;
left: 20px;
margin-top: 20px;
background: black;
color: #fff;
width: 60px;
height: 60px;
font-size: 2em;
line-height: 60px;
transition: background 0.2s ease-out;
transform: translate3d(0px, 0px, 30px) rotateY(0deg);
}
.icon2 {
background: black;
transform: translate3d(29px, 0px, 0px) rotateY(90deg);
transition: background 0.2s ease-out;
}
.bt_wrap:hover {
background: blue;
}
.bt_wrap:hover .icon {
background: black;
}
.bt_wrap:hover .icon2 {
background: black;
color: blue;
}
.bt_wrap:hover .box {
transform: rotateY(-90deg);
}
.started {
font-size: 0.75em;
position: absolute;
bottom: 4px;
right: 4px;
color: green;
background: white;
border-radius: 50%;
width: 1em;
}
.main {
display: flex;
}
.content {
width: 100%;
padding-left: 1em;
text-align: center;
display: flex;
align-items: center;
}
.form-title {
margin-top: 0;
margin-bottom: 30px;
padding-bottom: 15px;
position: relative;
}
.form-title::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 80px;
height: 4px;
background: orange;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-otransform: translateX(-50%);
transform: translateX(-50%);
}
<div class="main">
<div id="wrapper" class="steps">
<div class="bt_wrap" name="1">
<div class="box">
<i class="icon fa fa-clipboard">
<span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-clipboard">
<span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="2">
<div class="box">
<i class="icon fa fa-building">
<span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-building">
<span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="3">
<div class="box">
<i class="icon fa fa-users">
<span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-users">
<span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="4">
<div class="box">
<i class="icon fa fa-university">
<span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-university">
<span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="5">
<div class="box">
<i class="icon fa fa-file-pdf-o"></i>
<i class="icon2 fa fa-file-pdf-o"></i>
</div>
</div>
</div>
<div class="content">
<div class="form-container">
<h2 class="form-title">Welcome to Your Employment Guide!</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
<div class="text-center">
<input type="button" value="NEXT" class="btn btn-primary next">
</div>
</div>
</div>
</div>

Here's my take:
http://jsfiddle.net/bxmaqtd3/
When the button is clicked on the left, we need the div on the right to change content.
My solution uses jquery show() and hide() to show and hide divs which contain slide content. You will need to include all the content in your html with unique IDs (i.e. #slide1, #slide2, #slide3, etc) and use the css display: none on all slides except the first (or default) slide.
This solution uses a custom data attribute to store the ID of the slide div which you want the given button to show. For example:
<div class="bt_wrap" name="1" data-slide="slide1">
When the button on the left is active, I want the styling to remain what it looks like when it's hovered.
To achieve this I duplicate the :hover styles into a new class called active when you click on one of the button divs it removes the class from all buttons and then adds the class to the button you have just clicked.
JS:
$('.bt_wrap').click(function(){
$('.bt_wrap').removeClass('active'); //remove active class on all buttons
$(this).addClass('active'); //add active class to the one that you clicked
var slideId = $(this).attr('data-slide'); //find the value of the associated slide id
$('.slide').not("#" + slideId).hide(); //hid all slides except the one you want to show
$("#" + slideId).show(); //show the one you want to show
});
CSS:
#slide1 {
display: block;
}
#slide2 {
display: none;
}
.active .box {
transform: rotateY(-90deg);
}
.active {
background: blue;
}
HTML:
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<div class="main">
<div id="wrapper" class="steps">
<div class="bt_wrap" name="1" data-slide="slide1">
<div class="box">
<i class="icon fa fa-clipboard">
<span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-clipboard">
<span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="2" data-slide="slide2">
<div class="box">
<i class="icon fa fa-building">
<span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-building">
<span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="3">
<div class="box">
<i class="icon fa fa-users">
<span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-users">
<span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="4">
<div class="box">
<i class="icon fa fa-university">
<span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
</i>
<i class="icon2 fa fa-university">
<span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
</i>
</div>
</div>
<div class="bt_wrap" name="5">
<div class="box">
<i class="icon fa fa-file-pdf-o"></i>
<i class="icon2 fa fa-file-pdf-o"></i>
</div>
</div>
</div>
<div class="content">
<div id="slide1" class="slide form-container">
<h2 class="form-title">Welcome to Your Employment Guide!</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
<div class="text-center">
<input type="button" value="NEXT" class="btn btn-primary next">
</div>
</div>
<div id="slide2" class="slide form-container">
<h2 class="form-title">Some other title</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h4>
<div class="text-center">
<input type="button" value="NEXT" class="btn btn-primary next">
</div>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

How to display my sorted prices by click event? - javascript

Related

White Space at bottom of page

Testimonial slider with object constructor

How to set a position that changes when the window size changes

Sidebar Open By Default on Desktop, Closed on mobile

swapping div content using jquery [closed]

Categories

Resources