var mylogin = document.getElementById('login'); //form id for login page
var myRegister = document.getElementById('register'); //form id for register page
var mybtn = document.getElementById('btn'); //btn id to perform toggle option
login = () => {
mylogin.style.left = '50px';
myRegister.style.left = '500px';
mybtn.style.left = '0px';
}
register = () => {
mylogin.style.left = '-450px';
myRegister.style.left = '50px';
mybtn.style.left = '110px';
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
/*to set background container*/
.container {
height: 115%;
width: 100%;
background-image: url('../Images/conifers.jpg');
position: absolute;
background-position: center;
}
/*to create white box*/
.form_container {
width: 380px;
height: 480px;
position: relative;
margin: 6% auto;
background: whitesmoke;
padding: 5px;
overflow: hidden;
}
/*Container to create button on for the shadow effect*/
.button_group {
width: 220px;
margin: 34px auto;
position: relative;
box-shadow: 0 0 8px 8px darkseagreen;
border-radius: 30px;
}
/*Button Styling*/
.toggle_btn {
padding: 10px 25px;
background: none;
border: 0;
outline: none;
position: relative;
cursor: pointer;
}
/*style for buttons to toggle*/
#btn {
top: 0;
left: 0;
position: absolute;
width: 110px;
height: 100%;
background: linear-gradient(to right, lightgreen, green);
border-radius: 30px;
transition: .5s;
}
/*icons background container*/
.media_icons {
margin: 30px auto;
text-align: center;
}
/*icons image style*/
.media_icons img {
width: 35px;
margin: 0 12px;
box-shadow: 0 0 10px 2px olivedrab;
cursor: pointer;
border-radius: 50%;
}
/*To style form*/
.form_group {
top: 180px;
position: absolute;
width: 280px;
transition: .5s;
}
/*for input type=text that is textbox*/
.input_area {
width: 100%;
padding: 10px 0;
margin: 5px 0;
border: 0;
border-bottom: 1px solid blue;
outline: none;
background: none;
}
.check_box {
margin: 30px 10px 30px 0;
}
span {
color: rgb(36, 21, 22);
font-size: 14px;
bottom: 65px;
}
.sub_btn {
width: 80%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
background: linear-gradient(to right, lightgreen, green);
border-radius: 30px;
border: 0;
outline: none;
}
#login {
left: 50px;
}
#register {
left: 500px;
}
<div class="container">
<div class="form_container">
<div class="button_group">
<div id="btn"></div>
<button type="button" class="toggle_btn" onclick="login()">LOGIN</button>
<button type="button" class="toggle_btn" onclick="register()">REGISTER</button>
</div>
<div class="media_icons">
<img src="~/Images/facebook.png" />
<img src="~/Images/twitter.png" />
<img src="~/Images/youtube.jpg" />
<img src="~/Images/instagram.png" />
</div>
<form id="login" class="form-group">
<input type="text" class="input_area" placeholder="UserName" required/>
<input type="password" class="input_area" placeholder="Password" required />
<input type="checkbox" class="check_box" /><span>Remenber Me</span>
<button type="submit" class="sub_btn">LOGIN</button>
</form>
<form id="register" class="form-group">
<input type="text" class="input_area" placeholder="UserName" required />
<input type="text" class="input_area" placeholder="Enter Email" required />
<input type="text" class="input_area" placeholder="Enter Password" required />
<input type="checkbox" class="check_box" />
<span>I agree with all the terms and conditions </span>
<button type="submit" class="sub_btn">REGISTER</button>
</form>
</div>
</div>
I am not able to find error.Toggle button does not work well.Login and Registration page appears one below the other.Please help me find the mistake.Toggle should work as login button to display login page and register button to display registration form.
I've changed the following code
#login {
left: 50px;
}
#register {
left: 500px;
}
with this
#login {
left: 50px;
position: relative;
}
#register {
left: 500px;
top: 150px;
position: absolute;
}
I gave #login position: relative; so it maintains the container height but now you can use left
I gave #register position: absulute; so you can place it where #login used to be on toggle
var mylogin = document.getElementById('login'); //form id for login page
var myRegister = document.getElementById('register'); //form id for register page
var mybtn = document.getElementById('btn'); //btn id to perform toggle option
login = () => {
mylogin.style.left = '50px';
myRegister.style.left = '500px';
mybtn.style.left = '0px';
}
register = () => {
mylogin.style.left = '-450px';
myRegister.style.left = '50px';
mybtn.style.left = '110px';
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
/*to set background container*/
.container {
height: 115%;
width: 100%;
background-image: url('../Images/conifers.jpg');
position: absolute;
background-position: center;
}
/*to create white box*/
.form_container {
width: 380px;
height: 480px;
position: relative;
margin: 6% auto;
background: whitesmoke;
padding: 5px;
overflow: hidden;
}
/*Container to create button on for the shadow effect*/
.button_group {
width: 220px;
margin: 34px auto;
position: relative;
box-shadow: 0 0 8px 8px darkseagreen;
border-radius: 30px;
}
/*Button Styling*/
.toggle_btn {
padding: 10px 25px;
background: none;
border: 0;
outline: none;
position: relative;
cursor: pointer;
}
/*style for buttons to toggle*/
#btn {
top: 0;
left: 0;
position: absolute;
width: 110px;
height: 100%;
background: linear-gradient(to right, lightgreen, green);
border-radius: 30px;
transition: .5s;
}
/*icons background container*/
.media_icons {
margin: 30px auto;
text-align: center;
}
/*icons image style*/
.media_icons img {
width: 35px;
margin: 0 12px;
box-shadow: 0 0 10px 2px olivedrab;
cursor: pointer;
border-radius: 50%;
}
/*To style form*/
.form_group {
top: 180px;
position: absolute;
width: 280px;
transition: .5s;
}
/*for input type=text that is textbox*/
.input_area {
width: 100%;
padding: 10px 0;
margin: 5px 0;
border: 0;
border-bottom: 1px solid blue;
outline: none;
background: none;
}
.check_box {
margin: 30px 10px 30px 0;
}
span {
color: rgb(36, 21, 22);
font-size: 14px;
bottom: 65px;
}
.sub_btn {
width: 80%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
background: linear-gradient(to right, lightgreen, green);
border-radius: 30px;
border: 0;
outline: none;
}
#login {
left: 50px;
position: relative;
}
#register {
left: 500px;
top: 150px;
position: absolute;
}
<div class="container">
<div class="form_container">
<div class="button_group">
<div id="btn"></div>
<button type="button" class="toggle_btn" onclick="login()">LOGIN</button>
<button type="button" class="toggle_btn" onclick="register()">REGISTER</button>
</div>
<div class="media_icons">
<img src="~/Images/facebook.png" />
<img src="~/Images/twitter.png" />
<img src="~/Images/youtube.jpg" />
<img src="~/Images/instagram.png" />
</div>
<form id="login" class="form-group">
<input type="text" class="input_area" placeholder="UserName" required />
<input type="password" class="input_area" placeholder="Password" required />
<input type="checkbox" class="check_box" /><span>Remenber Me</span>
<button type="submit" class="sub_btn">LOGIN</button>
</form>
<form id="register" class="form-group">
<input type="text" class="input_area" placeholder="UserName" required />
<input type="text" class="input_area" placeholder="Enter Email" required />
<input type="text" class="input_area" placeholder="Enter Password" required />
<input type="checkbox" class="check_box" />
<span>I agree with all the terms and conditions </span>
<button type="submit" class="sub_btn">REGISTER</button>
</form>
</div>
</div>
1.First you add display none to id
#register{
display:none;
}
#login{
display:block;
}
Then in file js you just need change style display when ever onclick.
login = () => {
mylogin.style.left = '50px';
myRegister.style.left = '500px';
mybtn.style.left = '0px';
mylogin.style.display='block'
myRegister.style.display='none'
}
register = () => {
mylogin.style.left = '-450px';
myRegister.style.left = '50px';
mybtn.style.left = '110px';
myRegister.style.display='block'
mylogin.style.display='none'
}
Related
I have a HTML JS form for a contact form on my website, but I want it to redirect to a thank your page after the submit button is clicked. I can do that on it's own, but it happens every time I click the button, but I only want it to happen when the required areas are filled in.
I have tried an action tag on the form btw, it doesn't work for some reason.
Code (full screen it too see the button) :
document.getElementById("submit").onclick = function () {
location.href = "/contactty.html";
};
.cntct-bg {
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
overflow: hidden;
}
.contact-cont {
position: absolute;
top: 6%;
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
form {
background: #ffffff;
display: flex;
flex-direction: column;
padding: 2vw 4vw;
width: 90%;
max-width: 600px;
border-radius: 10px;
z-index: 1;
}
form h1 {
color: #555555;
font-weight: 800;
margin-bottom: 20px;
font-family: var(--black);
z-index: 1;
}
form input,
form textarea {
border: 0;
margin: 10px 0;
padding: 20px;
outline: none;
background: #f5f5f5;
font-size: 16px;
font-family: var(--medium);
z-index: 1;
}
form textarea {
min-width: 93.33%;
max-width: 93.33%;
min-height: 80px;
z-index: 1;
}
form button {
padding: 15px;
background: #ff5361;
color: #ffffff;
font-size: 18px;
border: 0;
outline: none;
cursor: pointer;
width: 150px;
margin: 20px auto 0;
border-radius: 30px;
z-index: 1;
box-shadow: 0px 8px 0px #a83740;
}
.form button:active {
box-shadow: none;
transform: translateY(8px);
}
<body class="cntct-bg">
<div class="contact-cont">
<form action="/contactty.html" id="contact-form">
<h1>Get in touch</h1>
<input type="hidden" name="contact_number">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<textarea name="message" placeholder="Whats on your mind?" required></textarea>
<div class="tscheck">
<input type="checkbox" id="tsy" name="tsy" value="agreed" required>
<label for="tsy">Accept the <span>terms of service</var></span></label>
</div>
<button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
</form>
</div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</body>
checkAllInput() is validatind data.
I have selected all inputs and then looping through them and validating if (input.value == null || input.value == "") weather it's empty or not.
document.getElementById("submit").onclick = function() {
if (checkAllInput()) {
location.href = "/contactty.html";
}
};
function checkAllInput() {
const inputs = document.querySelectorAll("input");
inpputs.forEach(input => {
if (input.value == null || input.value == "") {
alert("please enter all data");
return false;
} else {
return true;
}
})
}
.cntct-bg {
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
overflow: scroll;
}
.contact-cont {
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
overflow: scroll;
}
form {
background: #ffffff;
display: flex;
flex-direction: column;
padding: 2vw 4vw;
width: 90%;
max-width: 600px;
border-radius: 10px;
z-index: 1;
}
form h1 {
color: #555555;
font-weight: 800;
margin-bottom: 20px;
font-family: var(--black);
z-index: 1;
}
form input,
form textarea {
border: 0;
margin: 10px 0;
padding: 20px;
outline: none;
background: #f5f5f5;
font-size: 16px;
font-family: var(--medium);
z-index: 1;
}
form textarea {
min-width: 93.33%;
max-width: 93.33%;
min-height: 80px;
z-index: 1;
}
form button {
padding: 15px;
background: #ff5361;
color: #ffffff;
font-size: 18px;
border: 0;
outline: none;
cursor: pointer;
width: 150px;
margin: 20px auto 0;
border-radius: 30px;
z-index: 1;
box-shadow: 0px 8px 0px #a83740;
}
.form button:active {
box-shadow: none;
transform: translateY(8px);
}
<body class="cntct-bg">
<div class="contact-cont">
<form action="/contactty.html" id="contact-form">
<h1>Get in touch</h1>
<input type="hidden" name="contact_number">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<textarea name="message" placeholder="Whats on your mind?" required></textarea>
<div class="tscheck">
<input type="checkbox" id="tsy" name="tsy" value="agreed" required>
<label for="tsy">Accept the <span>terms of service</var></span></label>
</div>
<button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
</form>
</div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</body>
I hope it's work for you
document.getElementById("submit").onclick = function () {
var count = 0;
var len = document.querySelectorAll('[required]').forEach(current=> {
if(current.value == ''){ count = count + 1;}
});
if(count == 0){
window.location.href = "/contactty.html";
}
};
.cntct-bg {
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
overflow: hidden;
}
.contact-cont {
position: absolute;
top: 6%;
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
form {
background: #ffffff;
display: flex;
flex-direction: column;
padding: 2vw 4vw;
width: 90%;
max-width: 600px;
border-radius: 10px;
z-index: 1;
}
form h1 {
color: #555555;
font-weight: 800;
margin-bottom: 20px;
font-family: var(--black);
z-index: 1;
}
form input,
form textarea {
border: 0;
margin: 10px 0;
padding: 20px;
outline: none;
background: #f5f5f5;
font-size: 16px;
font-family: var(--medium);
z-index: 1;
}
form textarea {
min-width: 93.33%;
max-width: 93.33%;
min-height: 80px;
z-index: 1;
}
form button {
padding: 15px;
background: #ff5361;
color: #ffffff;
font-size: 18px;
border: 0;
outline: none;
cursor: pointer;
width: 150px;
margin: 20px auto 0;
border-radius: 30px;
z-index: 1;
box-shadow: 0px 8px 0px #a83740;
}
.form button:active {
box-shadow: none;
transform: translateY(8px);
}
<body class="cntct-bg">
<div class="contact-cont">
<form action="/contactty.html" id="contact-form">
<h1>Get in touch</h1>
<input type="hidden" name="contact_number">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<textarea name="message" placeholder="Whats on your mind?" required></textarea>
<div class="tscheck">
<input type="checkbox" id="tsy" name="tsy" value="agreed" required>
<label for="tsy">Accept the <span>terms of service</var></span></label>
</div>
<button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
</form>
</div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</body>
I hope using java script function will help you out. For the all kinds of validation we can use JQuery to make it smoother and faster(please find out more from the link
https://stackoverflow.com/questions/15060292/a-simple-jquery-form-validation-script#:~:text=you%20can%20use%20jquery%20validator,form. )
Hope this will help you :-).
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
<form name="myForm" action="action_to_be_taken" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
How can I add icons before the form fields?
This is how looks now:
And here how I want:
Here is css code (front.css):
body .qb-form {
width: auto;
height: auto;
}
#media (max-width: 660px) {
body .qb-form {
width: 100%;
}
}
body .qb-form h2 {
background: #3482C3;
padding: 15px 25px;
margin-bottom: 0;
color: white;
margin-top: 0;
}
body .qb-form .moreinfo {
background: #3482C3;
color: white;
padding: 0 25px 15px 25px;
margin-bottom: 15px;
}
body .qb-form label {
text-align: left;
font-size: 14px;
display: block;
padding-bottom: 0;
}
body .qb-form .qb-gdpr-label {
padding-bottom: 0;
}
body .qb-form .quickbuy_input {
height: 31px;
width: 190px;
border: 1px solid #ABADB3;
padding: 5px;
}
body .qb-form textarea {
width: 100%;
height: 60px;
border: 1px solid #abadb3;
}
body .qb-form .crow {
padding: 0 25px 25px 25px;
}
body .qb-form .buttons_wrp {
padding: 10px 25px 25px 25px;
}
body .qb-form .buttons_wrp .button {
padding: 10px 20px;
border: none;
border-radius: 4px;
text-transform: uppercase;
color: white;
background: #3482C3;
overflow: hidden;
}
body .qb-form .buttons_wrp .qb-btn-submit {
padding: 10px 20px 10px 62px;
background: #3482C3 url('../img/cart-icon.png') no-repeat 15px center;
}
body .qb-form .buttons_wrp .button:hover {
background-color: #388bd1;
}
body .qb-wrp .qb-btn span {
border-bottom: 1px dashed;
}
.product-simple .qb-btn {
background: none;
color: #1F679B;
font-size: 13px;
border-bottom: 1px dashed #1F679B;
padding: 0 0 1px 0;
}
body .qb-form sup {
color: red;
font-weight: bold;
}
body .qb-form .quickbuy_errors,
body .qb-form .quickbuy_success {
margin: 0 15px;
display: none;
padding: 10px;
line-height: 1.5;
}
body .qb-form .qb-product-name {
padding: 5px;
border: 1px dashed white;
font-weight: bold;
display: inline-block;
}
body .qb-form body .qb-form_loader {
position: relative;
top: -3px;
}
body .qb-form .qb-loader {
visibility: hidden;
}
body .qb-form .qb-loader.visible {
visibility: visible;
}
.qb-form .qb-gdpr-label .qb_gdpr_wrp {
float: left;
position: relative;
top: 3px;
margin-right: 10px;
}
.qb-form .qb-btn-close {
display: none;
}
.qb-form .qb-btn-close span {
font-size: 2rem;
line-height: 0;
display: inline-block;
vertical-align: middle;
margin-right: 0.5rem;
position: relative;
top: -1px;
border: none;
}
.qb-gdpr-label p:last-child {
margin-bottom: 0;
}
#media (max-width: 767px) {
.qb-wrap,
#product .qb-wrap {
flex-wrap: wrap;
}
}
And here is the hook.tpl:
<div class="crow">
<label for="quickbuy_name">{l s='Your name' mod='quickbuy'}:</label>
<input type="text" class="qb_name qb-input-field form-control" id="quickbuy_name" name="qb_customer_name" value="{$qb_name|escape:'html':'UTF-8'}" />
</div>
<div class="crow">
<label for="quickbuy_address">{l s='Your address' mod='quickbuy'}:</label>
<input type="text" class="qb_address qb-input-field form-control" id="quickbuy_address" name="qb_address" value="{$qb_address|escape:'html':'UTF-8'}" />
</div>
<div class="crow">
<label for="quickbuy_phone">{l s='Your phone number' mod='quickbuy'}: <sup>*</sup></label>
<input type="text" class="qb_phone qb-input-field form-control" id="quickbuy_phone" name="qb_phone" value="{$qb_phone|escape:'html':'UTF-8'}" />
</div>
{if $qb_gdpr}
<div class="crow">
<label class="qb-gdpr-label">
<span class="qb_gdpr_wrp">
<input type="checkbox" class="qb_gdpr" name="qb_gdpr">
</span>
{if $qb_gdpr_text}
{$qb_gdpr_text nofilter}{* HTML *}
{else}
{l s='I agree to processing of my personal data' mod='quickbuy'}
{if $qb_gdpr_link}(<a target="_blank" href="{$qb_gdpr_link|escape:'html':'UTF-8'}">{l s='read' mod='quickbuy'}</a>){/if}
{/if}
</label>
</div>
{/if}
<div class="crow quickbuy_errors error"></div>
<div class="crow quickbuy_success success"></div>
<div class="buttons_wrp">
<input type="hidden" name="qb_id_product" value="{$qb_product->id|intval}" />
<input type="hidden" name="qb_id_product_attribute" value="{$qb_product->id_product_attribute|intval}" />
<input type="hidden" name="qb_token" value="{$qb_token|escape:'html':'UTF-8'}" />
<input type="hidden" name="qb_action" value="submitQB" />
<input type="submit" class="qb-btn-submit btn btn-default button button-small" value="{l s='Buy' mod='quickbuy'}" />
<button class="qb-btn-close btn btn-default button button-small"><span>×</span> {l s='Close' mod='quickbuy'}</button>
<img class="qb-loader" src="/img/loader.gif" alt="{l s='Loading...' mod='quickbuy'}" />
</div>
</div>
</div>
</div>
I will be happy if anyone can help.
Thank you in advance.
Best regards
You can select the input fields from your HTML template by using their id's.
You you use icons8 to find the correct icons.
There you can get the Link (CDN) for each item by clicking on the download button and copy HTML.
You can paste the copied code in your HTML (just before the respective input field).
Afterwards you can style the respective item in your CSS file.
So that it has the same border and height as your input field.
So I'm currently working on a personal project. And came across with a problem.
I want my border color of this div to green when the user clicks the radio button inside that div. Like this:
Here
But my current version looks like this:
Here
Here is my CSS and HTML
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.backProject input:checked~.checkmark {
background-color: #fff;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.backProject input:checked~.checkmark:after {
display: block;
}
.backProject .checkmark:after {
top: 2px;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: hsl(176, 50%, 47%);
}
.checkmark:after {
z-index: 1;
content: "";
position: absolute;
display: none;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" class="input">
<span class="checkmark"></span>
<h4 id="card-h">Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p id="left">left</p>
<h2 id="card2-num">101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>
<hr>
<div class="pledgeSection">
<p>Enter your pledge</p>
<button class="btn-1 card2Btn">Continue</button>
<button class="btn-2">
<p>$</p>
<input value="25" class="input-price input-price2" type="number">
</button>
</div>
JS (Only for clicking the radio button twice):
function radioCheck() {
timesClicked++
if (timesClicked > 1) {
$("input").prop("checked", false)
timesClicked = 0;
}
}
function colorchange() {
var x = document.getElementById('checker');
var y = document.getElementById('radiobox');
if (x.checked === true) {
y.style.borderColor = "green";
} else {
y.style.borderColor = "silver";
}
}
#radiobox {
width: 300px;
height: 200px;
border: 5px solid;
border-color: silver;
}
<div id="radiobox">
<input type="radio" onclick="colorchange();" id="checker"></input>
</div>
To keep it simple, I'll just use a short example and you can just apply it to your own example.
This is how you can do that
function radioCheck(){
// Get the checkbox
var checkBox = document.getElementById("myInputCheck");
// Get the div with border
var divBorder = document.getElementsByClassName("backProjectCard")[0]
// If the checkbox is checked, display the border
if (checkBox.checked == true){
divBorder.classList.remove("backProjectCard"); //remove "backProjectCard"
divBorder.classList.add("newBorder"); //add the new border with new color
} else {
divBorder.classList.remove("newBorder");
divBorder.classList.add("backProjectCard");
}
}
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 1;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.newBorder{
border: 2px solid #177972 !important;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" id="myInputCheck">
<h4 >Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p >left</p>
<h2 >101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>
I have the following code to create a simple website with two sections; a sidebar and the main content:
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
height: 100%;
}
.sidebar {
background-color: #FFF5BA;
width: 200px;
}
.main {
background-color: rgba(248, 248, 248, 1);
flex-grow: 1;
}
The HTML is as goes:
<div class="container">
<div class="sidebar">
<div class="main">
</div>
The problem I have happens when you dynamically add more content to the main section with JavaScript. If you add enough to require scrolling, then the sidebar will not grow as you scroll down.
Ideally I would like to leave the sidebar as fixed content that scrolls with you, but I have read that you cannot combine flexbox with position: fixed.
If you need to see the complete here it is:
https://codepen.io/wulfenn/pen/LYNRNEv (apologies in advance if the code is sloppy; I am still learning)
Thank you for your help!
I have updated html code by moving modal code outside of container class.
I have used position:sticky on sidebar class and assign height:100vh. so that it would not scroll if main content height is bigger than 100vh.
I have also added dummy book-add div to create more height of main content.
View results in full screen and only first add button will work.
// Declare the Object constructor.
function Book(title, author, pages, isbn, read, bookURL) {
this.title = title;
this.author = author;
this.pages = pages;
this.isbn = isbn;
this.read = read;
this.bookURL = bookURL;
}
Book.prototype.toggleStatus = function () {
if (this.read == 'Read') {
this.read = 'Not Read';
return 1;
} else if (this.read == 'Not Read') {
this.read = 'Reading';
return 2;
} else if (this.read == 'Reading') {
this.read = 'Read';
return 3;
}
}
// Initalize library variables.
let myLibrary = [];
const container = document.querySelector('.books-container');
// Display and Hide the "Add a Book" form.
const popup = document.querySelector('.form-popup');
const addBtn = document.querySelector('.add-btn');
const cancelBtn = document.getElementById('cancel-btn');
addBtn.addEventListener('click', function () {
popup.style.display = 'block'; // Show
})
cancelBtn.addEventListener('click', function () {
popup.style.display = 'none'; // Hide
})
// #### Book Form Start
// ##
// Get the form values
const form = document.getElementById('form1');
form.addEventListener('submit', function (event) {
const title = document.forms[0].elements[1].value;
const author = document.forms[0].elements[2].value;
const pages = document.forms[0].elements[3].value;
const isbn = document.forms[0].elements[4].value;
const bookURL = document.forms[0].elements[0].value;
// Check which radio button has been selected.
let read = '';
if (document.getElementById('read').checked) {
read = 'Read';
} else if (document.getElementById('unread').checked) {
read = 'Not Read';
} else {
read = 'Reading';
}
// Prevent page from refreshing and closing the form popup.
event.preventDefault();
popup.style.display = 'none';
// Add our book.
addBookToLibrary(title, author, pages, isbn, read, bookURL);
// Display the books and reset the form.
render();
form.reset();
})
// Display our cover preview.
const cover = document.querySelector('.cover-preview');
const isbnField = document.getElementById('isbn'); // In case ISBN has been typed
const coverURL = document.getElementById('url'); // In case URL has been used.
coverURL.addEventListener('change', function () {
cover.style.background = `url(${document.forms[0].elements[0].value})`;
cover.style.backgroundSize = 'cover';
})
isbnField.addEventListener('change', function () {
if (document.forms[0].elements[0].value == '') { // URL takes preference as it's chosen by user.
cover.style.background = `url(http://covers.openlibrary.org/b/isbn/${document.forms[0].elements[4].value}-M.jpg)`;
cover.style.backgroundSize = 'cover';
}
})
// Add a given book to myLibrary array
function addBookToLibrary(title, author, pages, isbn, read, bookURL) {
let book = new Book(title, author, pages, isbn, read, bookURL);
myLibrary.push(book);
}
// ##
// #### Book Form End
// Display the books in our HTML
function render() {
// Clear our space first.
const existingDivs = document.querySelectorAll('[data-book]');
existingDivs.forEach((div) => {
div.remove();
});
for (let i = 0; i < myLibrary.length; i++) {
let element = document.createElement('div');
element.classList.add('book');
// Determine our cover. URL overrides ISBN.
if (myLibrary[i]['bookURL']) {
element.style.background = `url(${myLibrary[i]['bookURL']})`;
} else {
element.style.background = `url(http://covers.openlibrary.org/b/isbn/${myLibrary[i]['isbn']}-M.jpg)`;
}
element.style.backgroundSize = 'cover';
element.setAttribute("data-book", i);
// Create our mouse enter divs to display book information.
let infoDiv = document.createElement('div');
infoDiv.classList.add('book-info');
infoDiv.style.display = 'none'; // Set to not display by deafult until mouse enter.
let titleDiv = document.createElement('div');
titleDiv.classList.add('info-title');
titleDiv.textContent = myLibrary[i]['title'];
let authorDiv = document.createElement('div');
authorDiv.classList.add('info-author');
authorDiv.textContent = `by ${myLibrary[i]['author']}`;
let pagesDiv = document.createElement('div');
pagesDiv.classList.add('info-pages');
pagesDiv.textContent = `Pages: ${myLibrary[i]['pages']}`;
// Create our status buttons and our delete button.
let buttonsDiv = document.createElement('div');
buttonsDiv.classList.add('info-buttons');
let readTag = document.createElement('button');
readTag.classList.add('button-status');
readTag.setAttribute('data-bookstatus', i);
if (myLibrary[i]['read'] == 'Read') {
readTag.style.background = '#EBFFE5';
readTag.textContent = '✔';
} else if (myLibrary[i]['read'] == 'Not Read') {
readTag.style.background = '#FFC1B1';
readTag.textContent = '❌';
} else {
readTag.style.background = '#FFFFEA';
readTag.textContent = '📖';
}
let removeTag = document.createElement('button');
removeTag.classList.add('button-status');
removeTag.textContent = '🗑';
removeTag.setAttribute("data-bookremove", i);
// Add everything together
buttonsDiv.appendChild(readTag);
buttonsDiv.appendChild(removeTag);
infoDiv.appendChild(titleDiv);
infoDiv.appendChild(authorDiv);
infoDiv.appendChild(pagesDiv);
infoDiv.appendChild(buttonsDiv);
element.appendChild(infoDiv);
// Insert the finished product
container.insertBefore(element, container.firstChild);
}
// Display book information on mouseover
const bookFrames = Array.from(document.querySelectorAll('.book'));
bookFrames.forEach((bookFrame) => {
bookFrame.addEventListener('mouseenter', function (e) {
bookFrame.firstChild.style.display = 'block';
});
});
bookFrames.forEach((bookFrame) => {
bookFrame.addEventListener('mouseleave', function (e) {
bookFrame.firstChild.style.display = 'none';
});
});
// Add functionality to our status and delete buttons
const statusButtons = Array.from(document.querySelectorAll('button[data-bookstatus'));
statusButtons.forEach((button) => {
button.addEventListener('click', function () {
let index = button.getAttribute('data-bookstatus');
let x = myLibrary[index].toggleStatus();
switch (x) {
case 1:
button.style.background = '#FFC1B1';
button.textContent = '❌';
break;
case 2:
button.style.background = '#FFFFEA';
button.textContent = '📖';
break;
case 3:
button.style.background = '#EBFFE5';
button.textContent = '✔';
break;
}
});
});
//Remove button
const removeButtons = Array.from(document.querySelectorAll('button[data-bookremove]'));
removeButtons.forEach((button) => {
button.addEventListener('click', function () {
let index = button.getAttribute('data-bookremove');
const bookToRemove = document.querySelector(`div[data-book='${index}']`);
bookToRemove.remove(); // Remove it from the DOM.
myLibrary.splice(index, 1); // Remove it from our array so it does not render again.
});
});
}
#import url("https://fonts.googleapis.com/css?family=Special Elite&display=swap");
html,
body {
height: 100%;
margin: 0;
font-family: "Special Elite";
}
.container {
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
}
.sidebar {
position: sticky;
top: 0%;
left: 0%;
background-color: #fff5ba;
width: 200px;
height:100vh;
}
.main {
background-color: rgba(248, 248, 248, 1);
flex-grow: 1;
}
.books-container {
background-color: rgba(248, 248, 248, 1);
margin-left: auto;
margin-right: auto;
position: relative;
top: 10%;
left: 50%;
transform: translate(-50%);
display: flex;
flex-wrap: wrap;
}
.book {
width: 200px;
height: 300px;
margin: 50px 25px;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 5px;
box-shadow: 3px 3px 5px 0px black;
}
.book-info {
background-color: rgba(0, 0, 0, 0.6);
width: 200px;
height: 300px;
}
.info-title {
position: relative;
top: 15%;
color: white;
font-size: 20px;
text-align: center;
text-shadow: 3px 3px 1px black;
}
.info-author {
position: relative;
top: 20%;
color: white;
font-size: small;
font-style: italic;
text-align: center;
text-shadow: 1px 1px 1px black;
}
.info-pages {
position: relative;
top: 23%;
color: #fff5ba;
font-size: 11px;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px black;
}
.info-buttons {
position: relative;
top: 40%;
left: 20%;
}
.button-status {
width: 50px;
height: 50px;
outline: none;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 50px;
margin-left: 5px;
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.8);
background-color: rgba(255, 255, 255, 0.8);
font-size: 25px;
}
.button-status:hover {
transform: scale(1.1);
}
.book-add {
width: 200px;
height: 300px;
margin: 50px 25px;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 5px;
box-shadow: 3px 3px 5px 0px black;
}
.add-btn {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: inherit;
outline: none;
border-radius: 100px;
font-size: 4em;
}
.add-btn:hover {
background-color: #fff5ba;
}
.cover {
width: 200px;
height: 300px;
}
.cover-preview-container {
position: absolute;
right: 10%;
text-align: center;
}
.cover-preview {
width: 100px;
height: 150px;
border: 1px solid black;
position: relative;
left: 30%;
margin-bottom: 10px;
margin-top: 5px;
}
.form-popup {
display: none;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
.book-form-container {
position: fixed;
z-index: 1;
padding-top: 100px;
left: 50%;
top: 50%;
width: 500px;
height: 500px;
transform: translate(-50%, -50%);
overflow: hidden;
background-color: #836953;
border: 1px solid black;
border-radius: 5px;
}
.form-header {
position: absolute;
top: 0px;
background: url(assets/books.jpeg);
background-size: cover;
width: 500px;
height: 150px;
border-bottom: 1px solid black;
font-size: 4em;
text-align: center;
color: white;
text-shadow: 3px 3px 1px black;
}
.form-footer {
position: absolute;
bottom: 0px;
background: url(assets/wood.jpeg);
background-size: cover;
width: 500px;
height: 150px;
border-bottom: 1px solid black;
font-size: 4em;
text-align: center;
color: white;
text-shadow: 3px 3px 1px black;
}
.book-form {
position: absolute;
top: 150px;
bottom: 150px;
width: 500px;
padding: 20px;
line-height: 20px;
background-color: #fff5ba;
}
.entry-box {
height: 20px;
border-radius: 5px;
outline: none;
background-color: rgba(240, 240, 240, 0.5);
margin-bottom: 15px;
}
.form-btn {
margin: 40px 40px;
width: 100px;
height: 50px;
border: 1px solid white;
border-radius: 10px;
background: inherit;
color: white;
font-family: inherit;
font-size: 20px;
box-shadow: 3px 3px 1px 1px black;
outline: none;
}
.form-btn:hover {
transform: scale(1.1);
}
<div class="container">
<div class="sidebar">
<div class="my-library">My Library</div>
<div class="menu">Home</div>
</div>
<div class="main">
<div class="books-container">
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
</div>
</div>
</div>
<div class="form-popup">
<div class="book-form-container">
<div class="form-header"><br />Add a Book</div>
<div class="book-form">
<form id="form1">
<div class="cover-preview-container">Cover
<div class="cover-preview"></div>
<div><span style="font-size: small">Or enter the link to the cover image:</span> <br /><input class="entry-box" id="url" type="url" placeholder="https://"></div>
</div>
<div>
<label for="title"> Title </label><br />
<input class="entry-box" type="text" id="title" name="title" placeholder="Enter the book title." required>
</div>
<div>
<label for="author"> Author</label><br />
<input class="entry-box" type="text" id="author" name="author" placeholder="Enter the Author." required>
</div>
<div>
<label for="pages"> Pages</label><br />
<input class="entry-box" type="number" id="pages" name="pages" min="1" placeholder="0" required>
</div>
<div>
<label for="isbn"> ISBN <span style="font-size: small"><i><sup>what is this?</sup></i></span></label><br />
<input class="entry-box" type="text" id="isbn" name="isbn" placeholder="(optional)">
</div>
<div style="text-align: center">
<label for="read">Read</label>
<input id="read" type="radio" name="status" value="read" required>
<label for="unread">Not Read</label>
<input id="unread" type="radio" name="status" value="unread" required>
<label for="reading">Reading</label>
<input id="reading" type="radio" name="status" value="reading" required>
</div>
</form>
</div>
<div class="form-footer">
<button id="form-add-btn" type="submit" class="form-btn" form="form1">Add</button>
<button id="cancel-btn" class="form-btn">Cancel</button>
</div>
</div>
</div>
The following is the code I have so far. Currently the sign-up and join links are on the top left. I want these to be in a drop down menu. So on the top left I want to have a drop down menu, that when I hover over the menu these two links appear there and when I click them the same pop up appears in the middle of the screen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Clipmarks - Online Bookmark Application</title>
<meta name="description" content="An online collection of all your bookmarks.">
<meta name="author" content="Tonye Bezalel Brown">
<link rel="icon"
type="image/png"
href="images/clipmarks-favicon.png">
<style type="text/css">
body {
margin:0;
font-family: Arial, sans-serif;
font-size: 11pt;
}
a:link, a:visited {
font-family: Arial, sans-serif, verdana;
text-decoration: none;
letter-spacing:1px;
font-weight: bold;
color: #686777;
font-size: 11pt;
}
a:hover {
color: #006cff;
}
.content {
margin: 0 auto;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.header {
height: 49px;
margin: 0 auto;
padding: 50px 50px 30px;
max-width: 900px;
}
#header-img-wrap {
min-width:42px;
margin: auto auto 2px -30px;
}
#header-img-wrap a span {
font-size: 14pt;
font-family: Arial;
font-weight: 650;
position: absolute;
padding: 7px;
margin-top: -3px;
vertical-align: inherit;
}
.header a img {
width: 29px;
height: auto;
}
.header-links {
text-align: right;
margin-top: -28px;
margin-right: -50px;
width: 116px;
float: right;
}
.header li {
display: inline-block;
list-style-type: none;
padding-right: 8px;
}
#box {
width: 99.9%;
border: 1px #000 solid;
position: absolute;
height: 60%;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#box:hover {
background:rgba(0, 108, 255, 0.42);
}
#boximg {
width: 630px;
height: 140px;
position: absolute;
right: 200px;
}
.footer {
width: 100%;
text-align: center;
position: absolute;
bottom: 35px;
}
#overlay {
display: none;
position:absolute;
top:0;
width:100%;
height:100%;
background: rgba(0,0,0,0.63);
z-index:15;
}
#login, #signup {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 10000;
max-width: 26em;
height: 199px;
padding: 28px 22px;
border: 4px solid rgb(197, 218, 255);
background: white;
}
#recoverPassword {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 10000;
max-width: 26em;
height: 149px;
padding: 28px 22px;
border: 4px solid rgb(197, 218, 255);
background: white;
}
form input {
display: block;
border: 0 solid black;
width: 100%;
height: 32px;
margin: 0 auto;
margin-bottom: -14px;
background: aliceblue;
}
form p {
margin-top: 0;
}
form a{
display: block;
float: left;
position: relative;
vertical-align: bottom;
width: 112px;
font-size: 12px !important;
word-break: break-word;
}
#formButton {
background: transparent;
margin-right: -7px;
display: inline;
width: 61px;
float: right;
margin-top: -8px;
word-break: break-word;
font-weight: bold;
color: #7A7A7A;
}
#formButton:hover {
color:#000;
}
</style>
</head>
<body onload="move()">
<div id="overlay" onclick="closeOverlay()">
</div>
<div id="login">
<form action="main.html" method="get" autocomplete="on">
<input type="text" name="username" autofocus><br /><p>Username (or email address)</p>
<input type="password" name="password"><br /><p>Password</p>
<br /><br /><br />
Forgot Password
<input id="formButton" type="submit" value="Sign In">
</form>
</div>
<div id="signup">
<form action="main.html" method="get" autocomplete="on">
<input type="text" name="username" autofocus><br /><p>Your email address</p>
<input type="password" name="password"><br /><p>Password</p>
<br /><br /><br />
<input id="formButton" type="submit" value="Join">
</form>
</div>
<div id="recoverPassword">
<form action="index.html" method="get">
<input type="text" name="username" autofocus><br /><p>Username (or email address)</p>
<br /><br /><br /><br />
<input id="formButton" type="submit">
</form>
</div>
<div class="content">
<div class="header">
<div id="header-img-wrap">
<img src="images/clipmarks-favicon.png" height="" alt="" title="" /><span>ClipMarks<span>
</div>
<div class="header-links">
<li>Sign In</li>
<li>Join</li>
</div>
</div>
<div id="box">
<img id="boximg" src="images/box-image.jpg" width="" height="" alt="" title="" />
</div>
<div class="footer">
About Us
</div>
</div>
<script>
window.onload = function move() { //makes the box move in relation to the box div
var d = document.getElementById('boximg');
var boxh = document.getElementById('box').clientHeight - 120; //keeps the image in the box by subtracting height
var boxw = document.getElementById('box').clientWidth - 600; //keeps the image in the box by subtracting the width
document.onmousemove = function calc(e) {
var x = e.clientX ;
var y = e.clientY;
if (x < boxw) {
d.style.right = x +'px';
}
if (y < boxh) {
d.style.bottom = y +'px';
}
};
};
function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none
var ov = document.getElementById('overlay');
var rp = document.getElementById('recoverPassword');
var lg = document.getElementById('login');
var sg = document.getElementById('signup');
ov.style.display = 'none';
rp.style.display = 'none';
lg.style.display = 'none';
sg.style.display = 'none';
};
document.onkeydown = function(evt) { //makes the escape key to call the closeOverlay() function
evt = evt || window.event;
if (evt.keyCode == 27) {
closeOverlay();
}
};
function signin() { //displays the sign in form
var lg = document.getElementById('login');
var ov = document.getElementById('overlay');
ov.style.display = 'block';
lg.style.display = 'block';
};
function recoverPassword() { //displays the recoverPassword form for the user to recover password
closeOverlay();
var ov = document.getElementById('overlay');
ov.style.display = 'block';
var rp = document.getElementById('recoverPassword');
rp.style.display = 'block';
};
function join() { //calls the join form for users to register
var lg = document.getElementById('signup');
var ov = document.getElementById('overlay');
ov.style.display = 'block';
lg.style.display = 'block';
};
</script>
</body>
</html>
That should be fairly easy to do.
replace the code in your header-links div with this one.
HTML:
<ul>
<li>Dropdown
<ul>
<li>Sign In</li>
<li>Join</li>
</ul>
</li>
</ul>
and add this to your css classes
CSS:
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
I also recommend you remove the negative margins in your .header-links class and add float:left to your #header-img-wrap.
Hope that helps.