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');
}
});
Related
! Updated code !
I'm recently trying to learn html/css to code a website. I've been following multiple tutorials but for some reason, my modals aren't working. The buttons to open/close modals aren't working. If anyone could offer any help it would be much appreciated!
Below I've included my html file, stylesheet, and javascript file.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://kit.fontawesome.com/935b67cf83.js" crossorigin="anonymous"></script>
<script src="JS.js"></script> <!-- used to link to javascript-->
<title>yo</title>
</head>
<body>
<section class="flex" id="portfolio">
<h1>
PROJECTS
<!--- <div class="horizontalLine" </div> --->
</h1>
<div class="gallery">
<div class="projectBox">
<img src="images/merseyTrains.png" />
<div class="span">
<p1>MerseyTrainsLive</p1>
<p2>Android/Java</p2>
<button class="modal-open" data-target="#trainModal">Open Modal 1</button>
<!--- <a class="btn" id="TrainBtn" href="#">LEARN MORE</a>
--->
</div>
</div>
<div class="projectBox">
<img src="images/merseyTrains.png" />
<div class="span">
<p1>MerseyTrainsLive</p1>
<p2>Android/Java</p2>
<button class="modal-open" data-target="#project2Modal">Open Modal 2</button>
<!---
<a class="btn" id="Project2Btn" href="#">LEARN MORE</a> --->
</div>
</div>
<div class="projectBox">
<img src="images/merseyTrains.png" />
<div class="span">
<p1>MerseyTrainsLive</p1>
<p2>Android/Java</p2>
<button class="modal-open" data-target="#project3Modal">Open Modal 3</button>
</div>
</div>
</div>
</section>
<!--pop-ups, bg-modal means background-->
<div class="modal" id="trainModal">
<div class="modal-content">
<div class="modal-header">
<img src="images/merseyTrains.png" />
<button class="modal-close" data-target="#trainModal">
×
</button>
<h2> MerseyTrainsLive</h2>
</div>
<div class="modal-body">
<p> idem espum </p>
</div>
</div>
</div>
<div class="modal" id="project2Modal">
<div class="modal-content">
<div class="modal-header">
<img src="images/merseyTrains.png" />
<button class="modal-close" data-target="#project2Modal">
×
</button>
<h2> project 2</h2>
</div>
<div class="modal-body">
<p> idem espum 2 </p>
</div>
</div>
</div>
<div class="modal" id="project3Modal">
<div class="modal-content">
<div class="modal-header">
<img src="images/merseyTrains.png" />
<button class="modal-close" data-target="#project3Modal">
×
</button>
<h2> project 3</h2>
</div>
<div class="modal-body">
<p> idem espum 3 </p>
</div>
</div>
</div>
<div id="overlay"> </div>
</body>
</html>
style.css
body {
}
h1 {
font-size: 40px;
text-align: center;
}
.horizontalLine {
border-top: 5px solid black;
width: 100px;
margin: auto
}
.gallery {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center; /*makes individual boxes centered*/
}
.gallery img {
height: 300px;
width: 300px;
}
.gallery .projectBox {
width: 300px;
position: relative;
display: inline-block;
/*margin: 10px; /*can be used to make the photos spaced out*/
}
.gallery .projectBox img {
width: 100%;
border: 4px solid black;
transition-duration: 0.5s;
opacity: 1;
}
/*when hover over image, the image disappears*/
.gallery .projectBox:hover img {
opacity: 0;
}
.gallery .projectBox .span {
text-align: center;
display: none;
position: absolute;
top: 50px;
left: 50px;
right: 50px;
}
.gallery .projectBox .span p1 {
margin: auto;
font-size: 24px;
line-height: 40px;
padding: 20px;
}
.gallery .projectBox .span p2 {
margin: auto;
font-size: 16px;
line-height: 40px;
}
.gallery .projectBox:hover .span {
opacity: 1;
display: block;
}
.gallery .projectBox .span a {
text-decoration: none;
}
/*modal open buttons*/
.gallery .projectBox .span .modal-open {
display: flex; /*makes layout nice :) */
width: 150px;
padding: 10px; /*how far the lines of button are from text*/
margin: 30px auto;
color: black;
font-size: 20px;
outline: none;
border: 2px solid #f44336;
background: transparent;
cursor: pointer;
}
.gallery .projectBox .span .modal-open:hover {
color: white;
background: #f44336;
}
/* popups */
.modal {
width: 60%;
height: 60%;
position: fixed;
top: 15%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2; /*so appears on top of overlay*/
text-align: center;
background-color: white;
display: none;
}
/*modal close close button*/
.modal-close {
background-color: transparent;
border: none;
font-size: 1.5rem;
}
.modal.active {
display: flex;
}
.modal .modal-content {
display: flex;
border-radius: 4px;
position: relative; /*lets the .close position itself according to content*/
}
/*image for top of modal*/
.modal .modal-content img {
height: 100px;
width: 100px;
padding: 20px;
}
.modal .modal-header .modal-close {
position: absolute;
top: 5px;
right: 14px;
font-size: 42px;
cursor: pointer;
border-radius: 4px;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
}
.overlay.active {
display: block;
}
JS.js
const btns = document.querySelectorAll(".modal-open");
const close_btns = document.querySelectorAll(".modal-close");
const overlay = document.getElementById("overlay");
btns.forEach((btn) => {
const target = btn.dataset.target;
btn.addEventListener("click", () => {
document.querySelector(target).classList.add("active");
overlay.classList.add("active");
})
})
close_btns.forEach((btn) => {
btn.addEventListener("click", () => {
document.querySelector(btn.dataset.target).classList.remove("active");
overlay.classList.remove("active");
})
})
window.onclick = (e) => {
if (e.target == overlay) {
const modals = document.querySelectorAll(".modal");
modals.forEach((modal) => modal.classList.remove("active"));
overlay.classList.remove("active");
}
}
Below is a screenshot of the website page
When I hover over the projectBoxes it reveals info on the project, and the button to open more info on the project (displayed in a modal)
First, let's correct the HTML button to trigger modal number 3.
<button class="modal-open" data-target="#project3Modal">Open Modal 3</button>
Notice the change in "data-target" attribute. The value of this attribute should point to the "id" attribute of the respective modal (as per the JS implementation).
Next, for selecting the overlay <div>, let's use document.getElementById method. As there is only one id="overlay" in your HTML, selecting the element with its unique ID is a good practice, in my personal opinion.
So let's change the code in JS as below:
const overlay = document.getElementById("overlay");
btns.forEach((btn) => {
const target = btn.dataset.target; // Declaring target
btn.addEventListener("click", () => {
document.querySelector(target).classList.add("active");
overlay.classList.add("active");
});
});
With the above two changes, everything should work well. If not, please let me know so I can assist you further. If you need clarity for above code, please do let me know. :)
So I am trying to build this website but the button when pressed does not pop up the screen that will ask to fill with name and phone number and was wondering why this is not working. I am a complete noob when it comes to HTML and CSS, still learning most of the ways and needed help any advice and corrections will be greatly appreicated. Also, I am using JSFiddle I do not know if that makes a difference. Thank you in advance.
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* Full-width input fields */
input[type=text], input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: clear;
color: black;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 25px;
}
button:hover {
opacity: 0.8;
background-color: red;
}
/* this is for the box on the top of page */
.boxbar_top{
height:20%;
width: 100%;
position: static; /*assign on top when stroll */
right:0;
overflow:hidden;
background-color: red;
}
/*accessing the button layout */
.boxbar_top a {
float: left;
text-align: left;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* bottom layout of screen */
.boxbar_bttom{
height: 20%;
width: 100%;
position: static; /* assign on top when stroll */
right: 0;
overflow: hidden;
background-color: red;
}
/*accessing the bottom layput */
.box_bar_bttom a{
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* tabs layout */
.tabs{
background-color: inherit;
float: center;
border: 15px solid red;
padding: 14px 16px;
font-size: 17px;
border-radius: 25px;
padding: 20px;
width:200px;
height: 100%;
}
/*style of the tabs inside */
.tabs-button{
margin: 0;
position: absolute;
color: black;
padding: 22px 16px;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
cursor: pointer;
font-size: 20px;
}
.box{
margin: auto;
width: 60%;
padding: 10px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
/*show the text when hover through tab */
.hiddenText{
display: none;
}
.hoverDiv:hover + .hiddenText{
display: block;
color: green;
font-size: 22px;
font-weight: bold;
}
/* cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
/* the center of first-last-#...etc */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
padding-top: 60px;
}
/*model layput when clicked */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid red;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/*hover on layout */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
<!-- this is the layout of the first page for crete a cake -->
<!-- this is the problem of aligning the iteams on the right spots -->
<!-- problem the buttons are not shown -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="order cake">
<title>Create Cake</title>
</head>
<body>
<div class="boxbar_top">
<a class="active"> </a>
<form>
<select name="dropdown">
<option value="ENGLISH"></option>
<option value="SPANISH"></option>
</select>
</form>
<p class="boxbar_top; align: right;">
<h2 style="color: white; align-items: right;">
Order your cake online
</h2>
</p>
</div>
<div class="box">
<div class="tabs">
<!-- when clicked pop asked for user name and number -->
<div class="imgcontainer">
<span onclick="document.getElementById('info').style.display='none'" class="close" title="Close Modal"> </span>
<button onclick ="container"> ADD ORDER </button>
</div>
<div class="modal">
<div class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<!-- this is the area pops out when the user hits add order -->
<div class="container">
<!-- enter the first name -->
<label for="fname"><b>First Name</b></label>
<input type="text" id="fname" name="fname" placeholder="First Name" required>
<!-- enter the last name -->
<label for="lname"><b>Last Name</b></label>
<input type="text" id="lname" name="lname" placeholder="Last Name" required>
<!-- phone number -->
<label for="phone"><b>Phone Number</b></label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" placeholder="Phone Number" required>
<!-- submit number -->
<button type="submit" value="Submit">Submit</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('info').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
</div>
<div style="tabs-button">
<button onclick="document.getElementById('info').style.display='block'"> CHECK ORDER </button>
</div>
<div style="tabs-button">
<button onclick=" ">DELETE ORDER </button>
</div>
</div>
</div>
<div class="boxbar_top">
<a class="active"> </a>
</div>
</body>
</html>
you have not assigned id to your modal, but have done getElementById('id01')
<div class="modal" id="id01">
and your btn triggering modal should be sthng like this:
<button type="button" id="btn">Add order</button>
and your js:
var btn = document.getElementById("btn");
var modal = document.getElementById("id01");
btn.onclick = function() {
modal.style.display = "block";
}
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.
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>