We Keep Coding

I tried creating a image popup but failed badly here my script anyone can help me out

hello all I am working on image popup that appears after clicking on banner I tried some basic js concept but failed badly . looking forward HELP pps
"""
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<a class="close" href="#">×</a>
</div>
</div>
<button href="#popup_flight_travlDil3" onclick="show('cover')">kk</button>
<a class="close_flight_travelDl" href="#">×</a>
<script>
$(function(){
$("button-link").click(function(){
$(".cover").fadeIn("300");
})
$(".cover,.close").click(function(){
$(".cover").fadeOut("300");
})
$(".contents").click(function(e){
e.stopPropagation();
})
})
</script>
<style>
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
z-index: 5;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: 30px;
right: 20px;
transition: all 200ms;
font-size: 95px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
</style>
"""
LOOKING FOR SOLUTION THAT REPLACE BUTTON WITH THE A CLASS LINK OR ANYOTHER WAY ROUND

replacing button with an img tag and adding eventListener to open or close the popup
let btn = document.querySelector(".btn");
let cover = document.querySelector(".cover");
let closebtn = document.querySelector(".close");
btn.addEventListener("click", () => {
cover.classList.toggle("active")
})
closebtn.addEventListener("click", () => {
cover.classList.remove("active")
})
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
margin-left: 100px;
z-index: 5;
}
.cover.active {
display: block;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: -10px;
right: 10px;
transition: all 200ms;
font-size: 65px;
font-weight: bold;
text-decoration: none;
color: #000000;
background-color: transparent;
border: none;
}
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<button class="close">×</button>
</div>
</div>
<img class="btn" src="https://images.unsplash.com/photo-1657299156538-e08595d224ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt "">

How can I keep my site/image centered when browser size shrinks?

