We Keep Coding

How to make opacity gradually scale

I have a div, imgCover that overlaps an image. imgCover has a background set at rgba(255,255,255,.7), but I am wanting the opacity to gradually go from 0.0 - 1.0.
Is there anyway that I can get the imgCover's opacity to be at 0.0 at the far left and then at the far right 1.0?
jsfiddle
#conveyorSec {
padding: 50px 0;
height: auto;
width: 100%;
}
#conveyorInner {
margin: 0 5%;
width: 90%;
height: 100%;
position: relative;
}
#conveyorInner img {
width: 100%;
height: auto;
}
#imgCover {
width: 40%;
height: 100%;
position: absolute;
background-color: rgba(255,255,255,.7);
right: 0;
top: 0;
z-index: 99;
}
<section id="conveyorSec">
<div id="conveyorInner">
<img src="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" alt="image">
<div id="imgCover"></div>
</div>
</section>

Use linear gradient instead of background-color:
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
#conveyorSec {
padding: 50px 0;
height: auto;
width: 100%;
}
#conveyorInner {
margin: 0 5%;
width: 90%;
height: 100%;
position: relative;
}
#conveyorInner img {
width: 100%;
height: auto;
}
#imgCover {
width: 40%;
height: 100%;
position: absolute;
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
right: 0;
top: 0;
z-index: 99;
}
<section id="conveyorSec">
<div id="conveyorInner">
<img src="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" alt="image">
<div id="imgCover"></div>
</div>
</section>

HTML/CSS Animation - JavaScript

I've been trying to animate a sliding door that is triggered on the click of a button.
Here is my fiddle
I've got two sides of the sliding door. Left side is blue, right side is red. The left side should slide to the left and the right door should slide to the right.
First of all, I'm trying to position the button to the middle of the door. I'm using
#button {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
}
but still the button appears kind of sideways
But secondly when the button is clicked, both sides of the door should slide out at the same time, but unfortunately only the red door functions correctly.
The blue door is stuck. What am I doing wrong?

You can use simple JQuery animation to do what you require.
FIDDLE
Here is the code:
$("button").click(function() {
$(".one").animate({
left: '0'
});
$(".three").animate({
left: '200px'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one" style="background:#98bf21;height:100px;width:100px;position:absolute;left:100px;"></div>
<div class="two" style="background:blue;height:100px;width:100px;position:absolute;left:100px;">
</div>
<div class="three" style="background:red;height:100px;width:100px;position:absolute;left:100px;"></div>
<button style="position:absolute;left:110px;top:50px;">
CLICK ME
</button>

It should be like this
function myMove() {
var elem = document.getElementById("myAnimationRight");
var elem_l = document.getElementById("myAnimationLeft");
var elem_R = document.getElementById("myAnimationRight");
elem_l.className += " opened";
elem_R.className += " opened";
}
#container {
width: 800px;
}
#button {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
}
#wrapper {
z-index: 1;
position: absolute;
display:inline-block;
width: 810px;
overflow:hidden;
}
#left {
display:inline-block;
width: 400px;
}
#right {
display:inline-block;
width: 400px;
}
#myContainer {
width: 400px;
height: 300px;
position: relative;
background: yellow;
}
#myAnimationLeft {
width: 400px;
height: 300px;
position: absolute;
background-color: blue;
transition:linear all 0.5s;
left:0;
}
#myAnimationRight {
width: 400px;
height: 300px;
position: absolute;
background-color: red;
transition:linear all 0.5s;
right:0;
}
#myAnimationRight.opened{
right:-100%;
transition:linear all 0.5s;
}
#myAnimationLeft.opened{
left:-100%;
transition:linear all 0.5s;
}
<div id="container">
<div id ="button">
<button onclick="myMove()">Click Me</button>
</div>
<div id="wrapper">
<div id ="left">
<div id ="myContainer">
<div id ="myAnimationLeft"></div>
</div>
</div>
<div id ="right">
<div id ="myContainer">
<div id ="myAnimationRight"></div>
</div>
</div>
</div>
</div>
You can handle animation via CSS and just add class opened to elements on button click.

