i'm new in JavaScript Programming. I have some problem. I added some picture that i want to be slideshow with previous and next buttons.
const carouselSlide = document.querySelector('.carouselImage');
const carouselImages = document.querySelectorAll('.carouselImage img');
//Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');
//Counter
let counter = 1;
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
nextBtn.addEventListener('click',()=>{
carouselSlide.style.transform = 'transform 0.4s ease-in-out';
counter++;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
First image and last image are duplicated becouse I want smoothness in this.
Look on the HTML Code
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Benedykt Borowski</title>
<meta name="description" content="Młody człowiek cieszącym się życjem"/>
<meta name="keyword" content="Młody, blog, programista, cieszący się życiem"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<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=Lato:wght#300&display=swap" rel="stylesheet">
<link href="CSS/styleshets.css" rel="stylesheet">
<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=Lato:wght#300;700&display=swap" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap');
</style>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="ParentDiv">
<div id="IndexName">
<h1>Banedykt Borowski</h1>
</div>
<div class="Menu-side-bar" id="IndexMenu">
<ul class="active"> Home</ul>
<li>About me
<div class="drop-down-menu">
<ul>
<li>My bedroom</li>
<li>My workspace</li>
</ul>
</div>
</li>
<li>My travels</li>
<li>My work</li>
<li>My Studing</li>
</div>
<div id="indexText>">
<div id="indexFirstWords">
<p>Witam,<br>
Jestem młodym człowiekiem chcącym pokazać wszystkim ludziom kim jestem,
co robie, jak korzystam z życia i oczywiście jak żyje.</p>
<p>Odrazu odsyłam do zakładek po lewej stronie! <br>
Tam dowiecię się o mnie trochę więcej :D</p>
<p>A jeżeli chcecie poczytać odrazu to na dole pare rzeczy!</p>
<p> Może zacznijmy od moich stanowisk które posiadałem przez większość życia</p>
</div>
<div class="carouselSlide">
<div class="carouselImage">
<img src="./img/setup/FifthPicOfSetup.png" id="LastClone" alt="">
<img src="./img/setup/FirstPicOfSetup.jpg" alt="">
<img src="./img/setup/SecondPicOfSetup.jpg" alt="">
<img src="./img/setup/ThirdPicOfSetup.jpg" alt="">
<img src="./img/setup/FourthPicOfSetup.png" alt="">
<img src="./img/setup/FifthPicOfSetup.png" alt="">
<img src="./img/setup/FirstPicOfSetup.jpg" id="FirstClone" alt="">
</div>
</div>
<button id="prevBtn">Previous</button>
<button id="nextBtn">Next</button>
</div>
</div>
</body>
</html>
And CSS file:
.Menu-side-bar{
background-color: aliceblue;
list-style-type:none;
width: 10%;
text-align: left;
font-family: 'Lato', sans-serif;;
font-weight: 300;
}
.Menu-side-bar ul{
padding: 5%;
}
.Menu-side-bar li{
padding: 3%;
}
.Menu-side-bar a{
text-decoration: none;
color: black;
}
.Menu-side-bar li:hover{
color: white;
background-color:green ;
}
.active{
color: white;
background-color:green ;
}
#ParentDiv{
width: 100%;
text-align: center;
}
#IndexName{
display: inline-block;
width: 100%;
color: black;
background-color: aliceblue;
}
#IndexMenu{
float: left;
}
#indexText{
float: left;
}
.drop-down-menu{
display: none;
}
.Menu-side-bar li:hover .drop-down-menu{
display: block;
position: absolute;
background-color: aliceblue;
width: 10%;
padding: 0.1%;
margin-left: -0.3%;
}
#indexFirstWords{
width: 50%;
text-align: center;
display: inline-block;
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.carouselSlide{
width: 27%;
margin: auto;
}
.carouselImage{
display: flex;
width: 100%;
height: 500px;
}
Don't know what happend there, my friend is doing it and it works perfectly.
Thanks for all help!
Related
let slidePosition = 0
const slides = document.querySelectorAll(".slidecontainer .slide")
const totalSlides= slides.length
const nextButton= document.querySelector("#prev-btn")
const prevButton= document.querySelector("#next-btn")
console.log(nextButton, prevButton)
console.log (slides[0].classList)
function updateSlidePosition (){
slides[slidePosition].classList.remove("visible-slide")
slides[slidePosition++].classList.add("visible-slide")
}
function moveToNext(){
if (slidePosition === totalSlides-1) {
slidePosition = 0}
else {slidePosition++}
updateSlidePosition ()
}
function moveToPrev() {
if (slidePosition < 0) {
slidePosition === totalSlides-1}
else {slidePosition--}
updateSlidePosition ()
}
nextButton.addEventListener("click", moveToNext, false)
prevButton.addEventListener("click", moveToPrev, false)
/*Global Styles
---------------------------*/
body {color:#1f1f2d; margin: 0px auto; font-family: 'Montserrat', sans-serif; overflow-y: auto; font-size:16px; overflow-x: auto; background-color: black;}
.borderstyle section {border-top: 9px solid #14141b;}
/*Intro
---------------------------*/
header {background-color: black; margin-bottom: 2px;}
/*Main Navigation
---------------------------*/
/*Events ------------ */
.events {background-color: black;}
.slidecontainer {position:relative;max-width:80%; max-height:50%;}
.slidecontainer .slide img{max-width:65%; max-height:40%; margin: 1%; box-shadow: 2px 2px 30px 2px #999999; border-radius: 10px;}
.slidecontainer .slide, .slide .slide-hidden {display:none;}
.slidecontainer .visible-slide{display: block;}
.slidecontainer .slider-actions {display:flex; position:absolute; justify-content: space-between; top:50%; transform: translateY(-65%); width: 65%;margin:1.2em;}
.slidecontainer button {display: flex; font-size: 1.5em; font-weight:bolder; border-radius: 40%; background-color: whitesmoke; font-family: serif; box-shadow: 2px 4px 15px 5px black; padding:2%;}
/*Media Queries
---------------------------*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add a relevant page title</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href= "D:\coding\CSS\raunaq-project\Stylestest.css" type="text/css">
<script src="D:\coding\CSS\raunaq-project\newJStest.js" defer></script>
</head>
<body>
<main>
<!-- *********************** MAIN NAVIGATION *********************** -->
<header>
</header>
<!-- *********************** END OF MAIN NAVIGATION *********************** -->
<section class = "events">
<h1>We made the news!</h1>
<p>hover over the images to see us in action</p>
<div class="slidecontainer">
<figure class="slide visible-slide"> <img src="placeholder-images\slider1.jpg" alt=""> </figure>
<figure class="slide"> <img src="placeholder-images\slider2.jpg" alt=""> </figure>
<figure class="slide"> <img src="placeholder-images\slider3.jpg" alt=""> </figure>
<figure class="slide"> <img src="placeholder-images\slider4.jpg" alt=""> </figure>
<div class= slider-actions>
<button id="prev-btn"><</button>
<button id="next-btn">></button>
</div>
</div>
</section>
</main>
</body>
</html>
The error I am getting is that the Const Slide.ClassList is not defined
I have added a few images into HTMl.
I have added a "slide" ID to all the images. I have added a "visible-slide" ID for the slide I want to make visible
I have added display:none CSS property to the images I want to hide (#slide) and have included a display:block property to the "visibile-slide"ID
I am using JS to set visible-slide class to the image I want displayed
I am trying to create collapsed navbar I did the HTML and CSS part but when I do the javascript part it gives me an uncaught reference error. My code is below I provided the HTML CSS and Javascript. I would appreciate it if someone can please help. Thank you in advance. I provided all the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="btnOpen()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li><a href="index.html">Home</a></li>
<li><a href="pages/about.html">About us</a></li>
<li><a href="pages/contact.html">How to reach me</a></li>
<li><a href="pages/portfolio.html">Portfolio</a></li>
</ul>
</nav>
<section class="sm">
<a href="#"><i class="fab fa-facebook-f" class="facebook"></i></a>
<a href="#"><i class="fab fa-twitter" class="twitter"></i></a>
<a href="#"><i class="fab fa-google" class="google"></i></a>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
</html>
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
nav {
display: flex;
position: absolute;
top: 100;
right: 0;
background-color: #e1e1e1;
width: 40vw;
height: 30vh;
}
nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
text-decoration: none;
color: #111;
}
nav ul {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px;
}
nav ul li a {
text-decoration: none;
color: #111;
font-style: bold;
font-weight: 600;
font-size: 15px;
font-family: Roboto;
}
function openBtn() {
document.getElementsByName("nav").style.width = "40vw";
document.getElementsByName("nav").style.height = "30vh";
}
openBtn();
function closeNav() {
document.getElementsByName("nav").style.width = "0";
document.getElementsByName("nav").style.height = "0";
}
closeNav();
I have added Id to nav and corrected js. Please review.
function btnOpen() {
document.getElementById("nav").style.width = "40vw";
document.getElementById("nav").style.height = "30vh";
}
btnOpen();
function closeNav() {
document.getElementById("nav").style.width = "0";
document.getElementById("nav").style.height = "0";
}
closeNav();
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="btnOpen()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav id='nav'>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
</html>
A couple things need to be fixed, and you don't need any external libraries to do so. First, you have a syntax error on your first div. Your onclick attribute should point to the function openBtn(), not btnOpen().
Secondly, your reference error stemmed from your two functions, openBtn() and closeNav(). When you called document.getElementsByName('nav') you cannot edit the style properties of a NodeList, which is what was being returned. Here's what I changed.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
closeNav()
By using a for-of loop, you can edit each nav element in the HTMLCollection returned by document.getElementsByTagName('nav').
Here's a working example.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
nav {
display: flex;
position: absolute;
top: 100;
right: 0;
background-color: #e1e1e1;
width: 40vw;
height: 30vh;
}
nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
text-decoration: none;
color: #111;
}
nav ul {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px;
}
nav ul li a {
text-decoration: none;
color: #111;
font-style: bold;
font-weight: 600;
font-size: 15px;
font-family: Roboto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="openBtn()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
sorry for my English.. I'm very new to javascript...
My code for small gallery build with ekko-lightbox and the Zoom with elevatezoom.
Here can show all my code.
Javascript
<!--- open window small image gallery --->
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox({alwaysShowClose: true});
});
<!--- hover small image gallery and display on big window --->
var thumbSelect = document.querySelectorAll('.thumb'),
windowSelect = document.querySelector('.window'), thumbCount;
for (thumbCount = 0; thumbCount < thumbSelect.length; thumbCount++) {
thumbSelect[thumbCount].onmouseover = function() {
windowSelect.src = this.src;
};
};
<!--- zoom window --->
$('#zoom_05').elevateZoom({
zoomType: 'inner',
cursor: 'crosshair',
});
.grosse-bild { padding: 40px; background-color: #dedee0; width: 53.7%; }
#lalo {width: 5%; margin-right: 10px; margin-right: 7px;}
.kleine-fenster{
width: 50%;
border: none;
padding-top: 5px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row {
margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<div class="container">
<div class="grosse-bild">
<div class="kleine-fenster" >
<img id="zoom_05" src="https://i.imgur.com/51pNImi.png" width="200" height="200" class="window" data-zoom-image="https://i.imgur.com/rt5G4Ol.jpg" >
</div>
</div>
<div class="row">
<a href="https://i.imgur.com/51pNImi.png" data-toggle="lightbox" data-gallery="gallery" class="kleine-bild" id="lalo" style="border-style: solid; border: 1px solid #b3b3b3; width: 5.2%;" >
<img src="https://i.imgur.com/rt5G4Ol.jpg" class="img-fluid thumb" >
</a>
<a href="https://i.imgur.com/S94Kz2A.png" data-toggle="lightbox" data-gallery="gallery" class="kleine-bild" style="border-style: solid; border: 1px solid #b3b3b3; width: 10%;">
<img src="https://i.imgur.com/cneOtx6.jpg" class="img-fluid thumb" >
</a>
</div>
</div>
My question, how does that zoom display on the grosse-bild Div, because now it displays only on kleine-fenster Div.
Can please someone explain with easy words how to solve this problem ?
This solution is similar to what you want:
var zoomConfig = {cursor: 'crosshair', zoomType: "inner" };
var image = $('#gallery_01 a');
var zoomImage = $('img#zoom_03');
zoomImage.elevateZoom(zoomConfig);//initialise zoom
image.hover(function(){
// Remove old instance od EZ
$('.zoomContainer').remove();
zoomImage.removeData('elevateZoom');
// Update source for images
zoomImage.attr('src', $(this).data('image'));
zoomImage.data('zoom-image', $(this).data('zoom-image'));
// Reinitialize EZ
zoomImage.elevateZoom(zoomConfig);
});
.grosse-bild { position: relative;margin-left: 0;width: 70%; display: block;
float: left; box-sizing: border-box;
}
.grosse-bild > img{ position:relative; max-height:100%; max-width: 100%;
vertical-align: middle;
border: 0;}
#lalo {width: 5%; margin-right: 10px; margin-right: 7px;}
.kleine-fenster{
display: block;
overflow: hidden;
height: 350px;
margin-bottom: 1em;
border: 1px solid #d8d8d8;
text-align: center;
line-height: 350px;
cursor: pointer;
}
#gallery_01{
position: relative;
float:left;
display: table;
line-height: 0;
content: '';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<div class="container">
<div class="grosse-bild">
<div class="kleine-fenster" >
<img style="border:1px solid #e8e8e6;" id="zoom_03" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png"
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg"
width="100%" />
</div>
</div>
<div id="gallery_01">
<a href="#" class="elevatezoom-gallery active" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg">
<img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" width="100" />
</a>
<a href="#" class="elevatezoom-gallery" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg">
<img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" width="100" />
</a>
<a href="#" class="elevatezoom-gallery" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg">
<img class="window" src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg" width="100" />
</a>
</div>
</div>
Just adjust style you want.
please help me with the implementation of the drop-down menu from the list. Now, for practice, I make a site using the Bootstrap 4 library, and I encountered such a problem when clicking on any of the buttons, the list only appears from the first button, but it is necessary that when you click on any of the buttons a nested list will drop out. Thanks!
let getList = document.querySelectorAll('.sideBtn');
for(let a of getList) {
console.log(a);
a.addEventListener('click' , showList);
}
function showList () {
let getHide = document.querySelector('.hide');
console.log(getHide);
for (let i = 0; i < 1; i++) {
if(getHide.style.display == 'block') {
getHide.style.display = 'none';
} else {
getHide.style.display = 'block';
}
}
}
/*for(let b of getHide) {
console.log(b);
if(b.style.display == 'none') {
b.style.display = 'block';
} else {
b.style.display = 'none';
}
}*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}
.sidebar {
position: fixed;
width: 250px;
height: 100%;
background: #042331;
transition: all .5s ease;
}
.sidebar ul {
list-style-type: none;
}
.sidebar ul li a {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
font-size: 20px;
color: white;
padding-left: 40px;
box-sizing: border-box;
border-bottom: 1px solid black;
border-top: 1px solid rgba(255,255,255,.1);
transition: .4s;
text-decoration: none;
}
ul li:hover a {
padding-left: 50px;
}
.sidebar ul a i {
margin-right: 16px;
}
.hide {
display: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<section class="sidebar">
<ul>
<li class="sideBtn">
<a href="#">
<i class="fas fa-tv"></i>
Сериалы
</a>
<ul class="hide">
<li><i class="fas fa-star"></i>Лучшие</li>
<li><a class="userChoice" href=""><i class="fas fa-user-check"></i>Выбор пользователей</a></li>
</ul>
</li>
<li class="sideBtn">
<a href="#">
<i class="fas fa-film"></i>
Фильмы
</a>
<ul class="hide">
<li><i class="fas fa-star"></i>Лучшие</li>
<li><a class="userChoice" href=""><i class="fas fa-user-check"></i>Выбор пользователей</a></li>
</ul>
</li>
</ul>
</section>
<script src="scritp.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>
Okey so when i tried to make dropdown responsive navigatorbar but it just dosen't work so if someone could help me with this that would be nice :)
More about my issue.
So menu should open when i press this button
picture of navbar
normally when i change
header nav ul height to 0 it closes it but when i change it to auto; it opens menu but it wont close it so i tried to make script that reads when you click that picture it will turn it to auto; but i dosen't seem to work.
so my problem is that i can't open it or close it.
fa-bars is picture from awesomefont just to make that clear.
Here some code.
$(document).ready(function() {
$(".fa-bars").on("click", function() {
$("header nav ul").toggleClass("open");
});
});
/* MOBILES */
#media screen and (max-width: 480px){
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery.js"></script>
<script src="js/mobile.js"></script>
</body>
</html>
You have not loaded your script file.
Try it with the correction I made here.
$(document).ready(function() {
$('.fa-bars').on('click', function() {
$('header nav ul').toggleClass('open');
});
});
#media screen and (max-width: 480px) {
#logo {
width: 80px;
margin-left: 30px;
margin-top: 15px;
}
}
header nav {
margin: 0;
float: none;
}
.fa-bars {
font-size: 24px;
display: inline-block;
width: 100%;
cursor: pointer;
text-align: right;
float: right;
margin: 13px 35px 0 0;
}
.fa-bars:hover {
opacity: 0.5;
}
header nav ul {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
header nav ul.open {
height: auto;
}
header nav ul li {
width: 100%;
padding: 5px 0;
margin: 0;
font-size: 17px;
border-top: 1px solid #dddddd;
}
header nav ul li:hover {
background-color: #eeeeee;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer src="js/fontawesome.js"></script>
<title>SeQaFin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div id="logo">
<a href="#">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<!-- NavBar -->
<nav id="main-nav">
<i class="fas fa-bars"></i>
<ul>
<li>Etusivu</li></li>
<li>Tieto</li>
<li>Liity</li>
</ul>
</nav>
</header>
<!-- Etusivu -->
<section id="Kotisivu">
<h3 id="seqatext">DOwn</h3>
<a href="#Tietoa">
<img src="img/down.png" alt="Down">
</a>
</section>
<!-- Tietoa -->
<section id="Tietoa">
<h3>Tietoa</h3>
<hr>
<img src="img/avatar.png" alt="Avatar">
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<h4></h4>
<p>
</p>
<br><br><br><br><br>
</section>
<!-- Liity -->
<section id="Liity">
<h3>Liity</h3>
<hr>
<h4>Ohjeet</h4>
<p>Ohjeet Tähän!</p>
<form>
<input class="input_text" type="email" tabindex="1" placeholder="Sähköposti"><br>
<input class="input_text" type="text" tabindex="2" placeholder="Otsikko"><br>
<textarea class="input_text" tabindex="3" placeholder="Viesti"></textarea><br>
<input class="button" type="submit">
</form>
</section>
<footer>
<p>
</p>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>