Materialize collapsible-accordion not working IOS 13 - javascript

My problem
I am working on a website which is using materialize sidenav.
When I try to open the collapsible-accordion on my iphone 7 (IOS 13.3.1) in safari it does not work.
But when I try it on a other browser like firefox it works well.
The solution I found on github did not work for me.
I have no idea how to fix my problem
Any hep/tips are welcome.
Thanks in advance.
My code
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
// var options =
var instances = M.Dropdown.init(elems, {coverTrigger: false});
});
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
$(document).ready(function() {
$('.collapsible').collapsible();
})
input:focus {
border-bottom: 1px solid #1C9CDA !important;
box-shadow: 0 1px 0 0 #1C9CDA !important;
}
label.active {
color: #1C9CDA !important;
}
.standard-bgcolor{
background-color: #1C9CDA !important;
}
.standard-color{
color: #1C9CDA !important;
}
.sidenav{
z-index:1001 !important;
}
.nav{
padding-left: 16px !important;
}
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
html, body {
margin: 0;
height: 100%;
}
#map{
height:100%;
width: 100%;
}
.dropdown-content{
width: max-content !important;
height:auto !important;
}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
position: absolute !important;
bottom: 23px;
right: 20px;
width: 200px;
}
#form_btn{
float: none;
clear: both;
}
/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
margin-bottom: 0 !important;
}
/* Add styles to the form container */
.form-popup{
max-width: 400px;
min-width: 300px;
width: 25%;
}
/*form box*/
.form-container {
padding: 20px !important;
background-color: white;
}
.login{
display: inline;
font-size: 30px;
}
.Sign-up, .Sign-up:visited{
cursor: pointer;
font-size: 24px;
text-decoration: underline;
float: none !important;
clear: both;
}
#form_full{
background-color: white;
width: 100%;
height: 60%;
position: absolute;
top: 20%;
left: 20%;
opacity: 0.9;
}
#Sign-up{
font-size: 25px;
text-transform: capitalize;
height: 50px;
width: auto;
position: absolute;
right: 50%;
border-radius: 10px;
}
.not-a-user{
font-size: 24px;
color: #707070;
}
.Cancel{
font-size: 35px;
color: #707070;
}
.Sign-up_Cancel{
font-size: 35px;
text-decoration: underline;
}
#row_link{
margin-left: 0;
}
.alert {
position: relative;
width: 100%;
padding: 15px;
background-color: #f44336;
color: white;
text-align: center;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
#login_alert{
top: 0;
}
/*table with gps trackers*/
.Assets{
width: calc(100% - 100px);
margin: 0px 50px 0px 50px;
}
.link{
color: #1a9988;
}
.link:hover{
color: #0f7567;
}
/*popup add assets style*/
/* The Modal (background) */
.add_assets {
left: 0;
top: 10%;
width: 100%; /* Full width */
height: auto; /* Full height */
overflow: auto; /* Enable scroll if needed */
max-height: none !important;
padding-bottom: 30px !important;
}
#submit{
font-size: 25px;
text-transform: capitalize;
height: 50px;
width: 20%;
position: absolute;
right:30px;
border-radius: 10px;
}
#Cancel_add{
font-size: 25px;
text-transform: capitalize;
height: 50px;
width: 20%;
position: absolute;
left:30px;
border-radius: 10px;
background-color: #f44336;
}
.animate {
-webkit-animation: animatezoom 5s;
animation: animatezoom 5s
background-color: #fefefe;
}
/*blockquote*/
.blockquote_white {
border-left-color: white;
}
/*info_box*/
.info_box{
height: auto;
max-height: 100%;
overflow: auto;
padding: 0 25px 0 25px;
}
/*routing box*/
.leaflet-routing-alternatives-container, .leaflet-bar{
display: none;
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
#media only screen and (max-width: 600px) {
.Assets::-webkit-scrollbar {
z-index:10;
}
/*asset table*/
.Assets{
width: 100%;
margin: 0px 0px 0px 0px;
}
#submit, #Cancel_add{
width: auto;
}
.modal-content{
padding: 0;
}
#form_full{
width: 100%;
left: 0;
}
#Sign-up{
width: auto;
right: 10px;
}
.Cancel{
margin-left: 10px;
}
#e-mail, #password, #name , #GPS_ID, #info{
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<ul id="dropdown1" class="dropdown-content">
<li><a title="Add Asset" class="modal-trigger grey-text text-darken-1" href="#modal1"><i class="material-icons">add</i>Voeg asset toe</a></li>
<li><a title="Edit profile" class="modal-trigger grey-text text-darken-1" href="#modal2"><i class="material-icons left ">person</i>Edit profile</a></li>
</ul>
<ul class="sidenav" id="mobile-demo">
<li class="sidenav-header standard-bgcolor ">
<div class="row">
<div class="col s4">
<h4 class="white-text">Asset tracking</h4>
</div>
</div>
</li>
<li class="no-padding nav">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header"><i class="material-icons left">home</i>Home<i class="material-icons right">arrow_drop_down</i></a>
<div class="collapsible-body">
<ul>
<li><a title="Add Asset" class="modal-trigger grey-text text-darken-1" href="#modal1"><i class="material-icons">add</i>Voeg asset toe</a></li>
<li><a title="Edit profile" class="modal-trigger grey-text text-darken-1" href="#modal2"><i class="material-icons left ">person</i>Edit profile</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li><a class="nav" title="Map" href="index.php"><i class="material-icons">map</i>Kaart</a></li>
<li><a class="nav" title="Uitloggen" href="?logout=1"><i class="material-icons left">exit_to_app</i>Uitloggen</a></li>
</ul>
<nav>
<div class="nav-wrapper standard-bgcolor">
<i class="material-icons">menu</i>
Asset Tracking
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li class="active"><a title="Home" class="dropdown-trigger" data-target="dropdown1" href="#!"><i class="material-icons left">home</i>Home<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a title="Map" href="index.php"><i class="material-icons left">map</i>Kaart</a></li>
</ul>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="right"><a title="Uitloggen" href="?logout=1"><i class="material-icons right">exit_to_app</i>Uitloggen</a></li>
</ul>
</div>
</nav>
<body>
<!-- add asset form -->
<div id="modal1" class="modal add_assets modal2">
<div class="modal-content">
<h4 class="standard-color">Voeg asset toe</h4>
<form class="col s12 animate" action="" method="post">
<div class="row">
<div class="input-field col s12" id="name">
<input class="validate" type="text" required name="name">
<label for="Name">Asset name</label>
<span class="helper-text" data-error="Veld mag niet leeg zijn" data-success="correct">Geef de GPS tracker een naam</span>
</div>
<div class="row">
<div class="input-field col s12" id="activatiecode">
<input class="validate" type="text" required name="activatiecode">
<label for="activatiecode">Activatiecode</label>
<span class="helper-text" data-error="Moet uniek zijn" data-success="correct">Activatiecode van de tracker (IMEI + korte activatie string)</span>
</div>
</div>
<div class="row">
<div class="input-field col s12" id="info">
<input class="validate" type="text" required name="info">
<label for="Info">Other gps info</label>
<span data-error="Veld mag niet leeg zijn" data-success="correct" class="helper-text">Extra info over de GPS</span>
</div>
</div>
<div class="input-group">
<button id="submit" class="btn waves-effect standard-bgcolor" type="submit" name="submit">Add</button>
</div>
<button id="Cancel_add" type="button" class="btn waves-effect modal-close" >Cancel</button>
</div>
</form>
</div>
</div>
<!-- Update profile form -->
<div id="modal2" class="modal add_assets modal2">
<div class="modal-content">
<h4 class="standard-color">Update account</h4>
<form class="col s12 animate" action="" method="post">
<div class="row">
<div class="input-field col s12" id="name">
<input value="<?=$email?>" class="validate" type="email" required name="email">
<label for="Name">E-mail Address</label>
<span class="helper-text" data-error="Geen correct e-mailadres" data-success="correct">voorbeeld#voorbeeld.nl</span>
</div>
<div class="row">
<div class="input-field col s12" id="password">
<input minlength="10" required type="password" class="validate" name="password_1">
<label for="Password">Password</label>
<span class="helper-text" data-error="Wachtwoord is te kort" data-success="correct">10 karakters lang</span>
</div>
</div>
<div class="row">
<div class="input-field col s12" id="password">
<input minlength="10" required type="password" class="validate" name="password_2">
<label for="Password">Confrim password</label>
<span class="helper-text" data-error="Wachtwoord is te kort" data-success="correct">10 karakters lang</span>
</div>
</div>
<div class="input-group">
<button id="submit" class="btn waves-effect standard-bgcolor" type="submit" name="update">Update</button>
</div>
<button id="Cancel_add" type="button" class="btn waves-effect modal-close">Cancel</button>
</div>
</form>
</div>
</div>