You need to minus half the button width and height to bring it to the center.
If button's width is fixed, its correct to use calc(50% - 50px) as Icewine's answer.
For elements with dynamic widths and heights u can always use:
position: absolute;
top: 50%;
left: 50%;
transform:translateX(-50%) translateY(-50%);
The above code will center the element even if you dont know the height and width of the element.
Example:
body {
padding: 0px;
margin: 0px;
}
div {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: red;
}
<div></div>
As for animation, why not use classes and let the CSS handle the animation?
function myMove() {
document.getElementById("myAnimationLeft").className = "DoorOpenLeft";
document.getElementById("myAnimationRight").className = "DoorOpenRight";
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
#container {
width: 100%;
}
#button {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
transform: translateX(-50%) translateY(-50%);
}
#wrapper {
z-index: 1;
position: absolute;
width: 100%;
overflow-x: hidden;
clear: both;
}
#left {
display: inline-block;
width: 50%;
float: left;
}
#right {
display: inline-block;
width: 50%;
float: right;
}
#myContainer {
width: 100%;
height: 300px;
position: relative;
background: yellow;
}
#myAnimationLeft {
width: 100%;
height: 300px;
left: 0px;
position: absolute;
background-color: blue;
transition: all 1s ease;
}
#myAnimationRight {
width: 100%;
height: 300px;
left: auto;
right: 0px;
position: absolute;
background-color: red;
transition: all 1s ease;
}
.DoorOpenLeft {
left: -100% !important;
}
.DoorOpenRight {
right: -100% !important;
}
<div id="container">
<div id="button">
<button onclick="myMove()">Click Me</button>
</div>
<div id="wrapper">
<div id="left">
<div id="myContainer">
<div id="myAnimationLeft"></div>
</div>
</div>
<div id="right">
<div id="myContainer">
<div id="myAnimationRight"></div>
</div>
</div>
</div>
</div>

Defining same vars causing issues and for the left door you need to decrease value _pos--
Solution for button
left: calc(50% - 38px);
#container {
width: 810px;
}
#button {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
}
#wrapper {
z-index: 1;
position: absolute;
display: inline-block;
width: 810px;
}
#left {
display: inline-block;
width: 400px;
}
#right {
display: inline-block;
width: 400px;
}
#myContainer {
width: 400px;
height: 300px;
position: relative;
background: yellow;
}
#myAnimationLeft {
width: 400px;
height: 300px;
position: absolute;
background-color: blue;
}
#myAnimationRight {
width: 400px;
height: 300px;
position: absolute;
background-color: red;
}
<div id="container">
<div id="button">
<button onclick="myMove()">Click Me</button>
</div>
<div id="wrapper">
<div id="left">
<div id="myContainer">
<div id="myAnimationLeft"></div>
</div>
</div>
<div id="right">
<div id="myContainer">
<div id="myAnimationRight"></div>
</div>
</div>
</div>
</div>
<script>
function myMove() {
var _elem = document.getElementById("myAnimationLeft");
var _pos = 0;
var _id = setInterval(_frame, 5);
function _frame() {
if (_pos == 410) {
clearInterval(_id);
} else {
_pos--;
_elem.style.right = _pos + 'px';
_elem.style.left = _pos + 'px';
}
}
var elem = document.getElementById("myAnimationRight");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 410) {
clearInterval(id);
} else {
pos++;
elem.style.left = pos + 'px';
elem.style.right = pos + 'px';
}
}
}
</script>
JQuery Solution created on #shubhamagrawal's answer.
$(document).ready(function() {
$('button').click(function() {
$("#myAnimationLeft").offset({
left: 0
})
$("#myAnimationRight").offset({
left: $("#myAnimationRight").width()
})
$("#myAnimationLeft").animate({
left: -$("#myAnimationLeft").width()
}, 2000);
$("#myAnimationRight").animate({
left: $("#myAnimationRight").width()
}, 2000);
})
})
body,
html {
margin: 0;
padding: 0;
}
#container {
width: 810px;
position:relative;
overflow:hidden;
height:300px;
}
#button {
z-index: 2;
position: absolute;
top: calc(50% - 11px);
left: calc(50% - 34px);
}
#wrapper {
z-index: 1;
position: absolute;
display: inline-block;
width: 810px;
}
#left {
display: inline-block;
width: 400px;
}
#right {
display: inline-block;
width: 400px;
}
#myContainer {
width: 400px;
height: 300px;
position: relative;
background: yellow;
}
#myAnimationLeft {
width: 400px;
height: 300px;
position: absolute;
background-color: blue;
}
#myAnimationRight {
width: 400px;
height: 300px;
position: absolute;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="button">
<button>Click Me</button>
</div>
<div id="wrapper">
<div id="left">
<div id="myContainer">
<div id="myAnimationLeft"></div>
</div>
</div>
<div id="right">
<div id="myContainer">
<div id="myAnimationRight"></div>
</div>
</div>
</div>
</div>

