We Keep Coding

Slidenav onclick from right problems HTML CSS JAVASCRIPT

I'm having few problems with my slide onclick navigation.
This is my HTML
<div id="menu-mobile" class="menu-mobile">
<div class="menu-mobile-close" onclick=closeNav()>
<p>x</p>
</div>
<div class="menu-mobile-header">
<img src="img/poznanprzeprowadzki_logo3.png" name="Poznań przeprowadzki logo" alt="Poznań przeprowadzki logo"></a>
<p>Zapraszamy do kontaktu!</p>
</div>
<a href="index.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="20px" src="img/Home_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="home">Strona główna</p>
</div>
</div></a>
<a href="about.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="20px" src="img/About_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="about">O nas</p>
</div>
</div></a>
<a href="gallery.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="15px" src="img/Gallery_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="gallery">Galeria</p>
</div>
</div></a>
<a href="contact.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="15px" src="img/Contact_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="contact">Kontakt</p>
</div>
</div></a>
<a href="advices.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="15px" height="20px" src="img/Advices2_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="advices">Pomoc / Porady</p>
</div>
</div></a>
</div>
<div id="menu-mobile-background" class="menu-mobile-background">
</div>
<div class="menu-slider" onclick=openNav()>
</div>
This is my CSS:
.menu-slider {
display: block;
position: relative;
background-image: url("img/Dropdown_menu_orange.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 35px;
width: 35px;
margin: 0px 0px 0px 10px;
}
.menu-slider:hover {
cursor: pointer;
}
.menu-mobile {
display: block;
height: 100%;
width: 0px;
position: fixed;
z-index: 9999;
top: 0;
right: 0;
background-color: rgba(100,100,100,1);
overflow-x: hidden;
padding-top: ;
transition: 1s;
}
.menu-mobile-close {
position: absolute;
top: 5px;
right: 10px;
transition: 0.05s;
}
.menu-mobile-background {
right: 0;
top: 0;
transition: 0.2s;
position: fixed;
overflow: hidden;
z-index: 9998;
width: 0px;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.menu-mobile-header {
padding: 16px;
text-align: center;
background-color: white;
}
.menu-mobile-header p {
font-family: Open Sans;
font-size: 14px;
color: rgba(100,100,100,1);
padding: 2px;
font-weight: 500;
display: block;
}
.menu-mobile-header img {
margin: 0 auto;
height: 50px;
padding-bottom: 6px;
}
.menu-mobile-close p:hover {
color: rgba(240,240,240,1);
cursor: pointer;
}
.menu-mobile-close p {
font-family: Open Sans;
font-size: 18px;
color: rgba(100,100,100,1);
font-weight: 600;
display: block;
}
.dropdown-content-item {
min-width: 100%;
transition: 0.1s;
display: flex;
align-items: center;
align-content: center;
justify-content: flex-start;
padding: 10px;
padding-top: 15px;
margin: 0;
flex-wrap: nowrap;
}
.dropdown-content-item-text p {
font-family: Open Sans;
font-size: 13px;
color: white;
padding: 10px;
padding-left: 0;
margin: 0;
display: block;
}
.dropdown-content-item-text {
padding: 0;
margin: 0;
}
.dropdown-content-item-icon {
width: 50px;
display: flex;
margin: 0;
}
.dropdown-content-item-icon img {
margin: 0 auto;
}
.dropdown-content-item:hover {
background-color: rgba(150,150,150,1);
}
And this is my JS for this part:
function openNav() {
document.getElementById("menu-mobile").style.width = "250px";
document.getElementById("menu-mobile-background").style.width = "100%";
}
function closeNav() {
document.getElementById("menu-mobile").style.width = "0px";
document.getElementById("menu-mobile-background").style.width = "0px";
}
The openNav and closeNav buttons works fine, but the paragraphs inside the navigation are being wrapped when the "menu-mobile" is being opened or is about to close. It's pure cosmetic issue, it just doesn't look good to me. Here are some photos of what i'm trying to say:
This is the menu-mobile when it's been already open by clicking the menu-button on the site.
And this is the menu-mobile after clicking the "x" when it's about to hide to the right.
Do you have any idea how can i make this text not wrap while closing?
The other thing is that i want to be able to close the menu also by clicking anywhere outside it. Does anybody know how can I achieve that? Do I have to use lot of js here?
You can also check the whole website here www.pozanprzeprowadzki.pl. The menu-mobile shows-up only on smaller window size.
Best regards and sorry if the whole topic is unclear. Please feel free to ask

Setting the text to white-space: nowrap will stop it from wrapping on dropdown-content-item-text and on the paragraph below the logo.
But then other things are getting squished which you need to give a fixed width to.
I think a better approach is to move the whole thing outside viewport would look better, something like this:
function openNav() {
document.getElementById("menu-mobile").style.transform = "translateX(0)";
document.getElementById("menu-mobile-background").style.width = "100%";
}
function closeNav() {
document.getElementById("menu-mobile").style.transform = "translateX(100vw)";
document.getElementById("menu-mobile-background").style.width = "0px";
}

I think you can swipe right menu because position is fix and you must set this css to body or parrent of menu-mobile div overflow-x: hidden;
function openNav() {
document.getElementById("menu-mobile").style.right= "0px";
}
function closeNav() {
document.getElementById("menu-mobile").style.right= "-250px";
}

apply same jquery function to element present inside parent div

code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.

I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle

use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>

YouTube Video appearing in wrong spot when playing 2nd time on page

I'm having a strange issue over at a new site I just created (http://segarsmedia.com/motor-city-rising/). Problem is when you first visit it, you're greeted with a large play button and a poster image from the video I'm presenting coming from YouTube. Click it and a div goes over that spot, along with an close button. So far, so good.
However, if you click the close button and then try to play the video again, the video appears and starts to play, but it now appears underneath the poster image and play button and it's about 1/5 the original size. It seems to now be playing outside of its' intended container although when in inspector, the code doesn't seem to show that. It also doesn't seem to add any additional inline styles as well.
Obviously, I want the video to appear where it first appears when you click on the play button. So why is this occurring instead?
I have a Pen up at http://codepen.io/anon/pen/NdMqya and here's the code.
HTML
<div class="entry-content">
<div id="video-mask"></div>
<a class="vidjmp" id="show" href="#"><div class="play"><img src="http://segarsmedia.com/wp-content/themes/auth-story/img/play.png" alt="play" title="play"></div>
<img width="1920" height="1080" src="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg" class="attachment-full size-full wp-post-image" alt="Motor City Rising" srcset="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg 1920w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-300x169.jpg 300w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-768x432.jpg 768w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-1024x576.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px" /></a>
<div id="video-content" class="video-content">
<a id="video-close" href="#"><div id="close" class="close">X</div></a>
<div class="video-container">
<iframe id="video-iframe" width="" height="" src="http://www.youtube.com/embed/75pCxGDkuNQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div><!-- .entry-content -->
CSS
.entry-content:before,
.entry-content:after {
content: "";
display: table;
table-layout: fixed;
}
.entry-content:after, {
clear: both;
}
.entry-content {
position: relative;
display: block;
margin: 0;
width: 100%;
}
.play {
width: 125px;
height: 125px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -62.5px;
margin-top: -62.5px;
z-index: 205;
}
#video-content {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.video-container {
position: relative;
padding-bottom:56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#close {
background: #000;
color: #FFF;
display: block;
position: absolute;
top: 16px;
left: 24px;
height: 48px;
width: 48px;
border-radius: 24px;
z-index: 2000;
font-size: 24px;
line-height: 1;
font-weight: 700;
padding: 14px 16px;
border-radius: 24px;
z-index: 2000;
}
#media screen and (max-width: 677px) {
.play {
width: 62.5px;
height: 62.5px;
margin-left: -31.25px;
margin-top: -31.25px;
}
#close {
height: 30px;
border-radius: 15px;
font-size: 15px;
padding: 7px 10px;
width: 30px;
border-radius: 15px;
}
}
JS
<script type="text/javascript">
jQuery(document).ready(function() {
var iframeSrc = jQuery('#video-iframe').attr("src");
jQuery('a.vidjmp').click(function(e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc + '?rel=0&autoplay=1&showinfo=0&modestbranding=0');
jQuery('#video-mask').fadeTo(500,0.9, function(){
jQuery('#video-content').fadeIn(500, function(){
jQuery('#video-iframe').show();
});
});
});
// Close Modal/Mask
jQuery('#video-close, #video-mask').click(function (e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc);
jQuery('#video-mask, #video-content').fadeOut(0, function(){
var vidCopy = jQuery('#video-iframe').clone();
jQuery('#video-iframe').detach();
jQuery(vidCopy).appendTo('#video-content');
});
});
});
</script>

