Dynamically add attribute to css class instead of element - javascript

I recently came across this scenario where I wanted to add css property to a class instead of an element.
When i do this
$('.class_with_css').css({display:'none'});
It would add the style "display:none" to all the elements that has the class "class_with_css" currently.
But in my case I had to apply "class_with_css" class to a new element after the above code was executed and want to retain this style addition. Is there a way to do this (something like add the property to the css class itself) without recalling the above function?
Eg.
two elements
<div id=1 class="abc" ></div>
<div id=2 class="abc" ></div>
Run the code
$('.abc').css({display:'none'});
The element becomes:
<div id=1 class="abc" style="display: none;" ></div>
<div id=2 class="abc" style="display: none;" ></div>
Now i add class abc to element like this
<div id=3 class="abc" ></div>
Is there a way to make class "abc" to hold the style instead of element so that step 4's element also has display:none

No, there is no way to achieve what you want directly. The way it usually is done by already having css class with desired changes/properties and applying that class instead of css property.
So, you will have for example:
.hide {
display: none
}
and add the class to elements:
$('.abc').addClass('hide');
UPDATE
Another option if you really want to dynamically add css class, would be the answer posted here

You can inject style to your header.
BUT REMEMBER From that point on. You have to use display: block; to show it. Otherwise the default style will be display: none; until you refresh the page.
Inject() is injecting style to your header
Add() is adding "abc" class to your other divs
Showme() is adding "display: block" to ".abc"
Hideme() is adding "display: none" to ".abc"
function Inject(){
$('head').append('<style type="text/css">.abc {display: none;}</style>');
}
function Add() {
$("#w").addClass("abc");
$("#z").addClass("abc");
}
function Showme() {
$(".abc").css("display","block");
}
function Hideme() {
$(".abc").css("display","none");
}
button {
border: 0;
padding: 1% 3%;
background-color: lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x" class="abc">x</div>
<div id="y" class="abc">y</div>
<div id="w">w</div>
<div id="z">z</div>
<p>First Click below and see how w and z are not hiding</p>
<button onclick="Inject()">Click to inject style to head</button>
<p>Second click below and add "abc" class to w and z.</p>
<button onclick="Add()">Click to add abc to w and z</button>
<p>Then click below to add style="display:block;"</p>
<button onclick="Showme()">Click to show anything with class "abc"</button>
<p>Then click below to add style="display:none;"</p>
<button onclick="Hideme()">Click to hide anything with class "abc"</button>

Related

if data attribute is true, add class

I want buttons in a slider to get underlined when a slide is visible.
I think I need to check if a data attribute is true, and then add class.
When inspecting my webpage, I find this in properties > dataset: DOMStringMap > isactiveslide: "true"
I need to check if a slide has isactiveslide: "true" (or even data-isactiveslide: "true") and then add class.
I think I am close and have tried these two codes:
jQuery(function () {
if (jQuery('menu1').attr('isactiveslide') === true) {
jQuery(this).find("#test1").addClass("underline");
}
})
and
jQuery('menu1').each(function(){
if(jQuery(this).attr('isactiveslide')==true())
jQuery('#test1').addClass('underline');
})
EDIT (added after some great answers and questions)
And here is the section, where the data attribute "isactiveslide" occurs, copied from the page:
<rs-slide data-key="rs-1898" data-title="WORKS" data-in="o:0;" data-out="a:false;" class="menus works1" id="works1" data-originalindex="2" data-origindex="1" data-description="" data-sba="" data-scroll-based="false" style="overflow: hidden; height: 100%; width: 100%; z-index: 20; opacity: 1; visibility: inherit;" data-owidth="300" data-oheight="200" data-rspausetimeronce="0" data-isactiveslide="true"><
So, the next slide which is not yet shown has data-isactiveslide="false". I reckon, identifying "true" is how I can add class.
EDIT May 4th - I think I am close now, but it still does not work.
jQuery('#slide1[data-isactiveslide="true"]')("#slide1-btn").addClass('.underline');
any help is very appreciated!
Can be easily done by css:
You need to find the class applied on the active slide and button
rs-slide.menus[data-isactiveslide="true"] .button-class-name-here{
text-decoration:underline!important;
}
or
Find which slider you are using and on the slide change event of that slider apply the class on the button for styling.
Try this code:
var $ = document.querySelectorAll.bind(document) //No need for jquery - simply import the function
$(".menu1[data-is-active-slide]").forEach((el, index) => {
$("#test1")[index].classList.add('underline');
$("#test1")[index].innerText = "Selected!";
console.log(1);
})
<div class="menu1" data-is-active-slide='true'>1</div>
<div id="test1"></div>
<div class="menu1" data-is-active-slide='false'>2</div>
<div id="test1"></div>
<div class="menu1">3</div>
<div class="menu2" data-is-active-slide='false'>4</div>
<div class="menu2">5</div>
<div class="menu1" data-is-active-slide>6</div>
<div id="test1"></div>
<div class="menu2">7</div>
<div class="menu1 menu2" data-is-active-slide="true">8</div>
<div id="test1"></div>
<div class="menu1 menu2">9</div>
The beginning declaration of $ is simply defining it since I did not import jQuery.
The next part is where the 'fun' begins. I used $(".menu1[data-is-active-slide]") to select all elements with class menu1 and with the property that data-is-active-slide is present. Then, I simply defined an action inside the function, for the sake of demonstrating that it works.

How to detect whether a web element is invisible?

I am trying to find out whether this element <ul class = 'pagination-buttons no-bullets'> is visible:
When <ul class = 'pagination-buttons no-bullets'> is visible, its parent element has class = 'page-number-section', when <ul class = 'pagination-buttons no-bullets'> is invisible, its parent element has class = 'page-number-section cloaked'. The element itself's attributes do not change with its visibility.
I could look at its parent class and verify whether it is visible but is there another way to do it? e.g. something like pageObj.QuerySelector().visible()?
Thanks
Using the getComputedStyle you can check the actual value of a css attribute.
Here is an example:
console.log('#a1 visibility is:', window.getComputedStyle(document.getElementById('a1'), null).getPropertyValue("visibility"));
console.log('#a2 visibility is:',window.getComputedStyle(document.getElementById('a2'), null).getPropertyValue("visibility"));
.hide-inner .some-class {
visibility: hidden;
}
<div class="hide-inner">
<div id="a1" class="some-class">abc</div>
</div>
<div class="show-inner">
<div id="a2" class="some-class">def</div>
</div>

Changing Background and Foreground with linked css in html

I have looked literally everywhere. The goal is to
Use the classes in the stylesheet to set color and background
For example, class selector colorA will set the text color to color ‘A’
Change the color of the text by changing the class of the div with id foreground
Change the background color by changing the class of the div with id background.
I was able to change it by manually entering the color, but when I try to change it by getting className it fails.
Here is my code Ive tried several different things with no luck, please help:
JavaScript:
function changeBG(col) {
var x = document.getElementsByTagName("DIV")[0];
x.backgroundColor = (col);
}
HTML:
<body>
<div class="holder">
<div id="background" class="backgroundC">
<div id="foreground" class="colorE">
<p>
Lorem ipsum </p>
</div>
</div>
</div>
<div class="holder">
<table>
Foreground <INPUT type="button" value="A" class = "colorA" name="button3" onClick= "document.fgColor= 'colorA'">
<INPUT type="button" value="A" class = "colorB" name="button3" onClick="document.fgColor='.colorB'">
Background <INPUT type="button" value="B" class = "backgroundA" name="button3" onClick="document.bgColor = '.backgroundA'">
<INPUT type="button" value="B" class = "backgroundB" name="button3" onClick= changeBG(document.getElementsByClassName("backgroundB"))>
</table>
</div>
CSS Stylesheet:
.colorA {
color: #4581cf;
}
.colorB {
color: #B7E2FF;
}
.backgroundA {
background-color: #4581cf;
}
.backgroundB {
background-color: #B7E2FF;
}
Try this
Make sure you are passing correct class nam
function changeBG(col) {
var x = document.getElementsByTagName("DIV")[0];
x.className=col;
}
changeBG's first parameter is wrong.
in w3c getElementsByClassName method definition
The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object
in html code, click event binding
onClick= changeBG(document.getElementsByClassName("backgroundB"))
in js, click event handler
x.backgroundColor=col;
col object is a collection of elements have class attribute containing 'backgroundB'.
backgroundColor is a element property, set with color value. ex) #f3f3f3
You can fix it like this.
x.className = "background" + col[0].value; //col[0] is the input element classfied 'backgroudB'. col[0].value equals 'B'
The className property sets or returns the class name of an element.
Using JQuery.
Create a new form and then copy this code and paste it, you will notice how specific div in specific class color can be changed easily.
<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".big, #div3").css("background-color", "yellow");
});
</script>
</head>
<body>
<div class="big" id="div1">
<p>This is first division of the DOM.</p>
</div>
<div class="medium" id="div2">
<p>This is second division of the DOM.</p>
</div>
<div class="small" id="div3">
<p>This is third division of the DOM</p>
</div>
</body>
</html>

