I'm trying to create a canvas on top of some text, how do I make it so that the canvas doesn't push away the text?
In my code I would like to make something fly from one side to the other in random size and place. I want the text in the middle but every time I add the canvas it pushes the text down to create space.
Here is the code:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 40) {
$(".woord").css({
"opacity": "0"
})
} else {
$(".woord").css({
"opacity": "1"
})
}
})
})
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: white;
background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #33D7FF);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 20px;
overflow: auto;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/*witte div*/
#div1 {
width: 100%;
height: 1000px;
margin-left: -10px;
margin-right: 220px;
padding: 50px, 50px, 50px, 50px;
background-color: white;
border-radius: 100px 100px 0px 0px;
}
#div1 h1 {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
#div1 p {
color: black;
font-family: lucida console, monospace;
font-size: 50px;
text-align: center;
}
h1 {
color: black;
font-family: lucida console, monospace;
font-size: 150px;
text-align: center;
margin-top: 300px;
}
.woord {
transition: 0.5s;
border: 0px;
height: 550px;
margin-left: -10px;
margin-bottom: -22px;
}
li {
font-size: 30px;
font-family: lucida console, monospace;
display: inline;
text-align: center;
}
a {
transition: ease-in-out .2s;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
border: 1px solid;
zoom: 1.1;
}
.nav {
border: 1px solid;
border-width: 1px;
height: 64px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
box-sizing: border-box;
width: 1000px;
margin-left: 220px;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woord">
<h1>website</h1>
<canvas id="canvas" width="200" height="100"></canvas>
</div>
<div id="div1">
<h1>main</h1>
<ul class="nav">
<li>Biografie</li>
<li>fotos</li>
<li>heuristiek</li>
<li>buienradar</li>
<li>Contact</li>
</ul>
<p>hoi</p>
<p>dit is mijn website <br /> over mijzelf </p>.
</div>
A possible solution is using position absolute, on the canvas itself.
canvas {
position: absolute;
}
Related
I have a row of overlapping cards in a row. When I move the mouse over a card, the card should be extended to the left so that the whole card is visible. Unfortunately, this effect changes the total width.
Question: What do I have to do so that the total width remains the same when hovering?
:root {
--slide-margin: 44px;
--slide-duration: 0.5s;
}
.w {
background-color: lightgray;
display: flex;
justify-content: center;
padding: 20px;
}
.w > div {
box-sizing: border-box;
padding: 10px;
width: 150px;
height: 150px;
margin-left: -75px;
transition: all var(--slide-duration) ease-out;
}
.w > div:hover{
margin-left: -75px;
margin-right: 75px;
background: black;
}
.w > div > span {
background: inherit;
background-clip: text;
color: transparent;
filter: invert(1) grayscale(1);
}
.a {
background-color: lightblue;
}
.b {
background-color: lightgreen;
}
.c {
background-color: brown;
}
.d {
background-color: purple;
}
<div class="w">
<div class="a"><span>A</span></div>
<div class="b"><span>B</span></div>
<div class="c"><span>C</span></div>
<div class="d"><span>D</span></div>
</div>
You can introduce a fake fifth div that shares the background-color with the container element, effectively covering the right half of div.d initially:
:root {
--slide-margin: 44px;
--slide-duration: 0.5s;
}
.w {
background-color: lightgray;
display: flex;
justify-content: center;
padding: 20px;
}
.w > div {
box-sizing: border-box;
padding: 10px;
width: 150px;
height: 150px;
margin-left: -75px;
transition: all var(--slide-duration) ease-out;
}
.w > div[class]:hover{
margin-left: -75px;
margin-right: 75px;
background: black;
}
.w > div[class]:hover ~ div[class] {
margin-right: 0;
}
.w > div > span {
background: inherit;
background-clip: text;
color: transparent;
filter: invert(1) grayscale(1);
}
.a {
background-color: lightblue;
}
.b {
background-color: lightgreen;
}
.c {
background-color: brown;
}
.d {
background-color: purple;
margin-right: 75px;
}
.w > div:not([class]) {
background-color: lightgray;
}
<div class="w">
<div class="a"><span>A</span></div>
<div class="b"><span>B</span></div>
<div class="c"><span>C</span></div>
<div class="d"><span>D</span></div>
<div></div>
</div>
Due to the nature of transitions, the container is still a little wobbly when quickly hovering through, but alot less than with your code.
I think that is what you need. I make boxes position:relative to use right, left.
Gave margin-left to all boxes except the first one.
.box:nth-child(1) ~ .box{
margin-left:-75px;
}
Because of using margin, container will take sum of widths of all boxes.
When hovering first box gave all other siblings right:-75px
.box:nth-child(1):hover ~ .box {
right: -75px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
background-color: bisque;
display: grid;
place-content: center;
}
:root {
--slide-margin: 44px;
--slide-duration: 0.5s;
}
.container {
background-color: lightgray;
display: flex;
justify-content: center;
overflow: hidden;
width: min-content;
}
.box {
box-sizing: border-box;
padding: 10px;
width: 150px;
height: 150px;
transition: all var(--slide-duration) ease-out;
position: relative;
right: 0;
}
.box:nth-child(1) ~ .box{
margin-left:-75px;
}
.box:hover{
background-color: black;
}
.box:nth-child(1):hover ~ .box {
right: -75px;
}
.box:nth-child(3):hover,
.box:nth-child(2):hover{
right: 75px;
}
.a {
background-color: lightblue;
}
.b {
background-color: lightgreen;
}
.c {
background-color: brown;
}
.d {
background-color: purple;
}
<div class="container">
<div class="a box"><span>A</span></div>
<div class="b box"><span>B</span></div>
<div class="c box"><span>C</span></div>
<div class="d box"><span>D</span></div>
</div>
You mean like this?? .
$(".a").mouseover(function(){
$(".a").css("margin-left", "-150px")
});
$(".b").mouseover(function(){
$(".a").css("margin-left", "-150px")
});
$(".c").mouseover(function(){
$(".a").css("margin-left", "-150px")
$(".b").css("margin-left", "-75px")
});
$(".d").mouseover(function(){
$(".a, .b, .c, .d").css("margin-left", "-75px")
});
$(".w").mouseout(function(){
$(".a, .b, .c, .d").css("margin-left", "-75px")
});
:root {
--slide-margin: 44px;
--slide-duration: 0.5s;
}
.w {
background-color: lightgray;
display: flex;
justify-content: center;
padding: 20px;
}
.w > div {
box-sizing: border-box;
padding: 10px;
width: 150px;
height: 150px;
margin-left: -75px;
transition: all var(--slide-duration) ease-out;
}
.a:hover{
margin-right: 75px;
background: black;
}
.b:hover{
margin-left: -75px;
margin-right: 75px;
background: black;
}
.c:hover{
margin-right: 75px;
background: black;
}
.d:hover{
background: black;
}
.w > div > span {
background: inherit;
background-clip: text;
color: transparent;
filter: invert(1) grayscale(1);
}
.a {
background-color: lightblue;
}
.b {
background-color: lightgreen;
}
.c {
background-color: brown;
}
.d {
background-color: purple;
}
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div class="w">
<div class="a"><span>A</span></div>
<div class="b"><span>B</span></div>
<div class="c"><span>C</span></div>
<div class="d"><span>D</span></div>
</div>
I am using GTM's "Custom HTML Tag" option with the my below code but it is giving me the following error when I try to publish it: Invalid HTML, CSS, or JavaScript found in template.
I've seen other threads where it looks like GTM doesn't support or recognize certain tag attributes. I have tested my code, and no error prompts show up in the console either. It is a standard bootstrap modal:
function myFunction() {
var copyText = document.getElementById("myInput");
navigator.clipboard.writeText(copyText.innerHTML);
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copied: " + copyText.innerHTML;
}
function outFunc() {
var testtip = document.getElementById("myTooltip");
testtip.innerHTML = "Copy";
}
$("#myModal").modal();
body {
font-family: 'Varela Round', sans-serif
}
.modal-login {
color: #636363;
max-width: 850px;
width: 100%;
margin: 30px auto;
background-image: none!important
}
.modal-login .modal-content {
padding: 20px;
min-height: 586px;
border-radius: 5px;
margin: 1rem;
background-color: #eaebeb;
background-image: url(https://media-services.dcm-inc.com/couponsites/static/resources/img/festival.png);
background-size: 100%;
background-repeat: no-repeat
}
.modal-login .modal-header {
border-bottom: none;
position: relative;
justify-content: center;
margin-top: 130px
}
.modal-login img {
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
width: 40%
}
.modal-login .form-group {
position: relative
}
.modal-login h4 {
text-align: center;
font-size: 20px;
width: 80%;
display: block;
margin-left: auto;
margin-right: auto
}
.modal-login i {
position: absolute;
left: 13px;
top: 11px;
font-size: 18px
}
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%
}
#media screen and (max-width:600px) {
.modal-login .form-control {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%
}
}
.modal-login .form-control:focus {
border-color: #fcda7b
}
.modal-login .btn,
.modal-login .form-control {
min-height: 40px;
border-radius: 30px
}
.modal-login .hint-text {
text-align: center;
padding-top: 10px
}
.modal-login .close {
position: absolute;
top: -5px;
right: -5px
}
.button,
.modal-login .btn {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%);
border: none;
line-height: normal
}
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%
}
#media screen and (max-width:600px) {
.modal-login .custom {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%
}
}
.modal-login .custom-social {
display: block;
margin-left: auto;
margin-right: auto;
width: 30%
}
.modal-login .btn:focus,
.modal-login .btn:hover {
opacity: .7
}
.trigger-btn {
display: inline-block;
margin: 100px auto
}
.contest-social {
padding: 10px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%
}
.modal-login .fa:hover {
opacity: .7
}
.modal-login .contest-social-facebook {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-twitter {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-youtube {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.modal-login .contest-social-instagram {
background: linear-gradient(90deg, #fcda7b 0, #fd5c88 100%)!important;
color: #fff
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.flexC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
-webkit-flex-flow: row wrap
}
.modal-title img {
margin: 1rem;
max-width: 100px;
border-radius: 10px;
box-shadow: 0 0 3px 3px #ddd
}
.modal-title p {
font-size: 20px;
font-weight: 500;
max-width: 300px;
color: #000
}
.ccme {
color: #fd5c88
}
.codelinkbox {
margin: 0;
position: relative;
text-align: center;
width: auto;
position: relative
}
.codeValue {
border: 2px dashed currentColor;
font-size: 28px;
height: 50px;
line-height: 48px;
padding: 0 15px;
border-right: none;
border-radius: 0;
display: inline-block;
white-space: nowrap;
cursor: pointer;
border-radius: 6px 0 0 6px!important;
font-weight: 700;
color: #000
}
.buttonBtn.copy {
background-color: currentColor;
cursor: pointer;
font-size: 16px;
height: 50px;
line-height: 42px;
margin: 0;
padding: 0 15px;
position: relative;
text-transform: capitalize;
overflow: hidden;
min-width: 0;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
border-radius: 0 6px 6px 0
}
.buttonBtn.copy:hover {
background: #6ba62c;
color: #fff
}
.copy span {
color: #fff
}
.m1 {
margin: 1rem auto
}
.txtC {
text-align: center
}
.buttonBtn {
position: relative;
cursor: pointer;
font-size: 15px;
left: 0;
top: 0;
margin: 0;
height: 54px;
min-width: 180px;
border: 0;
outline: 0;
padding: 0 15px;
border-radius: 10px;
line-height: 54px
}
.arrRight {
color: #fff;
font-weight: 700
}
.arrRight:after {
content: '\2192';
display: inline-block;
color: #fff
}
.emailIcon {
width: 24px;
max-width: 24px;
margin: 0 5px
}
.termsto {
margin: 3rem 0
}
.sendemail {
font-size: 13px;
margin: 10px 0
}
#media all and (max-width:540px) {
.modal-title {
text-align: center
}
.modal-login .modal-header {
margin-top: 40px
}
}
.testtip {
position: relative;
display: inline-block;
}
.testtip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 120%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.testtip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.testtip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<link href="https://fonts.googleapis.com/css?family=Roboto%7CVarela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-login border">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<div class="flexC">
<img src="https://res.cloudinary.com/csnetworkco/image/upload/c_scale,h_150,w_150/csnimages/Noon_568012.jpg" alt="Noon Discount Code" title="Noon Discount Code" width="150" height="150" loading="lazy">
<p>Up To 70% Off Sale + 10% Off Using Noon Coupon Code</p>
</div>
</div>
<div class="modal-body">
<div class="codelinkbox flexC m1">
<div id="myInput" class="codeValue">YB26</div>
<div class="testtip">
<button class="buttonBtn copy ccme" onclick="myFunction()" onmouseout="outFunc()"><span id="myTooltip">Copy</span></button>
</div>
</div>
</div>
<div class="row termsto">
<div class="col-sm-8">
<p><strong>Things to remember:</strong></p>
<ul>
<li>Don't forget to paste the code in the checkout during the purchase</li>
<li>Get 10% Off for New Customers & 5% Off for Returning Customers. </li>
<li>Code Usage: 2 times per customer.</li>
<li>Always contact our customer support team if there is any issues</li>
<li>You can always share the code</li>
</ul>
</div>
<div class="col-sm-4 txtC ">
<button class="buttonBtn ccme button" id=""><span class="arrRight">VISIT SITE </span></button>
</div>
</div>
</div>
</div>
</div>
</div>
I found what the issue was, in the img tag I was adding an attribute loading="lazy" due to which the invalid HTML CSS or JS error was being thrown
They really need to highlight what part of the code is the problem
I removed the above mentioned attribute and am now able to publish the tag
I'm trying to make an animated menu, I would like to do it with CSS, but if not possible also javascript or Jquery.
.nav {
text-align: right;
height: 100%;
width: 17%;
position: absolute;
box-shadow: -1px 4px 28px 0px rgba(0, 0, 0, 0.75);
background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
}
.menu {
margin: 0;
width: 100%;
height: 95%;
text-align: left;
overflow: auto;
background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
}
.menu a {
font-family: Georgia, "Times New Roman", serif;
text-shadow: 2px 2px 5px black;
line-height: 26px;
padding: 5px;
border-left: 4px solid;
margin: 0 0 0 0;
margin-top: 5%;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .1s;
transition: all .1s;
cursor: pointer;
white-space: nowrap;
display: -webkit-box;
-webkit-box-align: center;
align-items: center;
color: white;
}
/**** */
a:hover {
border-left: 5px solid #b93632;
color: #b93632;
}
span:hover {
color: yellow;
}
/**** */
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media screen and (max-width:800px),
screen and (max-height: 500px) {
.nav {
text-align: right;
height: 70px;
width: 100%;
line-height: 70px;
position: relative;
z-index: 1;
}
.menu {
text-align: center;
width: 100%;
display: none;
overflow: auto;
}
#toggle:checked+.menu {
display: block;
height: 400px;
}
}
<div class="nav">
<label for="toggle"><i class="fas fa-users"></i></label>
<input type="checkbox" id="toggle" />
<div class="menu" id="users">
<center><span>Utenti online: </span><span id="n_utenti"> 0</span></center>
<input type="text" id="cerca_utenti" onkeyup="Cerca()" placeholder="Cerca un utente">
<ul id="utenti_lista">
</ul>
</div>
</div>
I just can't get it to become animated, this is how it works, but it doesn't have ANIMATIONS, it has no transitions, how to do it?
I changed now, because CSS was not well understood. there is both the media quieres and the regular menu.
You can refer to the mdn documentation on css animation at https://developer.mozilla.org/en-US/docs/Web/CSS/transition.
In your case you cannot apply animation to display property, however you can add a animation to opacity, which practically looks like a fade-in/out animation.
This is the fiddle https://jsfiddle.net/e90dL586/ I've updated with opacity for you.
#toggle + .menu {
text-align: center;
width: 100%;
opacity: 0;
overflow: auto;
}
#toggle:checked + .menu {
opacity: 1;
transition: opacity 1s;
height:400px;
}
For more effects, refer the mdn docs.
The target is to close the sidebar menu when I click outside of it or when I click on one of the menu item. I've created the two working functions in Javascript to open and close the menu, clicking on the toggle:
<script>
function openNav() {
document.getElementById("#sideMenu").style.width = "250px";
}
function closeNav() {
document.getElementById("#sideMenu").style.width = "0";
}
function clickOutsite() {
TO-DO
}
function clickOnItemAndClose() {
TO-DO
}
</script>
<div class="header"></div>
<input type="checkbox" class="openSideMenu" id="openSideMenu">
<label for="openSideMenu" class="sideIconToggle" onclick="openNav()">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sideMenu">
<ul class="sideMenuInner">
<li class="active">Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
I've tried to create an overlay layer and create a function connected to it, but the result is not valid.
Could you help me, please? Thanks in advance
Edit: here there is a demo
https://codepen.io/Clara83/pen/PoPVMgN
The whole animation of hide/show is based off CSS so you just need to toggle the checked property of the checkbox <input type="checkbox" class="openSideMenu" id="openSideMenu">
To solve the problem of detecting click outside you can wrap the sidebar in a div and then use contains property of event object that gets emitted from the element being clicked
function hideSidebar() {
document.getElementById('openSideMenu').checked = false;
}
var sideIconToggle = document.getElementById('sidebarContainer');
document.addEventListener('click', function(event) {
if (!sidebarContainer.contains(event.target))
hideSidebar();
});
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: black;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sideMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: grey;
z-index: 1;
}
.sideMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid black;
}
.sideMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid black;
}
.sideMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sideMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sideMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sideIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sideIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
#sidenav-overlay {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(0, 0, 0, .1);
cursor: pointer;
z-index: 1;
}
<div class="header"></div>
<div id="sidebarContainer">
<input type="checkbox" class="openSideMenu" id="openSideMenu">
<label for="openSideMenu" class="sideIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sideMenu">
<ul class="sideMenuInner">
<li class="active" onclick="hideSidebar()">Item1</li>
<li onclick="hideSidebar()">Item2</li>
<li onclick="hideSidebar()">Item3</li>
</ul>
</div>
</div>
I had an issue with the blank space below the footer. I've managed to solve this by adding a jQuery sticky footer as the CSS methods doesn't work for me.
However, I do have a problem with main content of the webpage. If I adjust .bg-photo's height, it will affect how low or high the footer's placement will go.
Any content within .bg-photo will not affect the footer's placement at all.
I'm thinking it could be my HTML or CSS that's doing this sort of issue. Although, I'm not sure.
What I want is that the page automatically adjust to any screen's height and the user doesn't have to scroll down to view just the footer.
Here's the webpage:
http://planet.nu/dev/test/index.html
Here's the jsFiddle:
https://jsfiddle.net/mqfrnjaa/
And the codes if you need to view them right away.
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $(".footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
html, body {
height: 100%;
}
*{
margin: 0;
}
body {
background: #fff;
min-height: 600px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #393c3d;
line-height: 22px;
}
#fw_header {
margin: 0 auto;
position: relative;
width: 980px;
}
#fw_header ul {
list-style-type: none;
}
.forums #fw_header {
margin-bottom: 0;
}
#fw_header ul {
padding-left: 12px;
padding-top: 6px;
}
#fw_header li {
float: left;
padding: 0 3px;
}
#fw_header li a {
padding: 0 8px;
}
#fw_header li a:hover {
border-bottom: 5px solid #829AC6;
text-decoration: none;
}
#fw_header li a.active {
border-bottom: 5px solid #4E6CA3;
}
#fw_header ul.submenu li a.active,
#fw_header ul.subsubmenu li a.active {
border-bottom: 5px solid #829AC6;
}
#fw_header ul.submenu,
#fw_header ul.subsubmenu {
margin-top: 1em;
padding-top: 0;
}
#fw_header ul.submenu_usage {
padding-left: 32px;
}
#fw_header ul.submenu_plugins {
padding-left: 20px;
}
#fw_header ul.submenu_development {
padding-left: 23px;
}
#fw_header ul.submenu_extras {
padding-left: 14px;
}
#fw_header ul.submenu_testing {
padding-left: 480px;
}
#fw_header ul.submenu_styling {
padding-left: 80px;
}
#fw_header ul.subsubmenu {
padding-left: 120px;
}
#fw_header ul.submenu li,
#fw_header ul.subsubmenu li {
font-size: 80%;
}
#fw_header {
font-size: 16px;
}
#fw_header a {
color: #4E6CA3 !important;
}
#fw_header h1 {
border-bottom: medium none;
color: black;
font-size: 2em;
line-height: 1.45em;
margin-top: 32px;
vertical-align: middle;
}
#fw_header h1 img {
margin-top: -5px;
vertical-align: middle;
}
#fw_header h1 a {
color: black !important;
}
#fw_header h1 a:hover {
text-decoration: none;
}
#header_options {
position: absolute;
right: 150px;
top: -32px;
width: 495px;
}
#header_options .option {
float: left;
padding: 12px 0;
text-align: center;
width: 165px;
}
#header_options a:hover {
text-decoration: none;
}
#header_options .option:hover {
background-color: #F5F7FA;
}
#header_options div.option img {
margin-right: 7px;
vertical-align: middle;
}
#header_options .option table {
margin: 0 auto;
}
#header_options .option table td {} #header_options #options_search {
padding: 7px 0;
width: 495px;
}
#header_options #options_download {} #options_search input[type="text"] {
height: 20px;
width: 350px;
}
#header_download {
background: url("../images/dl_button_220.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 0;
text-align: center;
top: -8px;
width: 220px;
}
#header_donate {
background: url("../images/donate_button.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 220px;
text-align: center;
top: -8px;
width: 220px;
}
#header_download a,
#header_donate a {
color: white;
}
#header_download a:hover,
#header_donate a:hover {
text-decoration: none;
}
#dontate_wrapper {
background-color: #FCFCFC;
border: 1px dotted #A5A5A5;
color: #555555;
font-size: 0.8em;
margin: 0 0 1.5em;
padding: 5px;
text-align: center;
}
#header_advert {
background-color: white;
height: 200px;
overflow: visible;
position: absolute;
right: 0;
top: -32px;
width: 150px;
}
body .adpacks {} body .one .bsa_it_ad {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #999999;
margin: 0;
text-align: left;
}
body .one .bsa_it_ad:hover {
background-color: #F5F7FA;
color: black;
}
body .one .bsa_it_ad .bsa_it_i {
display: block;
float: none;
font-size: 11px !important;
margin: 0;
padding: 0;
text-align: center;
}
body .one .bsa_it_ad .bsa_it_d {
font-size: 11px !important;
}
body .one .bsa_it_ad .bsa_it_i img {
border: medium none;
padding: 0;
}
body .one .bsa_it_ad .bsa_it_t {
padding: 6px 0 0;
}
body .one .bsa_it_p {
display: none;
}
.one .bsa_it_ad {
color: #F5F7FA;
padding: 4px 0 0 !important;
}
body #bsap_aplink,
body #bsap_aplink:hover {
display: block;
font-size: 10px;
left: 104px;
position: absolute;
text-decoration: none;
top: 45px;
transform: rotate(90deg);
width: 100px;
}
.css_small {
font-size: 75%;
line-height: 1.45em;
}
.css_vsmall {
font-size: 65%;
line-height: 1.45em;
}
#dt_example #container {
margin: 64px auto 30px !important;
}
.header {
width: 100%;
background: rgba(255, 255, 255, 0.6);
color: #034e7c;
text-align: center;
padding: 20px 0;
height: 115px;
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D73000', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}
.header img.logo {
height: 105px;
}
.header ul.breadcrumb li a {
font-family: 'Open Sans';
font-size: 23px;
color: #4a4a4a
}
.header ul.log-in {
list-style-type: none;
display: inline;
float: right;
margin-top: 55px;
margin-right: 40px;
}
.header ul li {
display: inline;
color: red;
margin-right: 35px;
}
.header ul.log-in li,
.header ul.log-in li a {
display: inline;
font-size: 19px;
color: red;
text-decoration: none
}
.header .dateButton,
.dateButton {
width: 300px;
height: 45px;
background: #e63308;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e63308), color-stop(100%, #db3304));
background: -webkit-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -o-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -ms-linear-gradient(top, #e63308 0%, #db3304 100%);
background: linear-gradient(to bottom, #e63308 0%, #db3304 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e63308', endColorstr='#db3304', GradientType=0);
float: right;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-right: 70px;
text-align: center;
cursor: pointer;
margin-top: -8px;
}
.header .dateButton a,
.dateButton a {
height: 30px;
vertical-align: middle;
line-height: 45px;
font-weight: bold;
color: #f0f0f0;
font-size: 23px;
}
.header .dateButton img,
.dateButton img {
padding-right: 5px
}
.footer {
width: 100%;
background: #FFF;
text-align: center;
height: 40px;
}
.footer p {
color: #4a4a4a;
font-family: 'Open Sans', sans-serif;
padding: 30px 0;
}
.footer p a {
color: #9fcf64;
}
.navigation {
min-width: 1300px;
width: 100%;
border-top: solid 1px #d6d6d6;
border-bottom: solid 1px #d6d6d6;
height: 60px;
background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 10%, #ededed 100%);
}
.navigation ul.breadcrumb {
padding: 0px;
margin: 0;
margin-left: 50px;
margin-top: 15px;
margin-right: 0px;
width: 1000px;
}
.navigation ul li {
list-style-type: none;
}
.navigation ul li a {
color: #4a4a4a;
text-decoration: none;
font-weight: bold;
font-size: 23px;
float: left;
margin-right: 10px;
}
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 3px 0 3px 5.2px;
border-color: transparent transparent transparent #4a4a4a;
float: left;
margin-top: 8px;
margin-right: 10px;
}
.top-section {
height: 100px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #393c3d;
line-height: 22px;
}
.bg-photo{
background:url(http://planet.nu/dev/test/images/bg.jpg);
background-size: cover;
height: 75%;
text-align: center;
}
.bg-photo:before{
content: '';
display: inline-block;
vertical-align: middle;
margin-right: -0.25em;
}
.loginText{
font-size: 16px;
}
#createCampaignButton {
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
font-size: 18px;
/* font-weight: bold; */
color: #fff;
background: #8bbd3a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
table{
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.9);
}
h1{
color: #4a4a4a;
font-size: 48px;
}
table th{
color: #666666;
padding-top: 10px;
text-align: left;
padding-left: 15px;
}
table td {
padding-left: 15px;
}
table td input{
padding-left: 5px;
height: 30px;
font-size: 22px;
margin-bottom: 20px;
width: 100%;
}
tbody{
width: 95%;
display: table;
}
<div class="header">
<div class="top-section">
<img class="logo" src="http://planet.nu/dev/test/images/littleforest_logo.jpg">
</div>
</div>
<div class="bg-photo col-md-12 col-xs-12">
<div class="col-md-6 col-sm-9">
<h1 style="font-size: 35px; text-align:center; color:#FFF;margin:20px 0 0 0">
Welcome to LFi
</h1>
<p style="text-align:center; color: #FFF; font-size: 20px; padding: 28px 0 0 0;">Insight that drives web success</p>
<br>
<form method="post" action="/crawler/LoginServlet">
<table style="width: 40%; padding: 20px 30px; display: inline-block; vertical-align: middle; margin: 30px 0 0 0; background: rgba(255,255,255, 0.9);">
<tbody>
<tr>
<th>
User Name
</th>
</tr>
<tr>
<td>
<input type="text" name="username" class="textInput loginText" placeholder="User Name">
</td>
</tr>
<tr>
<th>
Password
</th>
</tr>
<tr>
<td>
<input type="password" name="password" value="" class="textInput loginText" placeholder="Password">
</td>
</tr>
</tbody>
</table>
<div>
<p class="submit">
<input type="submit" name="commit" class="button" id="createCampaignButton" value="Log in" style="width:260px; display: inline-block; vertical-align: middle; margin: 20px 0 0 0;">
</p>
</div>
</form>
</div>
</div>
<div class="footer col-md-12 col-xs-12">
<p>
Powered by Little Forest a tool that encourages continuous improvement towards web success.
</p>
</div>
What can come in handy in situation like this is css property vh.
Depends on which browsers you have to support, but to adjust to height of view port you can do height: 100vh or vmin.
More details on browser support: http://caniuse.com/#feat=viewport-units
You could achieve sticky-footer without any plugins. Here i did "sticky footer and header" only with css. One can add up more content under the form and get assured that the page stretches right down while content stays above the footer - here.
/**sticky-footer layout**/
body {
min-height: 500px;
}
.header,
#main,
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header {
height:120px !important;
overflow:hidden;
background:#ffffff !important;
position:relative;
z-index: 10;
padding:0 !important;
opacity:0.9;
}
.footer {
height:100px !important;
background:#ffffff !important;
overflow:hidden;
opacity:0.9;
padding:0 !important;
}
#main {
min-height:100%;
margin:-120px 0 -100px;
height:auto !important;
}
#main:after,
#main:before {
content:"";
display:block !important;
margin:0;
}
#main:before {
height:120px;
}
#main:after {
height:100px;
}
However, you might not like the fact that your bg container .bg-photo#main lays underneath header and footer (which i made opaque on purpose to demonstrate, how the blocks are positioned), thus cutting bits of your leaves background.
You would instinctively wish to transfer the background to an inner immediate div inside the main section. I've sketched this eventuality as well, however since it's uses vh units,
min-height: calc( 100vh - 220px);
it might not work in all browsers, so beware, i also used calc to subtract the header and the footer. I hope it'll work reliably for you.