We Keep Coding

How to move Top bar to left side in css?

I have this div that shows a top red bar. I've been trying to move this bar to the left side and make it look like a border left, but not having any luck. Does anyone know how to make it look like a border left using this code? Thanks in advance!
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
height: 6px;
width: 100%;
top: 0;
left: 0;
background-color: red;
}
<div class = "container">this is a text</div>

This example adjusted position of ::after to make the red border appear on the left, hopefully close to the desired result.
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
width: 6px;
inset: 0;
background-color: red;
}
<div class = "container">this is a text</div>

Perhaps just simplify it to a border?
.container {
position: relative;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border: solid 2px #e1e4e8;
border-left: solid 8px red;
overflow: hidden;
}
<div class = "container">this is a text</div>

You can set border-left: 6px solid red; on the container class and remove background-color: red; from .container::after
Additionally, if you want to keep the grey border, just apply that style to each other sides of the container like so:
border-top: 2px solid #e1e4e8;
border-bottom: 2px solid #e1e4e8;
border-right: 2px solid #e1e4e8;
See snippet below:
.container {
position: absolute;
display: block;
width: 100%;
padding: 18px;
margin-bottom: 16px;
border-radius: 8px;
border-left: 6px solid red;
border-top: 2px solid #e1e4e8;
border-bottom: 2px solid #e1e4e8;
border-right: 2px solid #e1e4e8;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
display: block;
height: 6px;
width: 100%;
top: 0;
left: 0;
}
<div class = "container">this is a text</div>

You can also use a mixed border style and use hidden for the top, bottom, and right.
usage is described at W3Schools

Hide custom dropdown menu li once input checked

