We Keep Coding

Change css class attribute values using javascript

I want to change the value of one of the attributes of css class dynamically
Here's my scenario:
I've many elements using one class, instead of getting them all and looping them over and applying style, I want to change the value of one of the attributes of class, which is alredy applied on them. for example
.prodName {
max-width: 270px;
display: block;
}
above class is being used by many elements, and I want to alter one of the attributes of that class like
.prodName {
max-width: 350px <---
display: block;
}
is there any simple method for this in javascript.
Before I post this question, I already searched but didn't find anything easy and useful.
thanks in advance to helping hands.

You can use CSS variables for this case.
const root = document.querySelector(':root');
function play() {
root.style.setProperty('--size', '300px');
}
:root {
--size: 100px;
}
.container {
background-color: red;
width: var(--size);
height: var(--size);
cursor: pointer;
}
<div class="container" onclick="play()"></div>
The only problem with the above approach is support in older browsers. If you have to support IE, and older browsers where CSS variable support is not present, you can handle this problem by adding a class to the body/parent container.
function play() {
document.body.classList.add('large')
}
.container {
background-color: red;
width: 100px;
height: 100px;
cursor: pointer;
}
.large .container {
width: 300px;
height: 300px;
}
<div class="container" onclick="play()"></div>

Add new class to CSS:
.mw350 {
max-width: 350px;
}
Then add new class to the element in JS:
document.querySelector('.prodName').className += ' mw350'; // <-- better to select using unique IDs, like '#prodNameElement'

If you are going to control the css class/attribute change from ts, maybe with a function or var change, you might want to use ngClass: https://www.freecodecamp.org/news/angular-ngclass-example/ and have all the logic where you want it, easily accessible.

CSS pseudo class disappears after variable value update via JS

I would like to be able to update a CSS variable via JS, but when I make the variable update the CSS pseudo element get's destroyed (i.e. just disappears).
Here's the SCSS code:
:root {
--test-thing: "";
}
.folder-1-open span::after {
width: 90%;
height: 85%;
bottom: 0;
left: 5%;
background-color: #fff;
z-index: 3;
content: var(--test-thing);
}
I'm trying to manipulate the variable thusly:
const root = document.documentElement
root.style.setProperty('--test-thing', "Hello World")
The CSS above works perfectly fine on the element (a label) that it's applied to, basically just a white square, but as soon as I try and update the CSS variable --test-thing to add a string via the content prop, the whole thing just disappears.
Is it not possible to do this with a pseudo element or class?
From researching related posts on SO, my understanding was that this was possible using CSS variables.
For context, I’m working off this example of a pure CSS interactive folder (when it’s open is when I’d like to update content proper dynamically).

Ok, I figured out why this is happening, sort of. Still not 100% sure why, but it has something to do with the fact that the new value isn't in quotes. Just put the value in quotes and it works fine.
const root = document.documentElement
root.style.setProperty('--test', "'Hello World'") // <-- this needs to be in quotes
:root {
--test: "";
}
#test {
height: 100px;
width: 100px;
background: #ccc;
}
#test:after {
content: var(--test);
min-width: 100px;
background: #000;
min-height: 30px;
color: #fff;
}
<div id="test">
</div>

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" );

Using addClass to show an interval

