Getting a jQuery toggle to work as expected

Getting a jQuery toggle to work as expected - javascript

I tried to make a menu on the side of JavaScript. I wanted to handle this problem with jQuery toggle, but it did not happen. Is it because the position is relative?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul{
margin: 0px;
padding: 0px;
}
ul li{
display: block;
}
ul li a{
display: block;
padding: 15px;
text-decoration: none;
color: white;
letter-spacing: 2px;
transition: all .25s ease-in-out;
border-bottom: 1px solid white;
}
hr{
float: left;
width: 100px;
}
div{
height: 400px;
width: 150px;
background-color: red;
display: inline-block;
position: relative;
right: 226px;
}
i{
margin-left: 200px;
display: inline-block;
font-size: 24px;
position: relative;
bottom: 201px;
background-color: white;
color: red;
right: 46px;
transition: all 1s ease ease-in-out;
}
ul li a:hover{
background-color: rgb(0,108,250);
}
i:hover{
color: rgb(0, 108, 250);
}
</style>
<script>
$(document).ready(function(){
$("i").click(function(){
$("#div1").toggle(500)
})
})
</script>
</head>
<body>
<i class="fas fa-bars"></i>
<div id="div1">
<ul>
<li>Ana Sayfa</li>
<li>Hakkimizda</li>
<li>Iletisim</li>
<li>Reklam</li>
<li>Daha Fazla</li>
</ul>
</div>
</body>
</html>

Yes, it has to do with position: relative. I will explain what is going on:
Your body starts at the top of the viewport and is just as high as the highest of its children pushes it to be, so it stretches downwards to fits its children, but not more. Before toggling, #div1 is the highest child. After toggling, #div1 is hidden, so only the <i></i> remains, and the body will have a very low height.
Now when an element has position: relative, one thing that happens is that you can use top, left, right and bottom on it to move it relative to where it normally would be. Your <i></i> does have position: relative, and it also has bottom: 201px, so it gets moved up 201px. Normally, it would be at the top of the viewport, inside the body. When being moved up that far, it ends up outside of the viewport, so you can't see it anymore.
You can see all this visually for yourself using your Browser's developer tools, for example Page Inspector for Firefox or Chrome's DevTools.

