I have a problem with the verification of a form in html, what I want is to prevent the page from reloading when submitting the form, because the idea is that the modal closes and another one opens on the right side of the screen, for the I was looking at it and I had to add action="javascript:void(0);" to form But now when typing in the fields, it automatically loads the test links without waiting to hit the button. I would like to know why this happens. Apart from knowing how to close and open the modal from the code. The modals are from bootstrap.
The Username is not checking correctly what is written in the field, because when writing e, which is what is expected, it continues to enter the else. I have also removed the action from the form due to a response a friend gave me, but it still doesn't work. Why is the .getElementById not returning the text of the corresponding field?I have a problem with the verification of a form in html, what I want is to prevent the page from reloading when submitting the form, because the idea is that the modal closes and another one opens on the right side of the screen, for the I was looking at it and I had to add action="javascript:void(0);" to form But now when typing in the fields, it automatically loads the test links without waiting to hit the button. I would like to know why this happens. Apart from knowing how to close and open the modal from the code. The modals are from bootstrap.
The Username is not checking correctly what is written in the field, because when writing e, which is what is expected, it continues to enter the else. I have also removed the action from the form due to a response a friend gave me, but it still doesn't work. Why is the .getElementById not returning the text of the corresponding field?
const Username = document.getElementById("Username");
const password = document.getElementById("input-pass");
const passwordreal = `32°32′46″ N, 16°31′31″ W`
const form = document.getElementById("Formulario");//Añadido debido a una respuesta
Username.addEventListener("input", function (event) {
if (Username=="e") {
if (password==passwordreal){
location.href='https://www.youtube.com/c/OnlineTutorials4Designers/videos'//Links de prueba
}else{
location.href='https://www.youtube.com/channel/UCe8xYIQ3m5hzJ0M2fzp9AEw/videos'
}
} else {//Sigue llegando a este else
location.href='https://www.youtube.com/c/MrBeast6000'
}
});
form.addEventListener("submit", function (event) {
e.preventDefault()
});//Añadido debido a la respuesta, no funciona.
:root{
--input-color: #80868B;
--border-color: #DADCE0;
}
body {
background-image: url("https://64.media.tumblr.com/bd1b0d977b3e43cc5645297d5322662c/tumblr_ndyybljlWc1rvnh7zo1_r1_500.gif");
overflow: hidden;
height: 100vh;
background-size: cover;
background-position: center;
}
/* Centrar elemento dentro de main */
.main {
position: absolute;
margin: auto;
left: 0; right: 0;
top: 0; bottom: 0;
width: 1404px/*550px*/;
height: 658px/*315px*/; line-height: 50px; /* Con «line-height» con el mismo valor numérico de la altura centras horizontalmente el texto */
}
.video{
width: 1370px;
height: 770px;
}
.icon {
position: absolute;
right: 0;
/* top: 0; */
bottom: 0;
width: 3vw;
height: 97vh;
}
.input {
position: relative;
background-color: var(--container-color);
padding: 1.35rem 1.25rem;
border-radius: .5rem;
display: flex;
align-items: center;
column-gap: .75rem;
}
.input__lock, .input__icon {
font-size: 1.25rem;
z-index: 1;
}
.input__lock, .input__password {
color: var(--white-color);
}
.input__icon {
color: var(--first-color);
cursor: pointer;
position: absolute;
right: 0.5vw;
top: 1.5vh;
}
.input__password {
background: transparent;
border: none;
outline: none;
font-size: 14px;
z-index: 1;
}
.input__password::placeholder {
color: var(--white-color);
}
.input__overlay {
width: 32px;
height: 32px;
background-color: var(--white-color);
position: absolute;
right: .9rem;
border-radius: 50%;
z-index: 0;
transition: .4s ease-in-out;
}
/* Transition effect */
.overlay-content {
width: 100%;
height: 100%;
border-radius: .5rem;
right: 0;
}
.overlay-content ~ .input__lock {
color: var(--container-color);
}
.overlay-content ~ .input__password,
.overlay-content ~ .input__password::placeholder {
color: var(--text-color);
}
.form{
width: 360px;
padding: 4rem 2rem;
border-radius: 1rem;
}
.form__title{
font-weight: 400;
margin-bottom: 3rem;
}
.form__div{
position: relative;
height: 48px;
margin-bottom: 1.5rem;
}
.input__icon {
color: var(--first-color);
cursor: pointer;
}
.form__input{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: var(--normal-font-size);
border: 1px solid var(--border-color);
border-radius: .5rem;
outline: none;
padding: 1rem;
background: none;
z-index: 1;
color: #f0f0f0;
}
.form__label{
position: absolute;
left: 1rem;
top: 1rem;
padding: 0 .25rem;
background-color: var(--bs-dark-rgb);
color: var(--input-color);
font-size: var(--normal-font-size);
transition: .3s;
}
.form__button{
display: block;
margin-left: auto;
padding: .75rem 2rem;
outline: none;
background-color: transparent;
color: #fff;
font-size: var(--normal-font-size);
border-radius: .5rem;
cursor: pointer;
transition: .3s;
}
.form__button:hover{
box-shadow: 0 10px 36px rgba(0,0,0,.15);
}
/*Input focus mover arriba label*/
.form__input:focus + .form__label{
top: -.5rem;
left: .8rem;
color: var(--first-color);
font-size: var(--small-font-size);
font-weight: 500;
z-index: 10;
background-color: #212529;
}
/*Input focus mantener arriba label*/
.form__input:not(:placeholder-shown).form__input:not(:focus)+ .form__label{
top: -.5rem;
left: .8rem;
font-size: var(--small-font-size);
font-weight: 500;
z-index: 10;
background-color: #212529;
}
/*Input focus*/
.form__input:focus{
border: 1.5px solid var(--first-color);
}
.bx2 {
font-family: boxicons!important;
font-weight: 400;
font-style: normal;
font-variant: normal;
/*line-height: 3.5;*/
text-rendering: auto;
/*display: inline-block;*/
text-transform: none;
-webkit-font-smoothing: antialiased;
position: absolute;
/* right: 23px; */
left: 19rem;
top: 0.80rem;
-moz-osx-font-smoothing: grayscale;
}
.img-content{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.img-content:hover{
cursor: pointer;
}
/*====================================================================================*/
.box2 img {
object-fit: fill;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/estilo1.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Spectral+SC:400,600" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<title>Prueba</title>
<!--=============== BOXICONS ===============-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<div class="icon">
<ion-icon name="reorder-four-outline" size="large"></ion-icon>
</div>
<div class="main">
</div>
<!--Modal-->
<div class="modal fade" id="uploads" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog bg-dark">
<div class="modal-content bg-dark">
<div class="modal-header bg-dark">
<h5 class="modal-title bg-dark" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="card text-white bg-dark mb-3" style="max-width: 80rem;">
<h3 style="color:#ffffff" class="card-header"><i class="far fa-image" aria-hidden="true"></i>Login</h3>
<div class="card-body">
<form id="Formulario" target="_self" method="POST" enctype="multipart/form-data" autocomplete="off" onKeyPress="if (event.which == 13) return false;">
<br>
<div class="form__div">
<input id="Username" type="text" class="form__input" placeholder=" " autofocus name="Email">
<label for="" class="form__label">Username</label>
</div>
<div class="form__div">
<div class="input__overlay" id="input-overlay"></div>
<input type="password" placeholder=" " class="form__input" id="input-pass" name="Password" onKeyPress="if (event.which == 13) return false;">
<label for="" class="form__label">Password</label>
<i class='bx bx-hide input__icon' id="input-icon"></i>
</div>
<br>
<script>
/*=============== SHOW / HIDDEN INPUT ===============*/
const showHiddenInput = (inputOverlay, inputPass, inputIcon) =>{
const overlay = document.getElementById(inputOverlay),
input = document.getElementById(inputPass),
iconEye = document.getElementById(inputIcon)
iconEye.addEventListener('click', () =>{
// Change password to text
if(input.type === 'password'){
// Switch to text
input.type = 'text'
// Change icon
iconEye.classList.add('bx-show')
}else{
// Change to password
input.type = 'password'
// Remove icon
iconEye.classList.remove('bx-show')
}
// Toggle the overlay
overlay.classList.toggle('overlay-content')
})
}
showHiddenInput('input-overlay','input-pass','input-icon')
</script>
<br>
<div class="form-group">
<button class="btn btn-outline-light">
<i class="fa fa-upload" aria-hidden="true"></i>Subir Imagen
</button>
<script src="./js/ValidacionInicio.js"></script>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Fin Modal-->
</body>
</html>
Related
$(document).ready(function() {
$('#btn').click(function() {
var mylist = $('#input').val();
$('#myUL').prepend('<li><input type="checkbox" id = "check" name="interest" onclick="toggleBoxVisibility()">' + mylist + '</li>');
});
});
function toggleBoxVisibility() {
if (document.getElementById("check").checked == true) {
document.getElementsByTagName("LI").style.visibility = "visible";
} else {
document.getElementById("myUL").style.visibility = "hidden";
}
}
#container {
text-align: center;
margin: auto;
width: 400px;
border: 1px solid #ccc;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
/* make the list items unselectable
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; */
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
.header:after {
content: "";
display: table;
clear: both;
}
#myUL {
width: 50%;
margin-left: auto;
margin-right: 27%;
}
.claim {
position: absolute;
right: 0;
top: 0;
}
#check {
margin-right: -190px;
margin-left: -190px;
margin-top: 9px;
}
<html>
<head>
<title>Login </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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>
<body>
<div class="hero">
<div class="container">
<h1 class="display-2 text-center">To-Do</h1>
<div class="row">
<form id="form" class="col-lg-6 col-8 mx-auto">
<div class="input-group">
<input id="input" class="form-control" placeholder="Enter a new task here">
<span>
<button id="btn" type="button" class="btn btn-primary" >Add</button>
</span>
</div>
</div>
<ul id="myUL">
<li>Hit the gym </li>
<li class="checked">Pay bills</li>
<li>Meet George</li>
<li>Buy eggs</li>
</ul>
<div class="row">
<button id="btnClr" type="button" class="btn btn-primary mx-auto btnHide"> Remove Complete </button>
</div>
</form>
</div>
</div>
</body>
</html>
**I want to run a line through the text once it is selected and I am not sure how to do that. I have pasted most of my code above and I tried to toggle the visiblity of the list in order to make sure if the checking function works or not. The checking function works. I just want some ideas of how should i strike through the text once the checkbox next to the box is selected. **
you can refer this article to done this task here. Anyway I try to use it and it works fine. Hope this one can give you some insight.
Add label on your jQuery code, <label>' + mylist + '</label> and looks something like this:
$(document).ready(function() {
$('#btn').click(function() {
var mylist = $('#input').val();
$('#myUL').prepend('<li><input type="checkbox" id = "check" name="interest" onclick="toggleBoxVisibility()"><label>' + mylist + '</label></li>');
});
});
And add this line to your CSS:
input:checked+label {
text-decoration: line-through;
text-decoration-color: #fff;
}
I have multiple div-containers all containing an image and some text. I want to make modals for all of the images, but I'm stuck getting them to work and I don't know what else I need to change. I'm struggling especially since I also have a settings modal inside of my off canvas menu.
How do I make all of the images work as a modal without losing the Settings off canvas menu? I know I have to change the JS for it to work for class instead of id, but it still doesn't work and I don't know what I'm missing.
<!-- OFF MENU CANVAS JS-->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<!-- END OFF MENU CANVAS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Begin settings page popup-->
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<!-- End settings page popup-->
<!-- Begin img enlargen-->
<script>
// Get the modal
var modal =
this.getAttribute("rel"); document.getElementById('myModal2');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = this.getAttribute("rel"); document.getElementById('myImg');
var modalImg = document.getElementsByClassName("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
<!--End img enlargen-->
#charset "UTF-8";
/* CSS Document */
header {
z-index: 1000;
width: 100%;
background-color: #5BC2FF;
margin: 0 auto;
position: relative;
box-shadow: 0px 0.5px 2px 0.2px black;
}
/* HEADER */
#airplane {
margin-left: 5px;
display: inline-block;
}
.headertext2 {
z-index: 100;
text-align: center;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
display: inline;
margin-left: 8px;
font-size: 30px;
}
/* OFF CANVAS MENU BEGINS*/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #5BC2FF;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #586166;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: .5s;
padding: 16px;
display: inline-block;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* OFF CANVAS MENU END*/
body {
background-color: #586166;
height: 1000px;
}
p.div-container {
font-family: 'annie-use-your-telescope', "Arial";
margin-top: 5%;
font-size: 4vw;
}
.pic {
margin-bottom: 10%;
margin-left: 10px;
margin-right: 10px;
padding:1px;
border:1px solid #021a40;
background-color: #FF5B5F;
float: left;
width: 50%;
height: 50%;
}
#FirstPic {
margin-top: 100px;
}
#LastPic {
margin-bottom: 100px;
}
#FirstDesc {
margin-top: 100px;
}
.div-container {
display: flex;
overflow: hidden;
}
.Description {
float: left;
width: 50%;
height: 100px;
color: white;
padding-right: 5px;
}
/*SIGN UP FORM BEGIN*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 8px 12px 5px 3px;
display: inline-block;
}
input[type=submit] {
background-color: #D29E95;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
margin-bottom: 40px;
}
input[type=submit]:hover {
background-color: #FF5B5F;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-top: 30px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
/*SIGN UP FORM END*/
.section {
background-color: #5ECCBA;
width: 97%;
white-space: nowrap;
height: 375px;
margin: 85px 1.5% 20px;
padding-bottom: 5px;
float: left;
display: block;
box-shadow: 0px 2px 2px 0.2px black;
}
#ProfilePic {
padding-top: 10px;
padding-left: 10px;
}
h2 {
display: inline;
margin-left: 8%;
text-decoration: underline;
font-weight: 400;
color: white;
}
.ages {
float: left;
display: inline;
margin-top: -30px;
margin-left: 50%;
text-align: center;
padding-left:120px;
padding-top: -600px;
font-weight:lighter;
color: white;
}
.col-6 {
text-align: center;
}
.col-3 {
display: inline-block;
padding: 2px 2% 0.5% 2%;
margin: 0% 7%;
width: auto;
height: 30px;
text-align: center;
float: left;
box-shadow: 1px 1px 2px 0.2px white;
}
.inline-block {
display:inline-block;
float:left;
margin-left:5%;
margin-top: 1%;
}
.titles {
margin-left: 25%;
padding-top: 25px;
color: white;
}
.kmtravel {
text-align: center;
margin-left: 25%;
margin-top: -15px;
color: white;
}
.myworld {
background-color: #5ECCBA;
display: inline-block;
width: 97%;
height: 50px;
text-align: center;
margin: 0% 1.5% 0px;
box-shadow: 0px -1px 2px 0.2px black;
color: white;
padding-top: 10px;
border-bottom: medium;
}
#MyMapColours {
background-color: white;
width: 97%;
margin-left: 1.5%;
margin-right: 1.5%;
margin-bottom: 10px;
margin-top: 2px;
display: inline-block;
}
.lefttodiscover {
background-color: #5ECCBA;
display: inline-block;
width: 97%;
height: 50px;
text-align: center;
margin: 10px 1.5% 0px;
box-shadow: 0px -1px 2px 0.2px black;
color: white;
padding-top: 10px;
}
#map {
width:97%;
height:400px;
background:white;
margin: 2px 1.5% 70px;
box-shadow: 1px 1px 2px 0.2px black;
}
/* SETTINGS PAGE BEGINS */
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: white;
box-shadow: 0px -0.5px 2px 0.2px black;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
margin-left:90%;
font-size: 28px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* SETTINGS PAGE END*/
/* ENLARGEN IMAGE BEGIN*/
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal2-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal2-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close2 {
top: 15px;
right: 35px;
margin-bottom: 20px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
margin-right: 10%;
}
.close2:hover,
.close2:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal2-content {
width: 100%;
}
}
/* ENLARGEN IMAGE END*/
footer {
background: #5BC2FF;
color:white;
height:50px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-top: 12px;
text-align: center;
box-shadow: 0px -0.5px 2px 0.2px black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>My Journey</title>
<link href="css/mystyles.css" rel="stylesheet" type="text/css">
</head>
<body><!-- BEGIN BODY-->
<div class="jumbotron-fluid">
<header class="fixed-top">
<!-- OFF CANVAS MENU START -->
<div id="mySidenav" class="sidenav">
×
My Journey
My Account
New Account
My Friends
<br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<button id="myBtn">Contact</button>
Settings
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>Are you having trouble using the app?</h3>
<p>Visit our website www.MyJourney.com<br>
Or contact us at +31 6 12510336</p>
<p>For more information.</p>
</div>
</div>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
<!-- OFF CANVAS MENU END -->
<div id="airplane"> <img src="img/Airplane logo.png" alt="logoheader" width="40px"> </div>
<h1 class="headertext2">My Trips</h1>
</header>
<div class="div-container">
<div class="pic" id="FirstPic"><img src="img/Kenya elephants.jpg" alt="TravelPic" width="100%" height="100%"></div>
<div class="Description" id="FirstDesc">
<p>KENYA <br>
<i>What:</i> The Big 5 <br>
<i>With:</i> Tom <br>
<i>When:</i> Jan. 2018 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic">
<img id="myImg" src="img/Mirror Lakes.jpg" alt="Mirror Lakes" width="100%" height="100%">
</div>
<div class="Description">
<p>NEW ZEALAND <br>
<i>What:</i> Mirror Lakes <br>
<i>With:</i> Robyn <br>
<i>When:</i> Feb. 2014 <br>
</p>
</div>
</div>
<!-- The Modal -->
<div id="myModal2" class="modal2">
<span class="close">×</span>
<img class="modal-content2" alt="img01"><img class="img01" alt="img01">
<div id="caption"></div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Brazil rock dedo de deus.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>BRAZIL <br>
<i>What:</i> Dedo de Deus <br>
<i>With:</i> Barbara & Paul <br>
<i>When:</i> May. 2017 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Sunset orange.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>BELGIUM <br>
<i>What:</i> Sunset <br>
<i>With:</i> Maya <br>
<i>When:</i> Nov. 2016 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Amsterdam.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>NETHERLANDS <br>
<i>What:</i> Canals <br>
<i>With:</i> Vera <br>
<i>When:</i> Sep. 2016 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Lake Bled Slovenia.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>SLOVENIA <br>
<i>What:</i> Lake Bled <br>
<i>With:</i> Silvia & Mark <br>
<i>When:</i> Apr. 2016 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Table Mountain.jpeg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>SOUTH AFRICA <br>
<i>What:</i> Table Mountain <br>
<i>With:</i> Pauline <br>
<i>When:</i> Aug. 2015 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Mirror Lakes.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>NEW ZEALAND <br>
<i>What:</i> Mirror Lakes <br>
<i>With:</i> Robyn <br>
<i>When:</i> Feb. 2014 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic" id="LastPic"><img src="img/Caye Caulker Belize.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>BELIZE <br>
<i>What:</i> Caye Caulker <br>
<i>With:</i> Romy <br>
<i>When:</i> Oct. 2013 <br>
</p>
</div>
</div>
<footer><!--BEGIN FOOTER-->
Adventure may hurt you but monotony will kill you.
</footer><!--END FOOTER-->
</div><!-- END CONTAINER -->
</body><!--END BODY-->
</html>
My first dropdown button "Content" works correctly but when I click on the second dropdown button "Dropdown", the contents from the first dropdown button show up instead???
I have no idea why it is doing this??? Maybe I am overlooking a small detail, but I can't seem to find where I am going wrong with this.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>
Ummm.... because you call the same function from both buttons.
Essentially, you run the same piece of code, myFunction, despite which navigation item is clicked. Therefore, of course both items will always do the same thing.
Give each menu a different ID (remember that IDs need to be unique - i.e. you can't have two items with the same ID), and make myFunction take the ID of the element to show / hide, as shown below.
This means that there is a way for the function to determine which menu open, and thus it will open the correct one.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onmouseup = function(e) {
var dropdown = document.querySelector(".dropdown-content.show"); //Get any shown dropdown element (i.e. any element on the page with both the dropdown-content class and the show class
if (dropdown) { //If such an element exists, a dropdown needs to be closed
dropdown.classList.remove("show"); //So remove the show class
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownOne')">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownOne">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownTwo')">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownTwo">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>
How does this work?
myFunction('dropdownOne') means that the id variable in myFunction is given the value dropdownOne - therefore when we call document.getElementById(id) it will interpret as document.getElementById('dropdownOne') instead, and hence the first dropdown is targeted.
Likewise, if we call myFunction('dropdownTwo'), then it will interpret as document.getElementById('dropdownTwo'), and thus target the second dropdown.
Therefore, you can add as many menu items like this as you want, assuming each has a unique identifier, and myFunction is given the unique ID each time.
I'm trying to figure out this JQuery Popup, I can show it on click of "Login" or "Sign Up." But on click of "Login", then on "Sign Up" within the Login model it doesn't work. This feature is here so users can sign up from the login model without having to close the login model then click on the "Sign Up" button. I want to hide the Login popup and show the Sign Up popup. But it only hides the Login popup and doesn't show the Sign Up popup. How do I fix this?
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
a {
text-decoration: none;
}
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
/* end of nav */
/* index.php */
#course_MainTitle {
font-family: 'Open Sans', sans-serif;
font-size: 24px;
position: relative;
left: 187px;
top: 20px;
}
#nav_logo {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 20px;
position: relative;
left: 188px;
top: 9px;
}
/* Search Engine */
#search_engine {
background: white;
color: #353535;
outline: none;
width: 500px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
padding: 7px 30px 7px 10px;
border: none;
border-radius: 3px;
position: relative;
top: 9px;
left: 210px;
}
#search_engine::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #353535;
}
#search_engine:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #353535;
opacity: 1;
}
#search_engine::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #353535;
opacity: 1;
}
#search_engine:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #353535;
}
/* End of Search Engine */
/* Login & Sign Up */
#login_nav_div, #signup_nav_div {
float: right;
font-family: 'Open Sans', sans-serif;
color: #353535;
font-size: 17px;
padding: 7px 30px 7px 10px;
border-radius: 3px;
margin-right: 10px;
position: relative;
left: -66px;
background: white;
top: 6px;
}
#login, #signup {
position: relative;
top: -1px;
left: 9px;
}
/* End of Login & Sign Up */
/* end of index.php */
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src='main.js'></script>
<style>
/***********************\
Modal Module - Title CSS FTW
\***********************/
.Modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
visibility: hidden;
}
.Modal .content {
position: absolute;
left: 50%;
top: 30%;
width: 390px;
padding: 50px;
border-radius: 3px;
background: #fff;
transform: translate(-50%, -30%) scale(0);
z-index: 50;
}
.Modal .close {
position: absolute;
top: 8px;
right: 8px;
display: block;
width: 18px;
height: 18px;
padding: 2px;
line-height: 18px;
border-radius: 50%;
text-align: center;
cursor: pointer;
background: #C5C5C5;
color: #fff;
}
.Modal .close:before {
content: '\2715';
}
.Modal.is-visible {
visibility: visible;
background: rgba(0, 0, 0, 0.5);
transition: background .35s;
transition-delay: .1s;
z-index: 40;
}
.Modal.is-visible .content {
transform: translate(-50%, -30%) scale(1);
transition: transform .35s;
}
/* Model */
#login_title {
font-family: 'Open Sans', sans-serif;
font-size: 23px;
letter-spacing: 1px;
position: relative;
top: -20px;
left: 110px;
}
#login_username, #login_password {
outline: none;
border: 1px solid #ccc;
color: #353535;
padding: 12px 10px 12px 10px;
border-radius: 3px;
font-size: 16px;
position: relative;
left: -30px;
width: 425px;
font-family: 'Open Sans', sans-serif;
}
#login_username:focus, #login_password:focus {
border: 1px solid #4096ee;
}
#login_submit {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,4096ee+100;Blue+Flat+%232 */
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4096ee 0%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
color: white;
text-align: center;
padding: 11px 12px 11px 12px;
font-size: 22px;
width: 445px;
font-weight: normal;
position: relative;
top: 5px;
border-radius: 3px;
float: left;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
cursor: pointer;
position: relative;
left: -28px;
font-weight: bold;
}
#login_submit:focus, #login_submit:hover {
background: rgb(37,141,200);
}
/* End of Model */
/* Error Messages */
#login_username_error, #login_password_error, #login_failed {
font-family: 'Open Sans', sans-serif;
color: #DD4B39;
position: relative;
left: -30px;
top: -8px;
font-weight: bold;
display: none;
}
/* End of Error Messages */
/* $_SESSION["id"] set */
#user_avatar {
float: left;
width: 28px;
height: 28px;
border-radius: 50%;
position: relative;
top: -2px;
left: -10px;
}
#user_username {
color: white;
float: right;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 16px;
position: relative;
top: -31px;
left: -220px;
text-transform: capitalize;
padding: 10px;
}
/* Drop Down */
#login_label {
font-family: 'Open Sans', sans-serif;
cursor: pointer;
padding: 5px 5px 5px 20px;
}
#login_remember, #login_label {
position: relative;
top: 25px;
left: -30px;
}
#login_label {
left: -52px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
a #forgot_password {
color: black;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
position: relative;
top: 25px;
left: 120px;
}
a #forgot_password:hover {
text-decoration: underline;
}
#login_line {
background: #ccc;
height: 1px;
width: 490px;
position: relative;
top: 25px;
left: -50px;
}
#login_crossSection {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: black;
position: relative;
top: 37px;
left: 90px;
}
#login_crossSection a {
color: #4096EE;
cursor: pointer;
}
#login_crossSection a:hover {
text-decoration: underline;
}
/* End of Drop Down */
/* End of $_SESSION["id"] set */
</style>
</head>
<body>
<!-- Login Popup -->
<div id="Popup" class="Modal">
<div class="content">
<span id='login_title'> Welcome Back </span> <br>
<form action='' method='post'>
<span id='login_failed'></span>
<input id='login_username' placeholder='Username' name='login_username'> <br> <br>
<span id='login_username_error'></span>
<input id='login_password' placeholder='Password' name='login_password' type='password'> <br> <br>
<span id='login_password_error'></span>
<input type='button' value='Login' id='login_submit' onclick='checkErrors()'>
</form>
<!-- Remember Me -->
<input type='checkbox' name='login_remember' id='login_remember'> <label for='login_remember' id='login_label'> Remember Me </label>
<!-- End of Remember Me -->
<!-- Forgot Password? -->
<a href='#'> <span id='forgot_password'> Forgot Password? </span> </a> <br> <br>
<!-- End of Forgot Password -->
<!-- Cross Section -->
<div id='login_line'></div>
<span id='login_crossSection'> Not a member yet? <a href='#'> Sign Up </a> </span>
<!-- End of Cross Section -->
<span class="close"></div>
</div>
<!-- End of Login Popup -->
<!-- Sign Up Popup -->
<div id="Popup2" class="Modal">
<div class="content">
<span id='login_title'> Welcome Hi </span> <br>
<form action='' method='post'>
<span id='login_failed'></span>
<input id='login_username' placeholder='Username' name='login_username'> <br> <br>
<span id='login_username_error'></span>
<input id='login_password' placeholder='Password' name='login_password' type='password'> <br> <br>
<span id='login_password_error'></span>
<input type='button' value='Login' id='login_submit' onclick='checkErrors()'>
</form>
<!-- Remember Me -->
<input type='checkbox' name='login_remember' id='login_remember'> <label for='login_remember' id='login_label'> Remember Me </label>
<!-- End of Remember Me -->
<!-- Forgot Password? -->
<a href='#'> <span id='forgot_password'> Forgot Password? </span> </a> <br> <br>
<!-- End of Forgot Password -->
<!-- Cross Section -->
<div id='login_line'></div>
<!-- End of Cross Section -->
<span class="close"></div>
</div>
<!-- End of Sign Up Popup -->
<!-- nav -->
<div id='nav'>
<a href='index.php'> <span id='nav_logo'> Logo </span> </a>
<!-- Search Engine -->
<input id='search_engine' placeholder='Search Courses'>
<!-- End of Search Engine -->
<!-- Sign Up -->
<a href='#Popup2' class='button'> <div id='signup_nav_div'>
<span id='signup'> Sign Up </span>
</div> </a>
<!-- End of Sign Up -->
<!-- Login -->
<a href='#Popup' class='button'> <div id='login_nav_div'>
<span id='login'> Login </span>
</div> </a>
<!-- End of Login -->
}
?>
</div>
<!-- end of nav -->
<script>
$.fn.expose = function(options) {
var $modal = $(this),
$trigger = $('a[href="' + this.selector + '"]');
$modal.on("expose:open", function() {
$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});
$modal.on("expose:close", function() {
$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});
$trigger.on("click", function(e) {
e.preventDefault();
$modal.trigger("expose:open");
});
$modal.on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});
return;
}
// Example Cancel Button
$("#login_nav_div").click(function() {
$("#Popup").expose();
});
$("#signup_nav_div").click(function() {
$("#Popup2").expose();
});
$("#login_crossSection a").click(function() {
$("#Popup").hide();
$("#Popup2").expose();
});
$(".cancel").on("click", function(e) {
console.log('a')
e.preventDefault();
$(this).trigger("expose:close");
});
// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {
alert("Modal Opened!");
});
$("#Popup").on("expose:closed", function() {
alert("Modal Closed!");
});
*/
function checkErrors() {
if($("#login_remember").is(":checked")) {
var checked = 1;
} else {
checked = 0;
}
var login_username_val = $("#login_username").val().length;
var login_password_val = $("#login_password").val().length;
var login_username = $("#login_username").val();
var login_password = $("#login_password").val();
if(login_username_val < 1) {
$("#login_username_error").show().text("Username Required");
$("#login_failed").hide();
$("#login_username").css("border", "1px solid #DD4B39");
} else {
$("#login_username_error").hide();
$("#login_username").css("border", "");
}
if(login_password_val < 1) {
$("#login_password_error").show().text("Password Required");
$("#login_failed").hide();
$("#login_password").css("border", "1px solid #DD4B39");
} else {
$("#login_password_error").hide();
$("#login_password").css("border", "");
}
if(login_password_val > 0 && login_username_val > 0) {
$.post("check.php?checked="+checked, {username: login_username, password: login_password}, function(data) {
if(data == "Login Worked") {
location.reload();
}
if(data == "Login Failed") {
$("#login_failed").show().text("Login Failed");
}
});
}
}
</script>
</body>
Try using the following on line 386:
$("#login_crossSection a").click(function() {
$("#Popup").trigger('expose:close');
$("#Popup2").trigger('expose:open');
});
You may want to have a look at that expose function, was this written by you or did you grab it from somewhere, either way the above is any easy temporary solution.
I'm trying to figure out this JQuery Popup, I can show it on click of "Login" or "Sign Up." But on click of "Login", then on "Sign Up." I want to hide the Login popup and show the Sign Up popup. But it only hides the Login popup and doesn't show the Sign Up popup. How do I fix this?
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
a {
text-decoration: none;
}
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
/* end of nav */
/* index.php */
#course_MainTitle {
font-family: 'Open Sans', sans-serif;
font-size: 24px;
position: relative;
left: 187px;
top: 20px;
}
#nav_logo {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 20px;
position: relative;
left: 188px;
top: 9px;
}
/* Search Engine */
#search_engine {
background: white;
color: #353535;
outline: none;
width: 500px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
padding: 7px 30px 7px 10px;
border: none;
border-radius: 3px;
position: relative;
top: 9px;
left: 210px;
}
#search_engine::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #353535;
}
#search_engine:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #353535;
opacity: 1;
}
#search_engine::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #353535;
opacity: 1;
}
#search_engine:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #353535;
}
/* End of Search Engine */
/* Login & Sign Up */
#login_nav_div, #signup_nav_div {
float: right;
font-family: 'Open Sans', sans-serif;
color: #353535;
font-size: 17px;
padding: 7px 30px 7px 10px;
border-radius: 3px;
margin-right: 10px;
position: relative;
left: -66px;
background: white;
top: 6px;
}
#login, #signup {
position: relative;
top: -1px;
left: 9px;
}
/* End of Login & Sign Up */
/* end of index.php */
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src='main.js'></script>
<style>
/***********************\
Modal Module - Title CSS FTW
\***********************/
.Modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
visibility: hidden;
}
.Modal .content {
position: absolute;
left: 50%;
top: 30%;
width: 390px;
padding: 50px;
border-radius: 3px;
background: #fff;
transform: translate(-50%, -30%) scale(0);
z-index: 50;
}
.Modal .close {
position: absolute;
top: 8px;
right: 8px;
display: block;
width: 18px;
height: 18px;
padding: 2px;
line-height: 18px;
border-radius: 50%;
text-align: center;
cursor: pointer;
background: #C5C5C5;
color: #fff;
}
.Modal .close:before {
content: '\2715';
}
.Modal.is-visible {
visibility: visible;
background: rgba(0, 0, 0, 0.5);
transition: background .35s;
transition-delay: .1s;
z-index: 40;
}
.Modal.is-visible .content {
transform: translate(-50%, -30%) scale(1);
transition: transform .35s;
}
/* Model */
#login_title {
font-family: 'Open Sans', sans-serif;
font-size: 23px;
letter-spacing: 1px;
position: relative;
top: -20px;
left: 110px;
}
#login_username, #login_password {
outline: none;
border: 1px solid #ccc;
color: #353535;
padding: 12px 10px 12px 10px;
border-radius: 3px;
font-size: 16px;
position: relative;
left: -30px;
width: 425px;
font-family: 'Open Sans', sans-serif;
}
#login_username:focus, #login_password:focus {
border: 1px solid #4096ee;
}
#login_submit {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,4096ee+100;Blue+Flat+%232 */
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4096ee 0%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
color: white;
text-align: center;
padding: 11px 12px 11px 12px;
font-size: 22px;
width: 445px;
font-weight: normal;
position: relative;
top: 5px;
border-radius: 3px;
float: left;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
cursor: pointer;
position: relative;
left: -28px;
font-weight: bold;
}
#login_submit:focus, #login_submit:hover {
background: rgb(37,141,200);
}
/* End of Model */
/* Error Messages */
#login_username_error, #login_password_error, #login_failed {
font-family: 'Open Sans', sans-serif;
color: #DD4B39;
position: relative;
left: -30px;
top: -8px;
font-weight: bold;
display: none;
}
/* End of Error Messages */
/* $_SESSION["id"] set */
#user_avatar {
float: left;
width: 28px;
height: 28px;
border-radius: 50%;
position: relative;
top: -2px;
left: -10px;
}
#user_username {
color: white;
float: right;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 16px;
position: relative;
top: -31px;
left: -220px;
text-transform: capitalize;
padding: 10px;
}
/* Drop Down */
#login_label {
font-family: 'Open Sans', sans-serif;
cursor: pointer;
padding: 5px 5px 5px 20px;
}
#login_remember, #login_label {
position: relative;
top: 25px;
left: -30px;
}
#login_label {
left: -52px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
a #forgot_password {
color: black;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
position: relative;
top: 25px;
left: 120px;
}
a #forgot_password:hover {
text-decoration: underline;
}
#login_line {
background: #ccc;
height: 1px;
width: 490px;
position: relative;
top: 25px;
left: -50px;
}
#login_crossSection {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: black;
position: relative;
top: 37px;
left: 90px;
}
#login_crossSection a {
color: #4096EE;
cursor: pointer;
}
#login_crossSection a:hover {
text-decoration: underline;
}
/* End of Drop Down */
/* End of $_SESSION["id"] set */
</style>
</head>
<body>
<!-- Login Popup -->
<div id="Popup" class="Modal">
<div class="content">
<span id='login_title'> Welcome Back </span> <br>
<form action='' method='post'>
<span id='login_failed'></span>
<input id='login_username' placeholder='Username' name='login_username'> <br> <br>
<span id='login_username_error'></span>
<input id='login_password' placeholder='Password' name='login_password' type='password'> <br> <br>
<span id='login_password_error'></span>
<input type='button' value='Login' id='login_submit' onclick='checkErrors()'>
</form>
<!-- Remember Me -->
<input type='checkbox' name='login_remember' id='login_remember'> <label for='login_remember' id='login_label'> Remember Me </label>
<!-- End of Remember Me -->
<!-- Forgot Password? -->
<a href='#'> <span id='forgot_password'> Forgot Password? </span> </a> <br> <br>
<!-- End of Forgot Password -->
<!-- Cross Section -->
<div id='login_line'></div>
<span id='login_crossSection'> Not a member yet? <a href='#'> Sign Up </a> </span>
<!-- End of Cross Section -->
<span class="close"></div>
</div>
<!-- End of Login Popup -->
<!-- Sign Up Popup -->
<div id="Popup2" class="Modal">
<div class="content">
<span id='login_title'> Welcome Hi </span> <br>
<form action='' method='post'>
<span id='login_failed'></span>
<input id='login_username' placeholder='Username' name='login_username'> <br> <br>
<span id='login_username_error'></span>
<input id='login_password' placeholder='Password' name='login_password' type='password'> <br> <br>
<span id='login_password_error'></span>
<input type='button' value='Login' id='login_submit' onclick='checkErrors()'>
</form>
<!-- Remember Me -->
<input type='checkbox' name='login_remember' id='login_remember'> <label for='login_remember' id='login_label'> Remember Me </label>
<!-- End of Remember Me -->
<!-- Forgot Password? -->
<a href='#'> <span id='forgot_password'> Forgot Password? </span> </a> <br> <br>
<!-- End of Forgot Password -->
<!-- Cross Section -->
<div id='login_line'></div>
<!-- End of Cross Section -->
<span class="close"></div>
</div>
<!-- End of Sign Up Popup -->
<!-- nav -->
<div id='nav'>
<a href='index.php'> <span id='nav_logo'> Logo </span> </a>
<!-- Search Engine -->
<input id='search_engine' placeholder='Search Courses'>
<!-- End of Search Engine -->
<!-- Sign Up -->
<a href='#Popup2' class='button'> <div id='signup_nav_div'>
<span id='signup'> Sign Up </span>
</div> </a>
<!-- End of Sign Up -->
<!-- Login -->
<a href='#Popup' class='button'> <div id='login_nav_div'>
<span id='login'> Login </span>
</div> </a>
<!-- End of Login -->
}
?>
</div>
<!-- end of nav -->
<script>
$.fn.expose = function(options) {
var $modal = $(this),
$trigger = $('a[href="' + this.selector + '"]');
$modal.on("expose:open", function() {
$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});
$modal.on("expose:close", function() {
$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});
$trigger.on("click", function(e) {
e.preventDefault();
$modal.trigger("expose:open");
});
$modal.on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});
return;
}
// Example Cancel Button
$("#login_nav_div").click(function() {
$("#Popup").expose();
});
$("#signup_nav_div").click(function() {
$("#Popup2").expose();
});
$("#login_crossSection a").click(function() {
$("#Popup").hide();
$("#Popup2").expose();
});
$(".cancel").on("click", function(e) {
console.log('a')
e.preventDefault();
$(this).trigger("expose:close");
});
// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {
alert("Modal Opened!");
});
$("#Popup").on("expose:closed", function() {
alert("Modal Closed!");
});
*/
function checkErrors() {
if($("#login_remember").is(":checked")) {
var checked = 1;
} else {
checked = 0;
}
var login_username_val = $("#login_username").val().length;
var login_password_val = $("#login_password").val().length;
var login_username = $("#login_username").val();
var login_password = $("#login_password").val();
if(login_username_val < 1) {
$("#login_username_error").show().text("Username Required");
$("#login_failed").hide();
$("#login_username").css("border", "1px solid #DD4B39");
} else {
$("#login_username_error").hide();
$("#login_username").css("border", "");
}
if(login_password_val < 1) {
$("#login_password_error").show().text("Password Required");
$("#login_failed").hide();
$("#login_password").css("border", "1px solid #DD4B39");
} else {
$("#login_password_error").hide();
$("#login_password").css("border", "");
}
if(login_password_val > 0 && login_username_val > 0) {
$.post("check.php?checked="+checked, {username: login_username, password: login_password}, function(data) {
if(data == "Login Worked") {
location.reload();
}
if(data == "Login Failed") {
$("#login_failed").show().text("Login Failed");
}
});
}
}
</script>
</body>
You need to rewrite all of this with the following method in mind. You can greatly simplify your code with it:
http://api.jquery.com/toggle/
$( "#clickme" ).click(function() {
$( "#book" ).toggle( "slow", function() {
// Animation complete.
});
});
The matched elements will be revealed or hidden immediately, with no
animation, by changing the CSS display property. If the element is
initially displayed, it will be hidden; if hidden, it will be shown.