Ok for a start your JS is not properly formatted. You have 4 separate document-ready functions, and a mix of vanilla JS and jQuery inits. Choose 1 and stick with it. You just need one document ready, then all the code that needs to wait until the dom is loaded sits inside.
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
// var options =
var instances = M.Dropdown.init(elems, {coverTrigger: false});
});
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
$(document).ready(function() {
$('.collapsible').collapsible();
})
I have tidied that up and put your code into a codepen, and it is working perfectly fine for me (iPhone XR 13.3.1 Safari). Can you text this?
document.addEventListener('DOMContentLoaded', function() {
var modals = document.querySelectorAll('.modal');
var modal = M.Modal.init(modals);
var triggers = document.querySelectorAll('.dropdown-trigger');
var trigger = M.Dropdown.init(triggers, {coverTrigger: false});
var sidenavs = document.querySelectorAll('.sidenav');
var sidenav = M.Sidenav.init(sidenavs);
$('.collapsible').collapsible();
});
https://codepen.io/doughballs/pen/QWbQPew

Related

my carousel items are gone on the webpage but it worked before adding some new things

I made a carousel with bootstrap (v5) and modified it to be 3 besides each other on large screen and only one on small screens. It worked just fine, but after adding some javascript and google analytics and coockies, the carousel items dissapear on small screens.
html part of the carousel:
<section id="diensten">
<h2>diensten</h2>
<div id="carouselExample" class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/webhosting.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">hosting</p>
<div>
<button onclick="openHosting()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/webdesign.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">webdesign</p>
<div>
<button onclick="openWebdesign()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/photography.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">fotografie</p>
<div>
<button onclick="openFotografie()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/domain_name.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">domein naam</p>
<div>
<button onclick="openDomeinNaam()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/seo.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">SEO</p>
<div>
<button onclick="openSeo()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/undraw_maintenance_re_59vn.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">onderhoud</p>
<div>
<button onclick="openOnderhoud()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
css part of the carousel (for small screens):
/* styling for the 'diensten' section */
h2 {
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin: 50px 0;
}
.card {
margin: 0 1em;
border: none;
max-width: 400px;
}
.card img {
max-width: 100%;
max-height: 100%;
}
.carousel-inner {
padding: 1em;
}
.img-wrapper {
max-width: 100%;
height: 65vw;
display: flex;
justify-content: center;
align-items: center;
}
.card-title {
font-size: 20px;
font-weight: 100;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
.carousel-control-prev, .carousel-control-next {
width: 5vh;
height: 5vh;
background-color: #0D283C;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.card-body div {
text-align: center;
}
.extra-btn {
border: none;
border-radius: 100%;
padding: 6px 10px;
background-color: #0D283C;
color: white;
margin: auto;
transition: 0.2s;
}
.extra-btn:hover {
background-color: #3461AB;
}
.extra-btn span {
display: none;
}
/* extra info screens */
.overlay {
position: fixed;
width: 100%;
/* Full width (cover the whole page) */
height: 100%;
/* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
}
.extra-info-card {
padding: 10px;
text-align: center;
border-radius: 30px;
margin: auto;
max-width: 600px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.extra-info-card>div {
position: relative;
}
.close-btn {
border: none;
border-radius: 100%;
padding: 3px 5px;
background-color: #0D283C;
color: white;
font-size: 2px;
transition: .2s;
}
.close-btn:hover {
background-color: #3461AB;
}
.close-btn span {
display: none;
}
.extra-info-card h1 {
text-transform: uppercase;
margin: 0;
}
.extra-info-card p {
margin: 15px auto;
max-width: 90%;
font-size: 14px;
font-weight: 100;
}
.extra-info-card img {
display: none;
margin: auto;
max-width: 30%;
}
.hidden {
display: none;
transition: .2s;
}
css for the bigger screens
#media screen and (min-width: 576px) {
.carousel-inner {
display: flex;
}
.carousel-item {
display: block;
margin-right: 0;
flex: 0 0 calc(100%/3);
}
.img-wrapper {
height: 23vw;
}
.close-btn {
padding: 6px 10px;
font-size: 10px;
}
}
#media screen and (min-width: 768px) {
h2 {
font-size: 25px;
}
header section:first-child img {
width: 100px;
}
.nav-item {
font-size: 30px;
}
.text-part {
text-align: left;
}
header section:last-child img {
display: block;
}
section:nth-child(2) h1 {
font-size: 24px;
}
section:nth-child(2) a {
font-size: 15px;
}
#over-ons, #diensten, #proces, #contact, #landing {
max-width: 90%;
margin: 150px auto;
}
#over-ons h2 {
margin-bottom: 10px;
padding-left: 5px;
text-align: left;
border-left: 3px solid #0D283C;
}
#over-ons p {
text-align: left;
font-size: 16px;
}
#over-ons img {
display: block;
}
#proces img {
display: block;
width: 75%;
margin: auto;
}
#landing {
height: 100%;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
}
.extra-info-card img {
display: block;
}
#proces h3 {
font-size: 18px;
}
#proces p {
font-size: 16px;
}
}
#media screen and (min-width:992px) {
#over-ons, #diensten, #proces, #contact, #landing {
max-width: 992px;
margin: 150px auto;
}
section:nth-child(2) h1 {
font-size: 30px;
}
section:nth-child(2) a {
font-size: 20px;
}
}
The 2 different javascript files (make it 3 items & extra info button functionality)
const multiItemCarousel = document.querySelector('#carouselExample')
if (window.matchMedia("(min-width:576px)").matches) {
const carousel = new bootstrap.Carousel(multiItemCarousel, {
interval: false
})
var carouselWidth = $('.carousel-inner')[0].scrollWidth;
var cardWidth = $('.carousel-item').width();
var scrollPosition = 0;
$('.carousel-control-next').on('click', function () {
if (scrollPosition < (carouselWidth - (cardWidth * 4))) {
scrollPosition = scrollPosition + cardWidth;
$('.carousel-inner').animate({ scrollLeft: scrollPosition }, 600);
};
});
$('.carousel-control-prev').on('click', function () {
if (scrollPosition > 0) {
scrollPosition = scrollPosition - cardWidth;
$('.carousel-inner').animate({ scrollLeft: scrollPosition }, 600);
};
});
};
function openHosting() {
console.log("open")
var hosting = document.getElementById("hosting");
hosting.classList.remove("hidden")
}
function openWebdesign() {
var webDesign = document.getElementById("webdesign");
webDesign.classList.remove("hidden")
}
function openFotografie() {
var fotografie = document.getElementById("fotografie");
fotografie.classList.remove("hidden")
}
function openDomeinNaam() {
var domeinNaam = document.getElementById("domein-naam");
domeinNaam.classList.remove("hidden")
}
function openSeo() {
var seo = document.getElementById("seo");
seo.classList.remove("hidden")
}
function openOnderhoud() {
var onderhoud = document.getElementById("onderhoud");
onderhoud.classList.remove("hidden")
}
//alle functies voor het sluiten van de verschillende extra info secties
function closeHosting() {
console.log("close")
var hosting = document.getElementById("hosting")
hosting.classList.add("hidden")
}
function closeWebdesign() {
var webDesign = document.getElementById("webdesign");
webDesign.classList.add("hidden")
}
function closeFotografie() {
var fotografie = document.getElementById("fotografie");
fotografie.classList.add("hidden")
}
function closeDomeinNaam() {
var domeinNaam = document.getElementById("domein-naam");
domeinNaam.classList.add("hidden")
}
function closeSeo() {
var seo = document.getElementById("seo");
seo.classList.add("hidden")
}
function closeOnderhoud() {
var onderhoud = document.getElementById("onderhoud");
onderhoud.classList.add("hidden")
}

jQuery: animating position isn't affecting DOM

I'm trying to animate the top value of my CSS in order to create a dropdown nav when the user clicks the hamburger button.
The CSS doesn't seem to be getting applied to the element when I view in the Chrome inspector, but I've tried the hide() function on the same element and that works fine.
HTML:
<div class="top section-reversed">
<div class="container">
<div class="row">
<div class="col-2">
<span class="icon icon-logo-ctr"></span>
</div>
<div class="col-2 ml-auto">
<a id="asdf" href="#" class="icon icon-hamburger"></a>
</div>
</div>
</div>
</div>
<div class="nav-mobile">
<div class="content">
<a class="icon icon-close" href="#"></a>
<div class="cta-consult">
<h5>000000</h5>
<span class="telephone">000000</span>
</div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Prices</li>
<li>Furniture</li>
<li>Contact</li>
</ul>
<div class="social-header social-header-mobile">
<img src="image/social-whatsapp.png" alt="Placeholder" />
<img src="image/social-instagram.png" alt="Placeholder" />
<img src="image/social-facebook.png" alt="Placeholder" />
<img src="image/social-twitter.png" alt="Placeholder" />
</div>
</div>
</div>
JS:
$(document).ready(function() {
// nav-mobile
$('#asdf').click(function() {
$('.nav-mobile').animate({
'top': '+=540'
},
5000, function() {
// Animation complete.
});
});
});
CSS:
.nav-mobile {
background: #fff;
color: #000;
height: 100%;
left: auto;
overflow: hidden;
position: fixed;
/*top: 65px;*/
top: -605px;
width: 100%;
z-index: 1;
}
.nav-mobile > .content {
padding: 20px;
}
.nav-mobile .icon-close {
color: #797979;
float: right;
padding: 0;
}
.nav-mobile .cta-consult {
clear: both;
}
.nav-mobile .cta-consult h5 {
font-size: 14px;
margin: 0 0 2px;
letter-spacing: 0;
}
.nav-mobile .cta-consult .telephone {
font-size: 30px;
letter-spacing: .02em;
}
.nav-mobile ul {
border-top: #d0d0d0 solid 1px;
display: block;
list-style: none;
margin: 30px 0 20px;
padding: 20px 0 0;
width: 100%;
}
.nav-mobile a {
color: #000;
display: block;
text-transform: uppercase;
letter-spacing: .25em;
padding: 10px 0;
}

Making a div element show using jquery doesnot last long

Here i have a jquery function that displays the #showhide div element after successful login but the #showhide displays for a second or two and disappears from the screen Could some one tell me why is this happening! please!
I have posted the entire code! cause some people might ask for it! if its confusing just check in css I have #showhide as display:none and im trying to make it show again in Jquery after authenticating but its not showing for more than 2 seconds thats the only problem in this code
myfunction = function() {
$('#text-hide').show();
}
myfunction2 = function() {
$('#photo-hide').show();
}
validate_logincredentials = function() {
var email = document.getElementById("email").value;
var pass = document.getElementById("pass").value;
var atposition = email.indexOf("#");
var dotposition = email.lastIndexOf(".");
if (atposition < 1 || (dotposition - atposition < 2))
/* if user gives email which starts with # or if there is no words inbetween (#) and (.) */
{
alert("Please enter correct email ID");
} else if (pass.length < 8) {
alert("Incorrect password");
} else if (email !== "faizalsharn#yahoo.com" && pass !== "faizalwddm12") {
alert("incorrect credentials")
} else {
alert(email);
alert(pass);
alert("User login Successfull");
$('#login-form').hide();
$('#showhide').show();
}
}
#showhide {
transition-delay: 3s;
display: none;
}
html, body {
margin: 0%;
padding: 0%;
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 5%;
background-color: black;
color: white;
float: left;
}
header h3 {
margin: 5%;
font-family: Georgia, 'Times New Roman', Times, serif;
float: left;
position: relative;
margin-top: .5%;
margin-right: 2%;
}
header h3:hover {
TEXT-TRANSFORM: UPPERCASE;
text-shadow: 4px 4px 8px red;
}
header p:hover {
TEXT-TRANSFORM: UPPERCASE;
text-shadow: 4px 4px 8px blue;
}
#logo {
width: 3%;
height: 100%;
margin-left: 1%;
display: inline;
float: left;
margin-right: -5%;
}
#icons * {
color: white;
display: inline;
float: left;
margin: .5% 2% 0% 2%;
padding: 0% 2% 0% 2%;
}
#icons p {
margin-left: 50% !important;
margin-top: -25% !important;
}
nav {
width: 17%;
height: 90%;
float: left;
float: left;
}
nav img {
position: relative;
width: 50%;
height: 15%;
margin-left: 5%;
margin-top: 3%;
margin-bottom: 5%;
float: left;
}
#text-hide {
display: none;
}
#photo-hide {
display: none;
}
#text-hide span {
padding: 5%;
margin-left: 5%;
}
#photo-hide img {
width: 37%;
padding: 5%;
margin: -5%;
float: left;
margin-right: 0%;
margin-bottom: 2%;
margin-top: 5%;
margin-left: 1%;
}
#profileinfo i {
margin-top: 1%;
padding: 6%;
display: inline;
margin-left: -1%;
width: 50%;
height: 50%;
float: left;
margin-right: -30%;
}
#profileinfo h4 {
display: inline;
margin-right: -10%;
font-size: 80%;
margin-left: -10%;
float: left;
margin-top: 8%;
}
#profileinfo img {
width: 40%;
height: 40%;
float: left;
}
aside {
float: right;
width: 17%;
height: 90%;
}
aside h2 {
margin-left: 5%;
}
aside h3 {
margin-left: 10%;
}
aside img {
width: 50%;
height: 50%;
float: left;
margin-left: 10%;
}
aside p {
float: left;
margin-left: 5%;
}
main {
width: 66%;
height: 90%;
float: left;
position: relative;
}
#status {
border: 1px solid gray !important;
width: 80%;
height: 5%;
margin-left: 3%;
}
#content {
margin-top: 5%;
margin-left: 1%;
}
#content img {
width: 7%;
}
#content h4 {
display: inline;
}
footer {
bottom: 0px;
width: 100%;
height: 5%;
float: left;
background-color: black;
color: white;
padding-top: 1%;
}
#ad {
margin-left: 23%;
margin-right: 0%;
}
.fa-audio-description {
margin-top: .25%;
}
.button {
background-color: white;
/* background color of the button */
border: none;
/* no border for the button */
padding: 8px 16px 8px 16px;
/*distance between element's content and its borders. top right bottom left */
text-align: center;
display: inline-block;
font-size: 16px;
/* font size inside button */
margin: 16px 4px 12px 8px;
/*create space around elements by outer border */
transition-duration: 0.4s;
/* defines the speed of the transfomation effect */
cursor: pointer;
/*cursor changes to pointer shape when its on top of the button */
box-shadow: 0 9px #999;
/* TO GIVE SHADOW TO THE BUTTON */
color: black;
/* text of the font inside the button which says "green blue etc */
}
.button:active {
transform: translateY(4px);
/* TO GIVE THE BUTTON PRESSED FEEL TO THE USER i.e it makes the button move y-axis (or move down) by 4px */
}
.button1 {
border: 2px solid #4CAF50;
border-radius: 8px;
stroke-width: 5;
stroke-dasharray: 10;
transition: all 1.5s ease-out;
/* the speed at which the effect of hover should take place */
}
.button1:hover {
background-color: #4CAF50;
/* WHEN WE HOVER BG COLOR OF BUTTON CHANGES TO #4CAF50 ( WHICH IS GREEN) */
}
.button2 {
border: 2px solid #f44336;
border-radius: 8px;
stroke-width: 5;
stroke-dasharray: 10;
/*defines space in between dashes in the stroke.*/
transition: all 1.5s ease-out;
/* the speed at which the effect of hover should take place */
}
.button2:hover {
background-color: #f44336;
}
.button3 {
border: 2px solid #008CBA;
border-radius: 8px;
stroke-width: 5;
stroke-dasharray: 10;
transition: all 1.5s ease-out;
/* the speed at which the effect of hover should take place */
}
.button3:hover {
background-color: #008CBA;
}
#profileinfo h4:hover {
color: rgba(5, 5, 5, 0.3);
font-style: italic;
/*font changes to italic, if you want to change it to bold change the command to "font-weight:bold;"*/
TEXT-TRANSFORM: UPPERCASE;
text-shadow: 4px 4px 8px blue;
}
#profileinfo h3:hover {
color: rgba(224, 19, 19, 0.3);
font-style: italic;
/*font changes to italic, if you want to change it to bold change the command to "font-weight:bold;"*/
TEXT-TRANSFORM: UPPERCASE;
text-shadow: 4px 4px 8px blue;
}
#text-hide span:hover {
color: rgba(0, 0, 0, 0.3);
font-style: italic;
text-shadow: 4px 4px 8px blue;
}
#content p:hover {
color: rgba(0, 0, 0, 0.3);
TEXT-TRANSFORM: capitalize;
text-shadow: 4px 4px 8px blue;
}
#photo-hide img:hover {
display: inline-block;
margin-right: 2px;
/* left and right margin of flex elements inside this element container */
margin-left: 2px;
animation: roll 3s infinite;
transform: rotate(30deg);
text-indent: 25px;
}
#keyframes roll {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
#logo:hover {
animation: roll 3s infinite;
transform: rotate(30deg);
}
/*larger screen computers*/
#media screen and (min-width:1620px)
/*for screen width 1600 and above */
{
/*need to increase the image and font sizes*/
body {
font-size: 150%;
}
.button {
padding: 16px 32px 16px 32px;
margin: 32px 8px 24px 32px;
box-shadow: 0 12px #999;
}
#status {
font-size: 140%;
}
#photo-hide img {
width: 50%;
height: 50%;
margin-top: 1%;
}
aside img {
width: 70%;
height: 70%;
}
#profileinfo img {
width: 50%;
height: 50%;
}
#content img {
width: 10%;
}
#profileinfo i {
margin-right: -35%;
}
#profileinfo h4 {
display: inline;
margin-right: -10%;
font-size: 80%;
margin-left: -10%;
float: left;
margin-top: 8%;
}
#status {
height: 4%;
}
}
/*tablet*/
#media screen and (max-width:960px)
/* for screen size 960 and below */
{
header {
width: 40%;
height: 50%;
float: left;
overflow: auto;
}
header h3 {
margin: 2.5%;
margin-top: .25%;
margin-bottom: 25%;
}
/**/
#icons i {
padding: 45%;
margin-left: -25%;
}
#icons p {
margin-left: -50%;
font-size: 55%;
padding-right: 20%;
}
#icons i:hover {
text-shadow: 4px 4px 8px blue;
}
#status {
height: 3%;
}
main {
width: 100%;
}
nav {
width: 60%;
height: 50%;
float: left;
}
#profileinfo img {
width: 30% !important;
height: auto;
}
aside {
width: 100%;
}
footer {
width: 100%;
height: 10%;
float: left;
bottom: 0px;
}
body {
font-size: 100%;
}
.button {
padding: 4px 8px 4px 8px;
font-size: 8px;
margin: 30px 2px 6px 4px;
box-shadow: 0 4px #999;
}
#status {
font-size: 70%;
}
#photo-hide img {
width: 25%;
height: 20%;
margin-top: -4%;
margin-right: 10%;
}
aside img {
width: 20%;
height: 20%;
}
/**/
#profileinfo img {
width: 20%;
height: 15%;
}
#content img {
width: 20%;
}
#profileinfo i {
margin-right: -18%;
margin-bottom: -10%;
}
#profileinfo h4 {
display: inline;
margin-right: -40%;
font-size: 50%;
margin-left: -30%;
float: left;
margin-top: 8.5%;
}
#tomove {
margin-top: 50%;
margin-left: -65%;
}
#text-hide span {
font-size: 70%;
margin-right: 10%;
}
#logo {
width: 25%;
height: 10%;
margin: 10%;
}
aside h3 {
margin-left: 5%;
padding: 5%;
margin-top: 10%;
}
.fa-audio-description {
margin-top: 2%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>facechat</title>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="form.css" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel='stylesheet'>
<!-- for boot strap icons-->
<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-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="login-form">
<!-- gives the toggle effect between login and register -->
<input type="radio" checked id="login" name="switch" class="hide">
<input type="radio" id="signup" name="switch" class="hide">
<!-- bootstrap icons that does not require download or install-->
<div>
<ul class="form-header">
<li><label for="login"><i class="fa fa-unlink"></i> LOGIN</label></li>
<li><label for="signup"><i class="fa fa-credit-card"></i> REGISTER</label></li>
</ul>
</div>
<div class="section-out">
<section class="login-section">
<div class="login">
<form action="">
<!-- on login i have to put the url of the backend class to handle it -->
<ul class="ul-list">
<li><input type="email" required class="input" placeholder="Email ID" id="email" /><span class="icon"><i class="fa fa-user-secret" style="font-size:20px"></i></span></li>
<li><input type="password" required class="input" placeholder="Password" id="pass" /><span class="icon"><i class="fa fa-lock" style="font-size:20px"></i></span></li>
<li><span class="remember"><input type="checkbox" id="check"> <label for="check">Remember Me</label></span><span class="remember">Forgot Password</span></li>
<!-- on forgot password i have to put the url of the backend class to handle it -->
<li><input type="submit" value="SIGN IN" class="btn" onclick="validate_logincredentials()" /></li>
</ul>
</form>
</div>
</section>
<section class="signup-section">
<div class="login">
<form action="">
<!-- on registration i have to put the url of the backend class to handle it -->
<ul class="ul-list">
<li><input type="text" required class="input" placeholder="Your Name" id="R_name" /><span class="icon"><i class="fa fa-user" style="font-size:20px"></i></span></li>
<li><input type="number" required class="input" placeholder="Your Number (no plus or minus signs)" id="R_number" pattern="('^\\d+$')" title="Must contain only numbers" required/><span class="icon"><i class="fa fa-mobile-phone" style="font-size:25px"></i></span></li>
<li><input type="email" required class="input" placeholder="Your Email" id="R_email" /><span class="icon"><i class="fa fa-envelope" style="font-size:15px"></i></span></li>
<li><input type="password" placeholder="Password" required class="input" id="R_pass" pattern="(?=.*?[0-9]).{8,}" title="Must contain at least one number and at least 8 or more characters" required/><span class="icon"><i class="fa fa-lock" style="font-size:20px" ></i></span></li>
<li><input type="password" placeholder="Retype Password" required class="input" id="Rc_pass" pattern="(?=.*?[0-9]).{8,}" title="Must contain at least one number and at least 8 or more characters" required/><span class="icon"><i class="fa fa-lock" style="font-size:20px" ></i></span></li>
<li><input type="checkbox" id="check1"> <label for="check1">I accept terms and conditions</label></li>
<li><input type="submit" value="SIGN UP" class="btn" onclick="validate2()"></li>
</ul>
</form>
</div>
</section>
</div>
</div>
<div id="showhide">
<header>
<img id="logo" src="images/Captureimg.PNG" alt="logo">
<h3>Blake wood</h3>
<div id="icons">
<a href="#"><i class="fa fa-home"></i>
<p>Home</p></a>
<a href="#"><i class="fa fa-globe"></i>
<p>News</p></a>
<a href="#"> <i class="fa fa-envelope"></i>
<p>Message</p></a>
<a href="#"> <i class="fa fa-bell"></i>
<p>Notification</p></a>
</div>
</header>
<nav>
<div id="profileinfo">
<img src="images/blake.jpg" alt="profilepic" />
<i class="fa fa-suitcase"></i>
<h4>Designer-UI</h4>
<i class="fa fa-home"></i>
<h4>Ontario-CA</h4>
<i class="fa fa-birthday-cake"></i>
<h4>July-26-1991</h4>
</div>
<div id="friends">
<button id="tomove" class="button button3" onclick="myfunction()"><i class="fa fa-users fa-fw"></i> My Friends</button>
<div id="text-hide">
<span>Gafur</span><span>Vinoth</span></br><span>Azeek</span><span>Azad</span>
</div>
</div>
<div id="photos">
<button class="button button3" onclick="myfunction2()"> <i class="fa fa-circle-o-notch fa-fw"></i> Photos</button>
<div id="photo-hide">
<img src="images/slider_1.png" alt="my photo1">
<img src="images/slider-2.png" alt="my photo2">
<img src="images/slider-3.png" alt="my photo3">
<img src="images/silder-4.png" alt="my photo4">
</div>
</div>
</nav>
<main>
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slider_1.png" alt="sliderimage1" />
</li>
<li>
<img src="images/slider-2.png" alt="sliderimage2" />
</li>
<li>
<img src="images/slider-3.png" alt="sliderimage3" />
</li>
<li>
<img src="images/silder-4.png" alt="sliderimage4" />
</li>
</ul>
</div>
<input type="text" id="status" contenteditable="true" value="Good Morning!" />
<button class="button button3"><i class="fa fa-pencil"></i>Post</button>
<div id="content">
<img src="images/carlos.jpg" alt="Avatar">
<h4>Carlos</h4> <span>(17 min ago)</span>
<p>The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it :)
</p>
<button class="button button3"><i class="fa fa-thumbs-up"></i> Like</button>
<button class="button button3"><i class="fa fa-comment"></i> Comment</button>
</div>
</main>
<aside>
<div>
<h2>Friend Requests</h2>
<h3>Carlos</h3>
<img src="images/carlos.jpg" alt="Avatar">
<button class="button button1"><i class="fa fa-check"></i>Accept</button>
<button class="button button2">Decline<i class="fa fa-remove"></i></button>
<br></br>
<h3>Cathrine</h3>
<img src="images/cathrine.png" alt="Avatar">
<button class="button button1"><i class="fa fa-check"></i>Accept</button>
<button class="button button2">Decline<i class="fa fa-remove"></i></button></br>
</div>
</aside>
<footer>
<i id="ad" class="fa fa-audio-description"></i><span> If you like my work on photoshop css,js,jquery and wish to hire me part time, contact me # faizalsharn#yahoo.com <i class="fa fa-hand-peace-o"></i></span>
</footer>
</div>
</body>
</html>
because you are not going to server you don't need submit button. so if you need input type="submit" then you need to retrun false from every function here you are trying to validate.
else change these lines...
<li><input type="submit" value="SIGN IN" class="btn" onclick="validate_logincredentials()"/></li>
<li><input type="submit" value="SIGN UP" class="btn" onclick="validate2()"></li>
to this.
<li><input type="button" value="SIGN IN" class="btn" onclick="validate_logincredentials()"/></li>
<li><input type="button" value="SIGN UP" class="btn" onclick="validate2()"></li>
everything will be fine.