So I am new to the front end world, and trying to get my image to stay center when I shrink the browser. How would I go about doing this? I tried a couple things but I couldn't quite get it to work. Everything looks great before I make the browser smaller. Is it a simple line in my css I need to add or is it more complicated than that?
My image
EDIT: added a screenshot of what's happening even after I do margin 0 auto. Same issue.
$(document).ready(function() {
console.log('loaded')
var weapons = [{
"name": "44_pistol",
"damage": 48,
"ammo": 150,
"fire_rate": 6,
"range": 119,
"accuracy": 66,
"weight": 4.2,
"value": 99,
},
{
"name": "10mm_pistol",
"damage": 18,
"ammo": 300,
"fire_rate": 46,
"range": 119,
"accuracy": 61,
"weight": 4.2,
"value": 53,
},
{
"name": "assault_rifle",
"damage": 30,
"ammo": 400,
"fire_rate": 40,
"range": 119,
"accuracy": 72,
"weight": 13.1,
"value": 144,
}
];
$('#pic1').on('click', function picture() {
console.log('loaded')
var pic = '44_pistol.png'
document.getElementById('pic1').src = pic.replace('90x90', '225x225');
})
$('.item-list a').on('click', function(e) {
var current_item = $(e.currentTarget).attr('class');
console.log(current_item);
for (item in weapons) {
if (weapons[item].name == current_item) {
console.log(weapons[item])
var container = $('.item-stats');
container.find('.damage').html(weapons[item].damage);
container.find('.ammo').html(weapons[item].ammo);
container.find('.fire_rate').html(weapons[item].fire_rate);
container.find('.range').html(weapons[item].range);
container.find('.accuracy').html(weapons[item].accuracy);
container.find('.weight').html(weapons[item].weight);
container.find('.value').html(weapons[item].value);
};
}
});
$('.item-list a').on('click', function(e) {
$('.item-list a').removeClass('active');
$(e.currentTarget).addClass('active');
});
});
#font-face {
font-family: Pipboy;
src: url('../monofonto.ttf');
}
body {
font-family: Pipboy, sans-serif;
color: #14fe17;
background-color: #292f26 !important;
}
body::after {
height: 100%;
width: 100%;
content: "";
position: absolute;
top: 0px;
left: 0px;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .04) 1px, transparent 1px, transparent 2px);
opacity: .3;
z-index: 1000000;
pointer-events: none;
}
.navbar {
border-bottom: 2px solid;
margin: 0px 10px;
}
.navbar.navbar-light::before,
.navbar.navbar-light::after {
height: 5px;
width: 2px;
content: "";
position: absolute;
display: block;
z-index: 5000;
background: #14fe17;
;
bottom: -7px;
}
.navbar::before {
left: 0px;
}
.navbar::after {
right: 0px;
}
li.navbar-item.active {
width: 230px !important;
}
ul>li.nav-item>a.nav-link,
ul>li.navbar-item.active>a.nav-link {
color: #14fe17 !important;
font-size: 32px;
line-height: 22px;
padding-bottom: 0px;
flex: 1 1 auto;
text-align: center
}
.navbar-item.active::before {
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 26px;
top: 14px;
background: #272b23;
border-left: 2px solid;
border-right: 2px solid;
border-top: 2px solid;
left: 0px;
flex: 1 1 auto;
text-align: center
}
.navbar-light .navbar-nav>li.navbar-item.active>.nav-link {
text-align: center;
width: 100%;
margin: auto;
font-size: 32px;
line-height: 22px;
padding-bottom: 0px;
z-index: 50;
position: relative;
background: #262b23
}
.navbar-nav {
width: 100%;
}
.navbar-light ul.navbar-nav>li {
display: block;
position: relative;
width: 10%;
}
.center-image {
position: absolute;
margin-left: 360px;
object-fit: cover !important;
object-position: 50% 50% !important;
}
.center-image img {
background: transparent;
display: block;
position: relative;
max-height: 300px;
margin-top: 100px;
filter: grayscale(1)sepia(100%)hue-rotate(55deg)saturate(7)brightness(1)contrast(2);
object-fit: cover !important;
object-position: 50% 50% !important;
}
#targetImg {
height: 200% !important;
width: 200% !important;
max-height: 1000px !important;
margin-top: 150px !important;
}
.pip-footer {
position: fixed;
bottom: 0;
width: calc(100% - 20px);
margin: 0px;
}
.navbar.navbar-light .navbar-nav {
margin: 0px 200px;
}
.navbar.navbar-light .navbar-nav>li {
padding: 0px 20px;
}
.nav.nav-tabs {
margin: 20px;
border-bottom: none;
}
.nav.nav-tabs>.nav-item>.nav-link:hover {
border: 1px solid transparent;
}
.nav.nav-tabs>li>a {
font-size: 26px !important;
background: transparent !important;
border: 1px solid transparent !important;
padding: 5px 10px;
}
.nav.nav-tabs>li:nth-child(2)>a {
opacity: .5;
}
.nav.nav-tabs>li:nth-child(3)>a {
opacity: .2;
}
.level-progress {
width: 100%;
height: 10px;
border: 2px solid;
display: inline-block;
width: 70%;
}
.level-progress-indicator {
height: 6px;
background: #14fe16;
position: relative;
width: 70%;
}
.navbar.navbar-light.pip-footer {
border: none;
font-size: 22px;
}
.navbar.pip-footer .col-3,
.navbar.pip-footer .col-6 {
background: rgba(16, 255, 0, 0.15);
padding: 5px 5px;
}
.navbar.pip-footer .col-6 {
margin: 0px 5px;
flex: 0 0 48%;
}
.stat-bar {
width: 60px;
margin: auto;
}
#status P {
max-width: 400px;
margin: auto;
}
.stat-bars>.row {
margin-bottom: 125px;
}
#top-stat-bar {
margin-top: 60px;
margin-bottom: 100px;
padding-top: 25px;
}
.w10 {
width: 10%;
}
.w20 {
width: 20%;
}
.w30 {
width: 30%;
}
.w40 {
width: 40%;
}
.w50 {
width: 50%;
}
.w60 {
width: 60%;
}
.w70 {
width: 70%;
}
.w80 {
width: 80%;
}
.w90 {
width: 90%;
}
.tab-content {
margin-right: 80px;
}
.stat-numbers {
margin-top: -75px;
}
.stat-numbers .col-1 {
background: rgba(16, 255, 0, 0.15);
margin-right: 4px;
max-width: 4%;
}
.stat-numbers .col-2 {
background: rgba(16, 255, 0, 0.15);
margin-right: 4px;
max-width: 9%;
;
}
.stat-numbers .col-1.transparent,
.stat-numbers .col-2.transparent {
background: transparent;
}
.stat-numbers img {
background: transparent;
width: 100%;
filter: grayscale(1) brightness(200) contrast(0) sepia(100%) hue-rotate(55deg) saturate(20);
}
.stat-numbers img.sm-image {
width: 17px;
margin-left: -5px;
}
.stat-numbers img.helmet-icon {
width: 80%;
margin-left: 8px;
margin-top: 5px;
}
.spacer-numbers {
width: 335px
}
#status.tab-pane.full {
width: 100%;
max-width: 100%;
}
.item-list {
float: left;
padding: 0px;
list-style: none;
margin: 0px;
}
.item-list li a {
display: block;
width: 300px;
padding: 5px 10px;
border-radius: 2px;
color: #14fe17;
padding-left: 25px;
text-decoration: none !important;
}
.item-list li a:hover {
text-decoration: none;
background: #14fe17;
color: #272b23;
}
.item-list a.active::before {
content: "";
display: block;
position: absolute;
height: 10px;
width: 10px;
background: #14fe17;
left: 25px;
margin-top: 7px;
}
.item-list a.active:hover::before {
background: #272b23;
}
.tab-pane.full {
height: calc(100vh - 180px);
}
.item-stats {
position: absolute;
right: 0px;
bottom: 50px;
width: 200px;
}
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
.item-stats .row .col-12 {
background: rgba(16, 255, 0, 0.15);
margin-bottom: 2px;
}
#pic1 {
display: block;
width: 250px;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/pipboy.app.css" />
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light ">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="navbar-item active">
STAT
</li>
<li class="nav-item">
INV
</li>
<li class="nav-item">
<a class="nav-link" href="#">DATA</a>
</li>
<li class="nav-item">
MAP
</li>
<li class="nav-item">
RADIO
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href='#status' class="nav-link" data-toggle="tab" role="tab">
STATUS
</a>
</li>
<li class="nav-item">
<a href='#special' class="nav-link" data-toggle="tab">
SPECIAL
</a>
</li>
<li class="nav-item">
<a href="#perks" class="nav-link" data-toggle="tab">
PERKS
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="status" role="tabpanel">
<div class="center-image">
<img src="vb.png" />
</div>
</div>
<div class="stat-bars">
<div class="row" id="top-stat-bar">
<div class="col-12 ">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator" width="70%"></div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-8">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator w40" width="70%"></div>
</div>
</div>
</div>
<div class="col-0">
</div>
<div class="col-0">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator w90" width="70%"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator w70" width="70%"></div>
</div>
</div>
</div>
<div class="col-0">
</div>
<div class="col-0">
<div class="stat-bar">
<div class="level-progress w60">
<div class="level-progress-indicator" width="70%"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator w30" width="70%"></div>
</div>
</div>
</div>
</div>
<div class="row stat-numbers">
<div class="spacer-numbers"></div>
<div class="col-2">
<img src="gun.png" class="img-responsive">
</div>
<div class="col-1">
<div class="icon">
<img src="crosshair.png" class="sm-image img-responsive">
</div>
<div class="points">18</div>
</div>
<div class="col-1 transparent">
</div>
<div class="col-2">
<img src="helmet2.png" class=" helmet-icon img-responsive">
</div>
<div class="col-1">
<div class="icon">
<img src="energy.png" class=" energy-icon img-responsive">
</div>
<div class="points">18</div>
</div>
<div class="col-1">
<div class="icon">
<img src="nuclear.png" class=" nuclear-icon img-responsive">
</div>
<div class="points">18</div>
</div>
<div class="col-2 transparent"></div>
</div>
<div class="tab-pane" id="special" role="tabpanel">
</div>
<div class="tab-pane" id="perks" role="tabpanel">
</div>
</div>
</div>
</div>
</div>
<navbar class="navbar navbar-expand-lg navbar-light pip-footer">
<div class="container-fluid">
<div class="col-3">
HP 90/90
</div>
<div class="col-6">
<span> LEVEL 1 </span>
<div class="level-progress">
<div class="level-progress-indicator" width="70%"></div>
</div>
</div>
<div class="col-3">
AP 50/50
</div>
</div>
</navbar>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/pipboy.app.js"></script>
</body>
</html>

