Develop Reference

Change CSS during an animation

I have some buttons with their CSS style.
When an animation starts I would like to change their style for the duration of the animation.
Stuff like changing the color, changing the pointer, changing the hover; to make them look "disabled" basically.
I have a global var which is "true" while the animations runs, and turns "false" when the animation is not running.
In order to achieve this goal, I have tried many things, but none of them worked, I tried:
changing the name of the class based on the var value, and create two different CSS styles -> didn't work because it didn't get updated with the change of the var
changing the style within REACT inside the function when the animation is called and changing it back when it's over. Using: document.getElementById("firstOne").style =
The second option it's the only one that actually worked well. The problem I can't edit back the hover to where it was before.
The question:
Is there a way to change the hover from React? Something like:
document.getElementById("firstOne").style = ;
If not, is there a way to just tell it "from now just follow the style written on the CSS file"?. To kind of setting the style back to before.
If not, any other ideas on how to achieve my goal?
Thank you

Changing color text using button

I tried changing text color of my html using javascript . After few tries I realised i cant change the color if i am changing it in css. So basically it means CSS is executed at the end?? and how can i change the color of the text after clicking the button if i am changing it in css as well? Sorry i am new
function changecol()
{
var html=document.body;
html.style.backgroundColor='black';
html.style.color='white';
}
Expected all the lines in my html to turn white but only those where i have not applied css became white

This is a jquery approach, that will change your color on button click:
$("#butt").on("click",function(){
$(".color").css("background-color","red");
$(".color").css("color","white");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="color">HALLO</div>
<button id="butt">Change Color</button>

You are probably dealing with an inheritance problem. In your case, you are putting a style on the body, and the only elements that inherit styles from the body are ones without their own style. To solve this, I recommend applying the style directly to each element.
Try this:
function changecol(){
document.body.style.backgroundColor='black';
document.body.style.color='white';
// change background color of each element
var elements = document.querySelectorAll('*');
for(let i=0;i<elements.length;i++){
elements[i].style.backgroundColor='black';
elements[i].style.color='white';
}
}

jQuery - Selecting a child div background image and amending it

Im looking for a way to change the background image of a div using jQuery BUT only amending it, not totally changing it.
Let me explain.
Im using http://jqueryui.com/demos/sortable/#portlets to show some div's that open and close. Now when you click the portlet header it opens and closes the content below.
Inside the portlet header i have a child div which shows an arrow (either up or down) depending on the current state of the content. I need a way of changing the background image on this child div by adding on "-visible" onto the end of the url for the background image.
I wouldnt even know where to start with doing this, but i have added some code below for you to look at.
http://jsfiddle.net/45jZU/
From the fiddle there, i need to alter the background image of the portlet-arrow div inside portlet header. I can not simply change the background image all together, but i have simplified it down to post on here.
I hope this isnt too narrow to not be of use to anyone else on stackoverflow.
Thanks

Maybe I'm missing something here, but can't you use the .css attribute modifier for the selected jQuery object? Something like:
var current_background = $("#my-div").css("background-image");
$("#my-div").css("background-image", current_background + "-visible");
If you're looking to modify the class names themselves, you can try mess around with the .toggleClass(), .hasClass(), .addClass() and .removeClass() methods in jQuery.
I hope this helps, but let me know if I've missed the mark here completely!

I would personnaly go for using css classes to change the background image. If you decide to change the image afterwards, you won't have to alter your javascript. It is a better solution to use javascript to code the behavior of the widget, not the visual aspect.
So you have the following css:
.portlet-header {
background-image: url(<an image>);
}
.portlet-header.collapsed {
background-image: url(<an other one>);
}
Add this line to your javascript to toggle the collapsed class:
$(".portlet-header").click(function() {
...
$(this).parent().toggleClass('collapsed');
});
If you widgets starts collapsed, initially add the class.
DEMO

Javascript won't overwrite CSS display property

I have a DIV that is set do display:none from CSS and it's supposed to be made visible (style.display = '';) at some point by javascript.
The problem is that if I put the display:none in the CSS file the javascript does not seem to have any effect. I have also tried changing the background color instead of the display property, and that works.
I have the code running here (just press the edit link).
I really thank you for taking the time to look into this.

Set it to block or inline using Javascript.
Writing style.display = "" will clear any display set in the inline style, and cause it to revert to whatever it inherited from CSS.
Alternatively, you can change the element's className using Javascript so that the CSS rule no longer applies.

This is because style.display = '' only affects inline styles on an element. It doesn't change the style sheet.
You should set it to whatever display you need:
style.display = 'block';
or add a class that represents the style you want.

other way to hide content is use opacity=0 and to again make visible use opacity=1 thats it....!!!

putting an overlay over a div

I got a div with some text and a link tag in it, when i click on the link i would like to have an overlay over the div so the opacity is set to .3 or something and have a little form put over it. Does anyone know how to approach this in jquery?

You can use my elementOverlay plugin:
var overlay = $('#yourDiv').elementOverlay();
// some code
overlay.elementOverlay('hide');
Plugin code: https://github.com/jgauffin/griffin.jquery.tools/blob/master/Source/Plugins/jquery.griffin.elementoverlay.js

Just make a div of a fixed size, width and position (the same and place as the original) and set It's background color to slightly transparent.