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.
Related
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!
I have a multi-step form that has several different slides of different input fields. I'm trying to get it so that when the user presses "enter" after filling out the input, the form will progress to the next slide. I also want the button, when clicked, to also progress the form (this is what I currently have as the functionality). I can't figure out how to include the "enter" function because everything I have seen involves the .keydown method.
Here's what I have thus far:
<script>
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
var arrayfname = ['#txt_first_name'];
var arraylname = ['#txt_last_name'];
var arrayzip = ['#txt_zip'];
var arrayaddress = ['#txt_address'];
var arrayphone = ['#txt_phone'];
var arraydob = ['#hdn_dob'];
$('.next').click(function(){
if(animating) return false;
if($(this).data('slide') == "1") {
moveon = RegPath.Functions.validateFields(arrayfname,false,"",'[{access_token}]');
}
else if($(this).data('slide') == "2"){
moveon = RegPath.Functions.validateFields(arraylname,false,"",'[{access_token}]');
}
else if($(this).data('slide') == "3"){
moveon = RegPath.Functions.validateFields(arrayzip,false,"",'[{access_token}]');
}
else if($(this).data('slide') == "4"){
moveon = RegPath.Functions.validateFields(arrayaddress,false,"",'[{access_token}]');
}
else if($(this).data('slide') == "5"){
moveon = RegPath.Functions.validateFields(arrayphone,false,"",'[{access_token}]');
}
//var moveon = RegPath.Functions.validateFields(arrayPersonalInfo,false,"",'[{access_token}]');
if(moveon == false){
return false;
}
else
{
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
}
});
$('.submitForm').click(function(){
var popUpURL = '{{{offer.linkout_url}}}';
var moveon = RegPath.Functions.validateFields(arraydob,true,popUpURL,'[{access_token}]');
});
</script>
<script>
$(function(){
RegPath.PrepForm.prepFormPersonal();
RegPath.PrepForm.prepFormContact();
});
</script>
html {
height: 100%;
/*Image only BG fallback*/
/*background = gradient + image pattern combo*/
}
body {
font-family: montserrat, arial, verdana;
background: url('[{offer_cdn_url}]/images/cag/cag_purp_bg.jpg') no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
/*form styles*/
#msform {
width: 465px;
margin: 29px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: rgba(255, 255, 255, 0.7);
border: 0 none;
border-radius: 15px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
width: 465px;
margin: 0 0%;
padding-top: 0%;
padding-bottom: 4%;
/*stacking fieldsets above each other */
position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
.header {
background: #f6cc27;
padding-top: 4%;
padding-bottom: 4%;
margin-bottom: 3%;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
padding-left: 1%;
padding-right: 1%;
}
/*inputs*/
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 90%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 16px;
margin-top: 3%;
margin-left: 3%;
margin-right: 3%;
}
p {
font-size: 0.6em;
text-align: left;
}
/*
input#txt_zip {
width: 40%;
float: left;
}
label#zip {
width: 100%;
display: inline-flex;
float: left;
}
input#txt_dob {
width: 50%;
float:left;
}
label#dob {
width: 100%;
display:inline-flex;
float: left;
}
*/
/*buttons*/
#msform .action-button {
width: 90%;
background-image: linear-gradient(#009b00, #00c800);
font-weight: bold;
color: white;
border: 0 none;
border-radius: 30px;
cursor: pointer;
padding: 17px 5px;
margin: 10px 5px;
font-size: 19px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
#msform .disabledSubmit {
background-color: #9f9e9e;
}
input.submit {
background-image: linear-gradient(#009b00, #00c800);
color: #ffffff !important;
border-radius: 30px !important;
cursor: pointer;
padding: 17px 5px !important;
font-size: 19px !important;
font-weight: 700;
}
/*headings*/
.fs-title {
font-size: 21px !important;
text-transform: uppercase;
color: #000000;
font-weight: 700;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
.tcpaCopy {
font-size: 8px;
margin-top: 5px;
margin-bottom: 5px;
text-align: left;
}
.disabled {
background-color: #e5e5e5;
color: #969696 !important;
}
.check {
display: inline-flex;
}
label {
font-size: 1.1em;
padding-bottom: 3%;
font-weight: 700;
padding-top: 2%;
}
.green {
background-color: #27AE60 !important;
}
#msform .tcpaSubmit:hover, #msform .tcpaSubmit:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
width: 16%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #f6cc27;
color: white;
}
input#opt_in {
width: 11% !important;
}
.record_table {
width: 100%;
border-collapse: separate;
}
.record_table tr:hover {
cursor: pointer;
}
td#consent {
width: 30%;
padding-top: 3%;
padding-bottom: 3%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
background-color: #f6cc27;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
color: #ffffff;
border-color: #f6cc27;
}
#space {
margin-top: 2%;
}
td#consentInfo {
border-left-color: #ffffff;
font-size: 0.8em;
vertical-align: middle !important;
}
.record_table td {
border: 1px solid #eee;
}
#media only screen and (max-width: 768px) {
#msform {
width: 80%;
}
#msform fieldset {
width: 100%;
}
.fs-title {
font-size: 20px;
}
input:matches([type=button]) {
-webkit-appearance: none;
}
.subcopy {
font-size: 1.5em !important;
}
#subtitle {
font-size: 1.1em !important;
}
#logo {
width: 200px;
}
}
/* TOP OF THE PAGE */
.subcopy {
margin-top: 10px;
padding-bottom: 0;
font-size: 2.5em;
color: #F6CC27;
font-family: 'Kanit', sans-serif;
font-weight: bold;
text-align: center;
}
#subtitle {
text-align: center;
color: #ffffff;
font-family: 'Kanit', sans-serif;
font-size: 2em;
}
#logo {
width: 300px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 2%;
}
<div class="container">
<div class="logo">
<img src="[{offer_cdn_url}]/images/cag/CAG_logo#2x copy.png" id="logo">
</div>
<div class="questions subcopy" > YOU MAY BE ENTITLED TO $1000 OR MORE </div>
<div id="subtitle">Over $1 Billion of Class Action Settlement Funds</div>
</div>
<div class="container">
<!-- multistep form -->
<form id="msform" method="post" action="/api/register">
<!--Needed-->
<input type="hidden" name="remotePenCriteriaPassed" id="remotePenCriteriaPassed" value="false" />
<input type="hidden" name="zip_lookup_done" id="zip_lookup_done" value="" />
<!-- progressbar
<ul id="progressbar">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- fieldsets -->
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<!--<h3 class="fs-subtitle">Step 1:</h3>-->
<label for="txt_first_name">First Name</label>
<input type="text" name="first_name" id="txt_first_name" value="[{first_name}]" placeholder="First Name" required/>
<div class="help-block with-errors">Please enter your first name</div>
<input type="button" name="next" class="next action-button" data-slide="1" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_last_name">Last Name:</label>
<input type="text" name="last_name" id="txt_last_name" value="[{last_name}]" placeholder="Last Name" required/>
<div class="help-block with-errors">Please enter your last name</div>
<input type="button" name="next" class="next action-button" data-slide="2" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_zip" id="zip">Zip Code:</label>
<input type="tel" name="zip" id="txt_zip" value="[{zip}]" placeholder="Zip Code" required/>
<div class="help-block with-errors">Please enter a valid zip code</div>
<input type="button" name="next" class="next action-button" data-slide="3" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_address">Address:</label>
<input type="text" name="address_1" id="txt_address" value="[{address_1}]" placeholder="Address" required/>
<div class="help-block with-errors">Please enter a valid address</div>
<input type="button" name="next" class="next action-button" data-slide="4" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_phone">Phone:</label>
<input type="tel" name="phone" id="txt_phone" value="[{phone}]" placeholder="Phone Number (123) 456-7890" required/>
<div class="help-block with-errors">Please enter a valid phone number</div>
<input type="button" name="next" class="next action-button" data-slide="5" value="Continue" />
</fieldset>
<fieldset>
<div class="header">
<h1 class="fs-title">CLAIM YOUR SHARE OF CLASS ACTION CASH</h1>
</div>
<label for="txt_dob" id="dob">Date of Birth:</label>
<input type="tel" name="dob" id="hdn_dob" value="[{dob}]" placeholder="Birthday (mm/dd/yyyy)" required/>
<div class="help-block with-errors">Please enter a valid date</div>
<input type="button" id="btnSubmit" class="submit submitForm submit-btn" value="CLAIM YOUR CASH" />
</fieldset>
</form>
</div>
I don't think you can do this without using the .keydown method or a similar method. Still it is quite easy to implement. Not sure if you are trying to avoid it for a particular reason, but if it is a matter not knowing how to implement it, please find the code below.
$(document).keypress(function(e) {
if(e.which == 13) {
// Just add your validation code here.
}
});
In case anyone is looking for a solution: this is what ended up working
$('input').keypress(function(e){
if(e.which == 13){//Enter key pressed
var Input = $(this).data('slide');
$('*[data-slide="'+Input+'"]').click();
}
});
JavaScript
$(function(){
$('.select-another-button').each(function(){
$(this).bind('click', function(e) {
$(this).attr('disabled','true'); //disables the button
$('#overlay').show(); //after disabling show the overlay for hover
setTimeout(function(){
$(this).attr('disabled','false'); //enables after 5mins
$('#overlay').hide(); //hide the overlay
}, 300000);
e.preventDefault();
fileBrowser(this);
return false;
});
});
});
$("#overlay").hover(function(){
$('#message').show();
},function(){
$('#message').hide();
});
HTML
<div class="card-title">
<div class="title-actions">
<a href="#" id="id_select_request_document" title="Select file(s)" class="btn btn-icon select-button"
data-turbolinks="false" data-save-label="Ok" data-close-label="Cancel" data-copy-to="9"
data-reload="true" data-url="/documents/select/8/">
<i class="material-icons">folder</i>
</a>
<a href="#" id="id_upload_request_document" title="Upload file(s)" class="btn btn-icon upload-button"
data-turbolinks="false" data-url="/documents/upload/9/"
data-complete-post="/requests/validate-requirements/2/" data-max-uploader-connections="1"
style="position: relative; overflow: visible; direction: ltr;">
<i class="material-icons">cloud_upload</i>
<i style="overflow: hidden;display: block;position: absolute;top: 0;left: 0;width: 35px;height: 35px;"><input
multiple="multiple" type="file" name="file"
style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></i>
</a>
<div class="wrapper">
<div id="overlay"></div>
<a href="#" title="Send email - rejected file(s)" class="btn btn-icon select-another-button"
data-url="/messaging/send/2/">
<i class="material-icons">assignment_late</i>
<div class="alert alert-success" id="send-message" style="display: none;">
<p>
The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
</p>
</div>
</a>
</div>
<i class="material-icons">settings</i>
</div>
<h5>Request documents</h5>
</div>
CSS
.title-actions {
float: right;
height: 50px;
margin-top: 13px;
}
.title-actions a {
transition: background 0.3s ease;
}
.title-actions a.btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions a:hover {
background: #4382B5;
}
.title-actions span {
color: #444;
background: #E6E6E6;
padding: 6px 10px;
border-radius: 3px;
float: none;
position: relative;
margin-left: 6px;
}
.title-actions .btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions .btn-icon {
background: transparent;
position: relative;
color: #3E5366;
text-align: center;
display: inline-block;
padding: 0 !important;
transition: color 0.3s ease;
box-shadow: none !important;
margin-top: -16px;
margin-left: 6px;
}
.title-actions .btn-icon i {
font-size: 35px;
line-height: 20px;
position: relative;
top: 12px;
}
.title-actions .btn-icon:hover {
color: #4382B5;
background: transparent;
}
.title-actions .badge .material-icons {
font-size: 1.2em;
line-height: 0;
position: relative;
top: 4px;
}
In the html block, I added the
<div class="wrapper">
<div id="overlay"></div>
<a href="#"
title="{% trans "Send email - rejected file(s)" %}"
class="btn btn-icon select-another-button"
data-url="{% url "messaging:send" request_id=object.pk %}">
<i class="material-icons">assignment_late</i>
<div class='alert alert-success' id='send-message' style="display: none;">
<p>
The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
</p>
</div>
</a>
</div>
In fact, I didn't add everything. I just did add the first two div tags, and I got a little issue with the different button from this code. It changed the old line of to the new line of , but I don't even know how to fix it. How could I modify my code to bring back two the old line of buttons? I think I could style with css, but I can't say how because I don't have a lot of experience with it.
.wrapper is a block element, so it won't stay beside it's siblings. All of those siblings have .btn-icon which sets display: inline-block. You could either add .btn-icon to the .wrapper element so it will display inline-block (although then it will inherit the rest of the .btn-icon styles), or just set .wrapper to display: inline-block; (what I did)
.title-actions {
float: right;
height: 50px;
margin-top: 13px;
}
.title-actions a {
transition: background 0.3s ease;
}
.title-actions a.btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions a:hover {
background: #4382B5;
}
.title-actions span {
color: #444;
background: #E6E6E6;
padding: 6px 10px;
border-radius: 3px;
float: none;
position: relative;
margin-left: 6px;
}
.title-actions .btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions .btn-icon {
background: transparent;
position: relative;
color: #3E5366;
text-align: center;
display: inline-block;
padding: 0 !important;
transition: color 0.3s ease;
box-shadow: none !important;
margin-top: -16px;
margin-left: 6px;
}
.title-actions .btn-icon i {
font-size: 35px;
line-height: 20px;
position: relative;
top: 12px;
}
.title-actions .btn-icon:hover {
color: #4382B5;
background: transparent;
}
.title-actions .badge .material-icons {
font-size: 1.2em;
line-height: 0;
position: relative;
top: 4px;
}
.wrapper {
display: inline-block;
}
<div class="card-title">
<div class="title-actions">
<a href="#" id="id_select_request_document" title="Select file(s)" class="btn btn-icon select-button" data-turbolinks="false" data-save-label="Ok" data-close-label="Cancel" data-copy-to="9" data-reload="true" data-url="/documents/select/8/">
<i class="material-icons">folder</i>
</a>
<a href="#" id="id_upload_request_document" title="Upload file(s)" class="btn btn-icon upload-button" data-turbolinks="false" data-url="/documents/upload/9/" data-complete-post="/requests/validate-requirements/2/" data-max-uploader-connections="1" style="position: relative; overflow: visible; direction: ltr;">
<i class="material-icons">cloud_upload</i>
<i style="overflow: hidden;display: block;position: absolute;top: 0;left: 0;width: 35px;height: 35px;"><input
multiple="multiple" type="file" name="file"
style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></i>
</a>
<div class="wrapper">
<div id="overlay"></div>
<a href="#" title="Send email - rejected file(s)" class="btn btn-icon select-another-button" data-url="/messaging/send/2/">
<i class="material-icons">assignment_late</i>
<div class="alert alert-success" id="send-message" style="display: none;">
<p>
The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
</p>
</div>
</a>
</div>
<i class="material-icons">settings</i>
</div>
<h5>Request documents</h5>
</div>
This may be a slightly odd answer to your question. Assuming you wanted them into groups on the top rightith your 4 icons. (Given i dont have full entirely experience with the mobile-html platform) Here is a javascript you can use to eliminate odd issues:
//this var is short and clean coded to help diagnose some issues
//for this example, you can store values as an array
//these arrays with your content will be used to make cloned sections
//with different icons
var
icon = ["folder", "cloud", "case", "settings"],
imgbg = ["folder.jpg", "cloud.jpg", "case.jpg", "setting.jpg"],
frame = ""
;
for (i = 0; i < icon.length; i++) {
frame += "<div class='" +
icon[i] +
"'style='background-image:url(assets/" +
imgbg[i] +
");'></div>"
;
//which creates the code below as cloning
//"<div class="icon[i]" style="background-image:url(imgbg[i]);"></div>"
}
document.getElementById("demo").innerHTML = frame;
//this returns the clone code into a desired tml empty target like:
//<div id="demo"></div>
//then you can edit the css for float right as well as display top right
//to keep it at top right use this css
.display-top-right{
position:absolute;
top:0;
right:0;
float:right;
z-index:1;
}
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>.
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>