I'm attempting to show an interval within a bar. Initially I was using the jQuery plugin for range, but it did not work like I wanted.
I have several different bulleted pointed within my bar. Whenever someone clicks within or near the point (in the class sliderInterval) I want the class rangeSection to be added to that area, basically showing that certain interval active. However, the rangeSection doesn't even show up, nor I am certain I am doing this correctly.
In addition, since I am doing this with intervals. I want to be able to give those intervals values, so that when one is selected I can display that value.
This is what I am trying to get it to look like:
I added a snippet to show what I have done so far. Any advise?
$(function interval() {
$(".slideInterval").click(function() {
$(this).addClass(".rangeSection");
});
});
#sliderBar {
border-radius: 15px;
width: 90%;
height: auto;
margin: 25px 10%;
background: blue;
}
.rangeSection {
width: 100px;
height: 100%;
color: purple;
position: absolute;
z-index: 1;
}
.intervalCircle {
border-radius: 50%;
height: 15px;
width: 15px;
background: red;
z-index: 1;
position: absolute;
}
.sliderInterval {
display: inline-block;
padding: 10px 8%;
}
.sliderInterval:first-child {
padding-left: 0;
}
.intervalCircle:first-child {
padding-left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sliderBar">
<div class="rangeSection"></div>
<div class="sliderInterval" onclick="interval()"><span class="intervalCircle" ></span></div>
<div class="sliderInterval" onclick="interval()"><span class="intervalCircle" ></span></div>
<div class="sliderInterval" onclick="interval()"><span class="intervalCircle"></span></div>
<div class="sliderInterval" onclick="interval()"><span class="intervalCircle"></span></div>
<div class="sliderInterval" onclick="interval()"><span class="intervalCircle"></span></div>
<div class="sliderInterval" onclick="interval()"><span class="intervalCircle"></span></div>
</div>

try this one.
You can use the .ready(); function of the jQuery library and set the .click() listener on all the .sliderInterval elements. I added the active class as well.
try it here:
https://jsfiddle.net/8cxLLts1/
$(document).ready(function(){
$(".sliderInterval").click(function() {
$(this).addClass("active");
});
});
EDIT: actually, if you use toggleClass() instead of addClass(), you'll be able to turn on and off a specific section

Using onclick in your html attribute and then binding a click event also in js could be considered redundant and unnecessary. Try removing the onclick attribute from your html and then adjust your js like so:
$(document).ready(function(){
})
.on('click', '.sliderInterval', function(){
$(this).addClass(".rangeSection");
});
Bind it to the document itself and this will help with your event delegation naturally. Also, take care to double check your class names - your js is missing the 'r' in '.sliderInterval'.

Divide elements width depending on amount of elements

As the title say "Divide elements width depending on amount of elements"
I want to have an progress-like bar where I can add elements and depending on the amount elements I have the progress bar would split.
This is fixed values now (33%, 33% and 34%) and I want them to change depending of how many elements I use.
Like if I have 4 elements in my list I want it to automatically divide equally with 4. Is there any easy way to do it? Maybe using only CSS? I don't mind javascript, but Im just saying that it could be something I've missed :)
Edit:
I created 3 div's and gave them all different classes.
<section class="progress-part-list">
<div class="progress-part-left">
</div>
<div class="progress-part-right">
</div>
<div class="progress-part-mid">
</div>
</section>
In my CSS with my fixed values it is:
.progress-part-mid
{
height: 100%;
width: 34%;
background-color: #52ff00;
opacity: 0.9;
display: block;
float:left;
}
.progress-part-left
{
height: 100%;
width: 33%;
background-color: red;
opacity: 0.9;
display: block;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
float:left
}
.progress-part-right
{
height: 100%;
width: 33%;
background-color: yellow;
opacity: 0.9;
display: block;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
float:right;
}

Are you looking for something like this?
http://jsfiddle.net/FK7N5/
You want to select all the elements, and use that to calculate the percentage.
It doesn't matter how many elements you include in your container. Just make sure they all have a common class like "progress". Remember, you can have more than one class on an element, so you can have <div class="progress progress-first"> or <div class="progress progress-middle">.
The jQuery to make it work:
// Get all parts of the progress bar.
var bars = $('.bar');
// With each one, calculate the percentage and apply the width.
bars.each(function()
{
$(this).css('width', (100 / bars.length) + '%');
});

As a person who uses javascript more than I should, the first thing that came to mind is to run some JavaScript on load, and then it can go though the 'child' property of the surrounding element (the one with class progress-part-list), then divide 100 by that, then set the styles to that.
Here's some code that would do this:
<script type="text/javascript">
var divd=100/(document.getElementsByClassName('progress-part-list')[0].children.length);
[].forEach.call(document.getElementsByClassName('progress-part-list')[0].children,function(curChild){
curChild.style.width=divd+'%';
});
</script>
Put that just after the closing tag of the <section>
That's very crude, though, you might want to fix it to make it more elegant (like modifying class styles instead of inline styles, going through all instead of just the first progress-part-list, etc
It's also untested

Try giving each of the inside-elements a margin-right of -4px and use the following JS/jQuery:
$(document).ready(function(){
$('div div').width($('div:first-child').width() / 3);
});
Here's a fiddle: http://jsfiddle.net/JthgV/
Is that what you're looking for?
P.S. Forgive the inline style. I did it that way for the sake of saving time.