Looking to create a site with 360 videos using a Vimeo or youtube player. Because the video is in the background it doesn't allow me to click and drag to use the 360 effects. Even when I don't place it in the background, that control doesn't seem to be working when the site is on fullscreen. Need to be able to overlay the video with some text and buttons.
body{
padding-bottom: 20px;
font-family: 'Helvetica';
font-size:16px;
}
.contact{
color:white;
}
.logo{
font-family:'times';
font-size:22px;
text-decoration: none;
}
.logo a{text-decoration: none;
color:black;
font-size:80px;}
html {
font: 0.75em/1.5 sans-serif;
background: #000;
}
.vimeo-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:0 ;
pointer-events: none;
overflow: hidden;
}
.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.instruct{
position: fixed;
bottom:4vh;
width: 100%;
text-align: center;
}
.menu{
position: fixed;
right:4vh;
font-weight:400;
font-family:'times';
font-size:20px;
width: 100%;
text-align: right;
}
#media screen and (min-width: 40em) {
.fixed {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
button{
padding:20px;
background-color:black;
opacity: .65;
color:white;
margin: 10px;
font-family: 'Helvetica';
font-weight: bold;
border:0px;
}
button:hover{
opacity: 1;
background-color:#000;
}
/* Add some content at the bottom of the video/page */
.content {
position: relative;
text-align: center;
}
h1{
font-family:'Helvetica';
font-size:30px;
margin-bottom: 0px;
color:#000;
}
<!doctype html>
<html>
<head>
<body>
<!-- The video -->
<div class="vimeo-wrapper">
<iframe src="https://player.vimeo.com/video/209094416?&background=1&autoplay=1&loop=1&byline=0&title=0&mute=1&controls=1" frameborder="0" allow="autoplay" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!-- VIDEO ENDS-->
<!-- SITE OVERLAY -->
<div class="content">
<div class="menu">
home</div>
<div class="logo">
caroline </div>
<button>hey buddy</button>
<button>Bye Buddy</button>
</div>
<div class="instruct">Click & Drag to look around</div>
</body>
</html>
I am trying to create a subscribe popup for the user to click on the subscribe button and to receive notification.
Does anyone know how to make this popup become responsive? Need this for my assignment. The button and the popup container are required to responsive. I have tried width:100% in #media but the width of the button will become too long. The notification part i have done.
How can I fix this? Please provide some solutions. Thank you
function subOpen() {
document.getElementById("sub").style.display = "block";
}
function subClose() {
document.getElementById("sub").style.display = "none";
}
.subscribe{
box-sizing: border-box;
}
.open-button {
background-color:cornflowerblue;
color: black;
font-weight: bold;
padding: 16px 15px;
border: none;
cursor: pointer;
opacity: 0.8;
width: 15%;
border-radius: 5px;
}
.sub-title{
margin-top: 30px;
margin-bottom: 20px;
font-weight: bold;
text-align: center;
}
.sub-p{
text-align: center;
font-size: 1;
}
/* The popup form - hidden by default */
.sub-popup {
display: none;
position: fixed;
bottom:100px;
left:500px;
border: none;
border-radius:5px;
z-index: 9;
}
#sub {
max-width: 300px;
padding: 10px;
background-color:beige;
}
/* Set a style for the subscribe button */
#sub .btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width:50%;
margin-bottom:10px;
margin-left: 70px;
opacity: 0.8;
}
#sub .cancel {
background-color: red;
}
#sub .btn:hover, .open-button:hover {
opacity: 1;
}
<div class= "subscribe">
<button class="open-button" onclick="subOpen()">SUBSCRIBE</button>
<div class="sub-popup" id="sub">
<h4 class="sub-title container">SUBSCRIBE US</h4>
<p class="sub-p">Click to receive notification to get our updates and special offers now!</p>
<button type="submit" class="btn subscribeBtn">Subscribe</button>
<button type="button" class="btn cancel" onclick="subClose()">Close</button>
</div>
</div>
Try this:
.subscribe {
box-sizing: border-box;
position: relative;
}
.sub-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
border: none;
border-radius: 5px;
z-index: 9;
transform: translate(-50%, 50%);
}
The answer to this question depends on what you mean by 'make it become responsive', and how you want it to respond.
In general, using units such as vw, vh, and % create sizes that are responsive to your window size.
Media queries can be used if you want styling to change at certain dimensions.
Place this at the end of your CSS, and your popup window will align to the left when your window is 600px or less.
#media (max-width: 600px){
.sub-popup{
left: 0px;
}
The left and bottom using px positioning on the popup form were messing up the responsiveness, first fix that came up to my mind was replacing them with margin 0 auto which basically centers it within it's parent container.
If you're using an absolute unit (px), you need to set media queries to match different screen sizes and change the values accordingly.
I'm not trying to say that using px for sizing is bad, it really depends on what are you trying to achieve so getting familiar with the different units really comes in handy.
There are actually quite a few solutions for this including flexbox, bootstrap, media queries, using relative units.
Hopefully these good reads can help you.
W3 CSS Units
What’s The Difference Between PX, EM, REM, %, VW, and VH?
function subOpen() {
document.getElementById("sub").style.display = "block";
}
function subClose() {
document.getElementById("sub").style.display = "none";
}
.subscribe{
box-sizing: border-box;
}
.open-button {
background-color:cornflowerblue;
color: black;
font-weight: bold;
padding: 16px 15px;
border: none;
cursor: pointer;
opacity: 0.8;
width: 15%;
border-radius: 5px;
}
.sub-title{
margin-top: 30px;
margin-bottom: 20px;
font-weight: bold;
text-align: center;
}
.sub-p{
text-align: center;
font-size: 1;
}
/* The popup form - hidden by default */
.sub-popup {
display: none;
position: fixed;
margin: 0 auto; // replaced left and bottom positioning with margin 0 auto
border: none;
border-radius:5px;
z-index: 9;
}
#sub {
max-width: 300px;
padding: 10px;
background-color:beige;
}
/* Set a style for the subscribe button */
#sub .btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width:50%;
margin-bottom:10px;
margin-left: 70px;
opacity: 0.8;
}
#sub .cancel {
background-color: red;
}
#sub .btn:hover, .open-button:hover {
opacity: 1;
}
<div class= "subscribe">
<button class="open-button" onclick="subOpen()">SUBSCRIBE</button>
<div class="sub-popup" id="sub">
<h4 class="sub-title container">SUBSCRIBE US</h4>
<p class="sub-p">Click to receive notification to get our updates and special offers now!</p>
<button type="submit" class="btn subscribeBtn">Subscribe</button>
<button type="button" class="btn cancel" onclick="subClose()">Close</button>
</div>
</div>
The Nav dropdown menu works fine in Chrome, but in Safari the rest of the menu is covered by the image.
Why is this happening only in Safari? It displays just fine in Chrome.
Things I have attempted to no avail :
meddled with Z-index
tried using position:relative for the dropdown menu
added on -webkit-transform
;(function(){function t(){}function e(t){return null==t?t===l?d:y:I&&I in Object(t)?n(t):r(t)}function n(t){var e=$.call(t,I),n=t[I];try{t[I]=l;var r=true}catch(t){}var o=_.call(t);return r&&(e?t[I]=n:delete t[I]),o}function r(t){return _.call(t)}function o(t,e,n){function r(e){var n=d,r=g;return d=g=l,x=e,v=t.apply(r,n)}function o(t){return x=t,O=setTimeout(c,e),T?r(t):v}function i(t){var n=t-h,r=t-x,o=e-n;return w?k(o,j-r):o}function f(t){var n=t-h,r=t-x;return h===l||n>=e||n<0||w&&r>=j}function c(){
var t=D();return f(t)?p(t):(O=setTimeout(c,i(t)),l)}function p(t){return O=l,S&&d?r(t):(d=g=l,v)}function s(){O!==l&&clearTimeout(O),x=0,d=h=g=O=l}function y(){return O===l?v:p(D())}function m(){var t=D(),n=f(t);if(d=arguments,g=this,h=t,n){if(O===l)return o(h);if(w)return O=setTimeout(c,e),r(h)}return O===l&&(O=setTimeout(c,e)),v}var d,g,j,v,O,h,x=0,T=false,w=false,S=true;if(typeof t!="function")throw new TypeError(b);return e=a(e)||0,u(n)&&(T=!!n.leading,w="maxWait"in n,j=w?M(a(n.maxWait)||0,e):j,S="trailing"in n?!!n.trailing:S),
m.cancel=s,m.flush=y,m}function i(t,e,n){var r=true,i=true;if(typeof t!="function")throw new TypeError(b);return u(n)&&(r="leading"in n?!!n.leading:r,i="trailing"in n?!!n.trailing:i),o(t,e,{leading:r,maxWait:e,trailing:i})}function u(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}function f(t){return null!=t&&typeof t=="object"}function c(t){return typeof t=="symbol"||f(t)&&e(t)==m}function a(t){if(typeof t=="number")return t;if(c(t))return s;if(u(t)){var e=typeof t.valueOf=="function"?t.valueOf():t;
t=u(e)?e+"":e}if(typeof t!="string")return 0===t?t:+t;t=t.replace(g,"");var n=v.test(t);return n||O.test(t)?h(t.slice(2),n?2:8):j.test(t)?s:+t}var l,p="4.17.5",b="Expected a function",s=NaN,y="[object Null]",m="[object Symbol]",d="[object Undefined]",g=/^\s+|\s+$/g,j=/^[-+]0x[0-9a-f]+$/i,v=/^0b[01]+$/i,O=/^0o[0-7]+$/i,h=parseInt,x=typeof global=="object"&&global&&global.Object===Object&&global,T=typeof self=="object"&&self&&self.Object===Object&&self,w=x||T||Function("return this")(),S=typeof exports=="object"&&exports&&!exports.nodeType&&exports,N=S&&typeof module=="object"&&module&&!module.nodeType&&module,E=Object.prototype,$=E.hasOwnProperty,_=E.toString,W=w.Symbol,I=W?W.toStringTag:l,M=Math.max,k=Math.min,D=function(){
return w.Date.now()};t.debounce=o,t.throttle=i,t.isObject=u,t.isObjectLike=f,t.isSymbol=c,t.now=D,t.toNumber=a,t.VERSION=p,typeof define=="function"&&typeof define.amd=="object"&&define.amd?(w._=t, define(function(){return t})):N?((N.exports=t)._=t,S._=t):w._=t}).call(this);
// This function will run a throttled script every 300 ms
var checkHeader = _.throttle(() => {
console.log('checkHeader');
// Detect scroll position
let scrollPosition = Math.round(window.scrollY);
// If we've scrolled 130px, add "sticky" class to the header
if (scrollPosition > 130){
document.querySelector('header').classList.add('sticky');
}
// If not, remove "sticky" class from header
else {
document.querySelector('header').classList.remove('sticky');
}
}, 300);
// Run the checkHeader function every time you scroll
window.addEventListener('scroll', checkHeader);
header{
padding: 0px;
overflow: hidden;
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background-image: linear-gradient(to right, rgba(9, 9, 22, 0.6), rgba(9, 9, 22, 1.0));
}
main{
margin-top: 120px;
}
header.sticky {
background-color: black;
height: 90px;
}
header.sticky nav{
top: 30px;
}
header.sticky #logo{
font-size: 3em;
padding: 10px 0px 10px 10px;
}
header #logo{
font-size: 5em;
float: left;
}
.phi{
color: rgb(141, 180, 105);
}
.hilo{
color: white;
}
nav{
float: right;
position: fixed;
top: 50px;
left: 280px;
}
nav > a, .dropmenu{
padding-left: 0.5em;
padding-right: 0.5em;
}
nav a, .dropdown{
color: rgb(240, 137, 52);
font-size: 20px;
}
a{
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ddd;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-radius: 21px 21px 21px 21px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: rgb(247, 185, 71);
border-radius: 21px 21px 21px 21px;
}
.dropdown:hover .dropdown-content {display: block;}
.dropmenu:hover {
cursor: pointer;
}
.universe {
background-image: url("../assets/img/universe.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 0px;
width: 100%;
height: 25em;
display: inline-block;
z-index: -999;
}
blockquote{
color: white;
font-size: 4em;
text-align: center;
margin: 2em auto;
}
.bgbutton, .bottominfo{
background-color: white;
}
.button{
display: inline-block;
border-radius: 4px;
background-color: rgb(240, 137, 52);
border: none;
color: #FFFFFF;
text-align: center;
font-size: 40px;
padding: 20px;
transition: all 0.5s ease;
cursor: pointer;
margin: 50px 180px;
}
.button span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s ease;
}
.button span:after{
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s ease;
}
.button:hover span{
padding-right: 25px;
}
.button:hover span:after{
opacity: 1;
right: 0;
}
<div class="wrapper">
<header>
<a href="index.html">
<div id="logo">
<span class="phi">Φ</span><span class="hilo">hilo</span>
</div>
</a>
<nav>
HOME
<div class="dropdown">
<a class="dropmenu">INTERIOR DESIGN</a>
<div class="dropdown-content">
OUR PHILOSOPHY
OUR INNOVATION
TESTIMONIALS
</div>
</div>
FENG SHUI
<div class="dropdown">
<a class="dropmenu">SERVICES</a>
<div class="dropdown-content">
SPACE PLANNING
FENG SHUI CONSULTATION
DESIGN & CARPENTRY
</div>
</div>
<div class="dropdown">
<a class="dropmenu">OUR MASTERPIECE</a>
<div class="dropdown-content">
RESIDENTIAL
RETAIL
CORPORATE & OFFICE
</div>
</div>
<div class="dropdown">
<a class="dropmenu">ABOUT</a>
<div class="dropdown-content">
CHIEF DESIGNER
MASTER PEK
OUR SUBSIDIARIES
FAQ
</div>
</div>
BLOG
</nav>
</header>
<main>
<div class="universe">
<section>
<blockquote>Where Feng Shui Meets Design</blockquote>
</section>
</div>
I have finally found the problem and came to a solution.
The problem was hidden at the header section.
After changing header - overflow: visible (from hidden), the dropdown menu in navbar is displaying properly now in Safari.
The reason Safari renders this so differently from Chrome is unfathomable.
Pls help me, I am making a site and my footer isn't staying at the bottom, when I zoom out the site. I'm a beginner so the code can be a little messy.
as you can see, the footer doesn't stay at the bottom, I have searched here for people with a similar problem with the code and I found some. And I tried some of the solutions, but none of them worked for me.
I think it doesn't work because there's something else wrong with my css, but I just cant figure it out.
html{
box-sizing:border-box;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
*,*:before,*:after{
box-sizing:inherit
}
body{
margin: 0;
overflow-x: hidden;
background-color: #f6f6f6;
}
ul {
padding: 4px 8px;
float: right;
}
a.nav-button {
padding: 8px 16px;
text-decoration: none;
color: black;
letter-spacing: 4px;
border: none;
outline: none;
font-family: Verdana,sans-serif;
font-size: 15px;
line-height: 1.5;
}
a.nav-button:hover {
background-color: #cccccc;
}
img.logo{
padding-top: 14px;
height: 50px;
float:left;
}
div.menu{
position:fixed;
width:100%;
z-index:1;
background-color: #ffffff;
}
div.front_img{
padding-top:500;
vertical-align: middle;
display:inline-block;
max-width:100%;
width: 100%;
max-height: 60%;
position: relative;
background-image: url(../images/front_image.jpg);
background-size: cover;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
}
div.webpage {
max-width:980px;
margin:auto;
}
div.container {
padding:0.01em 16px;
padding-top:32px;
padding-bottom: 32px;
max-width: 100%;
position: relative;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
background-color: #f6f6f6;
}
div.article {
padding:0.01em 16px;
padding-top:32px;
padding-bottom: 32px;
max-width: 100%;
position: relative;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
background-color: #f6f6f6;
}
div.h3-container {
border-bottom:1px solid #ccc;
width:100%;
}
h3 {
font-size: 24px;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
p {
font-family: Verdana,sans-serif;
font-size: 15px;
line-height: 1.5;
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
div.footer {
position: relative;
padding-top: 6;
padding-bottom: 6;
padding-right: 8;
width: 100%;
text-align: right;
background-color: black;
color: goldenrod;
}
div.footer, a{
color: goldenrod;
}
div.footer-container {
position: relative;
padding:0.01em 16px;
padding-top:32px;
padding-bottom: 32px;
max-width: 100%;
width: 100%;
background-color: black;
color:goldenrod;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
border-bottom:1px solid goldenrod;
}
div.footer-background{
background-color: black;
overflow: hidden;
}
div.leverancier-wrap {
padding-left: 22;
background-color: white;
}
div.footer-content {
// tried position:fixed; here but didnt work :c
}
HTML
<div class="footer-content">
<div class="container" style="max-width:1564px">
<div class="h3-container" id="intoduction">
<h3 class="Welcome-title"><img src="images/location_icon.png" height="30" length="20" hspace="20"/>Installatietechniek Haaglanden bevindt zich hier.</h3>
</div>
</div>
<style>
#map {
width: 100%;
height: 400px;
background-color: grey;
border-bottom: 5pt solid black;
}
</style>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 52.0442081, lng: 4.3370828};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[aint getting mah map]&callback=initMap">
</script>
<div class="leverancier-wrap">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide1.jpg" height="30" width="300">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide2.jpg" height="30" width="300">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide3.jpg" height="30" width="300">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide4.jpg" height="30" width="300">
</div>
<div class="footer-background">
<div class="footer-container" style="max-width:1564px">
<div class="footer-text">
<h3>Contactgegevens</h3>
<p>Installatietechniek Haaglanden<span style="display:inline-block; width: 280px;"><img src="images/telphone-icon.png" height="16" length="8" hspace="259"/></span>070 7620180</p>
<p>Burgemeester Elsenlaan 321<span style="display:inline-block; width: 297px;"><img src="images/mail-icon.png" height="16" length="8" hspace="276"/></span>info#installatietechniekhaaglanden.nl</p>
<p>2282 MZ Rijswijk<img src="images/facebook-icon.png" height="16" length="8" hspace="362"/></p>
</div>
</div>
</div>
<div class="footer">
<p>Copyright © installatietechniekhaaglanden.nl. Designed by ajeeth</p>
</div>
</div>
Negative margin method
Use a negative bottom margin like this. Keep the .push div empty.
HTML
<body>
<div class="wrapper">
...content...
<div class="push"></div>
</div>
<footer class="footer">All rights reserved</footer>
</body>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
Full demo: codepen.io
Other methods
You can also use negative top margins, calc(), flexbox, and grid to achieve the same effect in a better way.
Original source: This and 4 other ways originates from css-tricks.com
Give position: fixed; and to fix it at the bottom even if the content is little like the below demo
body {
margin: 0;
}
div.footer-content {
background: red;
position: fixed;
bottom: 0;
width: 100%;
}
HTML
<div class="footer-content">
this is the footer
</div>
You mean a Sticky Footer?
Change the CSS in
.footer-content { position: absolute; bottom: 0; width: 100%; }
How do I make this work? I keep fiddling around with the codes but I get no luck. I'm trying to make a responsive mobile menu. I tried searching google and can't find any solution. Thanks
<div class="sidenav" id="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
Home
Order
About
</div>
<div class="main_header">
<div class="main_nav">
<span onlick="openNav()">☰</span>
</div>
<h1>Treat your tastebuds</h1>
Order a coffee
</div>
<script type="text/javascript">
function openNav() {
document.getElementById("main_nav").style.width = "100%";
}
function closeNav(){
document.getElementById("closeNav").style.width="0";
}
</script>
Here is the CSS
.sidenav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition:0.5s;
}
sidenav a{
color: white;
text-decoration: none;
display: block;
transition: 0.3s;
font-size: 16px;
font-weight: 100;
text-align: center;
padding: 1em 0;
}
.main_header{
background-image: url(coffee1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
text-align: left;
color: white;
width: 100%;
height: 750px;
}
.main_header h1{
font-size: 36px;
font-weight: 900;
margin-left: 2em;
margin-top: 8em;
}
.btn_one{
margin-left: 11em;
color: white;
background-color: darkslategray;
text-decoration: none;
padding: 1em 2.5em;
}
.main_nav{
height: 40px;
}
.main_nav span{
color: white;
font-size: 30px;
text-decoration: none;
line-height: 40px;
margin-left: 0.25em;
float: left;
cursor: pointer;
}
Utilizing the bootstrap framework is an option.
Here is an example that provides a side navigation.
https://blackrockdigital.github.io/startbootstrap-simple-sidebar/
You have various typos in your code as well as undefined elements that you're attempting to manipulate.
Firstly, you have:<span onlick="openNav()">☰</span> which contains a typo. It's 'onclick', not 'onlick'.
Next, you're attempting to manipulate an element "main_nav", but in your HTML and CSS, you defined main_nav as a class (using a period). So, if you change your html to <div class="main_nav"> your issue for that will be fixed.
I'm unsure what your final menu design will be, but those changes will fix the problems you're running into.