We Keep Coding

Can't move parallex or get it to be as wide as screen

Hi I've been trying to imploment a parallex image into a page today but I cant get the image to be as wide as the page (gets close but leaves a small gap) and also it won't move at all only dissapears when I change position to absolute.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="1" data-image-src="pexels-emiliano-arano-1350197.jpg">
</div>
</div>
.container {
max-width: 100vw;
margin: 0 auto;
}
.parallax {
min-height: 500px;
background: transparent;
}

Changing color of fixed image based on background

So I´m working on a landing page (test site here: http://kingdomhousedev.cloudaccess.host/) that has a fixed pgn logo. Since it´s white and some of the background is also white it disapears over those sections.
So what I´m wanting to do is change the logo to black when it´s over white or light sections.
Can this be achived using javascript and css? I´ve searched and found some one example (like:http://www.kennethcachia.com/background-check/) but I want it to happen at scroll and not after. If possible it would be nice if it would be so that for example if only half the logo was over white only that part would be black.
Thanks in advance for the help!
Edit:
I was asked for an example not from a live site. So here is one: https://jsfiddle.net/57Legkq3/9/
HTML:
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="logo"></div>
CSS:
.white{
background-color:white;
height: 400px;
}
.black{
background-color:black;
height: 400px;
}
.logo {
width: 100px;
height: 100px;
width: 100px;
height: 100px;
background-color:white;
position: fixed;
top: 20px;
left: 20px;
}
.white {
background-color: white;
height: 400px;
}
.black {
background-color: black;
height: 400px;
}
.logo {
width: 100px;
height: 100px;
width: 100px;
height: 100px;
background-color: white;
position: fixed;
top: 20px;
left: 20px;
}
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="logo"></div>
Also to clarify. I want the white box (representing the logo) to change color to black when going over the white areas. But without me knowing where the white areas are. So I need to check somehow what is under the logo and change color based on that, and preferably only the part of the logo that is over the white area.

Here is a basic idea using JQuery. The code below demonstrates the general principal you'd apply.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$("body").addClass("blue");
} else {
$("body").removeClass("blue");
}
});
Note in the above code sample, the scroll is a measurment indicating the windows top! Hence when scroll changes, appropriate class entries are added to, in this case, body element. Hope this helps.

vertically centered an image, based on the container height

edit:
http://eclassified.my/service/242/9d3a89c9-09ae-49a5-ae8c-a4c3070c7ead
How can I vertically centered an image, based on the container height.
Given the container height is fixed, and the image size is dynamic.
Currently only top part of the image is shown as we use overflow: hide;.
Thanks

You can set the image CSS to height: 100%.
Please provide some codes, so that we can help you further with your problem.

