We Keep Coding

CSS changing to display: flex affects how classes are applied to button

I have an unordered list whose li elements each contain a button as a child within them.
In Javascript I toggle adding a 'done' style (which crosses off the text) on the li elements when they are clicked like so
function crossOffList(e){
if (e.target.nodeName === "LI"){
e.target.classList.toggle("done");
}
}
The following is the li style:
li {
margin: 10px 0px;
**display: flex;**
justify-content: space-between;
align-items: center;
align-self: center;
}
The issue is that when I add display: flex; to the li style, the button also becomes crossed off after the li item is clicked, like so:
This is how the buttons are created and added to the li elements
function addDeleteButton(element){
element.innerHTML += " ";
var button = document.createElement("button");
button.appendChild(document.createTextNode("Delete"));
button.addEventListener("click", function(e) {
ul.removeChild(element);
})
//button.classList.add("delete-button");
element.appendChild(button);
}
// initialise all starting list elements
for (var i of document.getElementsByTagName("li")){
addDeleteButton(i);
i.addEventListener("click", crossOffList);
}
This behaviour of the button also becoming crossed off does not occur if the display is not set to flex. What is causing this behaviour and is there any way to use flex while having the button not be crossed off after click?

CSS text-decoration does not get inherited in the same way as other properties, it gets propagated. It cannot be overwritten (but it can be added to) by setting another value in a child element. There is some discussion of this at Override text-decoration on child element
However, MDN documentation states that this propagation does not apply when the child element is floating or absolute.
I have not been able to show any improvement using float but there is some improvement if we position the button absolutely when, and only when, the parent LI element has display:flex
For example putting class flex on each LI element if you want them flexed and removing it if not and changing the CSS to:
li {
position: relative;
margin: 10px 0px;
justify-content: space-between;
align-items: center;
align-self: center;
background-color:cyan;
}
li.flex {/* add .flex class to each li if you want them flexed*/
display: flex;
}
li.done {
text-decoration: line-through;
}
.flex button {
position:absolute;
right:0;
}
Some work will be needed to make sure the desired layout is achieved but at least this method does not strike out the button text in both flex and non-flex cases.

Hover on parent but not on child element

I have an issue where I want to activate hover state on a link when hovering on the container anywhere but except on two buttons save and close. CSS approach is preferred but if not vanilla JavaScript would be fine. Please have have look I have created a codepen

You can not trigger pseudo events. you can give it same styling when the box is hovered:
.box {
display: flex;
padding: 20px;
border-bottom: 1px solid #ccc;
transition: background .3s ease-in-out;
&:hover {
background: #f1f1f1;
a {
color: #525199;
background-color: #e6e6f0;
border-color: #525199;
}
}

This is not possible with pure CSS, as explained on the question How to style the parent element when hovering a child element?
The solution, then, is to add some Javascript to style the parent element, for example by adding a class to the parent element. A simple code snippet to achieve this with your solution, would be the following:
document.querySelectorAll('.save, .cancel').forEach(function(button) {
button.addEventListener("mouseover", function() {
button.parentNode.parentNode.className = 'box nohover';
});
button.addEventListener("mouseout", function() {
button.parentNode.parentNode.className = 'box';
});
});
And you'd then need to style the {{nohover}} class by not changing the background:
.nohover:hover {
background: none;
}
See this codepen for a working demo.

try this:
.box:hover :not(.box--right):hover a {
color: #525199;
background-color: #e6e6f0;
border-color: #525199;
}

Using jQuery how can I make an div object visible using a function?

The following div is part of my body:
<div id="errorSection" class="alert alert-danger"> Error: Location could not be found.</div>
<br>
I have this div styled as follows:
#errorSection{
visibility: hidden;
text-align: center;
font-style: bold;
font-size: 14pt;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
How can I make this appear using jQuery when calling the following function. The way I have it now is calling an error.
function noLocation(){
$('#errorSection').style.visibility.visible;
}

Keeping your declared CSS would be:
$('#errorSection').css('visibility', 'visible');
But I'd advise you to use an extra CSS declaration like this:
#errorSection.showError {
visibility: visible;
}
$('#errorSection').addClass('showError');
This means you can change your CSS in the future to use display: none; (or even height: 0; or position: absolute; left: -99999;) and not have to modify your JavaScript (Separation of concerns)

Simple. You are mixing straight Javascript and jQuery, which does not work.
If using the 'visibility' property and not the 'display'
You should do.
function noLocation(){
$('#errorSection').css("visibility", "visible");
}
or
function noLocation(){
$('#errorSection').css({"visibility": "visible", "text-align": "center",
"font-style": "bold"}); //can use comma delimited properties like in a css file sheet in the {} brackets.
}

The visibility issue has been dealt with in other posts and personally I would add / remove a class like #DJDaveMark suggests, but there is a built in toggle function in jquery that is useful- so this is to provide an alternative: simply start out with the element hidden, and then on the click of the button - use toggle() to toggle the display.
I have used a named function so that you can easily use this in your existing code, but you can just as easily put the toggle into the click handler of an element like the button that I have put in here.
$('#togglevisibility').click(function(){
toggleVisibility();
})
function toggleVisibility() {
$('#errorSection').toggle();
}
#errorSection{
display:none;
text-align: center;
font-style: bold;
font-size: 14pt;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="togglevisibility">Click Me To Toggle Visibility</button>
<hr/>
<div id="errorSection" class="alert alert-danger"> Error: Location could not be found.</div>

