Codepen sign up/log in - javascript

I have tried to get this sign up thing into Notepad. I'm hopeless and whatever I tried didn't work. I would appreciate if someone could take a look at the code and explain what each code file is going to look like (html,css ect).
Here is the link to the website: http://codepen.io/jack-doyle/pen/XXYXWp
Below you will find what I've copied so far.
Thank you for looking into it.
(function() {
var signup = $('.container--static .button--signup');
var login = $('.container--static .button--login');
var signupContent = $('.container--sliding .slider-content.signup');
var loginContent = $('.container--sliding .slider-content.login');
var slider = $('.container--sliding');
signup.on('click', function() {
loginContent.css('display', 'none');
signupContent.css('display', 'initial');
slider.animate({
'left': '30%'
}, 350, 'easeOutBack');
});
login.on('click', function() {
signupContent.css('display', 'none');
loginContent.css('display', 'initial');
slider.animate({
'left': '70%'
}, 350, 'easeOutBack');
});
})();
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body {
background: url(https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Montserrat';
overflow: auto;
}
a,
a:focus,
a:visited,
a:active {
text-decoration: none;
color: inherit;
}
.container {
padding: 5%;
border-radius: 3px;
}
.container.container--static {
width: 80%;
min-width: 600px;
height: 40%;
min-height: 250px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #000;
color: #eee;
opacity: 0.6;
}
.container.container--sliding {
width: 35%;
height: 50%;
min-height: 300px;
background-color: #fefefe;
position: absolute;
top: 50%;
left: 65%;
transform: translate(-50%, -50%);
box-shadow: 3px -2px 6px 0px rgba(0, 0, 0, 0.4);
}
.container.container--sliding .slider-content.signup {
display: none;
}
.info-box {
width: 40%;
margin: 5% auto;
}
.info-box.left {
float: left;
}
.info-box.right {
float: right;
}
.heading {
font-family: 'Montserrat';
font-size: 1.2em;
}
.heading.alt {
margin-bottom: 10%;
text-transform: uppercase;
color: #E26A6A;
}
.info-text {
font-family: 'Roboto';
font-size: 0.7em;
font-weight: 300;
letter-spacing: 1px;
}
.info-text.alt {
color: #aaa;
}
.button {
width: 35%;
margin-top: 15px;
padding: 2% 5%;
background-color: transparent;
color: #eee;
border: 2px solid #ccc;
border-radius: 3px;
font-family: 'Montserrat';
font-size: 0.7em;
text-transform: uppercase;
cursor: pointer;
}
.button.alt {
margin-bottom: 15px;
background-color: #E26A6A;
border: 0;
}
.button:focus {
outline: 0;
}
form {
margin-bottom: 10%;
}
form input {
display: block;
width: 100%;
margin-bottom: 15px;
padding: 5px;
border: 0;
border-bottom: 2px solid #ddd;
font-family: 'Montserrat';
}
form input:focus {
outline: 0;
}
<html>
<head>
<script type="text/javascript" src="hey.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<!-- Static container -->
<div class="container container--static">
<!-- Signup prompt -->
<div class="info-box left">
<h2 class="heading">Don't have an account?</h2>
<p class="info-text">Ethical celiac hashtag taxidermy squid. Wayfarers distillery narwhal, kombucha jean shorts selvage meggings.</p>
<button class="button button--signup">Sign up</button>
</div>
<!-- Login prompt -->
<div class="info-box right">
<h2 class="heading">Have an account?</h2>
<p class="info-text">Ethical celiac hashtag taxidermy squid. Wayfarers distillery narwhal, kombucha jean shorts selvage meggings.</p>
<button class="button button--login">Login</button>
</div>
</div>
<!-- Sliding container -->
<div class="container container--sliding">
<!-- Login -->
<div class="slider-content login">
<h2 class="heading alt">Log In</h2>
<form id="login">
<input class="email" type="text" placeholder="Email">
<input class="password" type="password" placeholder="Password">
</form>
<button class="button button--login alt">Log In</button>
<p class="info-text alt">Forgot password?</p>
</div>
<!-- Signup -->
<div class="slider-content signup">
<h2 class="heading alt">Sign Up</h2>
<form id="signup">
<input class="name" type="text" placeholder="Full Name">
<input class="email" type="text" placeholder="Email">
<input class="password" type="password" placeholder="Password">
</form>
<button class="button button--signup alt">Sign Up</button>
</div>
</div>

First place your html, js, and css code in the same directory. If you are going to move the file from codepen to Notepad you will need to import jQuery, jQuery UI and load your javascript file last.
In your html file place these scripts after your last div:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="hey.js"></script>
</body>
</html>

Related

How to make a inline-block fit whole width?

I won't to make an inline block fill whole the width. Actually I am using amp. I want to make all the fields fit the whole width. But I am unable to make it. I can do it using !important. But it is a bad practice. So how I can I do it without using !important? I am using the bellow code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script async custom-element="amp-autocomplete" src="https://www.cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
<script async src="https://www.cdn.ampproject.org/v0.js"></script>
<style>
.page-form {
background: url(https://mydoginsurance.com.au/images/form-bg-lg.webp) no-repeat center;
background-size: cover;
position: relative;
color: #fff;
}
.section {
padding: 63px 0;
}
.page-form .container {
position: relative;
z-index: 100;
}
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.justify-content-center {
-ms-flex-pack: center;
justify-content: center;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.text-center{
text-align: center;
}
.mb-5, .my-5 {
margin-bottom: 3rem;
}
h2, .h2 {
font-size: 2.5rem;
}
.page-form .container .form-box {
padding: 0;
border: none;
background: none;
box-shadow: none;
-webkit-box-shadow: none;
}
.form-box {
background: rgba(255, 255, 255, 0.25);
border: 1px solid #eaeaea;
-webkit-box-shadow: 0 13px 29px 0 rgb(0 0 0 / 35%);
box-shadow: 0 13px 29px 0 rgb(0 0 0 / 35%);
padding: 40px;
}
.justify-content-center {
-ms-flex-pack: center;
justify-content: center;
}
.form-box .mb-4 {
position: relative;
}
.form-box .form-control {
padding: 20px 0 0 18px;
height: 54px;
border: none;
border-radius: 2px;
color: #000;
}
.form-control, input[type=text], input[type=email], input[type=tel], input[type=file], input[type=search], textarea, select {
display: block;
width: 100%;
padding: 0.6rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
</style>
</head>
<body>
<div class="page-form section" id="getquote">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="mb-5 text-center">
<h2>Submit your Dog info and we'll address your request ASAP</h2>
</div>
<div class="form-box">
<form action="https://mydoginsurance.com.au/choose-plan.html" method="GET" target="_top">
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="mb-4">
<input type="text" name="dog_name" class="form-control" aria-labelledby="label_dog_name" required>
<label id="label_dog_name" for="dog_name">Name of Dog</label>
</div>
</div>
<div class="col-sm-6">
<div class="mb-4">
<amp-autocomplete filter="substring" min-characters="0" style="padding: 0; color: black; display: cover">
<input type="search" name="breed" class="form-control" id="tbdog" aria-labelledby="label_dog_breed" required>
<label id="label_dog_breed" for="breed">Breed of Dog</label>
<script type="application/json">
{ "items": [ "Affenpinscher", "Afghan Hound", "Airedale Terrier", "Akita" }
</script>
</amp-autocomplete>
</div>
</div>
<div class="col-sm-6">
<div class="mb-4">
<!--<input type="number" name="age" min="1" max="8" class="form-control" required>-->
<select name="age" class="form-control" aria-labelledby="label_dog_age" required>
<option></option>
<option value="0">
< 1 </option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label id="label_dog_age" for="age">Age of Dog</label>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have hosted the site so that you can take a closer look to it: https://hungry-swanson-e6b32d.netlify.app/
you can add width: 100% to it (the amp-autocomplete component)

Sign up modal limit

I have integrated a sign up modal on a bootstrap website and would like to limit the number of impressions to visitors seeing it twice per session instead of on every page and also hiding it once a visitor has subscribed. The modal appears after 5 seconds of opening a web-page and only closes once a user clicks the close button.
//Modal
$(document).ready(function () {
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(5000).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(6000).fadeIn(400);
//Hide dialogue and background when the user clicks the close button
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
});
//Controls how the modal popup is closed with the close button
function HideDialog() {
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
html {
background-color: #333;
}
h2 {
text-align: center;
}
/****Modal*****/
/*Default Modal Styles*/
/* This is the background overlay */
.backgroundOverlay {
position: fixed;
top: 0;
right: 0,
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .85;
filter: alpha(opacity=85);
-moz-opacity: .85;
z-index: 101;
display: none;
}
/* This is the Popup Window */
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
/* This is the closing button */
#btnClose {
width:100%;
display: block;
text-align: right;
text-decoration: none;
color: #BCBCBC;
}
/* This is the closing button hover state */
#btnClose:hover {
color: #c90c12;
}
/* This is the description headline and paragraph for the form */
#delayedPopup > div.formDescription {
float: left;
display: block;
width: 44%;
padding: 1% 3%;
font-size: 18px;
color: #666;
clear: left;
}
/* This is the styling for the form's headline */
#delayedPopup > div.formDescription h2 {
color: #444444;
font-size: 36px;
line-height: 40px;
}
/*MailChimp Signup Form*/
/* This is the signup form body */
#delayedPopup #mc_embed_signup {
float: left;
width: 47%;
padding: 1%;
display: block;
font-size: 16px;
color: #666;
margin-left: 1%;
}
/* This is the styling for the signup form inputs */
#delayedPopup #mc-embedded-subscribe-form input {
width: 95%;
height: 30px;
font-size: 18px;
padding: 3px;
margin-bottom: 5px;
}
/* This is the styling for the signup form inputs when they are being hovered with the mouse */
#delayedPopup #mc-embedded-subscribe-form input:hover {
border:solid 2px #97c1c0;
box-shadow: 0 1px 3px #AAAAAA;
}
/* This is the styling for the signup form inputs when they are focused */
#delayedPopup #mc-embedded-subscribe-form input:focus {
border:solid 2px #333;
box-shadow: none;
}
/* This is the styling for the signup form submit button */
#delayedPopup #mc-embedded-subscribe {
width: 100%!important;
height: 40px!important;
margin: 10px auto 0 auto;
background: #333;
border: none;
color: #fff;
}
/* This is the styling for the signup form submit button hover state */
#delayedPopup #mc-embedded-subscribe:hover {
background: #97c1c0;
color: #fff;
box-shadow:none!important;
cursor: pointer;
}
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
<html lang="en">
<head>
<title>HOME</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>This a demo page</h2>
<!---Sign Up Modal---->
<div id="bkgOverlay" class="backgroundOverlay" style="display: block;"></div>
<div id="delayedPopup" class="delayedPopupWindow" style="display: block;">
<!-- This is the close button -->
[ X ]
<!-- This is the left side of the popup for the description -->
<div class="formDescription">
<h2>Sign Up and <span style="color: #333; font-weight: bold;">Save!</span></h2>
<p>Sign up today and be the first to know about our SPECIALS!</p>
</div>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div class="mc-field-group">
<label for="mce-FNAME">First Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address
<span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="PLEASE INPUT THE MAILCHIMP CODE" value="">
</div>
<div class="clear">
<input type="submit" value="Save Money!" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
<!-- End MailChimp Signup Form -->
</div> <!---End of Sign Up Modal-->
<!------JS----->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
Use the jquery-cookie plugin by carhartl.
Check for cookie before showing the modal. If it's present, don't display it. If it's not, store a new cookie and display modal.
$(document).ready(function() {
if ($.cookie('modal_shown') == null) {
$.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
$('#bkgOverlay').modal('show');
}
});