I've changed a bit in your css, but mainly I've moved the i after the div. Check it out and see if this is what you need.
Demo
$(document).ready(function() {
$("i").click(function() {
$("#div1").toggle(500)
})
})
* {
margin: 0px;
padding: 0px;
}
ul {
margin: 0px;
padding: 0px;
}
ul li {
display: block;
}
ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: white;
letter-spacing: 2px;
transition: all .25s ease-in-out;
border-bottom: 1px solid white;
}
hr {
float: left;
width: 100px;
}
div {
height: 400px;
width: 150px;
background-color: red;
display: inline-block;
position: relative;
float:left;
}
i {
top: 0px;
display: inline-block;
font-size: 24px;
position: relative;
margin-left:5px;
background-color: white;
color: red;
transition: all 1s ease ease-in-out;
}
ul li a:hover {
background-color: rgb(0, 108, 250);
}
i:hover {
color: rgb(0, 108, 250);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="div1">
<ul>
<li>Ana Sayfa</li>
<li>Hakkimizda</li>
<li>Iletisim</li>
<li>Reklam</li>
<li>Daha Fazla</li>
</ul>
</div>
<i class="fas fa-bars"></i>

This is your snippet with some changes:
removed position:relative from CSS, the positioning is now flex-based (with margin)
tweaked transition a bit and added some styles to make button movement smoother (check out a fix for transition property and --menu_off modifier class)
$(document).ready(function(){
$(".js-menu-toggle-button").click(function(){
$(this).toggleClass('menu-container__toggle-button--menu_off');
$(".js-menu-bar").toggle(500);
})
})
*{
margin: 0px;
padding: 0px;
}
ul{
margin: 0px;
padding: 0px;
}
ul li{
display: block;
}
ul li a{
display: block;
padding: 15px;
text-decoration: none;
color: white;
letter-spacing: 2px;
transition: all .25s ease-in-out;
border-bottom: 1px solid white;
}
hr{
float: left;
width: 100px;
}
ul li a:hover{
background-color: rgb(0,108,250);
}
i:hover{
color: rgb(0, 108, 250);
}
.menu-container {
display: flex;
}
.menu-container__menu-bar {
height: 400px;
width: 150px;
background-color: red;
display: inline-block;
}
.menu-container__toggle-button {
margin-left: 2rem;
font-size: 24px;
background-color: white;
color: red;
transition: all 0.5s ease-in-out;
}
.menu-container__toggle-button--menu_off {
margin-left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="menu-container">
<div class="menu-container__menu-bar js-menu-bar">
<ul>
<li>Ana Sayfa</li>
<li>Hakkimizda</li>
<li>Iletisim</li>
<li>Reklam</li>
<li>Daha Fazla</li>
</ul>
</div>
<i class="fas fa-bars menu-container__toggle-button js-menu-toggle-button"></i>
</div>
</body>
</html>

Related

Sidebar going beyond screen on resize

I have an HTML page with a sidebar. The sidebar is shown when i click 'Upload Data' button. When I resize the window, the sidebar's header (random portion from top) goes beyond the screen and the only way to retrieve is to refresh the page to start fresh. I need a solution for keeping the sidebar inside the window.
Initial body image
After resizing
HTML CODE
HEAD
<title>Index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://www.pngkit.com/png/full/327-3270091_demographic-icon-sign.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/sidebar_style_final.css') }}">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<style>
.fa {
margin-left: -8px;
margin-right: 8px;
}
.bs-example {
margin: 20px;
}
html{
margin:0;
height:100%;
}
</style>
sidebar_style_final.css
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 450px;
position: fixed;
top: 0;
right: -450px;
height: 100%;
z-index: 999;
background: #ffffff;
color: #r45;
transition: all 0.3s;
overflow: auto;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
right: 0;
}
#dismiss {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: #7386D5;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#dismiss:hover {
background: #fff;
color: #7386D5;
}
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.overlay.active {
display: block;
opacity: 1;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
BODY
<body onload="start_nav()" onresize="change_sidebar()">
<div class="grey_bound" id="grey_bound"></div>
<div class="wrapper">
<!-- Sidebar -->
<div id="sidebar">
<div id="dismiss" style="left: 30px; top: 20px;" onclick="hide_grey_bound()">
<i class="fas fa-arrow-right" onclick="hide_grey_bound()"></i>
</div>
<div class="sidebar-header" align="right">
<h3>Upload new data</h3>
</div>
<br/>
<div class="bs-example" style="width:400px;position:relative;left:10px;">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a href="#shp_files" class="nav-link" data-toggle="tab" id='new_tab'>Shape Files</a>
</li>
<li class="nav-item">
Category Files
</li>
</ul>
<div class="tab-content" id="tab_content" style="height: 600px; overflow-y: auto; overflow-x: hidden;">
SIDEBAR CONTENT
</div>
</div>
</div>
<!-- Page Content -->
<div id="content">
<button type="button" id="sidebarCollapse" class="btn btn-info" style="position: relative;float: right;right: 10px;" onclick="function show_grey_bound() { document.getElementById('grey_bound').style.display = 'block'; }
show_grey_bound()">
<i class="fas fa-caret-square-up"></i>
<span>Upload Data</span>
</button>
</div>
</div>
</body>
SCRIPT
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#dismiss, .overlay').on('click', function () {
$('#sidebar').removeClass('active');
$('.overlay').removeClass('active');
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').addClass('active');
$('.overlay').addClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
I have already tried
setting document.getELementById('sidebar').scrollTop = 0 onresize of
body.
changing the top of the sidebar onresize.
to give margin-top to 0.
Can anyone help me with this. Like I said, I need the side bar to stay inside.

You can remove the height in your Sidebar content div
<div class="tab-content" id="tab_content" style="overflow-y: auto; overflow-x: hidden;">
SIDEBAR CONTENT
</div>

Hide an element in HTML and CSS [duplicate]

This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 2 years ago.
Is there any chance that someone has a solution for this problem, If you look at my Codepen link there will be a text "Johnny" that I want to hide behind the dark grey div. Is there by any chance a simple solution for this? Thanks!
Codepen
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Johnny Porty</title>
<!-- LINKED CSS -->
<link rel="stylesheet" href="./css/main.css">
<!-- LINKED FONT -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<h1>NOICE</h1>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact <span class="arrow arrow-bottom"></span></li>
</ul>
</nav>
<div class="first_div">
<h1> JOHNNY </h1>
</div>
<div class="second_div">
<h1> STONEY </h1>
</div>
<!-- LINK SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

Explicitly define position: relative on .first_div AND .second_div
and then
Set z-index:10 on nav
window.onscroll = function() {scrollNav()};
var navbar = document.getElementById("navbar");
function scrollNav() {
if (window.pageYOffset >= 1) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
html, body{
margin: 0;
background-color: whitesmoke;
}
nav{
overflow: hidden;
background-color: none;
transition: all ease-in-out .2s;
height: 75px;
position: fixed;
top: 0;
width: 100%;
line-height: 75px;
padding-left: 10%;
z-index:10;
}
nav h1{
display: inline;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
margin-right: 20%;
}
nav ul{
display: inline;
padding-left: 0;
}
nav li{
display: inline;
text-align: center;
padding: 0px 2.5%;
text-decoration: none;
font-size: 17px;
}
nav a{
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: all ease-in-out .2s;
color: #212121;
}
.sticky {
background-color: white;
}
.first_div{
background: url(../img/wide_mount.jpg) no-repeat center center fixed;
-webkit-background-size: 75% auto;
-moz-background-size: 75% auto;
-o-background-size: 75% auto;
background-size: 75% auto;
height: 95vh;
width: 100%;
position: relative;
z-index: 2;
}
.first_div h1{
color: rgb(199, 132, 45);
font-family: 'Playfair Display', serif;
letter-spacing: 10vw;
margin: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 128px;
word-break: break-all;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
z-index: 3;
}
.first_div h1::selection{
color: white;
background-color: rgb(199, 132, 45);
}
.second_div{
height: 2000px;
background-color: #212121;
padding: 0;
margin: 0;
z-index: 4;
position: relative;
}
.second_div h1{
margin: 0;
}
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Johnny Porty</title>
<!-- LINKED CSS -->
<link rel="stylesheet" href="./css/main.css">
<!-- LINKED FONT -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<h1>NOICE</h1>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact <span class="arrow arrow-bottom"></span></li>
</ul>
</nav>
<div class="first_div">
<h1> JOHNNY </h1>
</div>
<div class="second_div">
<h1> STONEY </h1>
</div>
<!-- LINK SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

z-index won't work without explicit positioning. Set position: relative on .first_div and .second_div to make your current code work as expected.

im not sure about whether its what you wanted, but you can try to replace you css code with
html, body{
margin: 0;
background-color: whitesmoke;
}
nav{
overflow: hidden;
background-color: none;
transition: all ease-in-out .2s;
height: 75px;
position: fixed;
top: 0;
width: 100%;
line-height: 75px;
padding-left: 10%;
z-index: 10;
}
nav h1{
display: inline;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
margin-right: 20%;
}
nav ul{
display: inline;
padding-left: 0;
}
nav li{
display: inline;
text-align: center;
padding: 0px 2.5%;
text-decoration: none;
font-size: 17px;
}
nav a{
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: all ease-in-out .2s;
color: #212121;
}
.sticky {
background-color: white;
}
.first_div{
background: url(../img/wide_mount.jpg) no-repeat center center fixed;
-webkit-background-size: 75% auto;
-moz-background-size: 75% auto;
-o-background-size: 75% auto;
background-size: 75% auto;
height: 95vh;
width: 100%;
z-index: 2;
}
.first_div h1{
color: rgb(199, 132, 45);
font-family: 'Playfair Display', serif;
letter-spacing: 10vw;
margin: 0;
position: fixed;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 128px;
word-break: break-all;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
z-index: 2;
}
.first_div h1::selection{
color: white;
background-color: rgb(199, 132, 45);
}
.second_div{
position: absolute;
height: 2000px;
background-color: #212121;
padding: 0;
margin: 0;
width: 100%;
z-index: 4;
}
.second_div h1{
margin: 0;
}

is there a way to change the menu text colour when at the top of a website

I am using a menu that has a background which is seethrough at the top and when you scroll down the background color of the menu changes to black. In one of my pages the background of the whole website is white so when the user scrolls to the top, the menu background is white which makes it impossible to read the menu text. I was wondering if there is a code that can change the color of the text of the menu when the menu bar is at the top of the website the menu text changes black so it is readable. here is a picture when the menu bar is at the top of the website
and not at the top. I'll add the code that codes for the menu bar.
HTML & Script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="shop-style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
box-sizing: border-box;
}
header {
width: 100%;
height: 60px;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}

You need to add the correct colors for .black class.
Before run the snippet click and Expand Snippet, because I added for large resolutions only, you can add in #media(max-width: 786px) for small resolutions (mobile devices).
I added <div style="height:1500px" class="only-for-scroll"></div> to force scroll.
I commented with //add this to you identify the changes that I did.
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
box-sizing: border-box;
}
header {
width: 100%;
height: 60px;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
/*add this lines*/
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
/*END*/
nav .logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #000;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div style="height:1500px" class="only-for-scroll"></div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
//setTimeout(function() {plusSlides(1) }, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>

How to make responsive iframe google maps full screen

I am trying to embed google maps in the website using iframes. I need this map to be fullscreen on any device when the map is shown. I can't figure out a way to do this, tried setting width and height to 100% which made it look like this ):
But right now my website looks like this:
Any way of making the map fullscreen?
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" width="720" height="550px" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>

sorry i cant really get into adjusting your css right now but here is a little something i came up with when i need to output YouTube videos in iframes. try it out
<style>
#mediaPlayer{
position: relative;
height: auto;
padding-bottom: 56.25%;
padding-top: 1.875em;
overflow: hidden;
border: 0.1875em double #185875;
background-image:url('../video_loading.gif');
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-attachment: fixed;
/*to adjust the height and width*/
margin-right: 20%;
margin-left: 20%;
margin-top: 20%;
margin-bottom: 20%;
/*or you can use it in single line*/
margin:20%;
/*or if you want different margins for different sides in a single line*/
margin: 20% 20% 20% 20%;
/* the above means margin: top right bottom left; */
}
#mediaPlayer iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
}
</style>
/*instead of using margin just add a div and specify the exact height and width you want*/
<div style="height: 50%; width:50%;">
<center>
<div id="mediaPlayer">
<iframe id="play_now" width="100%" height="100%" src="" value="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</center>
</div>
The video_loading.gif background is usually a good idea for users with slow network to have something in the background while your iframe content is loading
but you have to find your own unique gif file/image and set it's location in the background-image:url('../file-location-here.gif');
just replace your <div class="box"></div> with the code above let me know how it turns out.