For the button, you need to minus the width and height of the button to center it.
left: calc(50% - 50px); if button width is 100px;
Also, you need to set the parent div above button to position: relative; or the absolute wont work. You should also set a height of the parent div while you are at it.

Scrollbar handles not visible

The scroll-bar handles aren't visible in my page. I've tried setting overflow-x to auto and scroll for both the #cust1 and #cust2 div's.
I also need five div's to have their horizontal scrolling controlled from just one scroll-bar at the bottom of the page. (Div's #one, #two, #three, #four and #custTimeline)I don't want scroll-bars for each customer div.
Please help. https://jsfiddle.net/c71ytuxz/1/
var c = document.getElementById("custTimeline");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.save();
ctx.rotate(-90*Math.PI/180);
var baseLoc = 130;
var hours = ["5AM","6AM", "7AM","8AM","9AM","10AM","11AM","12 NOON","1PM","2PM","3PM","4PM","5PM","6PM", "7PM", "8PM", "9PM", "10PM", "11PM", "12PM"];
for(i = 0; i < hours.length; i++) {
if (i == 0) {
ctx.fillText(hours[i], -120, baseLoc);
}
else {
baseLoc += 90;
ctx.fillText(hours[i], -120, baseLoc);
}
}
ctx.restore();
#header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background: lightgrey;
}
#cust1 {
position: fixed;
left: 0px;
top: 160px;
width: 1500px;
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: 10px;
}
#one {
width: 8%;
height: 150px;
background: darkgrey;
float: left;
text-align: center;
}
#two {
margin-left: 25%;
width: 35px;
height: 150px;
background: green;
}
#cust2 {
position: fixed;
top: 320px;
left: 0px;
width: 1500px;
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
}
#three {
width: 8%;
height: 150px;
background: darkgrey;
float: left;
text-align: center;
}
#four {
margin-left: 15%;
width: 35px;
height: 150px;
background: green;
}
<canvas id="custTimeline"
width = "1900"
height = "130"
style = "border:3px solid #aaaaaa;">
</canvas>
<div id="cust1">
<div id="one"><p>
Customer 1
</p></div>
<div id="two"></div>
</div>
<div id="cust2">
<div id="three"><p>
Customer 2
</p></div>
<div id="four"></div>
</div>

Since the #cust1 has a width of 1500px, the scroll will only appear when its content gets wider than that, and at the moment it is only 8% (#one) + 25% + 35px (#two) in total.
If you want it to scroll, change this
#cust1 {
position: fixed;
left: 0px;
top: 160px;
width: 100vw; /* changed property */
height: 150px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: 10px;
}
#two {
margin-left: 25%;
width: 1000px; /* changed property */
height: 150px;
background: green;
}
Updated fiddle
Updated based on a comment
To have one scroll update another, here is one way, using jQuery.
$(document).ready(function(){
$( window ).scroll(function(){
var position = $( this ).scrollLeft();
$("#first").scrollLeft(position);
$("#second").scrollLeft(position);
});
});