You can ignore your center-image function and replace center-image img with this instead and it will center on all devices. The key to this is margin:0 auto;. Which sets the left and right margins to auto.
.center-image img {
margin:0 auto;
background: transparent;
display: block;
max-height: 300px;
margin-top: 100px;
filter: grayscale(1)sepia(100%)hue-rotate(55deg)saturate(7)brightness(1)contrast(2);
}

Display separate sections of an html page on a button click [duplicate]

This question already has answers here:
JavaScript hide/show element
(13 answers)
Closed 2 years ago.
Good day,
I'm tring to display separately two sections (p1 and p2) of my html page. In other words, when I click on 1st button, I would like section "p1" to be displayed and section "p2" to be hidden, and conversely when I click on button p2, I would like only section "p2" to be visible.
So far, I am not very successful in my attempts.
Do you have any hints which would be of great help to progress ?
Many thanks for your time and best wishes
Here below is my html code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/mystyle.css?rnd=999" />
<script type="text/javascript" src="scripts/date_time.js"></script>
<script type="text/javascript" src="scripts/demo.js"></script>
</head>
<body>
<div class="div_screen">
<div class="div_screen_left_frame">
<div class="div_screen_icon">
<img src="assets/icons/logo_Domoos.png" alt ="" style="width:80px;height:58px;">
</div>
<div class="div_screen_nav1">
<ul id="menu">
<button class="cupid-blue" href="#p1"> Display section 1 (p1)
<button class="cupid-blue" href="#p2"> Display section 2 (p2)
</ul>
</div>
</div>
<div class="div_screen_contents_frame">
<div class="page" id="p1">
<section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the first part I would like to show separately</span> </section>
</div>
<div class="page" id="p2">
<section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the second part I would like to show separately</span> </section>
</div> </div>
<div class="div_screen_up_frame">
<div class="div_current_meteo_frame">
<div class="div_current_meteo_icon">
<img src="assets/meteo_icons/eclaircies-big.png" alt="" style="width:55px;height:55px;">
</div>
<div class="div_current_meteo_temperature">-23°C</div>
<div class="div_current_meteo_condition">Nuit avec averses de neige faible</div>
<div class="div_sunrise_sunset">
<img src="assets/icons/sun_icon.png" alt="" width="14" height="14">↑ 05:38 <img src="assets/icons/sun_icon.png" alt="" width="14" height="14">↓ 21:16
</div>
<div style="width:50px;height:50px;border:1px solid #000;"></div>
</div>
<div class="div_forecast_meteo_frame">
<div class="div_forecast_meteo_day1">
<div class="div_forecast_weekday">Vendredi</div>
<div class="div_forecast_date">31.05.2020</div>
<div class="div_forecast_icon">
<img src="assets/meteo_icons/eclaircies.png" alt="" width="23" height="23">
</div>
<div class="div_forecast_text">Nuit avec développement nuageux</div>
<div class="div_forecast_temperature">24°C | 15°C</div>
</div>
<div class="div_forecast_meteo_day2">
<div class="div_forecast_weekday">Samedi</div>
<div class="div_forecast_date">99.99.9999</div>
<div class="div_forecast_icon">
<img src="assets/meteo_icons/eclaircies.png" alt="" width="23" height="23">
</div>
<div class="div_forecast_text">Nuit avec averses de neige faible</div>
<div class="div_forecast_temperature">-24°C | -20°C</div>
</div>
<div class="div_forecast_meteo_day3">
<div class="div_forecast_weekday">Dimanche</div>
<div class="div_forecast_date">77.77.7777</div>
<div class="div_forecast_icon">
<img src="assets/meteo_icons/eclaircies.png" alt="" width="23" height="23">
</div>
<div class="div_forecast_text">Nuit avec averses de neige faible</div>
<div class="div_forecast_temperature">-24°C | -20°C</div>
</div>
</div>
<div class="div_screen_datetime">
<div id="date">
<script type="text/javascript">window.onload = getDate('date');</script>
</div>
<div id="time">
<script type="text/javascript">window.onload = getTime('time');</script>
</div>
</div>
</div>
<div style="width:900px;height:540px;border:0px solid #ffaacc;"></div>
</div>
</body>
</html>
Not quite sure if the css might be helpful, but here it is :
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 19.0%;
padding: 2px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
.div_screen {
font-family:"Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 90%;
color: blue;
position: fixed;
top: -3;
left: -3;
width: 1005px;
height: 540 px;
border: 2px solid #de2be4;
}
.div_screen_datetime
{
position: absolute;
right: 1px;
top: 0;
width: 170px;
border: 1px solid red;
font-size: 120%;
text-align: right;
height: 95px; /*50*/
}
.div_screen_up_frame {
position: absolute;
left: 150px;
top: 1px;
width: 852px;
height:95px;
border: 1px solid blue;
}
.div_screen_left_frame {
position: absolute;
left: 1px;
top: 1px;
width: 146px;
height:536px;
border: 1px solid blue;
}
.div_screen_contents_frame {
position: absolute;
left: 150px;
top: 99px;
width: 852px;
height:438px;
border: 1px solid blue;
}
.div_screen_icon {
position: absolute;
left: 0px;
top: 0px;
width: 145px;
height: 95px;
border: 1px solid black;
}
.div_screen_nav1 {
position: absolute;
left: 0px;
top: 95px;
width: 145px;
height: 300px;
border: 1px solid black;
}
.div_screen_nav2 {
position: absolute;
left: 0px;
top: 398px;
width: 145px;
height: 137px;
border: 1px solid black;
}
.div_current_meteo_frame {
position: absolute;
left: 0px;
top: 0px;
width: 185px;
height:95px;
border: 1px solid black;
}
.div_sunrise_sunset {
position: absolute;
font-size: 75%;
left: 2px;
top: 72px;
}
.div_current_meteo_icon {
position: absolute;
left: -5px;
top: 1px;
width: 100px;
}
.div_current_meteo_temperature {
position: absolute;
font-size: 250%;
/*text-align: center;*/
left: 80px;
top: 0px;
color: black;
}
.div_current_meteo_condition {
position: absolute;
font-size: 75%;
/*text-align: center;*/
left: 2px;
top: 55px;
color: black;
}
.div_forecast_meteo_frame {
position: absolute;
left: 186px;
top: 0px;
width: 492px;
height:95px;
border: 1px solid black;
}
.div_forecast_meteo_day1 {
position: absolute;
font-size: 95%;
left: 1px;
top: 1px;
width: 489px;
height:29px;
border: 1px solid #73AD21;
}
.div_forecast_meteo_day2 {
position: absolute;
font-size: 95%;
left: 1px;
top: 31px;
width: 489px;
height:29px;
border: 1px solid #73AD21;
}
.div_forecast_meteo_day3 {
position: absolute;
font-size: 95%;
left: 1px;
top: 61px;
width: 489px;
height:29px;
border: 1px solid #73AD21;
}
.div_forecast_weekday {
position: absolute;
font-size: 100%;
color: black;
left: 0px;
top: 2px;
text-align: left;
border: 1px solid yellow;
}
.div_forecast_date {
position: absolute;
font-size: 100%;
color: black;
left: 65px;
top: 2px;
text-align: left;
border: 1px solid yellow;
}
.div_forecast_icon {
position: absolute;
font-size: 100%;
color: black;
left: 138px;
text-align: left;
border: 1px solid yellow;
}
.div_forecast_text {
position: absolute;
font-size: 100%;
color: black;
left: 165px;
top: 2px;
text-align: left;
border: 1px solid yellow;
}
.div_forecast_temperature {
position: absolute;
font-size: 100%;
color: black;
right: 1px;
top: 2px;
text-align: right;
border: 1px solid yellow;
}
button.cupid-blue {
background-color: #d7e5f5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
border-top: 1px solid #abbbcc;
border-left: 1px solid #a7b6c7;
border-bottom: 1px solid #a1afbf;
border-right: 1px solid #a7b6c7;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
color: #1a3e66;
font: normal 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 6px 0 3px 0;
text-align: center;
text-shadow: 0 1px 1px #fff;
width: 140px;
height: 40px;
margin-top: 5px;
margin-bottom: 5px;
left: 5 px;
}
ul {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
margin: auto;
width: 10%;
padding: 0;
text-align: center;
}