Photoshop
The easiest solution is obviously photoshop here; you can just resize the images.
CSS
You can use the CSS property background-image for this. The img tag is not made to hide parts of the image, only to resize.
To do this, you can use the following example:
background-position: 0px -60px;
That property is the key to create a background image that fits in your slideshow. However; you will need to manually change that for all images.
Example for you to use background-position:
.slider-nav-crop4 {
/*this is your image with ~60px white space above */
background-image:url('http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 0px -60px;
}
<div class="crop-image slider-nav-crop4" style="border-radius:8px;display:inline-block;width:400px;height:300px;">
</div>
Positioning the image
This is actually a hack that can be set per image, but it could be a little tricky.
You can position the images absolute, give them a negative top setting and make the images larger then the container, setting overflow:hidden.
example
.item .crop-image {
height:200px;
position:relative;
overflow:hidden;
}
.crop-image img {
position:absolute;
top:-40px;
height:300px;
}
<div class="carousel-inner carousel-inner1" role="listbox" style="border-radius:8px;">
<div class="item item1" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-bxkh1mt89q.jpg" alt="Second Slide">
</div>
</div>
<div class="item item1 active left" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg" alt="Second Slide">
</div>
</div>
<div class="item item1 next left" style="border-radius:8px;">
<div class="crop-image slider-nav-crop4" style="border-radius:8px;">
<img src="http://eclassified.my/ec_admin/upload/service_upload/draft-83ytvl4obn.jpg" alt="Second Slide">
</div>
</div>
</div>

Lets say your code is,
<div class="image">
<img scr="Image_path" alt="" />
</div>
CSS
.image{
position: relative;
}
.image img{
margin: auto; //horizontally align center
position: absolute; //vertically align center
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Hope this will work.

Method 1:
container {
display: table;
vertical align: middle;
}
img {
display: table-cell;
vertical align: middle;
}
Method 2:
container {
position: relative;
}
image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Method 3:
container {
height: 300px;
line-height: 300px;
}
In css vertical alignment is a very discussed topic, this is 3 of many examples. Use the best for you.

How could I contain a child div that has a height auto -- Jwplayer

When Jwplayer is initialized, they inject a class with the css of
.jwplayer.jw-flag-aspect-mode {
height: auto !important;
}
My code is
<div style="height: 80vh; width: 100%">
<div style="height: 90%; width: 100%;>
<div style="height: 100%; width: 100%;>
<!-- JwPlayer here -->
<div id="sample-video"></div>
</div>
</div>
<div style="height: 10%; width: 100%;>
<!-- actions bar here -->
</div>
</div>
<script type="text/javascript">
//psuedo code
jwplayer('#sample-video").setup({
sources: sources,
autostart:true,
width: '100%'
});
</script>
Problem is that when jwplayer injects their own css, they override the heights even if I set it manually inline or through their setup with the above mentioned class.
That in turn would cause the video player to disregard the parent and overflow below. If I can change height: auto to height: 100%;, then my expected behaviour is correct.
I've tried every answer in here and all of them listed on jwplayer's support site.

Setting the jwplayer setup options of height works. It will maintain 100% if explicitly set to do so.
jwplayer('div').setup({
height: 100%,
width: 100%
});
Run this Snippet the Plunker in full display and resize the window, it is fully responsive and will not exceed the height of it's container.
PLUNKER
##SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JW Auto Height</title>
<script src="http://p.jwpcdn.com/6/12/jwplayer.js?"></script>
<style></style>
</head>
<body>
<!-- div is 80% height of this screen -->
<div style="height: 80vh; width: 100%; outline: 5px dotted red;">
<!-- section is 90% height of div -->
<section style="height: 90%; width: 100%; outline: 3px dashed blue;">
<!-- main is 100% height of section -->
<main style="height: 100%; width: 100%; outline: 1px solid black;">
<!-- jw is 100% height of main -->
<div id="jw"></div>
</main>
</section>
<!-- nav is 10% height of div -->
<nav style="height: 10%; width: 100%; outline: 2px solid grey; background: grey"></nav>
</div>
<div style="margin: 30px auto;">This is 20% of the screen's height</div>
<script>
//Real code
jwplayer("jw").setup({
sources: [{
file: "http://glvid.s3.amazonaws.com/jwp/test/3clox.mp4"
}],
width: "100%",
height: "100%"
});
</script>
</body>
</html>

since that looks more like an answer than a comment:
you may not mind height:auto!important by using as well:
.jwplayer.jw-flag-aspect-mode {
min-height:100%;
max-height:100%;
}
where you set the values to constrain the desired fixed or not fixed height value(s) of your element

How to make two sides equal height? One big div and some small divs

I have news section and on the left side of it there is one big div (main-article) on the right side some (4) small divs (sub articles). I need to make them equal dynamically (both sides should be visually equal):
I tried to make by jQuery and I partially achieved it, but with a really big bug. If the left side is too small, the right side articles will be too small and their text will overflow the containers:
Here is the HTML:
<div class="row">
<div class="col-md-6">
<article class="article-main_pg main-article article-main_pg--1">
<!-- image and text -->
</article>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<!-- this four times -->
<div class="col-lg-6">
<article class="article-main_pg main-article article-main_pg--1">
<!-- image and text -->
</article>
</div>
<!-- this four times end -->
</div>
</div>
</div>
My jQuery attempts
// news section fix height
// get left news article height (without margin)
var leftArtHeight = $('.s10-news .main-article').outerHeight(false);
// reduce it by half and decrease by right side subarticles margin then add half of the margin (as we need to remember about 2 bottom subarticles margin)
// 25 is the margin (i know it, but ofcourse it can be set from DOM)
var heightForRightSubArt = (leftArtHeight / 2) - 25 + 13;
//finaly we set calculated height to the right subarticles and both sides are equal
$('.s10-news .sub-article').css("height" , heightForRightSubArt);
The result is ok BUT it's not responsive and it's a bug if the left side is too small.

try this, this may help to you.if this is not the case tell me.copy,paste , run and check is this what you want.
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
body{
margin:0;
padding:0;
width: 100%;
height: 100%;
}
div.main{
width: 98%;
margin: 1%;
margin-top: 5%;
border:1px solid red;
height: 600px;
}
div.main div{
float: left;
}
div.mainone{
width: 45%;
height: 90%;
border:1px solid orange;
margin: 2.5%;
}
div.maintwo{
height: 90%;
width: 45%;
border:1px solid green;
margin: 2%;
margin-top: 2.5%;
}
div.maintwo div{
width: 40%;
height: 40%;
border: 1px solid blue;
margin: 4.5%;
}
div.description{
width: 100%;
height: 59%;
background-color: pink;
}
</style>
</head>
<body>
<div class="main">
<div class="mainone">
<img src="" style="width:100%;height:40%;box-shadow:1px 2px 1px black;">
<div class="description"></div>
</div>
<div class="maintwo">
<div class="subone"></div>
<div class="subtwo"></div>
<div class="subthree"></div>
<div class="subfour"></div>
</div>
</div>
</body>
</html>