Found the problem. It was a simple case of CSS:
#video-iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}

place a relative div under an absolute divs generated height by window

Hey there :) I'm trying to make a video fit the browser window size plus adding an image at the bottom of the browser window height. So you get the video and the image to be the only thing that is showed when you load the page. When you scroll dowm the content of the website should appear.
I've made something to illustrate the idea: http://instagib.dk/JS-test/
The problem is when I start adding the content of the site, it appears under video and image. The problem seems to be I've made it absolute and out of the documents context.
Is there any JS, Jquery solution that reads the height of the absolute content and places content after the video?
Cheers:)
<body>
<!-- Header -->
<header class="header">
<div class="header-bg">
<div class="logo-top"></div>
</div>
<nav>
<div class="menu">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<ul class="nav-list">
<li>Projects</li>
<li>Services</li>
<li>Advantages</li>
<li>Who are we</li>
<li>Work with us</li>
</ul>
</div>
</nav>
</header>
<video class="intro" autoplay loop>
<source src="video/black_clouds.mp4" type="video/mp4">
<source src="video/black_clouds.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<div class="intro-seperator"></div>
<!-- Main content -->
<main class="content">
</main>
<!-- Footer -->
<footer>
<small>© Crafthouse 2014</small>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
divFade = $(".header-bg");
var toggleHeader = function(noAnimate) {
var threshold = 400,
fadeLength = 300,
opacity,
scrollTop = $(document).scrollTop();
if (scrollTop < threshold) {
opacity = 0;
} else if (scrollTop > threshold + fadeLength) {
opacity = 1;
} else {
if (noAnimate) {
opacity = 1;
} else {
opacity = (scrollTop - threshold) / fadeLength;
}
}
divFade.css("opacity", opacity);
};
toggleHeader(true);
$(window).scroll(function() {
toggleHeader();
});
});
</script>
The CSS:
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
/*
========================================
Layout: Header
========================================
*/
.header {
width: 100%;
height: 60px;
position: fixed;
top: 0px;
color: #fff;
z-index: 9999;
}
.header-bg {
width: 100%;
height: 60px;
line-height: 60px;
vertical-align: middle;
background: #212121;
position: absolute;
opacity: 0;
font-size: 25px;
}
.logo-top {
background: url(../images/crafthouse-top-logo.png) no-repeat;
width: 171px;
height: 60px;
margin: 0 auto;
}
.menu {
width: 70px;
height: 60px;
padding-top: 20px;
position: absolute;
left: 8%;
}
.menu:hover {
background: #000;
}
.hamburger {
width: 30px;
height: 3px;
background: #fff;
margin: 0 auto;
margin-bottom: 5px;
}
.menu:hover .hamburger {
background: #00ff91;
}
.nav-list {
width: 150px;
margin-top:20px;
background: #000;
display: none;
padding: 20px 0 10px 18px;
text-transform: uppercase;
}
.nav-list li {
margin-bottom: 10px;
}
.nav-list li a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
.nav-list li a:hover {
color: #00ff91;
}
.menu:hover .nav-list {
display: block;
}
.intro {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background-size: cover;
}
.intro-seperator {
background: url(../images/seperator-brush-top.png);
height: 164px;
width: 100%;
position: absolute;
right: 0;
bottom: 0;
}
.test {
width: 100%;
height: 100%;
background: #fff;
}
/*
========================================
Layout: Content
========================================
*/
.content {
height: 2000px;
}