just find the clicked item related div and show it and hide the other one.
I have created the logic, just use it in your code
$(document).ready(function(){
$('#menu button').click(function(){
var hrefId = $(this).attr('href');
$('.div_screen_contents_frame .page').hide();
$('.div_screen_contents_frame').find(hrefId).show();
});
});
.page{display: none;}
.page.active {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<button class="cupid-blue" href="#p1"> Display section 1 (p1)
<button class="cupid-blue" href="#p2"> Display section 2 (p2)
</ul>
</div>
</div>
<div class="div_screen_contents_frame">
<div class="page active" id="p1">
<section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the first part I would like to show separately</span> </section>
</div>
<div class="page" id="p2">
<section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">This is the second part I would like to show separately</span> </section>
</div>
use below part as it is in your code, as you asked in Comment
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>$(document).ready(function(){
$('#menu button').click(function(){
var hrefId = $(this).attr('href');
$('.div_screen_contents_frame .page').hide();
$('.div_screen_contents_frame').find(hrefId).show();
});
});</script>
as per our Discussion I am adding a pure JS solution here. Check it.
function toggleDisplay(className, displayState){
var elements = document.getElementsByClassName(className)
for (var i = 0; i < elements.length; i++){
elements[i].style.display = displayState;
}
}
function toggle(){
document.onclick = function(e) {
if (e.target.tagName == 'BUTTON') {
var href = e.target.getAttribute("href");
toggleDisplay('page', 'none');
document.getElementById(href).style.display = 'block';
}
}
}
.page{display: none;}
.page.active {display: block;}
<ul id="menu">
<button class="cupid-blue" href="p1" id="btnOne" onclick="toggle(this)"> Display section 1 (p1)</button>
<button class="cupid-blue" href="p2" id="btnTwo" onclick="toggle(this)"> Display section 2 (p2)</button>
</ul>
</div>
</div>
<div class="div_screen_contents_frame">
<div class="page active" id="p1">
<section class="icon fa fa-bolt" id="pOne"><span class="title">Bolt</span><span class="hint">This is the first part I would like to show separately</span> </section>
</div>
<div class="page" id="p2">
<section class="icon fa fa-bolt" id="pTwo"><span class="title">Bolt</span><span class="hint">This is the second part I would like to show separately</span> </section>
</div>
</div>

Dropdown won't work when hovering nav bar

I've been having a problem with a dropdown menu option. The thing refuses to display when I hover "Store". I've already tried in different ways (in some I was almost lucky, in others not so much) but in the end nothing really worked for me.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("tituloh").style.fontSize = "15px";
document.getElementById("tituloh").style.marginBottom = "70px";
document.getElementById("tituloh").style.top = "20px";
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "47px";
} else {
document.getElementById("tituloh").style.fontSize = "30px";
document.getElementById("tituloh").style.top = "35px";
document.getElementById("tituloh").style.marginBottom = "100px"
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "50px";
}
}
#body {
margin: 0px;
}
#remove {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
}
.order {
display: inline-block;
}
#remove .opt {
display: inline-block;
color: white;
text-align: center;
font-size: 24px;
padding: 14px 16px;
background-color: black;
text-decoration: none;
}
#remove .opt:hover,
.dropmenu:hover .dropbutton {
background-color: white;
color: black;
}
.dropmenu {
float: right;
}
.dropmenu .dropbutton {
font-size: 24px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropcont {
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
}
.dropcont .dropitem {
text-decoration: none;
width: 150px;
height: 30px;
margin: 5px 0;
padding-top: 5px;
padding-left: 5px;
display: inline-block;
text-align: left;
}
.dropcont a {
text-decoration: none;
color: black;
font-size: 24px;
}
.dropcont a:hover {
text-decoration: underline;
transition: 0.5s;
}
.dropmenu:hover .dropcont {
display: block;
}
#header {
left: 0;
top: 0;
text-align: center;
padding: 20px 5px;
padding-bottom: 0px;
position: fixed;
width: 100%;
margin: 0px;
padding-left: 0px;
transition: 0.2s;
background-color: black;
background-image: url(header/AvettBrothers-loja.jpg);
background-repeat: no-repeat;
background-position: 0 10%;
background-size: cover;
z-index: 1;
}
#tituloh {
position: relative;
top: 35px;
text-shadow: -5px 5px 10px #000000;
font-size: 30px;
color: white;
transition: 0.3s;
margin-bottom: 100px;
}
.sales {
margin-top: 300px;
}
.thumbnails {
width: 50%;
margin: 0 auto;
text-align: center;
}
#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
position: relative;
display: inline;
border: solid red;
padding: 20px 0;
margin-bottom: 100px;
}
img.contrast {
margin: 20px 10px;
filter: contrast(70%) opacity(90%);
border: solid blue;
}
.textimgcentro {
position: absolute;
left: 0;
top: -150%;
width: 100%;
font-size: 30px;
text-align: center;
color: white;
text-shadow: -10px 5px 10px #000000;
border: solid black;
}
#top {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" ; http-equiv="refresh" content="5">
<title>Loja</title>
<link rel="stylesheet" type="text/css" href="loja/loja.css">
<script type="text/javascript" src="loja/loja.js"></script>
</head>
<body>
<div id="header">
<div id="tituloh">
<h1>Store</h1>
</div>
<ul id="remove">
<li class="order">Home</li>
<li class="order">About</li>
<li class="order">Albuns</li>
<li class="order">Tours</li>
<li class="dropmenu, order">
<a href="#link" class="dropbutton, opt">
Store
</a>
<div class="dropcont">
T-Shirts<br>
Jackets<br>
Posters<br>
Accessories<br>
Side Projects<br>
Kids<br>
</div>
</li>
<li class="order">Forum</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="sales">Sales</div>
<div class="thumbnails">
<div id="tshirts">
<img src="loja/thumbnails/tshirts.jpg" class="contrast">
<div class="textimgcentro">
T-Shirts
</div>
</div>
<div id="casacos">
<img src="loja/thumbnails/casacos.jpg" class="contrast">
<div class="textimgcentro">
Jackets
</div>
</div>
<div id="posters">
<img src="loja/thumbnails/posters.jpg" class="contrast">
<div class="textimgcentro">
Posters
</div>
</div>
<div id="acessorios">
<img src="loja/thumbnails/acessorio.jpg" class="contrast">
<div class="textimgcentro">
Accessories
</div>
</div>
<div id="projects">
<img src="loja/thumbnails/project.jpg" class="contrast">
<div class="textimgcentro">
Side Projects
</div>
</div>
<div id="kids">
<img src="loja/thumbnails/kids.jpg" class="contrast">
<div class="textimgcentro">
Kids
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="bestsell">
<div id="top">
<h1>Top Products</h1>
</div>
</div>
<hr id="cont"> Contactos Oficiais: <br /><br />
<img src="loja/Contactos/facebook.png" ; height="50" ; width="50" ; title="Facebook" ; alt="Link para Facebook">
<img src="loja/Contactos/insta.png" ; height="50" ; width="50" ; title="Instagram" ; alt="Link para Instagram">
<img src="loja/Contactos/twitter.png" ; height="50" ; width="50" ; title="Twitter" ; alt="Link para Twitter">
</body>
</html>
How can I fix this?
Also, how do I make it so that, while hovering the dropdown menu, "Store" remains with a white background and black text?
Thank you!