I have a custom dropdown menu in pure html . i have tried everything to get it to close but nothing works. I just want it to close once something was selected / somewhere outside the menu is clicked. it appears as my custom css is preventing any simple solution.
here is the code i have for it and css and current js. i understand that this may be a frequently asked question but im still a novice at javascript and even though i feel as if i've implemented all the solutions i could, its possible i havent done so correctly. thank you
$('#dropdown li').click(function() {
$(".dd-button:first-child").text($(this).text());
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
margin-left: -25%;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<label class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id = "dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</label>
</div>

Add this to your Javascript.
Include id to you <h1>
$('#dropdown li').click(function() {
$('#result').replaceWith('<h1 id="result">' + $(this).text() + '</h1>');
});
$(document).ready(function() {
// Show hide popover
$(".dropdown").click(function() {
$(this).find("#dropdown").slideDown("fast");
});
});
$(document).on("click", function(event) {
var $trigger = $(".dropdown");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#dropdown").slideUp("fast");
}
});
And you can even hide the dropdown by $('.dropdown').hide();
$('#dropdown li').click(function() {
$('#result').replaceWith('<h1 id="result">' + $(this).text() + '</h1>');
});
$(document).ready(function() {
// Show hide popover
$(".dropdown").click(function() {
$(this).find("#dropdown").slideDown("fast");
});
});
$(document).on("click", function(event) {
var $trigger = $(".dropdown");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#dropdown").slideUp("fast");
}
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
margin-left: -25%;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<label class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id = "dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</label>
</div>

You can simply use $(event.target).hasClass() condition to open or hide the dropdown...
Also don't use div inside a label because
Element div not allowed as child of element label in this context.
Stack Snippet
$('#dropdown li').click(function() {
$(".dd-button:first-child").text($(this).text());
});
$(document).on("click", function(event) {
if ($(event.target).hasClass("dd-button")) {
$("#dropdown").slideDown("fast");
} else {
$("#dropdown").slideUp("fast");
}
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<div class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id="dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</div>
</div>

How to set inner element border upon the outer one?

Here is my code:
.compare_header_box{
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title{
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a{
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover{
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid white;
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>
As you see border-bottom: 1px solid white; doesn't seem to appear. I want to set it exactly upon the border-bottom: 1px solid #ccc;. How can I do that?

Make use of pseudo elements,
.compare_header_box_items .active {
position: relative;
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.compare_header_box_items .active:after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #fff;
bottom: -1px;
left: 0;
}
I hope this is what you require
.compare_header_box {
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title {
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items {
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a {
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover {
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active {
position: relative;
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.compare_header_box_items .active:after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #fff;
bottom: -1px;
left: 0;
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>

Add margin-bottom: -1px to a tags in .compare_header_box_items div
Thus code will become:
.compare_header_box_items a {
display: inline-block;
font-size: 16px;
padding: 15px 40px;
margin: 0 0 -1px; /* add this line */
}
The reason your code not working is, main div border begin when inner links area ends which includes their borders too. Thus adding a 1 pixel negative margin will make them two borders overlap.

As a hot fix, just add: margin-bottom: -1px;
check below code snippet.
.compare_header_box{
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title{
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a{
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover{
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>

Use box-shadow instead of border, which allows you to avoid shifting the positions of elements:
box-shadow: 0 1px white;
(Note that I have substituted red for emphasis in the snippet below.)
.compare_header_box {
padding: 35px 30px;
direction: rtl;
}
.compare_header_box_title {
font-size: 30px;
width: 100px;
float: right;
margin-right: 5px;
margin-top: 4px;
}
.compare_header_box_items {
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.compare_header_box_items a {
display: inline-block;
font-size: 16px;
padding: 15px 40px;
}
.compare_header_box_items a:hover {
text-decoration: none;
background-color: #f1f1f1;
color: black;
}
.compare_header_box_items .active {
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
box-shadow: 0 1px red; /* white; */
}
<div class="compare_header_box">
<span class="compare_header_box_title active">List</span>
<div class="compare_header_box_items">
gp
in
tw
<a class="active" href="./fb">fb</a>
</div>
</div>

Hyy
Only this things is possible and your problem will solve...
.compare_header_box_items .active {
position: relative;
bottom: -1px;
}
Add this css and your problem will solve.
Thanks :)
Appreciate my answer.

The white border seems to appear bro. But the background is also white. Change the background and you will see the white background or as part of your code you can just hover over it and check the border. To the result part, there are so many answers above. This answer is only to say that the border is visible and element next to it appears.
Even SOF uses padding to fix it. If you remove, you will see border-bottom #CCC
background.

Change text color onclick

I have a toggle button and when I click the button I want to be able to change the colors of the text from a lighter color when not selected to black when selected. Right now it is only working on one of the buttons. Attached is a fiddle of my code. https://jsfiddle.net/h2db7qLp/
function onContainerClick(event) {
if (event.classList.contains('off')) {
event.classList.remove('off');
} else {
event.classList.add('off');
}
}
.container {
background: #EFEFEF;
position: relative;
width: 126px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.container2 {
background: #EFEFEF;
position: relative;
width: 226px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.switch {
position: absolute;
width: 50%;
height: 100%;
background-color: #fff;
transition: all 0.15s ease;
left: 0;
z-index: 1;
}
.switch-title {
margin-bottom: 6px;
font-size: 16px;
}
.container.off {} .container.off .switch,
.container2.off .switch {
left: 50%;
background-color: #fff;
}
.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
color: #aaa;
}
.label {
position: absolute;
width: 50%;
height: 100%;
text-align: center;
padding-top: 11px;
z-index: 1;
font: 16px"adiHaus", Arial, sans-serif;
font-weight: bolder;
color: #000;
}
.label.right-long {
left: 50%;
}
.label.right-short {
left: 50%;
}
<div class="switch-title">Hand:</div>
<div class="container" id="container" onclick="onContainerClick(this)">
<div class="switch" id="switch">
</div>
<div class="label left-short" onclick="onContainerClick(this)">L</div>
<div class="label right-short" onclick="onContainerClick(this)">R</div>
</div>

I think that by adding the class 'on' on change it goes well, also you don't need to call your handler on every div, just call once.
function onContainerClick(event) {
if (event.classList.contains('off')) {
event.classList.remove('off');
event.classList.add('on');
} else {
event.classList.add('off');
event.classList.remove('on');
}
}
.container {
background: #EFEFEF;
position: relative;
width: 126px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.container2 {
background: #EFEFEF;
position: relative;
width: 226px;
height: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
border-top: #CCC solid 1px;
border-radius: 2px 0 0 2px;
border-bottom: #EEE solid 1px;
border-right: #ddd solid 1px;
border-left: #ddd solid 1px;
border-radius: 2px 0 0 2px;
border-style: solid;
border-width: 1px;
}
.switch {
position: absolute;
width: 50%;
height: 100%;
background-color: #fff;
transition: all 0.15s ease;
left: 0;
z-index: 1;
}
.switch-title {
margin-bottom: 6px;
font-size: 16px;
}
.container.off {}
.container.off .switch,
.container2.off .switch {
left: 50%;
background-color: #fff;
}
.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
color: #aaa;
}
.label {
position: absolute;
width: 50%;
height: 100%;
text-align: center;
padding-top: 11px;
z-index: 1;
font: 16px "adiHaus", Arial, sans-serif;
font-weight: bolder;
color: #000;
}
.label.right-long {
left: 50%;
}
.label.right-short {
left: 50%;
}
<div class="switch-title">Hand:</div>
<div class="container on" id="container" onclick="onContainerClick(this)">
<div class="switch" id="switch">
</div>
<div class="label left-short">L</div>
<div class="label right-short">R</div>
</div>

Removing and Adding classes with button

I'm trying to use a button to remove the class .computer-off and add .computer-on and vice versa when clicked again. I've tried quite a few approaches, but to no avail. Here's one approach:
HTML:
<div id="computer-screen" class="computer-off">
<button onclick="computerPower()" class="power-button">Power</button>
</div>
JS:
function computerPower() {
if ( $("#computer-screen").hasClass('computer-off') ) {
document.getElementById('computer-screen').removeClass('computer-off').addClass('computer-on');
} else {
document.getElementById("computer-screen").removeClass('computer-on').addClass('computer-off');
}
};

I'd suggest, given that you appear to (be trying to) use jQuery:
$('#power').on('click', function() {
$('#computer-screen').toggleClass('computer-off computer-on');
});
$('#power').on('click', function() {
$('#computer-screen').toggleClass('computer-off computer-on');
});
#computer {
width: 60%;
margin: 1em auto;
padding: 1em;
border: 1px solid darkgrey;
overflow: hidden;
border-radius: 0.4em 0.4em 0 0;
}
#computer-screen {
border-radius: 0.5em;
height: 15em;
}
.computer-off {
background-color: #000;
}
.computer-on {
background-color: #060;
box-shadow: 0 0 1.0em #060;
}
#power {
cursor: pointer;
position: relative;
float: right;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 50%;
border: 1px solid #aaa;
margin-top: 0.3em;
}
.computer-on + #power {
box-shadow: inset 0 1px 3px #666;
}
#power::before {
content: '';
position: absolute;
top: 0.3em;
bottom: 0.75em;
left: 0.9em;
right: 0.9em;
background-color: #ccc;
}
#power::after {
content: '';
height: 1em;
width: 1em;
position: absolute;
border: 0.2em solid #ccc;
border-top-color: transparent;
border-radius: 50%;
bottom: 0.3em;
left: 0.3em;
}
#computer-screen.computer-on + #power::before {
background-color: #0f0;
}
#computer-screen.computer-on + #power::after {
border-color: #0f0;
border-top-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="computer">
<div id="computer-screen" class="computer-off"></div>
<div id="power"></div>
</div>
Or, in plain JavaScript:
document.getElementById('power').addEventListener('click', function() {
var screen = document.getElementById('computer-screen');
screen.classList.toggle('computer-off');
screen.classList.toggle('computer-on');
});
document.getElementById('power').addEventListener('click', function() {
var screen = document.getElementById('computer-screen');
screen.classList.toggle('computer-off');
screen.classList.toggle('computer-on');
});
#computer {
width: 60%;
margin: 1em auto;
padding: 1em;
border: 1px solid darkgrey;
overflow: hidden;
border-radius: 0.4em 0.4em 0 0;
}
#computer-screen {
border-radius: 0.5em;
height: 15em;
}
.computer-off {
background-color: #000;
}
.computer-on {
background-color: #060;
box-shadow: 0 0 1.0em #060;
}
#power {
cursor: pointer;
position: relative;
float: right;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 50%;
border: 1px solid #aaa;
margin-top: 0.3em;
}
.computer-on + #power {
box-shadow: inset 0 1px 3px #666;
}
#power::before {
content: '';
position: absolute;
top: 0.3em;
bottom: 0.75em;
left: 0.9em;
right: 0.9em;
background-color: #ccc;
}
#power::after {
content: '';
height: 1em;
width: 1em;
position: absolute;
border: 0.2em solid #ccc;
border-top-color: transparent;
border-radius: 50%;
bottom: 0.3em;
left: 0.3em;
}
#computer-screen.computer-on + #power::before {
background-color: #0f0;
}
#computer-screen.computer-on + #power::after {
border-color: #0f0;
border-top-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="computer">
<div id="computer-screen" class="computer-off"></div>
<div id="power"></div>
</div>
References:
JavaScript:
document.querySelector().
Element.classList.
jQuery:
toggleClass().