How to change CSS of child element <span> inside parent <div> element Using jQuery onclick event?

I have two menu icons, both classed .menuentry, with the IDs #topicicon and #searchicon, in a menubar. Beneath them are two larger divs, #topiclist and #searchform, both initially set to display:none;.
What I would like to do is click each menu icon and display the corresponding larger div underneath, as well as getting rid of the other larger div if it has been display previously.
So, for example, when I click #topicicon, it displays #topiclist and hides #searchform.
The code is being used on this website, in the menubar at the top: http://bonfiredog.co.uk/bonfog
And this is the code that I am using.
HTML:
<div id="topicicon"><img src="topic_icon.png" /></div>
<div id="searchform"><img src="search_icon.png" /></div>
<div id="topiclist"></div>
<div id="searchform"></div>
CSS:
#topiclist {
display:none;
}
#searchform {
display:none;
}
jQuery:
$("#topicicon").click(function(){
$("#topiclist").css("display", "visible");
$("#searchform").css("display", "none");
}, function(){
$("#formlist").css("display", "hidden");
});
Not working as of now...
You have to make two click handlers for #topicicon and #searchform and use .hide() and .show() as shown :-
$("#topicicon").click(function(){
$("#topiclist").show();
$("#searchform1").hide();
});
$("#searchform").click(function(){
$("#topiclist").hide();
$("#searchform1").show();
});
and you are using two div's with same id's i.e searchform so change the id of second searchform div to say searchform1 and try above code.
You could avoid having to write multiple click handlers, and reuse across different components with the following:
$(function () {
$('.showRelated').click(function () {
var relatedId = $(this).data('rel');
$('.related').hide(); // hide all related elements
$(relatedId).show(); // show relevant
});
});
.related {
display: none;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="topicicon" class="showRelated" data-rel="#topiclist"><i class="fa fa-newspaper-o"></i></div>
<div id="searchicon" class="showRelated" data-rel="#searchform"><i class="fa fa-search"></i></div>
<div id="topiclist" class="related">Topic List</div>
<div id="searchform" class="related">Search Form</div>
"visible" is not correct value for display propriety. You should add "display: block", or "display: inline-block", or "display: inline" or any other value that is admitted by display propriety.

Javascript if(condition) then addclass

I'm trying to get a class added on when a div is inside a certain parent div.
<div class="parent1">
<div class="child">
Content
</div>
</div>
.parent1 only exists on one page, while .child exists on others as well as this one.
So when .child is everywhere else, its color is red, but when it's inside .parent1 I want its color to be blue.
Here's what I'm using.
if ($('.child').parents('.parent1').length == 1) {
.addClass('.new-class');
}
I'm having no success with this. Can anyone help?
$(".parent1 .child").addClass("new-class");
Or
$(".parent1>.child").addClass("new-class");
If you want to make sure only first child will be populated with class:
<div class="parent1">
<div class="child"> <!-- will have also "new-class" class -->
<div class="child"> <!-- will NOT have "new-class" class -->
</div>
</div>
</div>
.addClass('.new-class'); adds that class to something. You forgot to tell jQuery what something is, and caused a syntax error instead (which your browser console would have told you about if you had it open). I believe you want this:
$('.parent1 .child').addClass('.new-class');
Well, since you did tag this as just javascript...
HTML
<div class="parent1" id="parent">
<div class="child" id="child">
Content
</div>
</div>
CSS
.has-parent {
color: blue;
}
Javascript
var child = document.getElementById('child');
var parent = document.getElementById('parent');
if (child.parentNode == parent) {
child.className += ' has-parent';
}
DEMO
You could also do this with just CSS:
.child
{
color: red;
}
.parent .child
{
color: blue;
}
So long as the .parent .child rule comes after the single .child rule, it will override the color with blue. No extra work to change the color. If you need this extra class for some other reason the The User 518469 's answer is probably best.

Categories

Resources