Dropdown won't work when hovering nav bar

I've been having a problem with a dropdown menu option. The thing refuses to display when I hover "Store". I've already tried in different ways (in some I was almost lucky, in others not so much) but in the end nothing really worked for me.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("tituloh").style.fontSize = "15px";
document.getElementById("tituloh").style.marginBottom = "70px";
document.getElementById("tituloh").style.top = "20px";
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "47px";
} else {
document.getElementById("tituloh").style.fontSize = "30px";
document.getElementById("tituloh").style.top = "35px";
document.getElementById("tituloh").style.marginBottom = "100px"
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "50px";
}
}
#body {
margin: 0px;
}
#remove {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
}
.order {
display: inline-block;
}
#remove .opt {
display: inline-block;
color: white;
text-align: center;
font-size: 24px;
padding: 14px 16px;
background-color: black;
text-decoration: none;
}
#remove .opt:hover,
.dropmenu:hover .dropbutton {
background-color: white;
color: black;
}
.dropmenu {
float: right;
}
.dropmenu .dropbutton {
font-size: 24px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropcont {
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
}
.dropcont .dropitem {
text-decoration: none;
width: 150px;
height: 30px;
margin: 5px 0;
padding-top: 5px;
padding-left: 5px;
display: inline-block;
text-align: left;
}
.dropcont a {
text-decoration: none;
color: black;
font-size: 24px;
}
.dropcont a:hover {
text-decoration: underline;
transition: 0.5s;
}
.dropmenu:hover .dropcont {
display: block;
}
#header {
left: 0;
top: 0;
text-align: center;
padding: 20px 5px;
padding-bottom: 0px;
position: fixed;
width: 100%;
margin: 0px;
padding-left: 0px;
transition: 0.2s;
background-color: black;
background-image: url(header/AvettBrothers-loja.jpg);
background-repeat: no-repeat;
background-position: 0 10%;
background-size: cover;
z-index: 1;
}
#tituloh {
position: relative;
top: 35px;
text-shadow: -5px 5px 10px #000000;
font-size: 30px;
color: white;
transition: 0.3s;
margin-bottom: 100px;
}
.sales {
margin-top: 300px;
}
.thumbnails {
width: 50%;
margin: 0 auto;
text-align: center;
}
#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
position: relative;
display: inline;
border: solid red;
padding: 20px 0;
margin-bottom: 100px;
}
img.contrast {
margin: 20px 10px;
filter: contrast(70%) opacity(90%);
border: solid blue;
}
.textimgcentro {
position: absolute;
left: 0;
top: -150%;
width: 100%;
font-size: 30px;
text-align: center;
color: white;
text-shadow: -10px 5px 10px #000000;
border: solid black;
}
#top {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" ; http-equiv="refresh" content="5">
<title>Loja</title>
<link rel="stylesheet" type="text/css" href="loja/loja.css">
<script type="text/javascript" src="loja/loja.js"></script>
</head>
<body>
<div id="header">
<div id="tituloh">
<h1>Store</h1>
</div>
<ul id="remove">
<li class="order">Home</li>
<li class="order">About</li>
<li class="order">Albuns</li>
<li class="order">Tours</li>
<li class="dropmenu, order">
<a href="#link" class="dropbutton, opt">
Store
</a>
<div class="dropcont">
T-Shirts<br>
Jackets<br>
Posters<br>
Accessories<br>
Side Projects<br>
Kids<br>
</div>
</li>
<li class="order">Forum</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="sales">Sales</div>
<div class="thumbnails">
<div id="tshirts">
<img src="loja/thumbnails/tshirts.jpg" class="contrast">
<div class="textimgcentro">
T-Shirts
</div>
</div>
<div id="casacos">
<img src="loja/thumbnails/casacos.jpg" class="contrast">
<div class="textimgcentro">
Jackets
</div>
</div>
<div id="posters">
<img src="loja/thumbnails/posters.jpg" class="contrast">
<div class="textimgcentro">
Posters
</div>
</div>
<div id="acessorios">
<img src="loja/thumbnails/acessorio.jpg" class="contrast">
<div class="textimgcentro">
Accessories
</div>
</div>
<div id="projects">
<img src="loja/thumbnails/project.jpg" class="contrast">
<div class="textimgcentro">
Side Projects
</div>
</div>
<div id="kids">
<img src="loja/thumbnails/kids.jpg" class="contrast">
<div class="textimgcentro">
Kids
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="bestsell">
<div id="top">
<h1>Top Products</h1>
</div>
</div>
<hr id="cont"> Contactos Oficiais: <br /><br />
<img src="loja/Contactos/facebook.png" ; height="50" ; width="50" ; title="Facebook" ; alt="Link para Facebook">
<img src="loja/Contactos/insta.png" ; height="50" ; width="50" ; title="Instagram" ; alt="Link para Instagram">
<img src="loja/Contactos/twitter.png" ; height="50" ; width="50" ; title="Twitter" ; alt="Link para Twitter">
</body>
</html>
How can I fix this?
Also, how do I make it so that, while hovering the dropdown menu, "Store" remains with a white background and black text?
Thank you!

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.

