I am trying to create a collapse navbar. I was wondering if you guys can check the code because whenever I refresh the website nothing happens and the console does not say any errors are in the code. The HTML, CSS, and JavaScript code are below. I would appreciate if you can look over it and give me feedback so that I can correct my mistake. Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Welcome to my Portfolio</title>
</head>
<body>
<header class="index-header">
<a href="index.html" class="pic-link"
><img src="logo/logo.png" alt="" class="pic"
/></a>
<section class="container">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</section>
<nav class="index-nav">
<ul class="ul-index">
<li class="li-index">Home</li>
<li class="li-index">About</li>
<li class="li-index">Contact</li>
<li class="li-index">Portfolio</li>
</ul>
</nav>
<main class="index-main">
<img src="img/banner.png" alt="" class="main-img" />
</main>
</header>
<section id="home"></section>
<section id="about"></section>
<section id="contact"></section>
<section id="portfolio"></section>
<section id="case"></section>
</body>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"
></script>
<script src="js/main.js"></script>
</html>
#media screen and (min-width: 360px) {
* {
box-sizing: border-box;
}
.index-header {
width: 100%;
height: 100px;
background-color: #569188;
}
.index-header .pic-ink {
display: block;
}
.index-header .pic {
width: 100px;
height: 100px;
}
.index-header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.index-header .index-nav {
position: absolute;
top: 100px;
right: 0;
background-color: #569188;
width: 40vw;
height: 40vh;
z-index: 3;
opacity: 0;
}
.index-nav .ul-index {
display: flex;
flex-direction: column;
}
.ul-index .li-index {
display: flex;
justify-content: center;
padding: 15px;
font-size: 18px;
}
.ul-index .li-index .a-index {
text-decoration: none;
color: #111;
font-weight: 900;
}
.index-main {
}
.index-main .main-img {
width: 100vw;
height: 200px;
margin-bottom: 20px;
}
}
function showNav() {
let openBtn = document.querySelector(".container");
openBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "40vw";
document.querySelector(".index-nav").style.height = "40vh";
document.querySelector("index-nav").style.opacity = "1";
showNav();
});
}
function hideNav() {
let closeBtn = document.querySelector(".container");
closeBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "0";
document.querySelector(".index-nav").style.height = "0";
document.querySelector(".index-nav").style.opacity = "0";
hideNav();
});
}
There are a couple of things that need attention here. You should enclose the styling and javascript codes inside <style> and <script> tags if you want to keep them all in one file.
Also, see the modifications to the showNav and hideNav functions.
document.querySelector("index-nav") -> document.querySelector(".index-nav")
The class should be preceded by a .
showNav should call hideNav after execution to achieve the toggle event
function showNav() {
let openBtn = document.querySelector(".container");
openBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "40vw";
document.querySelector(".index-nav").style.height = "40vh";
document.querySelector(".index-nav").style.opacity = "1";
hideNav();
});
}
function hideNav() {
let closeBtn = document.querySelector(".container");
closeBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "0";
document.querySelector(".index-nav").style.height = "0";
document.querySelector(".index-nav").style.opacity = "0";
showNav();
});
}
#media screen and (min-width: 360px) {
* {
box-sizing: border-box;
}
.index-header {
width: 100%;
height: 100px;
background-color: #569188;
}
.index-header .pic-ink {
display: block;
}
.index-header .pic {
width: 100px;
height: 100px;
}
.index-header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.index-header .index-nav {
position: absolute;
top: 100px;
right: 0;
background-color: #569188;
width: 40vw;
height: 40vh;
z-index: 3;
opacity: 0;
}
.index-nav .ul-index {
display: flex;
flex-direction: column;
}
.ul-index .li-index {
display: flex;
justify-content: center;
padding: 15px;
font-size: 18px;
}
.ul-index .li-index .a-index {
text-decoration: none;
color: #111;
font-weight: 900;
}
.index-main {
}
.index-main .main-img {
width: 100vw;
height: 200px;
margin-bottom: 20px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Welcome to my Portfolio</title>
</head>
<body onload="showNav()">
<header class="index-header">
<a href="index.html" class="pic-link"
><img src="logo/logo.png" alt="" class="pic"
/></a>
<section class="container">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</section>
<nav class="index-nav" >
<ul class="ul-index">
<li class="li-index">Home</li>
<li class="li-index">About</li>
<li class="li-index">Contact</li>
<li class="li-index">Portfolio</li>
</ul>
</nav>
<main class="index-main">
<img src="img/banner.png" alt="" class="main-img" />
</main>
</header>
<section id="home"></section>
<section id="about"></section>
<section id="contact"></section>
<section id="portfolio"></section>
<section id="case"></section>
</body>
</html>
Related
I have this web page in construction, that should have a button that displays more buttons, but for some reason I don't know, these on hover hidden buttons don't appear (I've used this: https://es.stackoverflow.com/questions/126579/como-se-crea-un-bot%c3%b3n-que-despliegue-mas-botones). Any one know how to make this buttons appear? it seems to work fine with the snippet, then: what can be the problem? I whant it to be in separated files.
var flag = false;
$("#botones").mouseenter(function() {
if (!flag) {
flag = true;
$("#resto").show(200, function() {
flag = true;
});
}
}).mouseleave(function() {
$("#resto").hide(200);
});
* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;
}
div#tablas {
order: 1;
position: static;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
#media all and (max-width: 450px) {
div#tablas_carpetas {
display: grid;
}
div#tablas {
width: 100%;
order: 1;
}
div#carpetas {
width: 100%;
order: 2;
}
}
<!doctype html>
<html lang="es">
<head>
<title>Viewer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index_style_viewer.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="botones.js"></script>
</head>
<body>
<div id="general">
<div id="enlaces">
</div>
<div id="tablas_carpetas">
<div id="tablas">
</div>
<div id="carpetas">
<div id="botones" onmouseover="">
<button id="principal_1">Redes Sociales</button>
<div id="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div id="anuncios">
</div>
<div id="pie">
</div>
</div>
</body>
</html>
you have issue with your js condition i simply tried with jquery it works perfectly
$(document).ready(function(){
$("#botones").mouseenter(function(){
$("#resto").show();
});
$("#botones").mouseleave(function(){
$("#resto").hide();
});
});
* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;
}
div#tablas {
order: 1;
position:static;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
#media all and (max-width: 450px) {
div#tablas_carpetas {
display:grid;
}
div#tablas {
width: 100%;
order: 1;
}
div#carpetas {
width: 100%;
order: 2;
}
}
<!doctype html>
<html lang="es">
<head>
<title>Viewer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="general">
<div id="enlaces">
</div>
<div id="tablas_carpetas">
<div id="tablas">
</div>
<div id="carpetas">
<div id="botones">
<button id="principal_1">Redes Sociales</button>
<div id="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div id="anuncios">
</div>
<div id="pie">
</div>
</div>
</body>
</html>
I'm working on a portfolio website that is a full browser sized container which swaps images when moving the cursor from left to right.
the header and captions are involved in the jquery script in order to change their color according to the image that is shown.
this seems to work great but the only downside is that the header & caption are not visible until the cursor is moved across the browser when you just loaded the site.
Is there a way to make the text appear upon site load? like triggering a mouseover event when it loads so the text is already there? or maybe some less complicated fix...
In any case thanks so much for the help!
$.fn.swinger = function () {
return this.each(function () {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
// just added one line
$(".caption").text($(img).attr("alt"));
$(".caption")
.text($(img).attr("alt"))
.css('color', $(img).data('color'));
$('header').css('color', $(img).data('color'))
});
})
});
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px; }
div.swinger-container {
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
header {
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: -2px;
text-align: center;
z-index: 100;
-webkit-transition: all .2s;
transition: all .2s; }
header.header-about {
color: white !important;
background-color: white; }
header h1, header h2, header .about {
font-size: 1em;
font-weight: 400;
display: block;
line-height: 1.2em;
margin-bottom: 0;
padding-bottom: 0; }
header h1 {
text-align: left; }
header a {
text-decoration: none;
color: white;
line-height: 1; }
header .about {
text-align: left;
padding-bottom: 2px; }
.caption {
z-index: 100;
position: fixed;
left: 0;
right: 0;
bottom: 20px;
max-width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 50vw;
}
<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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>website title</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
<div class="left-holder">
<h1>my name</h1>
<h2>what I do</h2>
</div>
<div class="caption">
</div>
</header>
<div class="slides">
<div class="swinger-container">
<img src="https://images.unsplash.com/photo-1447703693928-9cd89c8d3ac5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 1"/>
<img src="https://images.unsplash.com/photo-1502239608882-93b729c6af43?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 2"/>
<img src="https://images.unsplash.com/photo-1516557070061-c3d1653fa646?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="white" alt="Caption 3"/>
<img src="https://images.unsplash.com/photo-1468657988500-aca2be09f4c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 4"/>
<img src="https://images.unsplash.com/photo-1488554378835-f7acf46e6c98?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 5"/>
<img src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80" class=“swinger_img_black” alt="Caption 6"/>
<img src="https://images.unsplash.com/photo-1517816743773-6e0fd518b4a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="black" alt="Caption 7"/>
<img src="https://images.unsplash.com/photo-1548685913-fe6678babe8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1923&q=80" data-color="black" alt="Caption 8"/>
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init()
{
$(".swinger-container").swinger();
}
</script>
<script src="swinger.js"></script>
</body>
</html>
Is this okay for you?
I have just used the first image as a default one. Then the mouse events will do the rest.
Added this in init:
let defaultImage = $("#default-image");
$(".caption").text(defaultImage.attr("alt")).css('color', $(defaultImage).data('color'));
$('header').css('color', $(defaultImage).data('color'));
$.fn.swinger = function() {
return this.each(function() {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
// just added one line
$(".caption").text($(img).attr("alt"));
$(".caption")
.text($(img).attr("alt"))
.css('color', $(img).data('color'));
$('header').css('color', $(img).data('color'))
});
})
});
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px;
}
div.swinger-container {
text-align: center;
/* ensures the image is always in the h-middle */
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
header {
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: -2px;
text-align: center;
z-index: 100;
-webkit-transition: all .2s;
transition: all .2s;
}
header.header-about {
color: white !important;
background-color: white;
}
header h1,
header h2,
header .about {
font-size: 1em;
font-weight: 400;
display: block;
line-height: 1.2em;
margin-bottom: 0;
padding-bottom: 0;
}
header h1 {
text-align: left;
}
header a {
text-decoration: none;
color: white;
line-height: 1;
}
header .about {
text-align: left;
padding-bottom: 2px;
}
.caption {
z-index: 100;
position: fixed;
left: 0;
right: 0;
bottom: 20px;
max-width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 50vw;
}
<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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>website title</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
<div class="left-holder">
<h1>my name</h1>
<h2>what I do</h2>
</div>
<div class="caption">
</div>
</header>
<div class="slides">
<div class="swinger-container">
<img id="default-image" src="https://images.unsplash.com/photo-1447703693928-9cd89c8d3ac5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 1" />
<img src="https://images.unsplash.com/photo-1502239608882-93b729c6af43?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 2" />
<img src="https://images.unsplash.com/photo-1516557070061-c3d1653fa646?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="white" alt="Caption 3" />
<img src="https://images.unsplash.com/photo-1468657988500-aca2be09f4c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 4" />
<img src="https://images.unsplash.com/photo-1488554378835-f7acf46e6c98?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" data-color="white" alt="Caption 5" />
<img src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80" class=“swinger_img_black” alt="Caption 6" />
<img src="https://images.unsplash.com/photo-1517816743773-6e0fd518b4a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" data-color="black" alt="Caption 7" />
<img src="https://images.unsplash.com/photo-1548685913-fe6678babe8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1923&q=80" data-color="black" alt="Caption 8" />
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init() {
$(".swinger-container").swinger();
// Just prepare the first setup here
// Note that I have added the ID default-image to the first image
let defaultImage = $("#default-image");
$(".caption").text(defaultImage.attr("alt")).css('color', $(defaultImage).data('color'));
$('header').css('color', $(defaultImage).data('color'));
}
</script>
<script src="swinger.js"></script>
</body>
</html>
I'm practising with JavaScript and hiding the image and the button. The footer keeps coming to the top of the page every time I execute the command. How can I correct this? I've tried many different options and I can't seem to get it to work right like position: sticky, bottom:0; for example.
I'm extremely new to this coding thing so I'm pretty sure I have no idea what I'm doing.
jQuery(document).ready(function() {
$(".myButton").click(function(){
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function(){
$(".poem").hide();
$(".resize").hide();
})
})
#charset "utf-8";
/* CSS Document */
.main-image {
display: block;
width: 25%;
margin-bottom: 30px;
}
.container {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
}
.overlay-content {
position: absolute;
bottom: 15%;
text-align: center;
width: 25%;
}
.resize {
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
footer {
background-color: brown;
border: solid;
position: sticky;
bottom: 0;
}
.myButton {
margin-left: 50%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>practice_overlay</title>
<link href="Overlay.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script_storage.js"></script>
</head>
<body>
<div class="container">
<p class="introduction">Lorem Ispum</p>
<img class="main-image" src="Devry Web Design Intro Course/Pictures/crystal-tear-3.jpg">
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
<footer>Lorem Ispum</footer>
</body>
</html>
You could use CSS grid - with the setup in the snippet below, you can "safely" work inside the div.outer part of the layout, without making the other parts of your page "jumping around" :)
jQuery(document).ready(function() {
$(".myButton").click(function() {
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function() {
$(".poem").hide();
$(".resize").hide();
})
})
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
display: grid;
grid-template-rows: calc(100vh - 30px) 30px;
grid-template-columns: 100%;
}
.outer {
background: gray;
padding: 8px 16px;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.container {}
#image {
height: 30px;
width: 30px;
}
.myButton {
margin: 0 auto;
}
footer {
background-color: brown;
padding: 8px 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<div class="outer">
<div class="container">
<p class="introduction">Introduction</p>
<img id="image" src="https://picsum.photos/30" alt="small image" />
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
</div>
<footer>
footer
</footer>
</div>
I'm trying to create a responsive navbar, but not all the items from my ul are showing,
PROBLEM:
console.log('works')
document.querySelector('.container__hamburger').addEventListener('click', ()=>{
document.querySelector('.container__navbar').classList.toggle('showMenu')
})
#import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
background-color: #2b2f33;
width: 100%;
height: 65px;
}
.container__navbar {
display: flex;
font-family: "Roboto", sans-serif;
width: 100%;
}
.container__logo {
display: inline;
width: 25%;
margin-right: 30px;
margin-left: 10px;
}
.navbar__list {
display: flex;
width: 100%;
list-style: none;
align-items: center;
color: #ffffff;
}
.list__item{
margin-right: 30px;
}
.container__hamburger {
display: none;
color: #ffffff;
align-self: center;
}
#media (max-width: 890px) {
.container {
position: fixed;
}
.container__navbar {
position: fixed;
height: 100%;
left: 0;
top: 65px;
transition: 0.5s;
background-color: #2b2f33;
transform: translateX(-100%);
width: 250px;
}
.showMenu {
transform: translateX(0);
}
.navbar__list {
display: block;
overflow-x: hidden;
overflow-y: scroll;
}
.container__hamburger {
display: block;
margin-left: auto;
margin-right: 30px;
}
.list__item {
width: 100%;
padding: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<img
class="container__logo"
src="assets/images/gamezonia.png"
alt="logo"
/>
<nav class="container__navbar">
<ul class="navbar__list">
<li class="list__item">Home</li>
<li class="list__item">Category 1</li>
<li class="list__item">Category 2</li>
<li class="list__item">Category 3</li>
<li class="list__item">Contact</li>
<li class="list__item">Item</li>
<li class="list__item">Item2</li>
<li class="list__item">Item3</li>
<li class="list__item">Item4</li>
<li class="list__item">Item5</li>
<li class="list__item">Item6</li>
</ul>
</nav>
<div class="container__hamburger">
<i class="fas fa-bars"></i>
</div>
</div>
<!-- FONT AWESOME -->
<script
src="https://kit.fontawesome.com/96fadf0e69.js"
crossorigin="anonymous"
></script>
<!-- FONT AWESOME -->
<script src="./index.js"></script>
</body>
</html>
You've dropped the .container__navbar down the viewport by 65 pixels. You need to take this off the 100% height using height:calc(100% - 65px);
console.log('works')
document.querySelector('.container__hamburger').addEventListener('click', ()=>{
document.querySelector('.container__navbar').classList.toggle('showMenu')
})
#import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
background-color: #2b2f33;
width: 100%;
height: 65px;
}
.container__navbar {
display: flex;
font-family: "Roboto", sans-serif;
width: 100%;
}
.container__logo {
display: inline;
width: 25%;
margin-right: 30px;
margin-left: 10px;
}
.navbar__list {
display: flex;
width: 100%;
list-style: none;
align-items: center;
color: #ffffff;
}
.list__item{
margin-right: 30px;
}
.container__hamburger {
display: none;
color: #ffffff;
align-self: center;
}
#media (max-width: 890px) {
.container {
position: fixed;
}
.container__navbar {
position: fixed;
height: calc(100% - 65px);
left: 0;
top: 65px;
transition: 0.5s;
background-color: #2b2f33;
transform: translateX(-100%);
width: 250px;
}
.showMenu {
transform: translateX(0);
}
.navbar__list {
display: block;
overflow-x: hidden;
overflow-y: scroll;
}
.container__hamburger {
display: block;
margin-left: auto;
margin-right: 30px;
}
.list__item {
width: 100%;
padding: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<img
class="container__logo"
src="assets/images/gamezonia.png"
alt="logo"
/>
<nav class="container__navbar">
<ul class="navbar__list">
<li class="list__item">Home</li>
<li class="list__item">Category 1</li>
<li class="list__item">Category 2</li>
<li class="list__item">Category 3</li>
<li class="list__item">Contact</li>
<li class="list__item">Item</li>
<li class="list__item">Item2</li>
<li class="list__item">Item3</li>
<li class="list__item">Item4</li>
<li class="list__item">Item5</li>
<li class="list__item">Item6</li>
</ul>
</nav>
<div class="container__hamburger">
<i class="fas fa-bars"></i>
</div>
</div>
<!-- FONT AWESOME -->
<script
src="https://kit.fontawesome.com/96fadf0e69.js"
crossorigin="anonymous"
></script>
<!-- FONT AWESOME -->
<script src="./index.js"></script>
</body>
</html>
$(".menu").click(function () {
if ('.pagelinks').style.display = 'none';
{
$('.pagelinks').style.display = 'block';
}
else
{
$('.pagelinks').style.display = 'none';
}
})
html,body
{
margin:0;
width: 100%;
overflow:hidden;
box-sizing: border-box;
height: 100%;
}
body
{
background: url(best8.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
header
{
width: 100%;
background-color: black;
height: 85px;
position: fixed;
}
.heading1
{
color:white;
position: relative;
align-content: center;
margin: 3em ;
top: 100px;
left: 675px;
}
.logo img
{
left: 0;
filter: brightness 100%;
position: fixed;
}
.menu
{
margin: auto;
margin-left: 75%;
display: block;
position: fixed;
top: 11px;
}
.nav div
{
height: 5px;
background-color: white;
margin: 4px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav
{
width: 30px;
display: block;
margin: 1em 0 0
}
.one
{
width: 30px;
}
.two
{
width: 20px;
}
.three
{
width: 25px;
}
.nav:hover div
{
width: 30px;
}
.pagelinks
{
margin: auto;
margin-left: 49%;
position: fixed;
top: -10px;
display: none;
}
.pagelinks ul
{
list-style-type: none;
}
.pagelinks ul li
{
float: left;
padding:30px;
margin: auto;
transition: 0.3;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
opacity: 0.6;
}
.pagelinks ul li:hover
{
color: green;
transition: 0.6s;
}
.logo img:hover
{
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<title>Goesta Calculators</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://use.typekit.net/axs3axn.js"></script>
<script>try{Typekit.load({ async: true});}catch(e){}</script>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="main.js" type="text/javascript"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="NewLogo.PNG" >
<div class="menu">
<a href="" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</a>
</div>
<nav class="pagelinks">
<ul>
<li>About</li>
<li>Contact</li>
<li>Calculators</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="heading1">
<h1>Estimate. Plan your future.</h1>
</div>
</body>
</html>
I'm trying to make an unordered list show/hide when another div with .menu class, is clicked. I've tried several different ways in javascript from research online but nothing is working. I also want it to transition slowly and smoothly. When I click the menu (I'm assuming because its a link) the page seems to refresh.
First, your condition syntax is very wrong.
if ('.pagelinks').style.display = 'none';
Don't put semicolon in there. And wrap your condition with open and close parenthesis.
Second, use .css() if you want to modify your css.
Here's the working version of your jQuery
$(".menu").click(function () {
if ($('.pagelinks').css("display") == 'none')
{
$('.pagelinks').css("display", "block");
}
else
{
$('.pagelinks').css("display", "none");
}
})
Also, don't use anchor tag on your nav if it is only a trigger. Use <div> instead.
Like this
<div class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
And if you have problem with the cursor not transforming into a hand, just have this in your css
.nav:hover
{
cursor: pointer;
}
Working Sandbox of your code HERE