Use the following for your content:
main{
position:absolute;
top:100%;
}
That moves the actual content below the video (assuming main is your content-element)

Aligning four circle's inside a square in CSS and HTML5

I am developing a Simon Says game, and have all the working JavaScript, etc.
The main problem I am having is with the CSS; everything works when you click it,
Here is a mock image of what I want it to look like:
update still having alingment problems have updated my CSS
CSS:
body {
background-color: #333;
color: #fff;
}
ul {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
text-align: center;
}
li {
display: inline-block;
padding: 3px;
}
.wrapper {
position: relative;
width: 640px;
margin: 0 auto;
}
.back {
width:700px;
height:700px;
background-color:black;
}
.pad {
width: 200px;
height: 200px;
z-index: 1;
margin: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
}
.shape1 {
position: absolute;
left: 0;
top: 50%;
margin-top: -300px;
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
.shape2 {
position: absolute;
left: 50%;
margin-left: -50px;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
.shape3 {
position: absolute;
left: 0;
right: 50%;
margin-right: -50px;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
}
.shape4 {
position: absolute;
left: 0;
bottom: 50%;
margin-bottom: -50px;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
}
.level, .score {
width: 50%;
float: left;
text-align: center;
}
.sButton {
width: 30%;
margin: 0 auto;
}
.start {
width: 100%;
height: 30px;
text-align: center;
}
HTML:
<body>
<div class="wrapper">
<div class="back">
<div class="pad shape1" data-pad="1">
<audio preload="auto" class="sound1">
<source src="sounds/mp3/sounds_01.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_01.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape2" data-pad="2">
<audio preload="auto" class="sound2">
<source src="sounds/mp3/sounds_02.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_02.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape3" data-pad="3">
<audio preload="auto" class="sound3">
<source src="sounds/mp3/sounds_03.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_03.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape4" data-pad="4">
<audio preload="auto" class="sound4">
<source src="sounds/mp3/sounds_04.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_04.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="break"></div>
</div>
<div class="level">
<h2>Level: 1</h2>
</div>
<div class="score">
<h2>Score: 0</h2>
</div>
<ul class="difficulty">
<li>
<input type="radio" class="difOpt" name="difficulty" value="2">Easy
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="1" checked>Normal
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.5">Hard
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.25">Insane
</li>
</ul>
<div class="sButton">
<button class="start">start</button>
</div>
</div>
</body>

You are going to want to give your shapes an absolute position and use the "top", "left", "right" and "bottom" css properties like so:
.shape1 {
position: absolute;
left: 0;
top: 50%;
margin-top: -50px;
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
Note that margin-top is used to slightly offset the "top" property. Border-radius will turn these into circles.