Hey I have a small navbar which is split into 2 sections: left section and right section.
The left section contain an arrow icon and the right section should contain 2 icons: envelope & exclamation triangle. I am tried to position the right section on the right corner of the navbar(which is a div). so far no success, I am adding the code below:
.arrow {
color: gray;
font: bold 11px "Helvetica";
padding: 2px;
text-decoration: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.arrow:after {
background: gray;
color: #FFF;
content: ">";
display: inline-block;
font: bold 11px "Georgia";
height: 25px;
line-height: 25px;
margin-left: 2px;
text-align: center;
width: 25px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.upper_menu{
position:relative;
display:block;
background-color: #F2F6F7;
width: 100%;
height: 20%;
}
#upper_right_menu{
position: absolute;
float:right;
margin:0px;
padding:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
<div id="upper_left_menu">
</div>
<div id="upper_right_menu">
<i class="exclamation-triangle fa fa-exclamation-triangle"></i>
<i class="envelope fa fa-envelope-o"></i>
</div>
</nav>
Remove the absolute positioning style element from the id #upper_right_menu
.arrow {
color: gray;
font: bold 11px "Helvetica";
padding: 2px;
text-decoration: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.arrow:after {
background: gray;
color: #FFF;
content: ">";
display: inline-block;
font: bold 11px "Georgia";
height: 25px;
line-height: 25px;
margin-left: 2px;
text-align: center;
width: 25px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.upper_menu{
position:relative;
display:block;
background-color: #F2F6F7;
width: 100%;
height: 20%;
}
#upper_right_menu{
float:right;
margin:0px;
padding:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
<div id="upper_left_menu">
</div>
<div id="upper_right_menu">
<i class="exclamation-triangle fa fa-exclamation-triangle"></i>
<i class="envelope fa fa-envelope-o"></i>
</div>
</nav>
you can use CSS flexible boxes and just remove the position:relative; from your navbar .upper_menu
See this live demo
.arrow {
color: gray;
font: bold 11px "Helvetica";
padding: 2px;
text-decoration: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
nav{
}
.arrow:after {
background: gray;
color: #FFF;
content: ">";
display: inline-block;
font: bold 11px "Georgia";
height: 25px;
line-height: 25px;
margin-left: 2px;
text-align: center;
width: 25px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.upper_menu {
position: relative;
display: flex;
justify-content: space-between;
background-color: #F2F6F7;
width: 100%;
height: 20%;
}
#upper_right_menu {
margin: 0px;
padding: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="upper_menu">
<div id="upper_left_menu">
</div>
<div id="upper_right_menu">
<i class="exclamation-triangle fa fa-exclamation-triangle"></i>
<i class="envelope fa fa-envelope-o"></i>
</div>
</nav>
You just need to modify:
#upper_right_menu{
position: absolute;
float:right;
margin:0px;
padding:0px;
}
to
#upper_right_menu{
position: absolute;
right: 0;
top: 0;
}
Try to sue display:table; solution
.arrow {
color: gray;
font: bold 11px "Helvetica";
padding: 2px;
text-decoration: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.arrow:after {
background: gray;
color: #FFF;
content: ">";
display: inline-block;
font: bold 11px "Georgia";
height: 25px;
line-height: 25px;
margin-left: 2px;
text-align: center;
width: 25px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.upper_menu{
position:relative;
display:table;
background-color: #F2F6F7;
width: 100%;
height: 20%;
}
#upper_right_menu{
display: table-cell;
vertical-align: middle;
text-align: right;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
<div id="upper_left_menu">
</div>
<div id="upper_right_menu">
<i class="exclamation-triangle fa fa-exclamation-triangle"></i>
<i class="envelope fa fa-envelope-o"></i>
</div>
</nav>
This is my solution
#upper_right_menu{
position: absolute;
top: 0px;
right: 0px;
}
Related
.page-section {
background-color: #035DA9;
font-family: "Mulish", sans-serif;
}
.logo-image {
width: 270px;
margin: 12px 0px 0px 12px;
}
.header-section {
display: flex;
}
.navbarLinks {
color: white;
margin-top: 40px;
position: absolute;
right: 0px;
}
.navbarLinks a {
text-decoration: none;
background-color: transparent;
margin-right: 39px;
color: white;
}
.middle-section{
width: 100vw;
margin-left: -8px;
}
.md-sec-1 {
background-color: #203546;
display: flex;
}
.middle-section-image {
width: 270px;
background-color: transparent;
padding: 50px;
}
.text-section {
color: white;
margin-top: 20px;
}
.text-section p{
word-spacing: 5px;
}
.md-sec-2{
color: white;
margin-top: auto;
margin-bottom: auto;
}
.md-sec-2 h3 {
text-align: center;
}
.footer-section {
background-color: white;
height: auto;
position: absolute;
width: 100vw;
bottom: 0px;
margin-left: 0px;
display: flex;
}
.btn {
color: white;
background: #203546;
border: 0px;
border-radius: 4px;
display: block;
margin-left: auto;
margin-right: auto;
/* margin-left: 47%; */
padding: 10px 20px;
margin-top: 12px;
}
.icons{
padding: 17px;
padding-left: 30px;
}
.icons a{
text-decoration: none;
background-color: transparent;
padding: 0px 6px;
}
.color-black {
color: black;
}
#media only screen and (max-width: 900px){
.update-contact-section{
margin-right: 10px !important;
}
}
#media only screen and (max-width: 800px){
.update-image{
display: inherit !important;
height: auto;
}
.navbarLinks a {
margin-right: 10px;
}
.navbarLinks {
margin-top: 12px;
}
.logo-update {
width: 140px;
margin-left: 0px;
margin-top: 0px;
}
.image-responsive {
display: block;
margin-left: auto;
margin-right: auto;
width: 57%;
}
.header-section-update {
height: 7vh;
}
.header-center{
text-align: center;
margin-top: -40px;
/* font-size: 40px; */
}
.para-update {
padding: 0px 10px;
/* font-size: 30px; */
}
.fa-icon-update {
font-size: 10px;
padding-left: 0px;
}
.footer-text-update {
font-size: 10px;
margin-top: 21px;
}
.contact-update {
font-size: 8px;
margin-top: 23px;
}
.icons {
padding-left: 0px;
}
.text-section {
padding-bottom: 20px;
}
}
#media only screen and (max-width: 400px){
body{
font-size: 12px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Intern guys</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./app.css">
<script src='./font-awesome.js'></script>
</head>
<body class="page-section">
<div>
<div class="header-section header-section-update">
<div class="logo-section">
<img src="./images/logo_image.png" alt="logo" class="logo-image logo-update" />
</div>
<div class="navbarLinks">
Home
About us
Register
</div>
</div>
<div class="middle-section">
<div class="md-sec-1 update-image">
<div class="image-section">
<img src="./images/final-mid-image.png" alt="image" class="middle-section-image image-responsive" />
</div>
<div class="text-section">
<h3 class="header-center">WELOME TO THE INTERN GUYS</h3>
<P class="para-update">Congratulations, you have made the first and last step required to get your internship. Start by
creating your profile and you are up and ready for the internship.
But don't worry everything is automated, we know exactly where are the pain points are and
that’s why we promise to make this as smooth as possible.
<i>After all, we are the Inten guys</i>.
</P>
</div>
</div>
<div class="md-sec-2 btn-update">
<h3 class="quote-update">We are started by the students, built by the students and for the students</h3>
<button class="btn">Start now</button>
</div>
<div class="footer-section">
<div class="icons" style="width: 33vw;">
<i class='fab fa-twitter color-black fa-icon-update'></i>
<i class='fab fa-instagram color-black fa-icon-update'></i>
<i class='fab fa-linkedin color-black fa-icon-update'></i>
<i class='fab fa-tiktok color-black fa-icon-update'></i>
</div>
<div style="width: 33vw;">
<p style="text-align: center; " class="footer-text-update">Built with love in Irvine</p>
</div>
<div style="width: 33vw;">
<p style="float: right; margin-right: 30px;" class="update-contact-section contact-update">Conatct us: xyz#gmail.com</p>
</div>
</div>
</div>
</body>
</html>
I am making this email template for one of my projects. Here I want that the quote "We are started by students, built by the students ..... " should always appear in the middle(vertically), but I am not able to achieve it. Like if I see my page on a iPad, there is a lot of space between the footer and quote section.
So basically I have to align the content of a div in the middle vertically but for a variable height div. Can anyone please help me with this
Try this :
.md-sec-2{
color: white;
width:80vw;
height: 40vh;
margin:0 auto;
}
.quote-update,.btn{
position: relative;
top:50%;}
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 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
I created a list with divs inside and the one div contains a home icon using font awesome. I want the font icon to change to a picture icon when clicked and change back to the home icon when clicked again. Do I need Javascript for this?
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
You can use JavaScript, jQuery is recommended:
$('#home a').on('click', function(e){
$('#home span').toggleClass('fa-home fa-anchor');
};
I guess you know how to include jQuery, if not just paste this into your head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Let me know if that works or not!
You need to add jQuery for that:
$("#home a").click(function(){
$(this).parent().toggleClass("active");
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
#home.active .fa-home:before{
content: "\f1b9";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
You have to use Javascript to bind the click event, after you should toggle CSS class.
Try this solution without jQuery
let home = document.querySelector('#home');
home.addEventListener('click', (e) => {
let icon = document.querySelector('.fa');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-heart');
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
When user driven events are involved, you'll have to use javascript. One way to do it is, you have two classes and you toggle them to show different icons.
var link = document.querySelector('#home a');
link.addEventListener('click', function(e){
//Prevent default action of a link, which navigates to href prop
e.preventDefault();
var icon = this.querySelector('span');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-image');
});
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: #fff;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 50px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
This is a non js solution
input + span:before {
height:45px;
content:"\f015"
}
input:checked + span:before {
content:"\f03e"
}
input{
display:none;
}
span.icon{
display: block;
vertical-align: middle;
text-align:center;
line-height: 45px;
}
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
cursor:pointer;
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<label class="switch">
<div id="homecover">
<li id="home">
<input type="checkbox" ><span class="icon fa fa-lg"></span>
<li>
</div>
</label>
</ul>
$("span.fa").click(function(){
if($(this).attr("class") === "fa fa-home"){
$(this).attr("class", "fa-fa-{any-pic}");
} else {
$(this).attr("class", "fa fa-home");
}
});
I've created a single html page that will be used within a .aspx template. The html code I used is pretty basic and includes an email subscribe form. The form and it's code is taken directly from Mailchimp as they are the email client I'm using. The problem is that the page loads fine in all browsers apart from Internet Explorer, which pushes my whole html code down underneath the page. I have a jquery file included in the form (jquery-1.8.2.min.js) and I'm not sure if that is interfering with my html code or if it's a problem within the code itself that I havent specified correctly for Internet Explorer. I'm not sure also if it has something to do with the Mailchimp form. I've tried everything possible to fix this but nothing seems to work. If anyone could help with this or has any ideas I would really appreciate it. Please see my code and screenshots below. Thanks, Gary
Heres my code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link
href="page1.css" rel="stylesheet" type="text/css" /> </form>
<script type="text/javascript" src="js/jquery-1.8.2.min.js">
</script>
</head>
<body> <div id="_wrapper">
<div id="_formsection">
<h1>Welcome</h1>
<p>Subscribe for a monthly discount code</p>
<!-- Begin MailChimp Signup Form-->
<div id="mc_embed_signup">
<form action="form_name_goes_here"
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-EMAIL">
<span class="asterisk"></span></label>
input type="email" value="Enter
your email address" 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>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe"
id="mailsubmit" class="button"></div>
</form>
</div> <!--End mc_embed_signup-->
</div><!--end form section-->
<div id="grid_section">
<div class="section1">
<a href="">
<img src="images/section1_hydrogel.jpg"
alt="PowerBar HydroGel Image" />
<h4>PowerBar HydroGel Coming Soon</h4>
<p>Click here to register for updates</p></a>
</div>
<div class="section2">
<a href="">
<img src="images/section2_action_camera.jpg"
alt="Rollei Bullet HD Action Camera Image" />
<h4>Rollei Bullet HD Action Camera</h4>
<p>Get 20% off the Rollei Bullet HD and start recording your adventures</p></a>
</div>
<div class="section3">
<a href="">
<img src="images/section3_gp4000.jpg"
alt="GP4000S Tyre Sale Image" />
<h4>GP4000S Tyre Sale</h4>
<p>Was €51.99 but you can get it now for €39.99 with free delivery</p></a>
</div>
<div class="section4">
<a href="">
<img src="images/section4_streetracer.jpg"
alt="BMC Streetracer Image" />
<h4>BMC Streetracer for only €999.99</h4>
<p>Great new year offer for you to buy this quality manufactured Swiss frame for only
€999.99</p></a>
</div>
<div class="section5">
<a href="" target="_blank">
<img src="images/section5_facebook.jpg"
alt="Facebook Image" />
<h4>Discounts on Facebook</h4>
<p>We give out regular discounts on social media so follow us there to get the
updates</p></a>
</div>
<div class="section6">
<a href="">
<img src="images/section6_isoactive.jpg"
alt="Facebook Image" />
<h4>IsoActive Sports Drink</h4>
<p>This Isotonic Sports Drink for Maximum Hydration was €26.99 and you can get it now
for only €24.99</p></a>
</div>
</div><!--end grid section-->
</div><!--end wrapper--> </body>
</html>
Heres my CSS
#charset "UTF-8"; /* CSS Document */
body { font-family:"Helvetica Neue",Arial,Sans-serif; }
#_wrapper{ width: 620px;
overflow: hidden;
margin: 0 auto; }
/* ------------Form Section-------------- */
#_formsection{ width: 620px;
height: 350px;
margin: 0 auto;
background-image: url(images/background1.jpg);
background-repeat:no-repeat;}
#_formsection img{ margin: 10px 0 0 0;
float: left;
padding-left: 20px; }
#_formsection h1{ margin: 30px 0 0 0;
float: right;
font-size: 20px;
padding-right: 280px;
color: #FFF;
text-shadow: #666 2px 2px 1px; }
#_formsection p{ clear: both;
margin: 100px 0 10px 0;
float: left;
padding-left: 55px;
color: #FFF;
text-shadow: #666 2px 2px 1px;
display: inline; }
#mc_embed_signup{ clear: both;
float: left;
margin-right: 0px;
padding-left: 50px;
width: 290px; }
.mc-field-group{ width: 200px;
float: left;
overflow: hidden; }
input#mce-EMAIL{ width: 185px;
height: 25px;
font-size: 10px;
padding-left: 10px;
color: #999;
letter-spacing: -0.02em;
text-shadow: 0px 1px 0px #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ffffff));
background: -moz-linear-gradient(top, #e1e1e1, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #CCC;
outline:none;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px; }
input#mce-EMAIL:focus {
box-shadow: 0 0 3px (255, 140, 0, 1);
-webkit-box-shadow: 0 0 3px rgba(255, 140, 0, 1);
-moz-box-shadow: 0 0 3px rgba(255, 140, 0, 1);
border:1px solid rgba(255,140,0, 0.8); }
#mailsubmit { color: #999;
border: 1px solid #CCC;
font-size: 10px;
letter-spacing: -0.02em;
text-shadow: 0px 1px 0px #fff;
outline: none;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ffffff));
background: -moz-linear-gradient(top, #e1e1e1, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 90px;
float: right;
height: 29px;
cursor: pointer; }
/* ------------End Form Section-------------- */
/* ------------Grid Section-------------- */
#grid_section{ clear: both;
width: 620px;
margin: 0 auto;
margin-top: 20px; }
.section1 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin-right: 7px;
display:inline; }
.section1 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section1 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section1 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section1 a{ text-decoration: none;
color: #666; }
.section1 a:hover{ text-decoration: none; }
.section2 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin-right: 7px;
display:inline; }
.section2 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section2 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section2 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section2 a{ text-decoration: none;
color: #666; }
.section2 a:hover{ text-decoration: none; }
.section3 { border: 1px solid #CCC;
float: right;
width: 200px;
height: 250px;
display:inline; }
.section3 img{
margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section3 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section3 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section3 a{ text-decoration: none;
color: #666; }
.section3 a:hover{ text-decoration: none; }
.section4 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin: 7px 7px 0 0;
display:inline;
overflow: hidden; }
.section4 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section4 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section4 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section4 a{ text-decoration: none;
color: #666; }
.section4 a:hover{ text-decoration: none; }
.section5 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin: 7px 7px 0 0;
display:inline;
overflow: hidden; }
.section5 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section5 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section5 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section5 a{ text-decoration: none;
color: #666; }
.section5 a:hover{ text-decoration: none; }
.section6 { border: 1px solid #CCC;
float: right;
width: 200px;
height: 250px;
margin: 7px 0 0 0;
display:inline;
overflow: hidden; }
.section6 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section6 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section6 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section6 a{ text-decoration: none;
color: #666; }
.section6 a:hover{ text-decoration: none; }
Not sure if it is how you pasted into stackoverflow or not, but you need to indent your content.
The days are mainly gone where you need to save that extra overhead for the filesize.
Using notepad++ would have helped you find this error pretty quickly, what file editor do you use?
Some elements are missiong from this code:
<div id="mc_embed_signup">
<form action="form_name_goes_here"
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-EMAIL">
<span class="asterisk"></span></label>
CLOSE THIS DIV ABOVE mc-field-group. ALSO FORM IS NOT CLOSED, BEST TO DOUBLE CHECK SIGN-UP FORM CODE
</div><!--end form section-->