jQuery animate() expanding DIV

I am not an expert in jQuery (and to be honest, I am taking my first steps).
I have the example below, and what I am trying to do is choose the direction of the expansion of my div. I am using animate() and expanding the width and height.
At the moment it is expanding to the right, but I want it to change it, so it would expand to the left. The only way I could make the div expand to the left, is to add float: right; in the CSS of #map element.
I want it to know if there is another way to get to this, without changing the float of #map.
jsFiddle.
Snippet:
$(document).ready(function () {
$('#expand').click(function (expandir) {
this.value = 'collapse';
if ($(this).data('name') === 'show') {
$('#map').animate({ width: '600', height: '400' });
$('#inside').animate({ width: '600', height: '336' });
$('#expand').animate({ top: '370' });
$(this).data('name', 'hide');
} else {
this.value = 'expand';
$('#map').animate({ width: '300', height: '250' });
$('#inside').animate({ width: '300', height: '169' });
$('#expand').animate({ top: '220' });
$(this).data('name', 'show');
}
});
});
html, body {
width: 100%;
height: 100%;
}
#map {
z-index: 1;
position: relative;
width: 300px;
height: 250px;
border: 1px solid;
}
#expand {
z-index: 4;
position: absolute;
top: 220px;
left: 10px;
width: 70px;
height: 25px;
}
#inside {
z-index: 2;
position: absolute;
top: 40px;
right: 0;
background-color: #000000;
width: 300px;
height: 169px;
background-size: 220px 170px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
#close {
position: absolute;
margin-top: 0;
margin-left: 0;
background-color: #34FF56;
width: 100px;
height: 50px;
background-size: 220px 170px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
#btn {
z-index: 3;
position: relative;
float: left;
margin: 2px;
background-color: #FF9834;
width: 70px;
height: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map">
<input type="button" data-name="show" value="expand" id="expand" />
<div id="inside"></div>
<div id="btn"></div>
</div>

You can change the positioning inside #map to absolute and add right:??%.The percentage works off the 100% in body tag. Hope this helps for what you need :}
#map {
z-index: 1;
position: absolute;
width: 300px;
height: 250px;
border: 1px solid;
right: 50%;
}

Menu error caused by HTML or JS?

