We Keep Coding

Putting and removing background color on click from button

I have problem with this code because it works. Well, partially. My idea is to change background color of button on which user has clicked but data-line attributes increments only once and by that changing background color only once. (it enters in else and changes data-line value from 0 to 1 but my idea is to increment its value further and then by concluding whether value is odd or even to remove or add bg-danger class). All buttons (all with trashCan class) initially have data-line attribute with value zero and neutral background color. What is wrong with this code?
$(".trashCan").click(function(){
let trashCan = $(this);
let trash = parseInt(trashCan.data('line'))+1;
trashCan.attr('data-line',trash);
if(trash%2==0){
trashCan.removeClass("bg-danger");
}
else {
trashCan.addClass("bg-danger");
}
});

The issue is because you're accessing the data-line attribute with a mix of attr() and data(). The former reads from the DOM, while the latter reads from jQuery's internal cache. If you get the value with one of them you need to also set the value using the same method.
In the example below I've amended the logic to use data() only, which is the preferred choice where possible. If you absolutely have to update the DOM, then you would use attr() instead.
$(".trashCan").click(function() {
let trashCan = $(this);
let trash = parseInt(trashCan.data('line')) + 1;
trashCan.data('line', trash);
if (trash % 2 == 0) {
trashCan.removeClass("bg-danger");
} else {
trashCan.addClass("bg-danger");
}
});
.trashCan {
background-color: #CCC;
color: #000;
border-radius: 5px;
padding: 10px 30px;
border: 0;
}
.trashCan.bg-danger {
background-color: #C00;
color: #FFF
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="trashCan" data-line="0">Trash</button>
However, it's worth noting that this logic is not necessary. It seems that your goal is simply to toggle the class on successive clicks, in which case just use toggleClass() and remove the data attribute entirely:
$(".trashCan").click(function() {
$(this).toggleClass('bg-danger');
});
.trashCan {
background-color: #CCC;
color: #000;
border-radius: 5px;
padding: 10px 30px;
border: 0;
}
.trashCan.bg-danger {
background-color: #C00;
color: #FFF
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="trashCan">Trash</button>

i cant add change background color on scroll in JS

im trying to change background color of my navbar on scroll but it keeps giving me this error:
'Uncaught TypeError: Cannot read property 'add' of undefined'
so what is the problem or how can i apply that ?
this is my CSS class list im trying to remove after it scrolls over the first page:
.navbar {
background: transparent !important;
z-index: 10;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
position: fixed;
width: 100%;
}
and this is the the CSS classlist im trying to add after scrolling into the second page or beyond:
.navbar-active{
position: fixed;
background-color: rgba(0, 0, 0, .692) !important;
box-shadow: 0 3px 1rem rgba(0, 0, 0, .1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
and finally this is my JS code to replace the classlists:
const navbar = document.getElementsByClassName('navbar');
window.onscroll = function(){
const top = window.scrollY;
if(top >= 693){
navbar.classList.add('.navbar-active');
} else {
navbar.classList.remove('.navbar-active');
}
}

You are accessing navbar incorrectly, you must access it either by:
One: const navbar = document.getElementsByClassName('navbar')[0];
Remember that getElementsByClassName returns list of elements with that class name
OR
Two: const navbar = document.querySelector('.navbar');
Your second mistake is here:navbar.classList.add('.navbar-active'), don't put a . on your parameter string.
Just pass it like this:
navbar.classList.add('navbar-active')

The problem arises because document.getElementsByClassName('navbar') returns an HTMLCollection object - and this has no classList property. Which should all make perfect sense when you think about it - multiple elements can have a particular class, and it doesn't make sense to talk about the list of classes of a whole set of elements, as opposed to just one.
You clearly only want to add or remove the class from a single element - so, assuming you only have one element with class "navbar", you can do either this:
const navbar = document.getElementsByClassName('navbar')[0];`
which gets the first (and presumably only) element with the navbar class, or
const navbar = document.querySelector('.navbar');
which always returns the first element with the given selector. Both of these alternatives return an individual element, which has the classList property you expect.
Another way would be to use an I'D rather than a class - which is more logical if you know you will only use it once. document.getElementById('navbarId') also works, because there should be only one element in the document with a given ID.
Also, as #MosiaThabo points out in his answer/comment, you have an extraneous dot at the start of the class name you're trying to add.

In classlist you only write classnames, so you do not need to write the dot (.)
So your code should be:
navbar.classList.add('navbar-active');
But I strongly recommend to use ID as selector instead of class:
#navbar {
background: transparent !important;
z-index: 10;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
position: fixed;
width: 100%;
}
then on JS you can easily select:
const navbar = document.getElementById('navbar');
This is a more efficient way from the performance perspective.

Ag-Grid - How to Set Border Bottom for the Last Row

I am using Ag-Grid with React and I can't seem to be able to figure out how to show the border-bottom after the last row. The grid looks incomplete without it. See the attached image.
Need the border bottom after the last row
I tried to set the following CSS, but it doesn't work:
.ag-footer-cell-entire-row {
border-bottom: solid 1px black !important;
}
In the documentation, I also looked at the rowStyle property and tried to use it but I can't figure out how to determine if the current row is the last row. I will greatly appreciate if someone could point me in the right direction.

Using rowStyle is really close... You will actually need to use getRowStyle which you will need to return an object of CSS values per the docs. Here is an example of what your function will look like:
gridOptions = {
...
getRowStyle: lastRowBorder
...
}
function lastRowBorder(params){
if (params.node.rowIndex == params.api.rowModel.rowsToDisplay.length - 1){
return {border-bottom: thick green}
}
else {
return {}
}
}
I believe that this comparison params.node.rowIndex == params.api.rowModel.rowsToDisplay.length - 1 will work in all cases, but I haven't tested it myself. There is a params.api.lastChild, but I am unsure if that is only true for the last row node or if it is true for the last node for groups... which is what you seem to be doing. In any case it would be beneficial to console.log the params if the comparison that I provided doesn't work.
As a side note, going the route of trying to use css selectors to try to reach the last-child won't be the cleanest solution in most cases since ag grid relies on absolute positioning... meaning that the last row in the grid could be in the middle of the DOM

This is the top result when Googling "Set bottom border in agGrid". The issue I was having was that applying a border to the grid body was not rendering a border on the bottom of the grid (e.g. regardless of how man rows were present, I wanted the grid itself to have a border all the way around). After some tinkering, here is my solution
.grid-container {
height: 70%;
margin: 10px 20px 0 20px;
.ag-header {
border: 1px solid black;
border-bottom: none;
}
.ag-body {
background-color: #fdfdfd;
border-bottom: 1px solid black;
}
.ag-body-viewport-wrapper {
border: 1px solid black;
border-top: none;
}
.ag-body-viewport {
border-bottom: 1px solid black;
}
}

Setting the border color of text boxes on the form

I want to set all text boxes border color on the form to red. I tried using
$('*').css('border', 'black');
also
var all = document.getElementsByTagName('*');
for(var i=0;i<all.length;i++)
{
all[i].style.backgroundColor = "Red";
}
Nothing is working for me.
In the CSS file all text boxes
input[type=text], .htmlplusinput {
border: 1px solid #C79988;
padding:1px;
width:120px;
cursor: text;
}
input[type=text]:focus, .htmlplusinput:focus {
border:2px solid #25a3fc;
padding:0px;
}

To start with, the $('*') selector matches all elements. If you only want text boxes, you'll want to use $('input:text').
Once you have the selector correct, you need to set the colour of the border. If I recall correctly, the correct CSS property is border-color, so you'd do:
$('input:text').css('border-color', 'red');
Another, potentially better, solution would be to add a class to each of the elements, rather than modifying their style property, then use a CSS declaration for that class to control the appearance of the border:
$('input:text').addClass('redborder');
.redborder {
border-color: red;
}

This should do the job:
jQuery('input:text').css('borderColor', '#000');

mouseover() mouseout() jQuery add/removeClass problem

I am trying to create a simple mouseover effect using a combination of mouseover, mouseout, addClass, and removeClass. Basically, when the user mouses over an element, I want to apply a different border (1px dashed gray). The initial state is "1px solid white". I have a class called "highlight" which simply has "border: 1px dashed gray" in it. I want to add that class onmouseover and remove it on onmouseout but I am unable to get the effect I want unless I use !important within the "highlight" class.

It sounds as though you've got the javascript working fine as is, but it's just a problem with the specificity of your CSS rules, which is why !important makes it work.
You just have to make your highlighted css rules more specific than the non-highlighted rules.
#someItem ul li { /* Specificity = 102 */
border-color: white;
}
.highlight { /* Specificity = 10 -- not specific enough! */
border-color: grey;
}
#someItem ul li.highlight { /* Specificity = 112 -- this will work */
border-color: grey;
}
Edit with further explanation:
Let's say the relevant parts of your HTML look like this:
<div id="someItem">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
and you have this CSS:
#someItem ul li {
border: 1px solid white;
}
.highlight {
border-color: grey;
}
Currently, all the list items in the ul in #someItem div will have a white border, and nothing has the class highlight so nothing's grey.
Through whatever means you want (in your case a hover event in jQuery), you add a class to one of the items:
$(this).addClass('highlight');
The HTML will now look something like this:
<div id="someItem">
<ul>
<li>Item 1</li>
<li class="highlight">Item 2</li>
<li>Item 3</li>
</ul>
</div>
So far, your Javascript and HTML are working fine, but you don't see a grey border! The problem is your CSS. When the browser is trying to decide how to style the element, it looks at all the different selectors which target an element and the styles defined in those selectors. If there are two different selectors both defining the same style (in our case, the border colour is contested), then it has to decide which style to apply and which to ignore. It does this by means of what is known as "Specificity" - that is, how specific a selector is. As outlined in the HTML Dog article, it does this by assigning a value to each part of your selector, and the one with the highest score wins. The points are:
element selector (eg: "ul", "li", "table") = 1 point
class selector (eg: ".highlight", ".active", ".menu") = 10 points
id selector (eg: "#someItem", "#mainContent") = 100 points
There are some more rules, eg: the keyword !important and also inline styles, but that's mostly irrelevant for this, uhh... "lesson". The only other thing you should know is that if two selectors have the same specificity, then the one defined later in the file wins.
Going back to your problem, given the CSS we had before, we can see why it's still not got a grey border:
#someItem ul li = id + element + element = 100 + 1 + 1 = 102 points
.highlight = class = 10 points
As mentioned earlier, the solution is to create a more specific selector:
#someItem ul li.highlight
= id + element + element + class
= 100 + 1 + 1 + 10
= 112 points
And to answer your question in the comments, you don't need to change any of your javascript or HTML for this to work. If you break down that selector, what it's saying is:
Look for the element with id "someItem", inside that look for a ul element, and then an li element which has the class "highlight" on it.
...and now, given the simple .addClass() call that you made earlier, the li satisfies these conditions, so the border should turn grey.

From Jquery 1.3.3 you'll be able to do this a little simpler. There will be an enhanced version of .toggleClass() available which will be very powerful.
If you don't need to break this out into a function then from 1.3.3 you'll be able to simply do:
$(".myclass").hover(function(){ $(this).toggleClass('highlight'); });
If you're having to include !important then your highlight class may need to be more specific (see CSS Specificity).

I'm guessing you're using an inline style on the element for the initial style:
<style type="text/css">
.hover { border: 1px dashed gray; } /* will never apply */
</style>
...
<!-- this style has priority over class styles! -->
<div style="border: 1px solid white">
...
</div>
This will override the styles applied using a class... So instead of using inline styles, just use a different initial class to apply the initial styles:
<style type="text/css">
.normal { border: 1px solid white; }
.hover { border: 1px dashed gray; }
</style>
...
<div class="normal">
...
</div>

This is an example of a hover I have used:
$(".myclass").hover(jbhovershow,jbhoverhide);
jbhovershow = function () {
$(this).addClass("jimtest");
};
jbhoverhide = function () {
$(this).removeClass("jimtest");
}
you don't really have to break something this simple up into seperate functions.
I suspect your issue might be with a conflict in the css - try just applying your highlight class by hardcodeing it , or on a click and see if it is really working.
Hope that helps
Jim

Have you considered a pure css approach?
For example:
someClass {
border: 1px solid white;
}
someClass:hover {
border: 1px dashed gray;
}
The hover pseudo class will give you the behavior that you want: when the user is moused over the element, it will use the lower style, otherwise it will use the first style.
Note: as someone commented, this doesn't work for non a elements in IE. It does however work for me in Chrome, Firefox, Safari, and Opera.
It also works for any element in IE8 and IE7 standards mode. I don't have IE6 to test with though.

CSS:
div.target {
border: 1px solid #000000;
}
div.target-hover {
border-color: #ff0000;
}
JS:
$("div.target").hover(
function () {
$(this).addClass("target-hover");
},
function () {
$(this).removeClass("target-hover");
}
);
i usually do it this way. (allows more options)

Or you can just do it with simple CSS by using:
#namehere { border: 1px solid #fff; }
#namehere:hover { border: 1px dashed #aaa }