We Keep Coding

Why does a bit of my background gradient show at certain screen sizes?

I can't figure out why I'm getting this little bit of green when the window is an odd number of pixels wide. I think it has something to do with sub-pixel rendering, but I'm just not sure where the green is coming from. It's just the 2nd div too which is weird.
I have some script that is animating the BG of this div. I'm sure this is part of the issue, but I can't figure out why it's only happening to my 2nd div.
I tried to manually set the width of this div, but I was hoping it would be responsive and scale with the window size.
let currentStage = 1
function performAction(selectedStage) {
currentStage = selectedStage
let stages = document.body.getElementsByClassName('stage-flow-item')
let stageLines = document.body.getElementsByClassName('stage-flow-line')
console.log("selectedStage: " + selectedStage)
for (let stage of stages) {
if (stage.id > currentStage) {
stage.classList.remove('completed')
stage.classList.add('active')
} else {
stage.classList.remove('active')
stage.classList.add('completed')
}
}
for (let stageLine of stageLines) {
if (stageLine.id > currentStage) {
stageLine.classList.remove('lineCompleted')
stageLine.classList.add('lineActive')
} else {
stageLine.classList.remove('lineActive')
stageLine.classList.add('lineCompleted')
}
}
}
.stage-flow-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
padding: 0 30px;
}
.stage-flow-item {
width: 70px;
height: 70px;
min-width: 70px;
border-radius: 50%;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #fff;
cursor: pointer;
}
.stage-flow-item.active {
background-color: #ddd;
}
.stage-flow-item.completed {
background-color: #6ab04c;
}
.stage-flow-line {
width: calc(100vw);
height: 6px;
background-color: #ddd;
/* default color */
background: linear-gradient(to left, #ddd 50%, #6ab04c 50%) right;
position: relative;
background-size: 200%;
transition: .5s ease-out;
}
.stage-flow-line.lineCompleted {
background-position: left;
background-color: #6ab04c;
}
.stage-flow-line.lineActive {
background-position: right;
background-color: #ddd;
}
<div class="stage-flow-container">
<div id=1 class="stage-flow-item" onclick="performAction(1)">1</div>
<div id=1 class="stage-flow-line"></div>
<div id=2 class="stage-flow-item" onclick="performAction(2)">2</div>
<div id=2 class="stage-flow-line"></div>
<div id=3 class="stage-flow-item" onclick="performAction(3)">3</div>
</div>

I'm not sure if this is on the right track, but I'd eliminate the odd 100vw width on the connectors and instead make them flex. I'd then remove the 200% background size multiplier. By setting the gradient points to 100% the problem is gone. I really don't know if this covers your use case, though.
I converted from background gradient to a pseudo-element solution for the color transition. I think it's simpler. You'd probably have to use CSS animations (as opposed to simple transitions) to make it work otherwise. Of course, you could apply the same principle to the stage items as well, implementing a delay to crate a consistent animation across the item and the line.
Note that duplicated ID values are invalid in HTML. They must be unique. I've refactored to use data attributes instead and an event listener instead of inline JavaScript.
const stageEls = document.querySelectorAll('.stage-flow-item')
const lineEls = document.querySelectorAll('.stage-flow-line')
let currentStage = 1
stageEls.forEach(el => {
el.addEventListener('click', () => {
performAction(el.dataset.stage)
})
})
function performAction(selectedStage) {
currentStage = selectedStage
for (let el of stageEls) {
if (el.dataset.stage > currentStage) {
el.classList.remove('completed')
el.classList.add('active')
} else {
el.classList.remove('active')
el.classList.add('completed')
}
}
for (let el of lineEls) {
if (el.dataset.stage > currentStage) {
el.classList.remove('lineCompleted')
el.classList.add('lineActive')
} else {
el.classList.remove('lineActive')
el.classList.add('lineCompleted')
}
}
}
.stage-flow-container {
display: flex;
align-items: center;
height: 70px;
padding: 0 30px;
}
.stage-flow-item {
width: 70px;
height: 70px;
min-width: 70px;
border-radius: 50%;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #fff;
cursor: pointer;
}
.stage-flow-item.active {
background-color: #ddd;
}
.stage-flow-item.completed {
background-color: #6ab04c;
}
.stage-flow-line {
flex: 1;
height: 6px;
background: #ddd;
position: relative;
}
.stage-flow-line::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #6ab04c;
transition: all 0.5s ease-out;
}
.stage-flow-line.lineCompleted::after {
width: 100%;
}
<div class="stage-flow-container">
<div data-stage=1 class="stage-flow-item">1</div>
<div data-stage=1 class="stage-flow-line"></div>
<div data-stage=2 class="stage-flow-item">2</div>
<div data-stage=2 class="stage-flow-line"></div>
<div data-stage=3 class="stage-flow-item">3</div>
</div>

