I'm making some accordion FAQ questions. When I add padding around the answer portion, my accordion won't close all the way. When I remove the padding, the accordion works fine. The problem is that I want the padding.
As stated before, my accordion works perfectly fine when padding is removed. When the padding is added back, the collapsed answer still shows the first few lines of text in the answer.
(The accordion in question is the last entry on the page, headed with "0002.")
body {
font-family: 'work sans', Arial, sans-serif;
font-size: 14px;
color: #999;
margin: 0px;
padding: 0px;
background-color: #010101;
background: url(https://imgur.com/YRl8KNP.png) fixed center;
background-size: cover;
text-align: left;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-track {
background-color: #000;
}
::-webkit-scrollbar-thumb {
background-color: #010101;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: #999;
}
#header {
padding: 160px;
}
.h_title {
font: 150px 'work sans';
color: #fff;
margin-left: 45px;
text-transform: uppercase;
}
.h_menu {
border-top: 1px solid #999;
width: 1100px;
margin: 0 auto;
padding: 20px 0px;
margin-bottom: 175px;
}
.h_top {
text-align: right;
font: 12px 'work sans';
color: #fff;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 900;
}
.h_top::before {
content: '////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////';
font: 11px 'arial';
font-weight: 400;
display: block;
color: #ff00ff;
margin-bottom: 20px;
letter-spacing: 4px;
}
.h_tabs input {
display: none;
}
.h_tabs {
position: relative;
overflow: hidden;
height: 230px;
margin-top: 30px;
}
.h_tabs label {
position: absolute;
right: 0px;
top: 20px;
font: 9px 'work sans';
letter-spacing: 5px;
color: #fff;
cursor: crosshair;
}
.h_tabs label:nth-of-type(2) {
top: 90px;
}
.h_tabs label:nth-of-type(3) {
top: 160px;
}
.h_tabs label b {
color: #ff00ff;
font-weight: 700;
}
.h_tabs label span {
opacity: 0;
transition: 0.6s;
}
.h_tabs label:after {
content: '001';
display: inline-block;
overflow: hidden;
width: 40px;
text-align: right;
font-eight: 100;
color: #fff;
transition: 0.6s;
font-weight: bold;
}
.h_tabs label:nth-of-type(2):after {
content: '002';
}
.h_tabs label:nth-of-type(3):after {
content: '003';
}
.h_tabs input:checked+label span {
opacity: 1;
transition: 0.6s;
}
.h_tabs input:checked+label::after {
width: 0px;
transition: 0.6s;
}
.h_tab1,
.h_tab2 {
width: 700px;
position: absolute;
left: 50px;
top: 50px;
opacity: 0;
}
.h_blurb {
font: 14px 'work sans';
color: #ccc;
letter-spacing: 1px;
}
.h_cont {
background: #171717;
padding: 20px;
margin-top: 25px;
overflow: hidden;
display: inline-block;
}
.h_nav a {
display: inline-block;
position: relative;
width: 180px;
margin: 0px 35px 15px 0px;
border-bottom: 1px solid #333;
padding: 6px;
font: 12px 'share tech mono';
text-transform: uppercase;
letter-spacing: 1px;
color: #aaa;
}
.h_nav a::after {
content: '';
width: 15px;
height: 2px;
position: absolute;
left: 0;
bottom: -1px;
background: #ff00ff;
transition: 0.5s;
}
.h_nav a:nth-of-type(2n):after {
background: #ff00ff;
}
.h_nav a:nth-of-type(3n):after {
background: #ff00ff;
}
.h_nav a:hover:after {
width: 180px;
transition: 0.5s;
}
#htab1:checked~.h_tab1,
#htab2:checked~.h_tab2 {
opacity: 1;
z-index: 2;
}
#lean_overlay {
position: fixed;
z-index: 99;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: url(https://i.imgur.com/zdXP0Uo.jpg) fixed center;
background-size: cover;
display: none;
}
#Pages #wrapper {
background: transparent;
}
#page_container {
width: 1100px;
overflow: hidden;
padding: 15px 0px;
margin: 15px 0px;
}
.page_menu {
font: 12px 'share tech mono';
width: 220px;
margin-right: 50px;
margin-left: 12px;
float: left;
}
.page_menu a:active {
color: #ff00ff;
}
.page_menu h1 {
font: 17px 'work sans';
font-weight: 700;
text-transform: lowercase;
color: #fff;
margin: 30px 0px 10px 0px;
}
.page_menu h1:before {
content: '/ ';
font-weight: 300;
margin-right: 5px;
color: #ccc;
}
.page_content {
background: #171717;
width: 705px;
float: left;
outline: 1px solid rgba(255, 255, 255, 0.2);
outline-offset: 10px;
padding: 50px;
text-align: justify;
line-height: 150%;
}
.page_content h1 {
font: 50px 'work sans';
text-transform: uppercase;
font-weight: 300;
color: #fff;
margin: 0px;
overflow: hidden;
text-align: left;
display: block;
letter-spacing: 1px;
}
.page_content h2 {
font: 15px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 10px 0px;
color: #ff00ff;
}
.page_text {
padding: 20px 50px;
}
.page_text u {
color: #fff;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
text-decoration: none;
font-size: 12px;
}
.page_em {
margin: 30px;
font: 10px 'share tech mono';
line-height: 17px;
border: 1px solid #333;
padding: 30px;
}
.page_em u {
color: #ff00ff;
font-style: normal;
font-size: 10px;
letter-spacing: 0px;
line-height: 17px;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
}
.page_menu ol {
counter-reset: item;
margin: 0px;
padding-left: 10px;
}
.page_menu li ol {
padding-left: 15px;
}
.page_menu b {
color: #ff00ff;
font-weight: bold;
}
.page_menu ol li {
display: block;
}
.page_menu li:before {
content: counters(item, ".") ". ";
counter-increment: item;
font-size: 9px;
line-height: 25px;
color: #ff00ff;
}
.sub_canons li {
border-top: 1px solid #333;
border-bottom: 1px solid #333;
font: 7px 'work sans';
text-transform: uppercase;
letter-spacing: 1px;
padding: 20px 0px;
margin-bottom: 10px;
}
.sub_canons {
list-style-type: none;
margin: 30px 0px;
padding-left: 50px;
}
.sub_canons li b {
display: block;
font: 10px 'share tech mono';
}
.page_content h3 {
font: 14px 'share tech mono';
text-align: right;
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h3::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 12px;
color: #ff00ff;
}
.page_content h4 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h4::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #ff1053;
}
.page_content h5 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h5::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #4592f7;
}
.page_content h6 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
counter-increment: faqcounter;
}
.page_content h6::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #ff5f32;
}
/* Tagging */
a.user-tagged.mgroup-4 {
color: #744dba;
}
a.user-tagged.mgroup-8 {
color: #ff1053;
}
a.user-tagged.mgroup-6 {
color: #4592f7;
}
a.user-tagged.mgroup-7 {
color: #ff5f32;
}
.iconpad {
padding: 10px;
border: 1px solid #222;
margin-right: 10px;
float: left;
margin-top: 5px;
}
.padex {
padding: 10px;
text-align: justify;
}
::-moz-selection {
color: #ff00ff;
}
::selection {
color: #ff00ff;
}
faqentry {
margin: 0px 20px 5px 20px;
display: block;
}
faqentry ol li {
margin: 10px 15px 10px 10px;
padding-left: 15px;
font-size: 9px;
color: #d8fe56;
}
div.toggle {
margin: 10px 30px 20px 30px;
padding: 40px;
line-height: 170%!important;
background: rgba(0, 0, 0, 0.3);
display: block;
}
<!DOCTYPE html>
<html>
<head>
<style>
.accordion {
font: 14px 'share tech mono';
text-align: right;
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0px;
color: #fff;
background: none;
border: none;
transition: 0.4s;
}
div.panel {
margin: 10px 30px 20px 30px;
padding: 40px;
line-height: 170%;
background: rgba(0, 0, 0, 0.3);
display: block;
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
</style>
<link rel="shortcut icon" href="HERE">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:100,400,700,900|Share+Tech+Mono" rel="stylesheet">
<title>STICTION</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<LINK REL=StyleSheet HREF="STICTION.css" TYPE="text/css">
</head>
<div id="header">
<div class="h_title">stiction</div>
<div class="h_menu">
<div class="h_top"></div>
<div class="h_tabs">
<input id="htab1" type="radio" name="htabs" checked>
<label for="htab1"><span>CANDY TEETH, NEON IDIOTS.</span> <b>/</b></label>
<input id="htab2" type="radio" name="htabs">
<label for="htab2"><span>OTHER LINKS</span> <b>/</b></label>
<div class="h_tab1">
<div class="h_blurb"><i>Welcome to the new world; myth meets the future. Where do you fit in?</i><br><br>
<span style="text-transform: uppercase; font-family: share tech mono; font-size: 11px;">literate supernatural and cyberpunk group roleplay set in City 0215 during the year 2447.</span>
</div>
</div>
<div class="h_tab2">
<div class="h_nav">
DISCORD
DIRECTORY
PLAYLIST
</div>
</div>
</div>
</div>
<div id="page_container">
<div class="page_menu">
<ol>
<li>INDEX</li>
</ol>
<h1>ESSENTIAL READS</h1>
<ol>
<li>QUICK-START GUIDE</li>
<span style="color: #ff00ff; font-weight: bold;">RULES</span>
<li>HISTORY</li>
<li>SETTING</li>
<li>SPECIES</li>
<ol>
<li>LIVING</li>
<li>DECEASED</li>
<li>PRUGATORIC</li>
</ol>
</ol>
<h1>IN-DEPTH CONTENT</h1>
<ol>
<li>FAQ</li>
<li>SUBPLOTS</li>
<ol>
<li>SUBPLOT 001</li>
<li>SUBPLOT 002</li>
<li>SUBPLOT 003</li>
</ol>
<li>OFFICIAL SERVER FACTIONS</li>
<li>MEMBER-CREATED FACTIONS</li>
</ol>
</div>
<div class="page_content">
<div class="page_text" id="top">
<h1>lore questions</h1>
<div class="page_em"><u>A NOTE</u> This world- the world of <u style="color: #4fecc8; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 7px; font-family: 'work sans', Arial, sans-serif;">STICTION</u>- isn't just the project and product of
the staff team. We want you to feel that you can contribute to this world! To that end, these are all questions that guests and members have asked in our Discord. Questions are either answered according to existing lore, or (in cases where the
staff team hasn't thought of a situation or scenario) are talked out with members to come to a satisfying answer. This page is updated regularly, so make sure you keep an eye on it!
<p>
It's probably easiest to explore this page using the <b>CRTL+F</b> function, especially if you have specific questions!</div>
<h2>quick links</h2>
<faqentry id="quick links">
<ol>
<li><u>world-building</u></li>
<li><u>subplots</u></li>
<ol>
<li><u>crossed wires subplot</u></li>
<li><u>live for the applause subplot</u></li>
<li><u>blood and chocolate subplot</u></li>
</ol>
<li><u>species-specific</u>
<ol>
<li><u>general abilities</u></li>
<li><u>witches</u></li>
<li><u>shifters</u></li>
<li><u>vampires</u></li>
<li><u>reapers</u></li>
<li><u>ghosts</u></li>
<li><u>phoenixes</u></li>
<li><u>familiars</u></li>
<li><u>androids</u></li>
</ol>
</ol>
</faqentry>
<a name="section"> </a>
<Br><br>
<h2>world-building</h2>
<h3>context clues</h3>
Before you get started exploring this new world, it’s helpful to keep in mind a few things for context! (It might even help you answer your own questions, who knows?) The first bit of info you’ll need is that electricity and all other forms of energy
are obsolete; instead, the world runs on magic energy. That leads into point two, which is that supernatural, magic creatures are no longer monsters under the bed, or creatures in the shadow; they live open, public lives.<br><br> Since
this is a cyberpunk site, it stands to reason that technology is wildly more advanced than what we have now. It’s no so advanced that interstellar travel exists, but it’s so much farther ahead that paper (and privacy, in a lot of ways) is a thing
of the past. Every person on the planet is in some way connected to the Global Communications Lattice (or GCL) for short, and everything on the planet runs through it. As far as specific pieces of technology go, that’s largely up to you, your
ideas, and genre standards.<br>
<Br> It never hurts to ask an admin or run an idea by us before executing an idea, though!
<button class="accordion"><h3>What's the primary language spoken in City 0023? What about the rest of the world?</h3></button>
<div class="panel">English has become the primary language of most of the world, but thanks to the ease of information access, every language (even dead languages) can be learned now! Linguistic diversity not only still exists in this world, but is flourishing;
most people can claim some form of bilingualism. English, French, and Chinese are the top three languages spoken in City 0023.</div>
<br>
<Br>
<u>Back to Top</u>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
To answer your original question, as you discovered, as long as that .panel div has top and bottom padding, it will have an intrinsic minimum height which is why it wasn't closing all the way.
The easiest way I can think of to achieve the desired result without changing too much of your existing code is to nest the text inside a div that is a child of .panel and move the padding property (and optionally the line-height property as well) to the nested element (which I called .panel__content -- you can call it whatever you want).
div.panel {
margin:10px 30px 20px 30px;
background:rgba(0,0,0,0.3);
display:block;
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
.panel__content {
padding:40px;
line-height: 170%;
}
<div class="panel">
<div class="panel__content">English has become the primary language of most of the world, but thanks to the ease of information access, every language (even dead languages) can be learned now! Linguistic diversity not only still exists in this world, but is flourishing; most people can claim some form of bilingualism. English, French, and Chinese are the top three languages spoken in City 0023.</div>
</div>
Working JSFidddle example
Some side notes:
I would also highly recommend that you validate your HTML and CSS, as you have a number of validation errors currently. Best way to do that is to paste your code into W3C's online validators:
HTML Validator:
https://validator.w3.org/#validate_by_input
CSS Validator:
https://jigsaw.w3.org/css-validator/#validate_by_input
You might not need to add div to your .panel selector to achieve the same result. All things being equal, it's a best practice to have selectors be as short as possible.
You might not need to set .panel to display:block; as div's have this property value by default.
Try adding
box-sizing: border-box;
On your panel. This should make it so the padding is a part of height. You may have to adjust other values if that shifts things slightly.
Otherwise, you could set padding top and bottom to 0 when closed and transition those values as well, when collapsing.
max-height property overrides the height property but the padding top and bottom value will added to the height when css is getting compiled and value of height well be 80px
so set the padding to
div.panel { padding: 0 40px }
and change your script to
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
panel.style.paddingTop = 0;
panel.style.paddingBottom = 0
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
panel.style.paddingTop = null;
panel.style.paddingBottom = null
}
})
}
Related
I have a HTML and CSS code, and it works fine on Chrome. However, on Firefox, the behavior is different.
button#groupToggle {
background: 0 0;
border: 1px solid #e6e6ed;
color: #222;
float: none;
margin: 0 0 0 6px;
min-width: 200px;
padding: 8px 10px;
position: relative;
text-align: left;
cursor: pointer;
}
button#groupToggle::after {
background: #FFF;
border: 1px solid #e6e6ed;
color: #f8971d;
content: '>';
display: inline-block;
font: 900 12px/2.1 'Font Awesome 5 Free';
height: calc(100% + 1px);
left: 100%;
position: absolute;
text-align: center;
top: -1px;
width: 2em;
cursor: pointer;
border: ;
}
<button id="groupToggle">
<span>All selected</span>
</button>
After the All Selected, there is a button that is created through pseudo CSS (after). It can be clicked when hovering on Chrome but not on Firefox. Any thoughts?
Firefox version: 64.0
Link: https://codepen.io/anon/pen/zymvPj (Please use Firefox to test it).
There actually is no way to make it behave the same way as it does in Chrome. :after and :before are not treated as DOM elements by Firefox. You can however, cheat it a little bit. Changing behave for all browsers. That is my proposition of solution to look the same and behave as you would like it to do.
button#groupToggle {
background: 0 0;
border: 1px solid #e6e6ed;
color: #222;
float: none;
margin: 0 0 0 6px;
min-width: 224px;
/* increased by 24px (after width) */
padding: 8px 10px;
position: relative;
text-align: left;
cursor: pointer;
z-index: 0;
}
button#groupToggle::after {
background: #FFF;
border: 1px solid #e6e6ed;
color: #f8971d;
content: '>';
display: inline-block;
font: 900 12px/2.1 'Font Awesome 5 Free';
height: calc(100% + 1px);
position: absolute;
text-align: center;
top: -1px;
width: 2em;
position: absolute;
cursor: pointer;
border: ;
right: -1px;
/* -1px to neutralize border */
}
/* ONLY TO SHOW IT WORKING */
button#groupToggle:focus {
outline: red solid 10px;
-moz-outline: red solid 10px
}
<button id="groupToggle">
<span>All selected</span>
</button>
Font-Awesome 5 - Pseudo-elements
Requirements for Free Solid Version
Have this in the <head> tag:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
In your stylesheet:
.icon::after {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.arrow::after {
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
The content property needs Unicode not >
Those two classes names are arbitrary but be sure that they are on the same tag:
<button class='icon arrow'></button>
Absolute Positioning
Font-Awesome (or lack thereof) wasn't the problem, but I had to address the elephant in the room. Anyhow, left:100% pushed the part out of the button's border and looks as if Firefox treats the pseudo-element like it doesn't belong to the button, while apparently Chrome remembers. The solution is simply: remove left:100% and add right:0
Demo
button#groupToggle {
background: 0 0;
border: 1px solid #e6e6ed;
color: #222;
float: none;
margin: 0 0 0 6px;
min-width: 200px;
padding: 8px 10px;
position: relative;
text-align: left;
cursor: pointer;
}
.icon::after {
background: #FFF;
border: 1px solid #e6e6ed;
color: #f8971d;
font-size: 12px;
line-height: 2.7;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
height: calc(100% + 1px);
right: 0;
position: absolute;
text-align: center;
top: -1px;
width: 2em;
cursor: pointer;
}
button#groupToggle::after {
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<button id="groupToggle" class='icon'>
<span>All selected</span>
</button>
I would like to know how to make menu button fixed at page top. I need it to be available whenever page scroll down or up. On click; menu should slide down. Thank you to everyone who will answer and sorry for my bad english. PS Even if in this platform the menu is not shown well, in my website it works fine, just is stuck only on the top left corner and doesn't move with the page
$(document).ready(function() {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function() {
$(".menu").slideToggle("slow", function() {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function() {
$(".menu").slideToggle("slow", function() {
$(".cross").hide();
$(".hamburger").show();
});
});
});
header {
width: 100%;
background: #ffffff;
height: 0px;
line-height: 0px;
border-bottom: 0px solid #dddddd;
}
.hamburger {
background: none;
position: absolute;
top: 0;
line-height: 45px;
padding: 5px 15px 0px 15px;
color: #ffffff;
border: 0;
font-size: 2.0em;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.cross {
background: none;
position: absolute;
top: 0px;
padding: 5px 15px 0px 15px;
color: #ffffffff;
border: 0;
font-size: 4em;
line-height: 55px;
font-weight: bold;
cursor: pointer;
outline: none;
z-index: 10000000000000;
}
.menu {
z-index: 1000000;
font-weight: bold;
font-size: 0.8em;
width: max(20%, max-content);
background: #666;
position: absolute;
text-align: center;
font-size: 10px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: block;
padding: 15px 0 15px 0;
}
.menu li:hover {
display: block;
background: #666;
padding: 15px 0 15px 0;
border-bottom: #666 10px solid;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: #666;
letter-spacing: 5px;
text-transform: uppercase;
font: 13px "Lato", sans-serif;
color: #111;
text-align: center
}
.menu ul li a:hover {
color: #666;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 5px;
text-transform: uppercase;
font: 13px "Lato", sans-serif;
text-align: center;
}
.menu a:hover {
text-decoration: none;
color: black;
text-transform: uppercase;
letter-spacing: 5px;
text-transform: uppercase;
font: 15px "Lato", sans-serif;
text-align: center
}
.glyphicon-home {
color: black;
font-size: 1.5em;
margin-top: 5px;
margin: 0 auto;
}
<header>
<button class="hamburger">☰</button>
<div class="menu">
<ul>
<li><button class="cross">˟</button></li>
<a href="#g1">
<li>Link 1</li>
</a>
<a href="#g2">
<li>link 2</li>
</a>
<a href="#g3">
<li>link 3</li>
</a>
<a href="#g3">
<li>link4</li>
</a>
</ul>
</div>
</header>
Your code need to rebuild. You have a lot of code with no need. HTML Structure is not correct.
As #eric mentioned. you should use fixed position.
I made some changes to your code. Check it out at:
header {
background: red;
height: 1000px;
}
.menu {
position: fixed;
top: 10px;
left: 10px;
z-index: 999999;
}
.menu button {
width: 100%;
border: none;
border-radius: 0;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 18px;
cursor: pointer;
padding: 5px 15px;
}
.menu button:hover {
background: #fff;
color: black;
}
.menu ul {
font-weight: bold;
font-size: 0.8em;
background: rgba(0,0,0,.5);
margin: 0;
padding: 0;
list-style: none;
display: none;
}
.menu ul li a {
display: block;
letter-spacing: 5px;
text-transform: uppercase;
font: 13px "Lato", sans-serif;
color: white;
text-decoration: none;
padding: 15px 5px;
}
.menu ul li a:hover {
background: white;
color: black;
text-decoration: none;
}
https://codepen.io/anon/pen/pKyNEJ
You need to fix its position.
position: fixed;
HTML
<div class="NavAlignLeft">Site Name</div>
<div class="NavAlignRight">
<!-- Change this to an include later -->
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<!-- Video test -->
<div id="video_overlays">
<div class="abovethefold">
<h1 class="blog-title"><?php bloginfo( 'name' ); ?></h1>
<?php $description = get_bloginfo( 'description', 'display' ); ?>
<?php if($description) { ?><p class="blog-description"><?php echo $description ?></p><?php } ?>
<p class="button">
<a class="blue-button" href="#cta">Call to Action</a></p>
</div></div>
<div class="homepage-hero-module">
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/MP4/Busy-People.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/WEBM/Busy-People.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
<img src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshot/Busy-People.jpg" title="Your browser does not support the <video> tag">
</video>
<div class="poster hidden">
<img src="http://scott.ewarena.com//blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshots/Busy-People.jpg" alt="">
</div>
</div>
</div></div>
CSS:
body {
background-color: #e2e2e2;
margin: 0px;
}
h1, .h1,
h2, .h2,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: 'Vollkorn', serif;
font-style: oblique;
font-weight: normal;
color: #2e2e2e;
}
h3, .h3 {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 30px;
color: #fff;
}
.NavAlignLeft {
font-family: 'Vollkorn', serif;
/*font-style: oblique;*/
font-weight: bold;
font-size: 22px;
color: #fff;
float: left;
padding-left: 40px;
}
.NavAlignLeft:hover {
font-family: 'Vollkorn', serif;
text-decoration: none;
}
.NavAlignRight {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #fff;
float: right;
padding-right: 40px;
}
.NavAlignLeft, .NavAlignRight {
/*{ width: 50%; Commenting this out made the nav align completely to the right.*/
display: inline-block;
}
a, .a,
a:visited, .a:visited,
a:active, .a:active {
font-family: 'Vollkorn';
font-style: none; color: #e2e2e2; text-decoration: none;
}
a:hover, .a:hover {
font-family: 'Vollkorn';
font-style: none; color: #fff; text-decoration: none;
}
/*
* Override Bootstrap's default container.
*/
/*#media (min-width: 1200px) {
.container {
width: 100%; padding: 0; margin: 0; vertical-align: middle;
}
} .container2 { width: 100%; padding: 0; margin: 0; }
Nothing changed */
/*
* Masthead for nav
*/
#blog-masthead {
background-color: #2e2e2e;
height: 40px;
width: 100%;
line-height: 40px;
/*z-index: 2;
/*vertical-align: middle;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing Changed */
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
border-bottom: 1px solid #1a1a1a;
}
.abovethefold {
background-color: transparent;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
/*height: 250px;
width: 100%;
/*padding-top: 100px;*/
/*vertical-align: middle;
justify-content:center;
align-content:center;
}
.overlay {
background:#2e2e2e;
opacity:40%;
height: 250px;
width: 100%Nothing changed.*/
}
/* Nav links */
.blog-nav-item {
/*position: relative;
display: inline-block;
padding: 5px;
color: #2e2e2e; nothing changed*/
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
/*position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent; Nothing Changed*/
}
.menu-menu-1-container {
/*width: 100%;
vertical-align: middle;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing changed*/}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 0px;
margin-bottom: 0;
line-height: 80px;
margin-top: 100px;
font-size: 60px;
text-align:center;
font-weight: normal;
color: #fff;
}
.blog-description {
font-size: 30px;
font-style: 'Open Sans';
font-weight: bold;
text-align: center;
color: #2e2e2e;
}
.blog-main {
font-size: 18px;
line-height: 1.5; nothing changed
}
/* Buttons */
.green-button,.green-button:link,.green-button:visited,.blue-button,.blue-button:link,.red-button,.red-button:link,.purple-button,.purple-button:link,.teal-button,.teal-button:link,.orange-button,.orange-button:link,.grey-button,.grey-button:link,.grey-button:visited,.lt-grey-button,.lt-grey-button:link,.lt-grey-button:visited,.shop_table .actions .button,.oldernewer a:link,.oldernewer a:visited,.woocommerce-message .button,#place_order,html body div .quiz-submit, input.course-start {
display: block;
border: 0;
border-radius:1em;
-webkit-border-radius:border-radius:.8em;
text-align: center;
font-size: 20px !important;
padding: 10px 20px;
width: 180px;
}
p.button {
text-align: center;
}
p.button:hover {
text-align: center;
text-decoration: none;
}
p.button a {
margin:0 auto;
font-family: 'Vollkorn', serif;
font-style: none;
text-decoration: none;
}
.blue-button,.blue-button:link,.blue-button:visited {
background: #2f75c5;
color: #f8f8f8 !important;
text-decoration: none;
}
.blue-button:hover {
background: #3584de;
cursor: pointer;
text-decoration: none;
}
.blue-button:active {
background: #2966ab;
font-style: none;}
/* Sidebar modules for boxing content */
/* Sidebars arent being used
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
*/
/* Pagination */
.pager {
/*margin-bottom: 60px;
text-align: left;nothing changed*/
}
.pager > li > a {
/* width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 0px;
list-style: none; nothing changed*/
}
/*
* Blog posts
*/
.blog-post {
margin:50px 50px 0;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px; color: #2e2e2e;
}
.subtitle {
font-size: 1.2em;
font-family: 'Vollkorn';
color: #2e2e2e;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #2e2e2e;
border-top: 1px solid #1a1a1a;
-webkit-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
}
.blog-footer p:last-child {
margin-bottom: 0;
}
/*** lyrathemes - custom styling ***/
.page_item {
list-style: none;
font-size: 22px;
text-decoration: none;
}
.page_item:hover {
list-style: none;
text-decoration: none;
}
ul.blog-nav {
/*list-style: none;*/
}
/* Nav links */
.menu-item a{
position: relative;
/*display: inline-block; keep this commented out - moved navigation vertically.*/
padding: 10px;
color: #e2e2e2;
}
.menu-item a:hover,
.menu-item a:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.menu-item.current-menu-item a{
color: #fff;
}
.menu-item.current-menu-item a:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
/*content: " ";*/
/* border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;*/
-webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
}
/*Not using side bars
.sidebar-module ul {
list-style: none;
padding-left: 0;
}*/
/* Video CSS */
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
width: auto;
height: 400px;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: absolute;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
/*background: #000;*/
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: absolute;
}
.video-container .filter {
/*z-index: 100;*/
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.video-container video {
position: absolute;
/*z-index: 0;*/
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
#video_overlays {
position:absolute;
float:left;
width:100%;
height:400px%;
background-color:transparent;
z-index:1;
}
/* Content Table Styles */
#green-table {
background-color: #ebf2e6;
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin: auto;
margin-top:30px;
margin-bottom: 30px;
border: 1px solid #d6e8c5;
border-radius:.8em;
}
#dark-table {
background-color: #2e2e2e;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#dark-narrow-table {
background-color: #2e2e2e;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
margin: auto;
border-radius:.8em;
}
/*Heading Styles*/
#light-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
#green-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-narrow-table-head-style{
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
/*Content Paragraph Styles*/
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
#dark-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#dark-narrow-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#green-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
/* Hamburger Test */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2e2e2e;
}
/* Float the list items side by side */
ul.topnav li {float: left;
height: 40px;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #e2e2e2;
text-align: center;
padding: 0px 10px 0px 0px;
text-decoration: none;
transition: 0.3s;
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #e2e2e2;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #3b3b3b;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
/* Hamburger mobile test */
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* Fixing Mobile Div Problem */
#media only screen and (max-device-width: 680px) {
#green-table {
width: 95%;
}
#dark-narrow-table {
width: 95%;
}
.NavAlignRight {
padding-right: 2px;
}
.NavAlignLeft {
padding-left: 2px;
JS:
//jQuery is required to run this code
$( document ).ready(function() {
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
function scaleVideoContainer() {
var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;
console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width');
$(this).width(windowWidth);
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
So it loooks absolutely fine when it's displayed on my website http://scott.ewarena.com/blog but when viewed on a mobile device there's a gap along the top, underneath the top bar, before the video, that shouldn't be there.
I can't find out what the issue is at all, I've been trying for two days.
Sorry my code is so clunky. I'm new at this and aware it needs cleaning up a bit.
Any help will be MUCH appreciated!
Thanks!
Scott
Having looked at your code in Chrome Dev Tools I noticed that you have the following defined in your style-sheet:
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
If you remove bottom: 0; you wont have this problem!
Basically, you're forcing the video to be at the bottom most point in it's container, creating a gap when the view-port is smart-phone sized.
I need my div to shift to and fro when clicked, like only one div should show on load and the other should not be visible and when clicked should come into view and vice versa , any kind of transition, i dont wish to use slick carousel, don't know where i went wrong cant figure out why even the inline block doesn't work.
function step(n) {
if (n == 1) {
$(".agever").animate({
"left": "-300px"
}, "slow");
} else if (n == 2) {
$(".contever").animate({
"right": "300px"
}, "slow");
}
}
.light {
background: url(images/background.jpg) no-repeat;
background-size: 100%;
}
img#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#import url(http://fonts.googleapis.com/css?family=Raleway);
body {
margin: 0px;
}
.footer {
float: left;
background-color: #0f0f0e;
color: #fff;
text-align: center;
padding: 20px 0;
bottom: 0px;
top: 125px;
width: 100%;
position: relative;
opacity: .7;
bottom: 0;
}
.agever {
position: relative;
text-align: center;
background-color: rgba(252, 251, 227, 0.1);
width: 800px;
height: 325px;
border: 2px solid #ffffff;
margin-left: 100px;
margin-bottom: 250px;
top: 150px;
}
.agetitle {
color: #a88d2e;
color: rgb(168, 141, 46);
background-color: #000000;
background-color: rgba(0, 0, 0, 0);
font-family: Montserrat;
font-size: 18px;
line-height: 28.8px;
vertical-align: baseline;
letter-spacing: normal;
word-spacing: 0px;
font-weight: bolder;
font-style: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
text-align: center;
text-indent: 0px;
padding-top: 40px;
}
.policy,
.policy a {
text-decoration: none;
color: #9b9b9b;
color: rgb(155, 155, 155);
background-color: #000000;
background-color: rgba(0, 0, 0, 0);
font-family (stack): Montserrat;
font-size: 13px;
line-height: 28.8px;
vertical-align: baseline;
letter-spacing: normal;
word-spacing: 0px;
font-weight: bolder;
font-style: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
text-align: center;
text-indent: 0px;
}
.yes a {
text-decoration: none;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 21px;
vertical-align: baseline;
letter-spacing: 0.28px;
word-spacing: 0px;
font-style: normal;
font-variant: normal;
text-transform: uppercase;
text-align: center;
text-indent: 0px;
}
.no a {
text-decoration: none;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 21px;
vertical-align: baseline;
letter-spacing: 0.28px;
word-spacing: 0px;
font-style: normal;
font-variant: normal;
text-transform: uppercase;
text-align: center;
text-indent: 0px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 30px;
text-align: center;
font-weight: bolder;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 15px;
text-align: center;
font-weight: bolder;
display: inline-block;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
}
.button5 {
background-color: #2b2b2b;
color: #ffffff;
border: 2px solid #555555;
}
.button5:hover {
background-color: #555555;
color: white;
}
.contever {
position: relative;
background-color: rgba(252, 251, 227, 0.1);
width: 950px;
height: 625px;
border: 2px solid #ffffff;
margin-left: 25px;
margin-bottom: 250px;
top: 50px;
overflow-y: scroll;
}
::-webkit-scrollbar {
width: 18px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
}
.tandpcontent {
color: #f6f5d8;
font-family: Montserrat font-size: 16px text-align: left;
padding-left: 15px;
padding-right: 15px;
line-height: 19.8px
}
.tandptitle {
color: #a88d2e;
color: rgb(168, 141, 46);
background-color: #000000;
background-color: rgba(0, 0, 0, 0);
font-family: Montserrat;
font-size: 30px;
line-height: 28.8px;
vertical-align: baseline;
letter-spacing: normal;
font-weight: bolder;
text-decoration: none;
text-align: center;
text-indent: 0px;
padding-top: 40px;
text-align: center;
}
.close-icon {
position: relative;
top: 30px;
left: 955px;
display: block;
box-sizing: border-box;
width: 40px;
height: 40px;
border-width: 6px;
border-style: solid;
border-color: gray;
border-radius: 100%;
background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%, white 56%, transparent 56%, transparent 100%);
background-color: gray;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
#tandpchange {
cursor: pointer;
}
#containblockd {
display: inline-block;
overflow: hidden;
}
#tandpmaster {
display: hidden;
overflow: hidden;
float: left;
}
agemaster {
display: inline-block;
overflow: hidden;
float: left;
}
<div id="containblockd">
<div id="agemaster">
<div class="agever">
<p class="agetitle">
YOU MUST BE OF LEGAL DRINKING AGE IN THE COUNTRY IN WHICH YOU ARE ACCESSING THIS SITE
</p>
<p class="yes">
<a href="main.html">
<button class="button button5">YES I AM OF LEGAL DRINKING AGE</button>
</a>
</p>
<p class="no">
<a href="https://www.google.co.in/search?site=&source=hp&q=kingspirits.net&oq=kingspirits.net&gs_l=hp.3...518.518.0.1500.2.2.0.0.0.0.155.262.0j2.2.0....0...1c.1.64.hp..0.0.0.0.ZgyZZmdP464">
<button class="button1 button5">NO,I AM NOT OF LEGAL DRINKING AGE</button>
</a>
</p>
<p class="policy">
By entering this site you agree to our <a title="Law" onclick=" step(1)" id="tandpchange">Terms & Privacy Policy.</a>
</p>
</div>
</div>
<div id="tandpmaster">
<div class="contever">
<p class="tandptitle">
TERMS & PRIVACY POLICY
</p>
<p class="tandpcontent">
some content.....
</p>
</div>
</div>
Animate by itself doesn't show or hide elements.
So you should add the hiding and showing logic in the complete function, as follows, by example (or using animation parameters in show and hide)
function step(n) {
if (n == 1) {
$(".agever").animate({
"left": "-300px"
}, "slow", function(){
$(".agever").hide();
$(".contever").show();
});
} else if (n == 2) {
$(".contever").animate({
"right": "300px"
}, "slow",function(){
$(".agever").show();
$(".contever").hide();
});
}
}
Moreover you should also handle the positions of your DIVs after they have been shown, hidden and shown again as the DIVs will return in the position reached after each animation.
I need the sidebar to not go over the footer nav. I can't figure out how to edit the css for this. Here's a preview, with html and css. So what I'm looking for is a "collision" off the footer border-top so the sidebar can interact with it.
http://codepen.io/TheGamingHideout/pen/reayx
HTML:
<html>
<head>
<title>Home - POG</title>
<link rel="shortcut icon" href="http://www.thegaminghideout.com/pog/favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- This Template is a WiP - Please report any bugs to the administrative team at The Gaming Hideout. Thank you. All rights reserved. -->
</head>
<body>
<div id="wrap">
<div id="header">
<h1><img src="http://www.thegaminghideout.com/pog/VexIMG/header.png" alt="Possessed Gaming" width="760" height="60"></h1>
</div>
<div id="navigation">
<div class="navlinks">
<div id="output2">
</div>
</div>
<script src="nav.js"></script>
</div>
<div id="buttons">
<img src="http://www.thegaminghideout.com/pog/VexIMG/donate.png">
</div>
<div id="body">
<center>
<h2>Welcome to Possessed Gaming DarkRP!</h2>
<h4>Owned by PossessedGaming</h4>
</center>
<p>Thanks for choosing our GMod server! You are currently playing DarkRP on PossessedGaming. Make sure to read and follow the rules below!</p>
<br>
<h3>Rules</h3>
<ul>
<li>Do NOT RDM</li>
<li>NLR 3 Minutes!</li>
<li>Respect Staff</li>
<li>Do NOT spam chat or mic</li>
<li>Have Fun!</li>
</ul>
<p>Disobeying these rules or finding loopholes around them can and will result in punishments including kicks, bans, mutes, weapon strips, and jails.</p>
<br>
<p>Click here to apply for staff!</p>
<div id="latest">
<center>
<img src="http://www.thegaminghideout.com/pog/VexIMG/Index/latest.png">
<p id="output1"></p>
<script src="latest.js"></script></center>
</div>
</div>
<div id="footer">
<div id="copyright">
Copyright © The Gaming Hideout
<br>We own no rights on any game on this site unless otherwise noted.
<br>All Rights Reserved.
</div>
<div id="footnav">
<script src="footnav.js"></script>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
body {
background: url(http://www.thegaminghideout.com/pog/VexIMG/bg.png);
background-color: black;
background-size: 100%;
background-repeat: no-repeat;
font-size: 12px;
color: #666666;
}
#font-face {
font-family: 'karmatic_arcaderegular';
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot');
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff2') format('woff2'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff') format('woff'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.ttf') format('truetype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.svg#karmatic_arcaderegular') format('svg');
font-weight: normal;
font-style: normal;
}
p, h1, h2, h3, h4, h5, h6, caption, text, font, li, ul {
color: white;
}
#wrap {
width: 760px;
margin: auto;
overflow: hidden;
}
#header {
height: 60px;
width: auto;
background: #db6d16
url(VexIMG/header.png);
}
#navigation {
width: 760px;
height: 35px;
position: absolute;
border-bottom: 2px solid #000000;
background: red;
padding: 0px;
}
#navigation .padding {
padding: 2px;
}
#navigation .navlinks {
position: absolute;
top: 1px; left: 0px;
}
#navigation .navlinks ul {
margin: 0px;
padding: 0px;
text-align: center;
list-style-type: none;
width: 760px;
height: 35px;
}
#navigation .navlinks li {
position: relative;
top: 5px;
margin: 0px 5px 0px 5px;
list-style-type: none;
display: inline;
}
#navigation .navlinks li a {
color: #000000;
padding: 5px 0px 9px 0px;
text-decoration: none;
font-size: 18px;
font-family: karmatic_arcaderegular;
padding: 5px 0px 9px 0px;
}
#navigation .navlinks li a:hover {
margin: 0px;
color: #ffffff;
background: red;
text-decoration: underline;
}
#buttons {
padding-bottom: 2000px;
margin-bottom: -2000px;
width: 155px;
border-left: 2px solid #FFA500;
border-right: 2px solid #FFA500;
float: right;
font-family: Terminal, Arial, Times New Roman;
background: linear-gradient(#700000, #250000);
}
#latest {
border: 1px ridge #FFA500;
width: 300px;
height: auto;
background: linear-gradient(#000000, #252525, #000000);
clear: left;
}
#latest p {
font-family: Times New Roman;
}
#body {
padding-top: 50px;
width: 600px;
font-family: Arial, Verdana, Terminal;
font-size: 14px;
}
#body .secret img {
width: 150px;
height: 100px;
border: 2px solid black;
}
#body .game {
padding: 3px 3px 10px 3px;
}
#body .game img {
align: center;
float: left;
width: 175px;
height: 101px;
border: 2px ridge #ff0000;
}
#body .game caption {
padding-left: 1px;
}
#body .space {
padding-top: 10px;
padding-bottom: 10px;
border-top: 4px ridge red;
border-bottom: 4px ridge red;
}
#body .game caption {
margin-top: 2px;
float: right;
font-family: Terminal, Arial, Verdana, San-Serif;
font-size: 12px;
color: #000000;
border-bottom: 2px dashed #e9e9e9;
}
#body .game a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#body .game a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer {
width: 730px;
height: 60px;
font-family: Tahoma, Arial, Terminal, San-Serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}
#footer li {
padding: 0px 2px 0px 2px;
float: right;
display: inline;
text-align: left;
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size:; 10px;
}
#footer a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#footer a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer #footnav {
display: inline;
width: 310px;
float: right;
text-align: left;
position: relative;
bottom: 65px;
}
Adding position: relative to the wrapper and positioning #buttons with position: absolute is a way to fix this. Do keep in mind that you need to know the exact distance between the top and bottom of the #wrap and #buttons.
That said there are probably other solutions as well.
#wrap {
position: relative;
width: 760px;
margin: auto;
overflow: hidden;
}
#buttons {
position: absolute;
right: 0px;
top: 110px;
bottom: 95px;
width: 155px;
border-left: 2px solid #FFA500;
border-right: 2px solid #FFA500;
font-family: Terminal, Arial, Times New Roman;
background: linear-gradient(#700000, #250000);
}
use margin-bottom: -648px; padding-bottom: 648px; for #buttons instead of padding-bottom: 2000px; margin-bottom: -2000px; This will fix for your current view.But if you want it dynamic at every page you may need to use javascript to detect the screen height and determine the padding-bottom and margin-bottom.hope it will help you.
like this?
http://codepen.io/mmp1992/pen/bnrvw
#buttons {
height:645px;
}
and remove the padding and margin.