Make button close when clicked outside of content

I would like to do when clicking outside the menu area when it is already open, it closes itself. If anyone can help me since I do not understand anything JavaScript thanks.. You can see my website that this is being developed as a group project for a final course presentation here and see the button working where says MAIS
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
.collapsible {
cursor: pointer;
border: none;
outline: none;
color: white;
background-color: inherit;
text-decoration: none;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
font-family: Arial;
display: block;
height: 65px;
padding: 22.5px 16px;
margin-left: 35px;
transition: all .3s;
width: 80px;
}
.collapsible:hover {
color: #08b0ff;
}
.collapsible:active {
color: #08b0ff;
}
.content {
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
top: 65px;
background-color: #f9f9f9;
width: 1170px;
left: -300px;
}
.content {
float: left;
overflow: hidden;
}
.content {
position: absolute;
top: 65px;
background-color: #f9f9f9;
width: 1170px;
left: -300px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1000;
margin: 0 auto;
}
.content .header {
background-color: rgb(60, 60, 60);
;
padding: 16px;
color: white;
height: 70px;
}
<li>
<div class='dropdown'>
<button class='collapsible'>Mais
<i class='fa fa-caret-down' style='float:right; padding-top: 1.5px;padding-bottom: 1.5px;'/>
</button>
<div class='content'>
<div class='bottom-border2' />
<div class='header'>
<h2 style='color:#fff; '>Categorias</h2>
</div>
<div class='row'>
<div class='column'>
<h3 style='color:#fff;'>Inovação</h3>
<div style='background-color: rgb(97, 255, 0);height: 2px; width: 300px; margin: auto;' />
<div id='dpcontent1'>
<a class='center' href='https://trit3k.blogspot.com/search/label/Ci%C3%AAncia'>Ciência</a>
<a class='center' href='#'>Tecnologia</a>
</div>
</div>
<div class='column'>
<h3 style=' color:#fff;'>Computadores</h3>
<div style='background-color: rgb(8, 176, 255);height: 2px; width: 300px; margin: auto;' />
<div id='dpcontent2'>
<a class='center2' href='#'>Hardware</a>
<a class='center2' href='https://trit3k.blogspot.com/search/label/Software'>Software</a>
<a class='center2' href='https://trit3k.blogspot.com/search/label/Internet'>Internet</a>
<a class='center2' href='https://trit3k.blogspot.com/search/label/Smartphone'>Smartphone</a>
<a class='center2' href='#'>Mac</a>
<a class='center2' href='#'>Linux</a>
</div>
</div>
<div class='column'>
<h3 style='color:#fff;'>Gaming</h3>
<div style='background-color: rgb(255, 25, 0);height: 2px; width: 300px; margin: auto;' />
<div id='dpcontent3'>
<a class='center3' href='#'>eSPORTS</a>
<a class='center3' href='https://trit3k.blogspot.pt/search/label/Jogos'>Jogos</a>
<a class='center3' href='#'>Consolas</a>
<a class='center3' href='#'>Lançamentos</a>
</div>
</div>
</div>
</div>
</div>
</li>

Slider pushed up by side-menu

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

Categories