Slider pushed up by side-menu

I have been trying to make my slider stay in the same place when the side-menu of my page comes in from the left on the page. I have been searching for answers and there seems to be some people who have encountered the same problem in various situations.
I have tried to change the position properties of elements on the page without any success. Is there anyone who might be able to help me with this problem?
JSFiddle: https://jsfiddle.net/nekgunru/2/
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeOut(100);
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<title>Practice</title>
<!--Links to main Stylesheet-->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!--Links to "Oswald"-font-->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--Links to Javascript-file-->
<script type="text/javascript" src="app.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>

The issue is that you are fading out .icon-menu which causes it to be set to display: none; when the fading animation has completed. This means that it no longer effects the position of the elements around it and so in this case they move up.
none
Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.
display - (https://developer.mozilla.org/en-US/docs/Web/CSS/display)
One way to navigate around this problem would be to use fadeOuts callback to set visibility: hidden; instead as it makes the element invisible while still affecting the position of the elements around it.
hidden
The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).
visibility (https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
Change:
$('.icon-menu').fadeOut(100);
To:
$('.icon-menu').fadeOut(100, function() {
$(this).css({"display": "block", "visibility": "hidden"});
});
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeOut(100, function() {
$(this).css({"display": "block", "visibility": "hidden"});
});
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>
Alternative method
You could instead use animate and set the opacity to 0 as this will simply modify the transparency of the element, it will still effect the position of the elements around it.
Change:
$('.icon-menu').fadeOut(100);
To:
$('.icon-menu').animate({opacity: 0}, 100);
var main = function() {
/*Left slideout-menu*/
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('.icon-menu').animate({opacity: 0}, 100);
/*
$('body').animate({
left: "285px"
}, 200);*/
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-200px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
$('.icon-menu').fadeIn(220);
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentslide.next();
var currentDot = $('.active-dot');
var nextDot = active - dot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.faceOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-class');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
currentSlide = $('.active-slide');
prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
/*Initial Body*/
body {
left: 0;
right: 0;
overflow: hidden;
position: relative;
margin: 0;
}
/*Basic Styling*/
.container-main {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Menu Elements Styling*/
.menu {
background-color: #999;
left: -200px;
height: 100%;
position: fixed;
width: 200px;
box-shadow: 8px 0px 16px #111;
opacity: 0.9;
filter: alpha(opacity=90);
/* For IE8 and earlier */
}
.menu ul a:hover {
color: #21ADC6;
}
.menu ul {
border-top: 1px solid #ddd;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
text-shadow: 1px 1px #222;
font-weight: 400;
line-height: 35px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
text-decoration: #21ADC6;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
}
.icon-menu {
color: #1FBAD6;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-shadow: 1px 1px 1px #444;
cursor: pointer;
font-size: 25px;
padding-bottom: 20px;
padding-left: 20px;
padding-top: 2px;
text-decoration: bolder;
text-transform: uppercase;
width: 100px;
//Height can be fixed for smaller area of"icon-menu"-div.
}
.icon-menu p {
transition: all 0.5s ease;
background: transparent;
}
.icon-menu p:hover {
color: #eee;
text-shadow: 1px 1px 1px #111;
}
.slider {
position: relative;
width: 100%;
height: 450px;
border-bottom: 1px solid #222;
}
.slide {
background: url('') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/*Not added "icon-menu i" properties*/
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<!--Links to "Open Sans"-font-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<!--Links to JQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="menu">
<!--Close icon for Menu-->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!--Menu-->
<ul>
<li>Home
</li>
<li>Contact
</li>
<li>About
</li>
<li>12345
</li>
</ul>
</div>
<!--Main Body-->
<div class="container-main">
<!--Icon Menu-->
<div class="icon-menu">
<p>Menu</p>
</div>
<!--Image-div for the slider-->
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="">
</a>
</div>
</div>
</div>
</div>
</div>
<!--Navigation-div for the slider-->
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src=http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png><a/>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a ahref="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>