Different ways in jQuery, couple of them below:
1) Use of css function
Show: $('#errorSection').css("display", "inline") different values can be here like inline, block, inline-block
Hide: $('#errorSection').css("display", "none")
2) Or you can use show and hide
Show: $('#errorSection').show()
Hide: $('#errorSection').hide()
3) Having css class and you can toggle to make show/hide effect:
.error {
display: inline; #or whatever like block, inline-block based on your design
}
Show/Hide can be triggered using:
$('#errorSection').toggleClass( "error" );

Show div when post has class

Update
I'd modded the CSS given by David Thomas a bit. Its now a banner.
.div.popular::before {
/* setting the default styles for
the generated content: */
display: block;
width: 10em;
height: 2em;
line-height: 2em;
text-align: center;
background: #F60;
color: #fff;
font-size: 1.4rem;
position: absolute;
top: 30px;
right: 0px;
z-index: 1;
}
I would like to make a folded corner sort of like in this post: Folded banner using css
--- Original post ---
Let me first explain what I'm trying to do. I'm trying to give some post some extra attention by making a little circle with some call-to-action text in it.
But I only want this to trigger when a div has a specific class.
So if the div the class populair or sale I would like to have a little circle show up on that post. This script what I am using right now.
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
if($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
});
And this HTML:
<div class="populair-div" style="display:none;">
<strong>Populair</strong>
</div>
<div class="sale-div" style="display:none;">
<strong>Sale</strong>
</div>
But this only show's the populair-div and not the other one. I'm guessing my script is wrong. Should I use else for all the other call-to-action classes?
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
else($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
else($("#front-page-items").hasClass('Free')){
$(".free-div").show();
} // and so on
});
Is there someone that could help me out? Also is it possible to echo the div so I don't have to write a whole div for every call-to-action div?

For something like this, where the displayed text is explicitly linked to the class-name of the element it's easiest to use CSS and the generated content available, effectively hiding the elements you don't wish to show by default and then explicitly allowing elements you want to show, along with the generated content of those elements (using the ::before and ::after pseudo-elements:
div {
/* preventing <div> elements
from showing by default: */
display: none;
}
div.populair-div,
div.sale-div {
/* ensuring that elements matching
the selectors above (<div>
elements with either the 'sale-div'
or 'populair-div' class-names
are shown: */
display: block;
}
div.populair-div::before,
div.sale-div::before {
/* setting the default styles for
the generated content: */
display: block;
width: 4em;
height: 4em;
line-height: 4em;
text-align: center;
border: 3px solid transparent;
border-radius: 50%;
}
div.populair-div::before {
/* setting the text with the
"content" property: */
content: "Popular";
/* providing a specific colour
for the generated contents'
border: */
border-color: #0c0;
}
div.sale-div::before {
content: "Sale";
border-color: #f90;
}
/* entirely irrelevant, just so you can
see a (slightly prettified) difference
should you remove the default display
property for the <div> elements: */
code {
background-color: #ddd;
}
em {
font-style: italic;
}
<div class="neither-popular-nor-sale">
<p>
This element should not be shown, it has neither a class of <code>"populair-div"</code> <em>or</em> <code>"sale-div"</code>.
</p>
</div>
<div class="populair-div">
</div>
<div>Also not to be shown.</div>
<div class="sale-div">
</div>

You can use toggle function for this. It will be shorter and clearer.
Display or hide the matched elements.
Note: The buttons is for tests.
$(document).ready(function($){
init();
});
function init() {
$(".populair-div").toggle($("#front-page-items").hasClass('populair'));
$(".sale-div").toggle($("#front-page-items").hasClass('sale'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front-page-items" class="populair sale"></div>
<div class="populair-div">populair-div</div>
<div class="sale-div">sale-div</div>
<hr />
<button onclick="document.getElementById('front-page-items').classList.toggle('populair');init()">toggle populair</button>
<button onclick="document.getElementById('front-page-items').classList.toggle('sale');init()">toggle sale</button>

How can I add a mouseover effect to a span?

I'm trying to do something, like when you Mouseover on text inside a span, the background changes.
My code:
<script>
function unhighlight(x) {
x.style.backgroundColor="transparent"
}
function highlight(x) {
x.style.backgroundColor="red"
}
</script>
<span onmouseover="highlight(this)" onmouseout="unhighlight(this)">
<h2>What's New</h2>
</span>
The reason I don't apply it to the h2 is a little complicated. Don't need to explain. Help?

Your javacript is fine.
The span element is the inline level generic container. It also helps
to inform the structure of document, but it is used to group or wrap
other inline elements and/or text, rather than block level elements.
So h2 is not valid child for span:
html standard
function unhighlight(x) {
x.style.backgroundColor = "transparent"
}
function highlight(x) {
x.style.backgroundColor = "red"
}
span {
display: block;
}
<span onmouseover="highlight(this);" onmouseout="unhighlight(this)"><h2>What's New</h2></span>
I suggest for containers to use block elements like div. And also i suggest to use css for this:
div:hover {
background: red;
}
<div>
<h2>What's New</h2>
</div>

Just set CSS to <span>
display: block;

You need to change your span element to an inline block for this to work :
span {
display: inline-block;
}
But note that you can achieve the same effect with CSS only :
span {
display: inline-block;
background-color: transparent;
}
span:hover {
background-color: red;
}

You don't need javascript to do it, just with HTML and CSS :
#myText {
display: inline-block;
background-color: transparent;
}
#myText:hover {
display: inline-block;
background-color: red;
}
<span id="myText"><h2>What's New</h2></span>