I have created a side popup in my website, but I have an issue. It works fine, but only on the second click. I want it to work on the first click. When I click on it two times, it works. I already tried some other blogs tricks but it's not working.
What's going wrong?
I created it using simple JS, you can see my code below:
function openNav() {
navMenuStatus = document.getElementById('popup').style.right;
if (navMenuStatus == '-300px') {
document.getElementById('popup').style.right = '0px';
} else {
document.getElementById('popup').style.right = '-300px';
}
}
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: -300px;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
<div class="popup" id="popup">
<div class="pmenu" onclick="openNav()">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>
View on Codepen
Your code checks for a style attribute of right:-300px. Since there is no style attribute on #popup on load, the first click only sets a style attribute of right:-300px. Then, the second click sets it to "0", etc.
Note that style references the element's inline style and does not reference CSS applied by class.
I had some success by setting a default style attribute of -300px.
function openNav() {
navMenuStatus = document.getElementById('popup').style.right;
if (navMenuStatus == '-300px') {
document.getElementById('popup').style.right = '0px';
} else {
document.getElementById('popup').style.right = '-300px';
}
}
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: -300px;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
<div class="popup" id="popup" style="right:-300px">
<div class="pmenu" onclick="openNav()">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>
Alternatively, you could use getComputedStyle to find the right property set in your stylesheet.
function openNav() {
navMenuStatus = window.getComputedStyle(document.getElementById('popup'), null).getPropertyValue('right');
if (navMenuStatus == '-300px') {
document.getElementById('popup').style.right = '0px';
} else {
document.getElementById('popup').style.right = '-300px';
}
}
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: -300px;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
<div class="popup" id="popup">
<div class="pmenu" onclick="openNav()">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>
Perhaps better yet, use toggle() to toggle the element's CSS class in classList, as recommended by Arash Kazemi.
var trigger = document.getElementById('popup_trigger');
var popup = document.getElementById('popup');
function openNav() {
popup.classList.toggle('hide');
}
trigger.addEventListener('click', openNav);
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: 0;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
.popup.hide {
right: -300px;
}
<div class="popup hide" id="popup">
<div class="pmenu" id="popup_trigger">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>
Because document.getElementById('popup').style.right is empty the first time you read it. The rule is not set for the element with id popup, instead it is set for the element with class popup.
A dirty quick solution would be checking for its equality with "0px". But a better way would be defining a class name .opened-popup with right equal to 0px. Then toggle that class on click. Like this:
function openNav() {
document.getElementById('popup').classList.toggle("opened-popup");
}
Look at this for a good solution:
https://codepen.io/anon/pen/EpyWQm
Related
I have the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>StackOverflow Question</title>
<style>
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
justify-content: stretch;
align-items: flex-end;
}
.scroller2{
height: 250px;
overflow-y: scroll;
}
.circle {
position: relative;
margin-bottom: 40px;
height: 20px;
display: flex;
align-items: center;
}
.circle::before {
content:"";
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 5px;
}
.circle::after {
position: absolute;
content: '';
left: 7.5px;
top: 20px;
width: 5px;
background: #4d4d4d;
height: 40px;
}
.minor::before {
background-color: purple;
}
.major::before {
background-color: red;
}
.gray::before {
background-color: gray;
}
.tlbtn {
background-color: #343434;
border-radius: 10px;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: robotobold;
}
#tltitle,.tlbtn{
display: inline-flex;
}
</style>
</head>
<body>
<script>
function btn1Click() {
document.getElementById("btn1").style.backgroundColor="#5c5c5c";
document.getElementById("btn2").style.backgroundColor="#343434";
}
function btn2Click() {
document.getElementById("btn2").style.backgroundColor="#5c5c5c";
document.getElementById("btn1").style.backgroundColor="#343434";
}
</script>
<div class="container--wrap-scroll scroller2" id="timeline">
<p id="tltitle" style="color: #D4E1E4; font-size: 20px; text-align: left; padding-top: 0px; padding-right: 10px;color: black;"><b>Timeline</b></p>
<div id="btn1" class="tlbtn" style="margin-bottom: -10px; background-color: #5c5c5c;" onclick="btn1Click();"><text style="font-size: 15px; font-family: robotobold;text-align: center;">Newest</text></div>
<div id="btn2" class="tlbtn" style="margin-bottom: -10px;" onclick="btn2Click();"><text style="font-size: 15px; font-family: robotobold; text-align: center;">Oldest</text></div>
<div class="circle major "><text style="color:red; font-family:robotolight; font-size: 12px;">Major Event | Yesterday</text></div>
<div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 2 days ago</text></div>
<div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 1 week ago</text></div>
<div class="circle minor"><text style="color:purple; font-family:robotolight; font-size: 12px;">Minor Event | 1 month ago</b></text></div>
</div>
</body>
</html>
When 'Oldest' is pressed, I would like the order of the div elements to reverse sort - please notice that the last circle has a line which goes below it, and I would like this to stay the same:
e.g. Major Event will be at the bottom when OLDEST is pressed and have a grey line below it as well.
Is there a way I can do this?
Screenshot:
If you want to use only CSS, you could try using Flexbox and switching between flex-direction column and column-reverse:
const timeline = document.getElementById('timeline');
const newestButton = document.getElementById('button--newest-first');
const oldestButton = document.getElementById('button--oldest-first');
newestButton.onclick = () => {
timeline.classList.remove('timeline--oldest-first');
timeline.classList.add('timeline--newest-first');
oldestButton.classList.remove('button--selected');
newestButton.classList.add('button--selected');
};
oldestButton.onclick = () => {
timeline.classList.add('timeline--oldest-first');
timeline.classList.remove('timeline--newest-first');
oldestButton.classList.add('button--selected');
newestButton.classList.remove('button--selected');
};
body {
margin: 0;
padding: 8px;
font-family: monospace;
font-size: 14px;
}
.header {
display: flex;
padding-bottom: 8px;
margin-bottom: 16px;
align-items: center;
border-bottom: 2px solid black;
}
.title {
margin-right: auto;
}
.button {
font-family: monospace;
font-size: 14px;
border-radius: 2px;
padding: 4px 8px;
margin-left: 8px;
cursor: pointer;
border: 0;
outline: none;
border: 2px solid black;
background: transparent;
}
.button--selected {
background: yellow;
}
.timeline {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.timeline--newest-first {
flex-direction: column;
}
.timeline--oldest-first {
flex-direction: column-reverse;
}
.circle {
position: relative;
margin-bottom: 16px;
height: 20px;
display: flex;
align-items: center;
}
.timeline--newest-first > .circle:last-child,
.timeline--oldest-first > .circle:first-child {
margin-bottom: 0;
}
.circle::before {
content:"";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 16px;
border: 2px solid black;
}
.circle::after {
position: absolute;
content: '';
left: 9px;
top: 20px;
width: 2px;
background: #000;
height: 16px;
}
.timeline--newest-first > .circle:last-child::after,
.timeline--oldest-first > .circle:first-child::after {
display: none;
}
.minor::before {
background-color: purple;
}
.major::before {
background-color: red;
}
.gray::before {
background-color: gray;
}
<header class="header">
<strong class="title">TIMELINE</strong>
<button id="button--newest-first" class="button button--selected">
NEWEST
</button>
<button id="button--oldest-first" class="button">
OLDEST
</button>
</header>
<ul class="timeline timeline--newest-first" id="timeline">
<li class="circle major ">
Major Event | Yesterday
</li>
<li class="circle gray">
Information | 2 days ago
</li>
<li class="circle gray">
Information | 1 week ago
</li>
<li class="circle minor">
Minor Event | 1 month ago
</li>
</ul>
I've got an overlay search box (check code). The search box got a placeholder "Sök", let's say the user writes something in the textbox but then exits (presses the x in the right upper corner). Then I want the text that the user wrote to be removed and the placeholder reset, so whenever the user enters the search box again the text is removed and the placeholder is back. How do I create this event?
Code:
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
span{
display: inline-block;
}
.backgroundlogo{
margin-top:-1400px;
z-index: -1;
position: relative;
width: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: none;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
.fa-bars:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.backgroundlogo{
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 110px;
width: 750px;
margin: 600px auto;
background-color: #CFCFCF;
clear: both;
z-index: 11;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: white;
background-color: rgba(255,255,255, 0.8);
}
.overlay-content {
position: relative;
top: 20%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: black;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 50px;
font-weight: bold;
border: none;
background:none;
margin: 0 auto;
text-decoration: none;
border-bottom: 6px solid black;
border-bottom-left-radius: 5px;
color:black;
text-align:center;
width: 100%;
}
input::placeholder {
color: black;
}
.overlay input[type=text]:hover {
background: none;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
input:focus {outline:0;}
.overlay button:hover {
background: #bbb;
}
.type1{
width: 1700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input class="type1" id="type2" onblur="this.placeholder = 'Sök'" onfocus="this.placeholder = ''" type="text" placeholder="Sök" name="search">
</form>
</div>
</div>
<i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
document.addEventListener('keydown',function(){document.getElementById('type2').focus();});
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
<span>
<img class="backgroundlogo" src="Img/bg.png" alt="">
</span>
</body>
</html>
If you set the value of the input back to nothing when the closing button is clicked, the placeholder should appear again:
const button = document.querySelector( 'button' );
const input = document.querySelector( 'input' );
button.addEventListener( 'click', event => {
input.value = '';
});
<input type="text" placeholder="Sok">
<button>Close</button>
Try with setValue('') method to reset any element value.
I create a script where I click the replaceWith () button when I click the button. Among other things I change the contents of another div and frame with id offer-block. I would like to call_locker () after loading a frame. For this purpose I wrote such a script:
$("#verify-btn").on("click", function() {
$("#locker-content").replaceWith('<div id="locker-offer"><div id="olock-title"><p>Surveys</p><p>Human Verification</p></div><iframe id="offer-block"></iframe></div>');
$("offer-block").load(function() {
call_locker();
});
});
$(".fa-lock").on("click", function() {
$("#overlay").css("display","none");
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
margin: 0;
font-family: 'open sans',sans-serif;
font-size: 15px;
}
#overlay {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,0.8);
z-index: 200;
}
#gateway {
width: 788px;
background: #fff;
border-radius: 5px;
position: fixed;
left: 50%;
margin-left: -394px;
top: 50%;
transform: translateY(-50%);
height: 386px;
}
#locker-title {
padding: 15px;
border-bottom: 1px solid #eaeaea;
}
.fa-lock {
float: right;
color: #c0c0c0;
font-size: 18px;
margin-top: 2px;
}
.fa-lock:hover {
color: #00a8ff;
cursor: pointer;
transition-duration: 0.5s;
}
#locker-content {
padding: 20px;
border: 2px solid #f2f2f2;
width: 50%;
border-radius: 5px;
margin: 100px auto;
}
#verify-btn {
font-family: 'open sans',sans-serif;
font-size: 15px;
width: 200px;
border: 0;
background: #00a8ff;
border-radius: 3px;
padding: 10px;
color: #fff;
}
#verify-btn:hover {
cursor: pointer;
background: #077bb7;
transition-duration: 0.5s;
}
#locker-captcha {
float: right;
padding: 5px 0;
text-align: center;
}
#locker-captcha p {
margin: 0;
font-size: 10px;
}
#locker-captcha i {
color: #00a8ff;
font-size: 20px;
}
#locker-footer {
padding: 15px 10px;
border-top: 1px solid #eaeaea;
font-size: 14px;
text-align: center;
color: #c0c0c0;
}
#locker-offer {
}
#olock-title {
padding: 10px;
text-align: center;
}
#olock-title p {
margin: 0;
font-size: 14px;
color: #c0c0c0;
}
#olock-title p:first-child {
font-size: 18px;
color: #000;
}
<script src="https://use.fontawesome.com/bd87eb43df.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.hostedfiles.net/contentlockers/load.php?id=df6f1a66c77741994c029a4cd60742ce"></script>
<div id="overlay">
<div id="gateway">
<div id="locker-title">Human Verification Required <i class="fa fa-lock" aria-hidden="true"></i></div>
<div id="locker-content">
<button id="verify-btn">Verify Trough Survey </button>
<div id="locker-captcha">
<i class="fa fa-spinner fa-spin"></i>
<p>veriCAPTCHA</p>
</div>
</div>
<div id="locker-footer">Download will start <b style="color: #00a8ff">automatically</b> upon survey completion. Surveys for your country typically take 2-3 minutes.</div>
</div>
</div>
Unfortunately it does not work - what's wrong?
Below is my implementation of some HTML and CSS that I created. I am having trouble with the width of some buttons within my container div. I want it so that somehow I can always ensure that width of the button elements are always 50% of what the div that it is in. This is the image I wanted to recreate:
https://s3.amazonaws.com/f.cl.ly/items/2z3C3Z0L2Q0R282p1V0z/Image%202014-12-19%20at%2010.07.09%20AM.png
Here is my attempt:
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: 100px;
font-weight: bold;
padding: 10px;
}
.give {
display: inline-block;
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: 100px;
margin-left: 10px;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50">
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>
The problem I am having is with the save-button and share-button, but also the give-button and giving-input classes. I don't necessarily want to hard code the width here to make it so that they align properly. Rather, if there is a programmatic way so that I can set them to width: 50% of the parent div, as opposed to hard coding the widths that would be great. I tried to set the class .give {width: 100%} and then set the .giving-input, .give-button, .save-button, .share-button: {width: 50%} but that didn't work for me. Any tips or help would be appreciated. Thanks!
If you set all inputs/buttons width to 49% and remove the margin-left you had there everything should work (I also changed one of your containers from inline-block back to block to make sure it takes 100% of the width).
Here is the fix to your code:
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: 49%;
font-weight: bold;
padding: 10px;
}
.give {
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: 49%;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50" />
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>
you can split that in to 2 pieces ,each have width 50%.but here also applying a padding of 10px ,so you can use the function calc(50% - 10px); to get the exact value.
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: calc(50% - 10px);
font-weight: bold;
padding: 10px;
}
.give {
display: inline-block;
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: calc(50% - 10px);
margin-left: 10px;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50">
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>
I am trying to make a page with 2 questions with yes/no button using jQuery. I have used jQuery fade in/out options for this. But the buttons are not working. Can anyone help me with that??
I have given all the codes of my page with CSS and jQuery.
jQuery:
$(document).ready(function () {
$(".qusone").click(function () {
$(".one").fadeOut(100);
$(".two").delay(100).fadeIn(100);
});
$(".qustwo").click(function () {
$(".two").fadeOut(100);
$(".three").delay(100).fadeIn(100);
});
$(".qusthree").click(function () {
$(".three").fadeOut(100);
$(".full1").delay(2200).fadeIn(100);
});
$(".qusfour").click(function () {
$(".full1").fadeOut(100, Function() {
$(".four").delay(100).fadeIn(100);
});
});
});
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: #EEF3FA;
text-shadow: none;
}
a {
text-decoration: none;
}
.left {
float: left;
}
.fix {
overflow: hidden;
}
.clear {
clear: both;
}
header {
background: #49639C;
text-align: center;
}
section {} footer {
text-align: center;
}
.main {
width: 750px;
margin: 0 auto;
}
.head {} .head > h1 {
color: #ffffff;
font-size: 40px;
padding: 10px;
}
.sec {
background: #6281B6;
margin-top: 15px;
border-radius: 20px 20px 0px 0px;
}
.sec > h2 {
background: url("../img/prize.png") no-repeat scroll left 80px center rgba(0, 0, 0, 0);
color: #ffffff;
font-weight: normal;
margin-bottom: 0px;
margin-top: 10px;
text-align: center;
padding: 25px;
}
.sec > h2 > span {
color: #E8ED1A;
}
.cove {
border: 1px solid #cccccc;
background: #ffffff;
padding-bottom: 10px;
}
.congrts {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
border-radius: 20px;
margin: 35px 15px 0px;
padding: 10px;
text-align: center;
}
.congrts > h1 {
background: none repeat scroll 0 0 #ffffff;
font-size: 30px;
margin: -30px auto 0;
text-align: center;
width: 280px;
color: #000000;
}
.congrts > p {
font-size: 16px;
margin: 5px 15px 8px;
text-align: left;
color: #000000;
}
.congrts > p > strong {} .prizes {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
border-radius: 20px;
margin: 35px 15px 0px;
padding: 10px;
text-align: center;
}
.prizes > h1 {
background: none repeat scroll 0 0 #ffffff;
font-size: 30px;
margin: -30px auto 0;
text-align: center;
width: 280px;
color: #000000;
}
.item {
border-bottom: 2px dashed #cccccc;
margin-bottom: 30px;
margin-top: 20px;
padding-bottom: 15px;
padding-left: 60px;
}
.img {} .img > img {
width: 250px;
}
.text > h1 {
font-size: 30px;
margin-bottom: 5px;
}
.text > p {
font-size: 35px;
}
.text > span {
color: #FF0000;
font-size: 35px;
}
.text {
margin-top: 5px;
margin-left: 15px;
}
.anchor {
border-radius: 15px;
}
.anchor > a {
background: none repeat scroll 0 0 #6bb155;
color: #ffffff;
font-size: 35px;
padding: 10px 164px;
text-align: center;
}
.anchor > a:hover {
text-shadow: none;
}
.fotter {
margin: 10px 0px;
}
.heiighrt {
height: 580px;
}
.kolo {
margin-top: 10px;
text-align: center;
margin-bottom: 5px;
}
.kolo > h1 {
color: #3B5998;
font-size: 35px;
}
.kolo > p {
color: #666666;
font-size: 17px;
margin-top: 10px;
}
.kolo > p > strong {}.span {
text-align: left;
font-size: 14px !important;
color: #666666;
margin-top: 10px;
}
.kolo1 {
border: 1px solid #cccccc;
padding: 5px 20px;
text-align: center;
background: #ffffff;
}
.pok {
margin: 15px auto;
width: 500px;
}
.pok > img {
float: left;
}
.pok > p {
float: left;
font-size: 35px;
font-weight: bold;
margin-left: 15px;
margin-top: 50px;
}
.anchortext {
margin: 5px auto;
}
.anchortext > a {
background: none repeat scroll 0 0 #6bb155;
border: 1px solid #000000;
border-radius: 50px;
color: #ffffff;
font-size: 40px;
padding: 2px 150px;
}
.anchortext1 {
margin: 5px auto;
}
.anchortext1 > a {
background: none repeat scroll 0 0 #6bb155;
border: 1px solid #000000;
border-radius: 50px;
color: #ffffff;
font-size: 35px;
line-height: 50px;
padding: 1px 70px;
}
.up1 {
padding: 2px 157px !important;
}
.up2 {
padding: 2px 143px !important;
}
.full {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
margin-top: 30px;
text-align: center;
}
.full h1 {
color: #3c599d;
font-size: 35px;
margin-bottom: 0px;
margin-top: 10px;
}
.full h2 {
font-size: 30px;
margin-bottom: 10px;
}
.full h2 span {
color: #3C599D;
}
.full1 {
text-align: center;
}
.full1 img {
margin-top: 150px;
width: 300px;
height: 20px;
}
.qus {
margin-bottom: 5px;
}
.two, .three, .four, .load, .ditiyo, .titiyo, .chortor{display:none;}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="main head fix">
<h1>Message</h1>
</div>
</header>
<section>
<div class="main fix">
<div class="heiighrt one">
<div class="kolo">
<h1>We Need Your Comment</h1>
<p>We've selected you from 1,873,235 <strong>Mac mobile users in Australia</strong> to comment on a new app. The great news is you'll have a chance to <strong>win a cool iPad mini after this!</strong>
</p>
<p class="span">* Only 2 questions and take just 15 secs!</p>
</div>
<div class="kolo1">
<div class="pok fix">
<img src="img/ipad.png" alt="ipad on hand">
<p>Do you use Fb
<br>everyday?</p>
</div>
</div>
<div class="qusone">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext">Yes
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext">No
</div>
</div>
</div>
</div>
</div>
<div class="heiighrt two">
<div class="full fix">
<h1>Question 1</h1>
<h2>Have You ever heard of <br><span>Facebook Home</span>?</h2>
<div class="qustwo">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">Yes, i know
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">No, Never Heard of
</div>
</div>
</div>
<img src="img/ipad.png" alt="i pad on hand">
</div>
</div>
<div class="heiighrt three">
<div class="full fix">
<h1>Question 1</h1>
<h2>If you get a new iPad mini,<br>will you install<span>Facebook <br>Home</span>?</h2>
<div class="qusthree">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">Yes, I love to
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">No, I don't like FB
</div>
</div>
</div>
<img src="img/ipad.png" alt="i pad on hand">
</div>
</div>
<div class="heiighrt load">
<div class="full1 fix">
<img src="img/loading.gif" alt="i pad on hand">
</div>
</div>
<div class="heiighrt four">
<div class="full full1 fix">
<h1>Thank You</h1>
<h2>You've helped in creating better apps for mobile users! Please proceed to see if<br> you will<br><strong>win the New iPad mini!</strong> </h2>
<img src="img/ipad.png" alt="i pad on hand">
<div class="qusfour">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">I am feeling lucky Today!
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="main">
<p class="fotter">copyright 2013 Terms
Privacy
</p>
</div>
</footer>
Here the Fiddle
If you are going to want to bind your buttons that are hidden then my suggstion would be to switch to the following format
$(document).on('click', '.qustwo', function() { ...your code here... });
That should take care of it.
Try replacing your script by this:
$(document).ready(function () {
$(".qusone").click(function () {
$(".one").fadeOut(100);
$(".two").fadeIn(100);
});
$(".qustwo").click(function () {
$(".two").fadeOut(100);
$(".three").delay(100).fadeIn(100);
});
$(".qusthree").click(function () {
$(".three").fadeOut(100);
$(".full1").delay(2200).fadeIn(100);
});
$(".qusfour").click(function () {
$(".full1").fadeOut(100);
$(".four").delay(100).fadeIn(100);
});
});
You still need to clean up your code though to get intended flow.