How about the following example. The solution came from Responsive iframe (google maps) and weird resizing. By tweaking padding-top and padding-bottom you can change the size.
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
.box {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
overflow: hidden;
}
.box iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
You can also try and use CSS variables:
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
let events = ['load', 'resize'];
let googleMaps = document.querySelector('.box iframe');
events.forEach( event => {
window.addEventListener(event, () => {
googleMaps.style.setProperty('--google-maps-height', `${window.innerHeight}px`);
});
});
.box {
height: 100%;
}
.box iframe {
width: 100%;
height: var(--google-maps-height);
border: none;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
height:100%;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
z-index:1;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
z-index: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="location-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11180.547025315635!2d-0.1158441147859454!3d51.38130328678796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876072fde46e81d%3A0x8d9bd9aaec99a20!2sLondon+Rd%2C+Croydon+CR0+2RE!5e0!3m2!1sen!2suk!4v1535311898666" allowfullscreen></iframe>
</div>
</body>
</html>

Are you looking for something like this? Add the following code to your css and see if it does the trick.
iframe {
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
Take a look at using viewport percentage

jQuery Menu Does not appear

I am trying to make a menu appear from right to left by giving it a negative right position and from jQuery on clicking on a span it should edit the position right to zero but when i click nothing happenes
$(document).ready(function() {
$(".run_menu").click(function() {
$(".menu").animate("right", "0");
});
});
/* Global*/
.conatianer {
width: 1026.66px;
}
/*End global*/
/*Start navbar*/
.navbar {
position: relative;
background: url(data:image/jpeg;base64,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);
background-size: cover;
height: 700.531px;
overflow: hidden;
}
.navbar .menu {
position: absolute;
right: -200px;
width: 200px;
height: 700px;
background-color: gray;
color: white;
}
.navbar .overlay {
position: absolute;
background-color: rgba(0, 0, 0, .2);
width: 100%;
height: 700.531px;
z-index: 1;
}
.navbar .navbar_one,
.navbar .navbar_two {
position: relative;
z-index: 2;
}
.navbar .navbar_one h3 {
float: left;
margin-top: 0;
color: #FFF;
padding: 20px;
text-transform: capitalize;
}
.navbar .navbar_one div {
float: right;
margin-right: 10px;
color: #FFF;
padding: 20px;
}
.navbar .navbar_two {
text-align: center;
padding-top: 230px;
}
.navbar .navbar_two i {
color: #FFF
}
.navbar .navbar_two h1 {
text-transform: capitalize;
color: #FFF;
}
.navbar .navbar_two h3 {
text-transform: capitalize;
color: #FFF
}
.navbar .navbar_two ul {
list-style: none;
}
.navbar .navbar_two ul li {
width: 110px;
background-color: rgba(81, 186, 164, .8);
-webkit-border-radius: 25px;
-moz-border-radius: 10px;
border-radius: 25px;
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 20px;
font-weight: 600;
line-height: 10px;
cursor: pointer;
padding: 20px 25px;
margin-left: 555px;
}
.navbar .navbar_two ul li:hover {
background-color: #51baa4;
}
.navbar .navbar_two ul li a {
color: #FFF;
text-decoration: none
}
/*End navbar*/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template retrospect</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/StyleSheet.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<!--Start NavBar-->
<div class="navbar">
<div class="menu">
<!--Menu -->
<i class="fa fa-long-arrow-right"></i>
<ul>
<li>home</li>
<li>generic</li>
<li>elements</li>
</ul>
</div>
<div class="overlay"></div>
<div class="navbar_one">
<h3>retrospect</h3>
<div>
<i class="fa fa-bars fa-lg"></i>
<span class="runmenu">menu</span> <!--menu should appear when click on it -->
<!--Open Menu on click-->
</div>
</div>
<div class="navbar_two">
<i class="fa fa-soundcloud fa-4x"></i>
<h1>etiam adipiscing</h1>
<h3>magna feugiat lorem dolor egetas</h3>
<ul>
<li>learn more
</li>
</ul>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/JavaScript.js"></script>
</body>
</html>

Your code has no .run_menu. Add a button and your .animate function is wrong:
$(".menu").animate({
"right": 0
}, 1000);
Your <span> actually has the wrong class name:
<span class="runmenu">menu</span>
Which should be:
<span class="run-menu">menu</span>
Also, the menu is not accessible because of a wrong z-index. Kindly fix that.
Working Output: http://output.jsbin.com/salutajuna
Please click on the learn more.

We Keep Coding

JavaScript is the programming language of the Web.

Getting a jQuery toggle to work as expected - javascript

Related

Sidebar going beyond screen on resize

Hide an element in HTML and CSS [duplicate]

is there a way to change the menu text colour when at the top of a website

How to make responsive iframe google maps full screen

jQuery Menu Does not appear

Categories

Resources