Remove all HTML elements exept text

whole code
With Javascript I want to remove all current Elements on the Screen exept the text and it's CSS styles. My end goal is that I can essentially exchange the text "Bubble" with "Bounce" and still have the same CSS styling in the end. But as I also need to remove ALL Elements from the screen to run the next code I need to clear out the body and CSS entirely. This leads to my Problem. I dont know how to either get the same CSS styling back after clearing it out nor how to exclude the CSS Styling from the clearing. Can anybody help?
document.getElementById("text").innerHTML = "Bubble";
document.addEventListener("click", next);
function next() {
document.head.innerHTML = " ";
document.getElementById("text").innerHTML = "Bounce";
}
section {
width: 100%;
height: 100vh;
overflow: hidden;
background: #1F69FA;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
content {
min-width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
position: absolute;
left: 0;
right: 0
}
section h2 {
font-size: 10em;
color: #333;
margin: 0 auto;
text-align: center;
font-family: consolas;
}
<section>
<div class="content">
<h2 id="text"></h2>
</div>
</section>

If you really need to call document.head.innerHTML = " "; this is one way to do it :
I created a function called add_css() which adds the CSS (which is now stored in a variable) in a style tag in the head of document.
Also your CSS had a typo (content instead of .content)
document.getElementById("text").innerHTML = "Bubble";
const css_to_keep = `section {
width: 100%;
height: 100vh;
overflow: hidden;
background: #1F69FA;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.content {
min-width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
position: absolute;
left: 0;
right: 0
}
section h2 {
font-size: 10em;
color: #333;
margin: 0 auto;
text-align: center;
font-family: consolas;
}`;
document.addEventListener("click", next);
add_css();
function next() {
document.head.innerHTML = " ";
add_css();
document.getElementById("text").innerHTML = "Bounce";
}
function add_css(){
const style_elem = document.createElement('style');
document.head.appendChild(style_elem);
style_elem.type = 'text/css';
style_elem.appendChild(document.createTextNode(css_to_keep));
}
<section>
<div class="content">
<h2 id="text"></h2>
</div>
</section>

You don't need to "remove" anything - just replace the innerHTML of the document body with a new updated section.
// A function that returns a string
// (See template strings below)
function createSection(text) {
return `
<section>
<div class="content">
<h2 id="text">${text}</h2>
</div>
</section>
`;
}
document.body.innerHTML = createSection('Bubble');
document.addEventListener('click', next);
// Replace the body HTML with the new section
function next() {
document.body.innerHTML = createSection('Bounce');
}
section{width:100%;height:100vh;overflow:hidden;background:#1f69fa;display:flex;justify-content:center;align-items:center;flex-direction:column}content{min-width:100%;max-width:100%;margin-left:auto;margin-right:auto;text-align:center;position:absolute;left:0;right:0}section h2{font-size:10em;color:#333;margin:0 auto;text-align:center;font-family:consolas}
Additional documentation
Template/string literals

Div changes size once another div is loaded?

So, i am having an issue with a div, when another div is generated (via javascript) below it, it is changing the size of the div.
// for the side nav message list
const chatList = function(list) {
let br = document.createElement("br")
for (let index in list) {
try {
let chat = list[index]
let chatBodyParent = document.createElement("div")
chatBodyParent.onclick = function() {
$("#message-list").empty()
api.listMessages(chat.chat.id)
document.getElementById("message-list").channelId = chat.chat.id
}
chatBodyParent.id = `chat-body-${chat.chat.id}`
let chatBody = document.createElement("div")
chatBody.className = "chat-body"
let chatImg = document.createElement("img")
chatImg.src = chat.chat.cover
if (!chat.chat.cover && chat.chat.type == 1) {
chatImg.src = "/dump/pfp.svg"
}
if (!chat.chat.cover && chat.chat.type == 3) {
chatImg.src = "/dump/public.png"
}
chatImg.className = "chat-img"
chatImg.setAttribute("align", "left")
chatBody.appendChild(chatImg)
let chatInfoContainer = document.createElement("div")
chatInfoContainer.className = "chat-info-container"
let chatName = document.createElement("span")
chatName.className = "chat-name"
chatName.innerText = chat.chat.title
chatInfoContainer.appendChild(chatName)
chatInfoContainer.appendChild(br.cloneNode(true))
let chatMessageContent = document.createElement("span")
chatMessageContent.className = "chat-message-content"
chatMessageContent.id = `chat-message-content-${chat.chat.id}`
let messageContent
if (chat.message) {
let long = false;
if (chat.message.text.length >= 30) {
long = true
}
messageContent = chat.message.text.substring(0, 30)
if (long) {
messageContent += "..."
}
} else if (chat.type == "file") {
messageContent = chat.user.nick + " sent a file"
}
chatMessageContent.innerText = messageContent
chatInfoContainer.appendChild(chatMessageContent)
chatBody.appendChild(chatInfoContainer)
chatBodyParent.appendChild(chatBody)
document.getElementById("chat-list").appendChild(chatBodyParent)
} catch {
console.log(list[index])
}
}
}
.sidenav {
height: 100%;
width: 15%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: var(--lightish-grey);
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 15%;
padding: 0px 10px;
overflow-x: hidden;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
::-webkit-scrollbar {
color: var(--grey);
}
::-webkit-scrollbar-corner {
color: var(--grey);
}
::-webkit-scrollbar-track {
color: var(--grey);
}
.menu {
width: 90%;
min-width: 90%;
height: 200px;
margin-left: 5%;
margin-right: 5%;
background-color: var(--menu-grey);
padding-top: 10px;
padding-bottom: 5px;
font-family: "FontRegular";
}
.chat-bar {
position: fixed;
bottom: 1%;
width: 50%;
height: 3.5%;
padding: 0px 5px;
margin: 8px 0;
display: inline-block;
border-top: hidden;
border-left: hidden;
border-right: hidden;
border-bottom: solid var(--light-grey);
box-sizing: border-box;
background-color: var(--grey);
color: var(--light-grey);
font-family: "FontRegular";
}
.chat-bar:focus {
outline-width: 0;
}
.chat-body {
width: 90%;
height: 50px;
margin-left: 5%;
border: 3px;
border-top: hidden;
border-left: hidden;
border-right: hidden;
/*border-bottom: solid var(--light-grey);*/
padding-top: 10px;
padding-bottom: 5px;
font-family: "FontRegular";
}
.chat-body:hover {
opacity: 0.8;
cursor:pointer;
}
.chat-body:focus {
opacity: 0.8;
}
.chat-img {
height: 50px;
width: auto;
border-radius: 50%;
}
.chat-info-container {
position:relative;
top: 10%;
}
<!DOCTYPE html>
<html>
<head>
<title>iFChat - Dashboard</title>
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/dashboard.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/utils.js"></script>
<script type="text/javascript" src="/js/api.js"></script>
<script type="text/javascript" src="/js/dashboard.js"></script>
</head>
<div class="sidenav">
<div id="menu" class="menu">
</div>
<div>
</div> <br><br>
<div id="chat-list">
</div>
</div>
<div class="main" id="main">
<div id="message-list" class="message-list">
</div>
<input type="text" name="chat..." id="chat-bar" class="chat-bar" placeholder="chat..." maxlength="500">
</div>
</html>
Here is an image before the chat list is loaded
Then menu is loaded with the correct size and margin
pre-load
after the chat list loads, it changes the width or margin of the div above some how, and im not sure how or why its doing that, but i cant figure it out, heres an image of after the chat list is loaded post-load
i have tried different margins and positioning settings but cant seem to get it to work, any help is greatly appreciated :)
edit: One possible solution may be to change the css with javascript every time the chat list is loaded, but i would like to avoid that if at all possible.

OK, so i figured out the issue, the issue occurs when enough elements pop up to trigger the scrollbar, so the fix for me was this
::-webkit-scrollbar {
display: none;
}
Because i want a user to beable to scroll, but i dont want there to be a scrollbar, My next plan is to make this static, so that it doesnt move on scroll at all. Still the issue was arising when my (invisible scroll bar, that still had a width) was appearing. Gotta watch out for hidden elements.

How to reorder divs using flex box?

I am trying to keep a seo friendly and semantic structure for my DOM, without repeating whole elements to display them in various positions.
My layout is based on display: flex items. I try to achieve the following:
Important things to know:
I do not want to show/hide divs based on the window width (to avoid unnecessary duplicates)
None of the divs has a known or fixed height
On desktops the divs should be vertical centered, while the right column builds a tag-team (behaves like one single div)
The layout needs to support at least IE11+
Is there a css only solution to achieve this?
If not, it would be easy to cut out the green div and paste its content into the pink one using javascript. But I do have concerns about the performance and "flickering" using this, although resizing the browser makes it more complicated. Do I make this needlessly complicated?
Here is fiddle showing a working solution but with javascript:
CODEPEN DEMO

In general, you can't do this with Flexbox alone, though there might be a compromise based on each given case.
With Flexbox alone, using fixed height, you can accomplish this
* {
box-sizing: border-box;
}
body, html {
margin: 0;
}
.flex {
width: 90%;
margin: 5vh auto;
height: 90vh;
background: rgba(0, 0, 0, 0.05);
display: flex;
flex-flow: column wrap;
}
.flex div {
flex: 1;
width: 50%;
}
.flex div:nth-child(2) {
order: -1;
}
.flex::before {
content: '';
height: 100%;
}
#media (max-width:768px) {
.flex div {
width: auto;
}
.flex::before {
display: none;
}
.flex div:nth-child(2) {
order: 0;
}
}
/* styling */
.flex-child {
color: white;
font-size: 2em;
font-weight: bold;
}
.flex-child:nth-child(1) {
background: #e6007e;
}
.flex-child:nth-child(2) {
background: #f4997c;
}
.flex-child:nth-child(3) {
background: #86c06b;
}
<div class="flex">
<div class="flex-child">
<div>Top/Right</div>
</div>
<div class="flex-child">
<div>Center/Left</div>
</div>
<div class="flex-child">
<div>Bottom/Right</div>
</div>
</div>
In this case, where no fixed height is allowed, you can combine Flexbox and float.
By set up it for mobile using Flexbox where you add the center item first in the markup and then, with order, move it between the top and bottom.
With a media query you then simply make the flex container a block element and use float to position the left to the left and the right to the right.
* {
box-sizing: border-box;
}
body, html {
margin: 0;
}
.flex {
max-width: 1024px;
width: 90%;
margin: 5vh auto;
height: 90vh;
background: rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
}
.flex-child {
color: white;
font-size: 2em;
font-weight: bold;
padding: 5%;
flex-basis: 33.333%;
display: flex;
align-items: center;
}
.flex-child:nth-child(1) {
background: #e6007e;
order: 1;
}
.flex-child:nth-child(2) {
background: #f4997c;
}
.flex-child:nth-child(3) {
background: #86c06b;
order: 2;
}
#media (min-width: 768px) {
.flex {
display: block;
}
.flex-child {
width: 50%;
}
.flex-child:nth-child(1) {
float: left;
height: 100%;
}
.flex-child:nth-child(2),
.flex-child:nth-child(3) {
float: right;
height: 50%;
}
}
<div class="flex">
<div class="flex-child">
<div>Center/Left</div>
</div>
<div class="flex-child">
<div>Top/Right</div>
</div>
<div class="flex-child">
<div>Bottom/Right</div>
</div>
</div>
Update
Here is another version combining Flexbox with position: absolute, which also vertically center the items in desktop mode
Updated, added a script to control so the absolute positioned element won't get bigger than the right items, and if so, adjust the flex containers height.
Note, the script is by no means optimized, it is only there to show how a fix in certain situations
(function() {
window.addEventListener("resize", resizeThrottler, false);
var fp = document.querySelector('.flex');
var fi = fp.querySelector('.flex-child:nth-child(1)');
var resizeTimeout;
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if ( !resizeTimeout ) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
// The actualResizeHandler will execute at a rate of 15fps
}, 66);
}
}
function actualResizeHandler() {
// handle the resize event
if (fp.offsetHeight <= fi.offsetHeight) {
fp.style.cssText = 'height: '+fi.offsetHeight+'px';
} else {
fp.style.cssText = 'height: auto';
}
}
window.addEventListener('load', function() {
actualResizeHandler();
})
}());
* {
box-sizing: border-box;
}
body, html {
margin: 0;
}
.flex {
position: relative;
max-width: 1024px;
width: 90%;
margin: 5vh auto;
height: 90vh;
background: rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
}
.flex-child {
color: white;
font-size: 2em;
font-weight: bold;
padding: 5%;
}
.flex-child:nth-child(1) {
order: 1;
}
.flex-child:nth-child(3) {
order: 2;
}
.flex-child:nth-child(1) div {
background: #e6007e;
}
.flex-child:nth-child(2) div {
background: #f4997c;
}
.flex-child:nth-child(3) div {
background: #86c06b;
}
#media (min-width: 768px) {
.flex {
justify-content: center;
}
.flex-child {
width: 50%;
}
.flex-child:nth-child(1) {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.flex-child:nth-child(n+2) {
margin-left: 50%;
}
}
<div class="flex">
<div class="flex-child">
<div>Center/Left<br>with more<br>content<br>than any<br>of the<br>other items<br>other items<br>other items<br>other items<br>other items</div>
</div>
<div class="flex-child">
<div>Top/Right<br>with more<br>content</div>
</div>
<div class="flex-child">
<div>Bottom/Right<br>with more</div>
</div>
</div>
With script one can also reorder/move items between elements.
Stack snippet
You can also combine this with a media query, and use it to do the actual re-order of the elements
$( document ).ready(function() {
$(window).resize(function() {
if ($( window ).width() < 600 ) {
$(".one").insertBefore("#b");
} else {
$(".one").insertBefore(".two");
}
});
});
.outer, #flex, #flex2 {
display: flex;
flex-direction: column;
}
#a {
order: 4;
background: #ccc;
}
#b {
order: 1;
background: #aaa;
}
#c {
order: 3;
background: #d33;
}
.one {
order: 2;
background: #aaa;
}
.two {
order: 5;
background: #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div id="flex">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
<div id="flex2">
<div class="one">Show me 2nd</div>
<div class="two">Show me 5th</div>
</div>
</div>
Update 2 (answered at another question but later moved here)
If we talk about smaller items, like a header or smaller menus, one can do what many website platform providers like "squarespace", "weebly", "wordpress", etc does. Their templates holds different markup structures, where an item sometimes exist twice, one visible for desktop, another for mobile.
Also, being so small, there will be less to nothing when it comes to performance (and personally I don't see anymore issue with this than having duplicate CSS rules, one for each screen size, and happily do this instead of introducing script).
Fiddle demo
Stack snippet
.container {
display: flex;
}
.container > div {
width: 50%;
}
.container div:nth-child(-n+2) {
border: dashed;
padding: 10px;
}
.container > div:nth-child(1) {
display: none; /* hide outer "Flower" */
}
#media (max-width:768px) {
.container {
flex-direction: column;
}
.container div {
width: auto;
}
.container div:nth-child(1) {
display: block; /* show outer "Flower" */
}
.container div:nth-child(3) div:nth-child(1) {
display: none; /* hide inner "Flower" */
}
}
<div class="container">
<div>Flower</div>
<div>Tree</div>
<div>
<div>Flower</div>
<div>Bee</div>
</div>
</div>

changing link image on hover

my question today probably has an easy answer, however I have found a few working examples but can't seem to transfer it to my web page.
I am trying to use an image for a link, and would like the image to change when you hover over it. The link below is what I am trying to accomplish, but for whatever reason when I substitute my code from my page to it, it doesn't work.
EXAMPLE http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onmouseover
I am completely lost now and just need a little help. Here is my code.
DEMO
function hoverImg(x) {
x.style.backgroundImage = "url(image/arrowBtnHover.png)"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.style.backgroundImage = "url(image/arrowBtn.png)"
}
#header {
background-color: #473D39;
height: 100%;
width: 100%;
display: table;
position: absolute;
z-index: 10;
}
#wrapper {
display: table-cell;
vertical-align: middle;
}
#header h1 {
text-align: center;
margin: 0px;
font-size: 80px;
padding-top: 5%;
font-weight: normal;
color: #FFF;
letter-spacing: 18px;
text-transform: uppercase;
}
#header h5 {
text-align: center;
color: #FFF;
margin: 15px 15px 50px;
font-weight: normal;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
}
<div id="header">
<div id="wrapper">
<h1>Premier Webster</h1>
<h5>Local Web Design For The Profesional In You</h5>
<img onmouseover="hoverImg(this)" onmouseout="normalImg(this)" src="image/arrowBtn.png" />
</div>
</div>

Please take a look at https://jsfiddle.net/avzfdc2j/3/
It has been done using css with background image and transition
div.smile {
background-image: url("http://images.clipartpanda.com/stupidity-clipart-1320682287266972230curius_face.svg.hi.png");
background-size: 60px 60px;
height: 60px;
width: 60px;
cursor: pointer;
}
div.smile:hover {
background-image: url("http://images.clipartpanda.com/straight-face-clipart-black-and-white-smiley-face-hi.png");
transition: ease 0.5s;
}
<div class="smile"></div>

You should be changing the src attribute instead:
function hoverImg(x) {
x.src = "image/arrowBtnHover.png"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.src = "image/arrowBtn.png"
}
But I don't think that the transition will work with this.

Since it's an image, you need to change it's src property, not it's CSS.
function hoverImg(x) {
x.src = "image/arrowBtnHover.png"
x.style.transition = "ease 0.5s"
}
function normalImg(x) {
x.src = "image/arrowBtn.png"
}