I am programming a web and i need to know when a Class was added.
I am using a JavaScript plugin and the plugin add a CSS Class in then deletes it and add it in other div (gallery). I need to know in every moment in which 'div' is this class.
Here you have an example of what I want to do
$('div').click(function() {
$(this).toggleClass('red');
});
if ($('div').hasClass("red")) {
$("div").addClass('border');
}
.box {
width: 250px;
height: 100px;
border: 1px #000 solid;
}
.red {
background: red;
}
.border {
border: 6px #000 solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
As you see in this example, I want to add the class border only when the class red was added, can not do it together with the class red because as i say in the real page I am using a JavaScript plugin.
Hi :) thanks four your Ideas.
As #T.J. Crowder writed Mutation Observer is a very good option for this question.
Hier a link with the Answer:
How to detect class changing by DOMAttrModified
Related
I have more than one button and I have a class named bg. In the CSS file, I styled this bg class, but at the same time, I want to be able to change its colors dynamically from the JS file. the background is only one color, but I can make different colors that I want, for example, color codes are coming from the API (red for test1, yellow for test2, etc.). I want to use whatever code comes up. For example, going to the test2 page, then the background is yellow. I can do this by creating classes as test1 and test2 in the css file, but it is not useful because there may be hundreds of pages, it is much more logical to use the color code from the API instead of the troubles of adding them one by one to the css file.
$('.bg').click(function(){
$(this).unbind('mouseenter mouseleave');
$('.bg').removeClass('active');
$('.bg.active').css('background','yellow');
$(this).addClass('active');
}).hover(
function(){
$(this).css({
'border-color': '#4000a1',
'background': 'blue'
});
},
function(){
$(this).css({
'border-color': '#4000a1',
'background': 'transparent'
});
});
.bg{
border: 2px solid #4000a1;
background: gray;
width: 200px;
height: 150px;
margin-bottom: 20px;
}
.bg.active{
background: red;
}
.bg:hover{
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='bg'></div>
<div class='bg'></div>
I tried something like this but it seems hover works properly but when clicked it stays fixed but I want only one of them to stay active. Also in my original file addClass and removeClass are done in another file and properly there is only one active class but the style does not change.
I hope I can explain my problem properly.
I'm not sure about the exact result you want but i made some changes to your code so there is only one active background at a time. I also simplified it. You had hover on CSS and hover on JavaScript ... Stay with hover on CSS files for simple things. Handle click events with JavaScript.
$('.bg').click(function(){
$('.bg').css({backgroundColor: ''});
$(this).css({backgroundColor: $(this).data('color')});
})
.bg{
border: 2px solid #4000a1;
background: gray;
width: 200px;
height: 150px;
margin-bottom: 20px;
}
.bg:hover{
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='bg' data-color="#262626"></div>
<div class='bg' data-color="#001717"></div>
Earlier my question was:-
I have the following code in my Sass file
.random {
box-sizing: content-box;
text-align: center;
line-height: 1;
&:before {
display: inline-block;
margin-right: 0.2em;
width: 0;
height: 0;
border-right: 0.4em solid transparent;
border-left: 0.4em solid transparent;
content: "";
vertical-align: baseline;
}
}
.perc-neg:before {
border-top: 0.5em solid #FCB062;
}
.perc-neg.good:before {
border-top: 0.5em solid #98F1AC;
}
I have a div with
class = "random perc-neg good"
Now I want to change style of the above div. how to do it?
I tried following in console but it returns empty object
$("random perc-neg good:before").css("color","red");
$("random.perc-neg.good:before").css("color","red");
$(".random.perc-neg.good:before").css("color","red");
Someone has suggested its a possible duplicate but its not.
Int he related question, the user just wanted to make it visible or hidden so two classes will be sufficient.
But my requirement is to change the color as per user's choice which he can select from wide range of colors.
Its definitely impossible to define a class with each color changes.
And we cant pass some variable to css as well to change the color property accordingly.
Updated Question:
I am now using Sass.
I have defined an function to update the color
#function em($color) {
#return border-bottom: 0.5em solid $color;
}
.perc-neg.good:before {
em(#98F1AC);
}
definitely, I can call the function from the Sass file but how to call it from javascript
Now I want to pass the hex code of color from javascript
I need to pass something like this from javascript
.perc-neg.good:before(#98F1AC)
looked for the same in google did not find anything relevant
Instead of marking it as duplicate, it would be much better if you can provide a solution
Changing the style of pseudo elements are not possible because :after and :before are not part of the DOM technically. You need to find a work around or use additional classes to achieve this.
You can use less library which allows you to render css at run time here is a reference.
#Updated Answer
You can try doing something like this:
.perc-neg.good:before {
border-color: #BorderColor;
}
and call this method whenever you want to update the css like this:
less.modifyVars({
'#BorderColor': '#5B83AD'
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a shape which consists of 3 components:
* ***************************** *
*** * * ***
***** * * *****
******* ***************************** *******
As shown in the diagram above, the shape consists of a rectangle surrounded by two triangles (one on the left side and one on the right).
I would like the entire shape to change to the same colour whenever the user hovers over any one of its components.
I've tried using various methods to accomplish this task but without much success.
Here's what I currently have on JSFiddle.
The shape is kind of off, however my main concern is how to get the hover feature working for my object.
Even though I tried implementing JavaScript in the fiddle above, I will accept any other alternative methods that will get my code working.
I've done it like here:
<div class="container">
... your code
</div>
.container:hover .tabStyle{
background : #000;
border-color: #000;
}
.container:hover .slopeLeft, .container:hover .slopeRight{
border-bottom-color: #000;
}
where .container is parent element for your div's
JSFiddle: http://jsfiddle.net/svzrkdu6/12/
It is achievable using pure CSS. Modify your code line:
/* Just for an example */
.child {
height: 20px;
border: 1px solid black;
}
/* Your solution */
.parent:hover .child {
background-color: red;
}
<div class="parent">
<div class="child first">A</div>
<div class="child second">B</div>
<div class="child third">C</div>
</div>
First off, your JSFiddle was not displaying the .slopeRight, I added the following html:
.slopeRight {
border-bottom: 100px solid #D8D8D8;
border-right: 50px solid transparent;
position: absolute;
top: 10px;
left: 255px;
}
I then surrounded all the rectangle components under one div called .wrap, and added the following css:
.wrap:hover .tabStyle {
backGround: red;
border-color: red;
}
.wrap:hover .slopeLeft {
border-color: transparent red red transparent ;
}
.wrap:hover .slopeRight {
border-bottom: 100px solid red;
border-right: 50px solid transparent;
}
Here's a working fiddle...http://jsfiddle.net/svzrkdu6/10/
Moreover, are you sure you want 3 components to your shape? Because if not, you may create a trapezoid instead, which is much more concise...check out this fiddle
http://jsfiddle.net/383rksx6/1/
a outline box as below is needed:
The HTML code is:
<p>We <span>prefer questions that can be answered, not</span> just discussed.</p>
It is difficult to get the coordinate of the left-top point and right-bottom point of the outline box.
using:
outline: 2px red solid;
can only work in chrome, but failed in firefox. And also failed in chrome while the line-height of <p> is 300%.
Like so:
CSS:
p {
width: 220px;
}
span {
outline: 2px red solid;
}
So you have the span around what you want, just put outline on it and done. Pretty simple uh? :D
DEMO HERE
Note: As pointed out in the comments, this doesn't seem to work in Firefox. Looking into a solution now.
If you know how to use CSS3, use it. Else, please insert the following within your html page.
<style type="text/css">
span {
border: 5px solid red;
}
</style>
I am using jQuery UI Autocomplate plugin as it is on the first example. I also have jQuery UI Theme style sheet referenced for other plugins.
This is the input I am using with that:
CSS:
div.formvalue {
background-color: #eee;
border: 1px solid red;
padding: 10px;
margin: 0px;
}
div.paddedInput {
padding: 5px;
border: 1px solid black;
background-color: white;
}
div.paddedInput input {
border: 0px;
width: 100%;
outline:none;
}
HTML:
<div class="formvalue">
<div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>
Here is my situation:
As the above div element serves as an input element (on the style perspective), the autocomplete list looks a little awkward because it sets itself for the input element.
I dug the source code which jQuery UI is creating for the autocomplete function and there is ui-autocomplete style class but as I said but I couldn't figure auto what should I override.
Any thoughts?
UPDATE:
Here is the jsfiddle sample:
http://jsfiddle.net/tugberk/YxRYe/4/
If you want to overwrite your style, you can use !important keyword as this code
div.paddedInput input {
border: 0px!important;
width: 100%;
outline:none;
}
I guess the main question here is why you would have the outer div element serve as an input element from a style perspective in the first place.
If this is not a requirement, just do this. Otherwise we'll have to use JS to set the width of the dropdown to the width of the div and adjust the position of the dropdown. A rather hacky solution i.m.o. I am not aware of a way to specify what element the dropdown should attach to since this is rarely what you want.