Can't close one of two div

I have few questions about javascript:
Can't close div with id=myModalName then clicking on myModalName it most open then click on input, somehow second div id=myModalLocation closes.
Maybe you can say how to compare both scripts in one.
Sorry about code somehow then i am updating here shows error {
"message": "Uncaught SyntaxError: Invalid regular expression: missing /",
"filename": "http://stacksnippets.net/js",
"lineno": 243,
"colno": 7
}
Here is code:
var modalName = document.getElementById('myModalName');
// Get the button that opens the modal
var btn = document.getElementById("input_name");
// When the user clicks the button, open the modal
btn.onclick = function() {
modalName.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modalName) {
modalName.style.display = "none";
}
}
/ /
Get the modal
var modalLocation = document.getElementById('myModalLocation');
// Get the button that opens the modal
var btn = document.getElementById("input_location");
// When the user clicks the button, open the modal
btn.onclick = function() {
modalLocation.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modalLocation) {
modalLocation.style.display = "none";
}
}
* {
margin: 0;
padding: 0;
}
body {
margin: auto;
width: 960px;
padding-top: 70px;
font-family: "Oswald", sans-serif;
}
.SearchForm {
margin: auto;
margin-top: 50px;
}
.SearchForm_row {
margin: auto;
margin-top: 10px;
height: 110px;
width: 100%;
border: 3px solid;
border-radius: 50px;
border-color: rgba(86, 192, 255, 0.5);
}
#row3 {
width: 400px;
}
.SearchForm_row_row {
height: 50px;
width: 200px;
float: left;
margin-top: 20px;
margin-left: 25px;
border-left: 3px solid;
border-color: rgba(86, 192, 255, 0.5);
padding: 10px 0px;
position: relative;
left: 5px;
}
.SearchForm_row_row1 {
height: 50px;
width: 475px;
float: left;
margin-top: 20px;
margin-left: 25px;
border-left: 3px solid;
border-color: rgba(86, 192, 255, 0.5);
padding: 10px 0px;
position: relative;
left: 5px;
}
.SearchForm_row_row_input,
.SearchForm_row_row_label {
width: 250px;
padding-left: 25px;
float: left;
}
.input2 {
height: 40px;
width: 190px;
border: none;
font-size: 18px;
outline: 0px;
}
.input2:focus {
border-bottom: 1.5px solid #4CAF50;
}
.span {
font-size: 15px;
color: rgb(161, 153, 135);
}
#input_start {
width: 40%;
}
#input_ends {
width: 40%;
position: relative;
left: 5px;
}
.par {
display: inline-block;
font-size: 20px;
}
.search_button {
background-color: #fff;
/* Green */
border: none;
color: black;
padding: 6px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 25px;
margin-left: 5px;
cursor: pointer;
border: 2px solid;
border-radius: 10px;
outline: none;
border-color: #4CAF50;
}
.search_button:hover {
background-color: #4CAF50;
color: black;
}
.SearchForm_row_row_button {
float: left;
position: relative;
bottom: 20px;
left: 40px;
}
/*Cia yra js of type*/
/*Cia yra js of type*/
/*Cia yra js of type*/
/*Cia yra js of type*/
/* The Modal (background) */
.modal-name {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
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 */
}
/* Modal Content */
.modal-content-name {
background-color: #fefefe;
margin-left: 50px;
margin-top: 140px;
padding: 25px;
border: 1px solid #888;
width: 85%;
border: 3px solid;
border-radius: 50px;
border-color: rgba(86, 192, 255, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Svetainių kūrimas</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="SearchForm">
<div class="SearchForm_row">
<div class="SearchForm_row_row">
<label class="SearchForm_row_row_label">
<span class="span">What?</span>
</label>
<div class="SearchForm_row_row_input">
<input type="text" autocomplete="off" placeholder="Event type or name" name="name" class="input2" id="input_name"></input>
</div>
</div>
<div class="SearchForm_row_row">
<label class="SearchForm_row_row_label">
<span class="span">Where?</span>
</label>
<div class="SearchForm_row_row_input">
<input type="text" autocomplete="off" placeholder="Event place" name="location" class="input2" id="input_location"></input>
</div>
</div>
<div class="SearchForm_row_row1">
<label class="SearchForm_row_row_label">
<span class="span">When?</span>
</label>
<div class="SearchForm_row_row_input">
<input type="text" autocomplete="off" placeholder="Event starting" name="date" class="input2" id="input_start"></input>
<p class="par">→</p>
<input type="text" autocomplete="off" placeholder="Event ends" name="date" class="input2" id="input_ends"></input>
</div>
<div class="SearchForm_row_row_button">
<button class="search_button">🔍</button>
</div>
</div>
<div id="myModalName" class="modal-name">
<div class="modal-content-name">
<p>Some text in the Modal..</p>
</div>
</div>
<div id="myModalLocation" class="modal-location">
<div class="modal-content-location">
<p>Some text</p>
</div>
</div>
</div>
</section>
</body>
</html>
Your second bit of code replaces the function in window.onclick, removing the code to hide the modal.
You could put both if statements in a single onclick function. And they can all be in the same <script>.

Categories