Im trying to get the menu to be horizontal and then the flags to be shown below the menu when you press the flag-name.
When doing changes to the menu in my code, which of my files should I be editing?
The flags location is correct right now, but the menu is missplaced.
What can be done to get the menu to be horizontal instead of a list?
JSFiddle: http://jsfiddle.net/528k9z8m/
HTML:
<body>
<h1>Kmom03 sandboxen</h1>
<div id="content">
<div id="menu">
<ul>
<li> Elfenbenskusten
<div id="flag-elfenbenskusten"></div>
</li>
<li> Sverige
<div id="flag-sverige"></div>
</li>
<li> Maruritius
<div id="flag-maruritius"></div>
</li>
<li> Japan
<div id="flag-japan"></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
CSS
body {
}
h1 {
text-align: center;
}
h3 {
color: green;
}
#menu {
width: 500px;
height: 50px;
border: 1px solid black;
}
#content {
border: 1px solid black;
background-color: #eee;
padding: 4em;
margin: 0 auto;
height: 800px;
width: 800px;
border-radius: 30px;
}
.flagga1 {
position: relative;
width: 800px;
height: 500px;
}
.sverige {
background-color: #FECC00;
}
.sverige .box1 {
position: absolute;
width: 250px;
height: 200px;
background-color: #006AA7;
}
.sverige .box2 {
position: absolute;
bottom: 0;
left: 0;
width: 250px;
height: 200px;
background-color: #006AA7;
}
.sverige .box3 {
position: absolute;
top: 0;
right: 0;
width: 425px;
height: 200px;
background-color: #006AA7;
}
.sverige .box4 {
position: absolute;
bottom: 0;
right: 0;
width: 425px;
height: 200px;
background-color: #006AA7;
}
.flag {
position: relative;
width: 300px;
height: 200px;
}
.elfenbenskusten {
background-color: #fff;
}
.elfenbenskusten .part1 {
width: 100px;
height: 200px;
background-color: #F77F00;
}
.elfenbenskusten .part2 {
position: absolute;
top: 0;
left: 200px;
width: 100px;
height: 200px;
background-color: #009e60;
}
.flagga2 {
position: relative;
width: 300px;
height: 200px;
}
.maruritius {
background-color: #EEE;
}
.maruritius .box1 {
position: absolute;
top: 0;
width: 300px;
height: 50px;
background-color: #EA2839;
}
.maruritius .box2 {
position: absolute;
top: 50px;
left: 0;
width: 300px;
height: 50px;
background-color: #1A206D;
}
.maruritius .box3 {
position: absolute;
top: 100px;
width: 300px;
height: 50px;
background-color: #FFD500;
}
.maruritius .box4 {
position: absolute;
bottom: 0;
right: 0;
width: 300px;
height: 50px;
background-color: #00A551;
}
.maruritius .box5 {
position: absolute;
bottom: 0;
right: 0;
background-color: #006AA7;
}
.flagga3 {
position: relative;
height: 200px;
width: 300px;
border-style: solid;
border-width: 1px;
border-color: black;
}
.japan .box1 {
background-color: #FFFFFF;
}
.japan .cirkel1 {
border-radius: 50%;
position: absolute;
top: 40px;
left: 90px;
width: 125px;
height: 125px;
background-color: #BC002D;
}
JS:
(function () {
'use strict';
//var myContent = document.getElementById('content');
//elfenbenskusten
var flagTarget = document.getElementById('flag-elfenbenskusten');
var flagLink = document.getElementById('draw-elfenbenskusten');
function drawFlagElfenbenskusten() {
var flagElfenbenskusten = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>'
flagTarget.innerHTML = flagElfenbenskusten;
}
flagLink.addEventListener("click", function () {
console.log("event for clicking link elfenbenskusten.")
drawFlagElfenbenskusten();
});
//sverige
var flagTargetSverige = document.getElementById('flag-sverige');
var flagLinkSverige = document.getElementById('draw-sverige');
function drawFlagSverige() {
var flagSverige = '<div class="flagga1 sverige"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></div>'
flagTarget.innerHTML = flagSverige;
}
flagLinkSverige.addEventListener("click", function () {
console.log("event for clicking link elfenbenskusten.")
drawFlagSverige();
});
//maruritius
var flagTargetMaruritius = document.getElementById('flag-maruritius');
var flagLinkMaruritius = document.getElementById('draw-maruritius');
function drawFlagMaruritius() {
var flagMaruritius = '<div class="flagga2 maruritius"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div></div>'
flagTarget.innerHTML = flagMaruritius;
}
flagLinkMaruritius.addEventListener("click", function () {
console.log("event for clicking link elfenbenskusten.")
drawFlagMaruritius();
});
//japan
var flagTargetJapan = document.getElementById('flag-japan');
var flagLinkJapan = document.getElementById('draw-japan');
function drawFlagJapan() {
var flagJapan = '<div class="flagga3 japan"><div class="box1"></div><div class="cirkel1"></div></div>'
flagTarget.innerHTML = flagJapan;
}
flagLinkJapan.addEventListener("click", function () {
console.log("event for clicking link elfenbenskusten.")
drawFlagJapan();
});
})();

#menu li {
list-style-type: none;
float: left;
margin-right: 10px;
position: relative;
}
#menu ul li>div {
position: absolute;
top: 20px;
}
Fiddle
Guess it's what you want to achieve

you have to edit the css, try this:
ul {
float: left;
width: 100%;
}
a {
float: left;
width: 6em;
text-decoration: none;
padding: 0.2em 0.6em;
}
li {
display: inline;
}