jumbotron color manipulation with Javascript - javascript

i have a problem with javascript.I want to control the jumbotron color and set it every 3 seconds to a random one.The problem here is that i don't know how to manipulate CSS with JavaScript, as i am pretty new to javascript.
I saw some other solutions and some other threads but it did not work.(I don't know if i did anything wrong).
I have no js code written right now as i deleted everything that did not work.
.jumbotron {
background-color: #f14444 !important;
}
/*Without the !important rule it won't change color!*/
If you have any threads that you think i haven't checked i would be happy to check them but im confident enough to say that i've seen them already.
Thanks for your time anyways!

To change the background color, simply select the element and the set the property:
setTimeout(() => {
document.querySelector('.jumbotron').style.backgroundColor = '#f14444';
}, 1000);
.jumbotron {
height: 300px;
width: 300px;
background-color: black;
}
<div class="jumbotron"></div>
Note that above will select the first found element with the given class, so if you need to target a specific element, consider giving it an id and select it as #Phil shows above.

Html elements in the DOM have a style property.
document.getElementById('something').style.backgroundColor = '#ccc'
Note that hyphenated properties like background-color in CSS are typically camel-case (backgroundColor) in Javascript.

Also you can achieve it with keyframe animation
Here is a tutorial how to get random color
#-webkit-keyframes changeColors {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
#-moz-keyframes changeColors {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
#-ms-keyframes changeColors {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
.jumbotron {
-webkit-animation: changeColors 3s infinite;
-moz-animation: changeColors 3s infinite;
-ms-animation: changeColors 3s infinite;
background-color: #f14444;
}
<div class="jumbotron">
Some text here
</div>

Related

How to stop transforms in a CSS transition

I have set a CSS transition like
transition: all 2s
Then I apply a CSS to change the transform like:
transform: rotate(20deg);
Transition starts.
I want to stop it midway and have it stay there so I can then apply some other JS on it that is application dependent... what that is post-pausing is irrelevant to the question To test, I use:
setTimeout(function() {
...
}, 1000);
One crude way to stop the transition is to set CSS display to 'none'.
Setting transform to 'none' or empty string does not work. The transition goes to the end for transform. Another trick of resetting the CSS to the current one, works for other properties but not for transforms. Setting transition property to none or empty string also does not stop the transition's transform.
Surely there must be some way.
Any suggestion? Preferrably in JQuery
I do not want to use animation.
Why not using animation where you can easily manage the state:
$('button').eq(0).click(function() {
$('.box').css('animation-play-state', 'paused');
});
$('button').eq(1).click(function() {
$('.box').css('animation', 'none');
});
.box {
margin: 50px;
width: 100px;
height: 100px;
background: red;
display:inline-block;
vertical-align:top;
animation: anime 10s forwards;
}
#keyframes anime {
to {
transform: rotate(180deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<button>Stop</button>
<button>Reset</button>
UPDATE
Here is a way that you can try with transition:
$('button').eq(0).click(function() {
$('.box').addClass('rotate');
});
$('button').eq(1).click(function() {
var e = $('.box').css('transform'); // get the current state
$('.box').css('transform', e); //apply inline style to override the one defined in the class
});
.box {
margin: 50px;
width: 100px;
height: 100px;
background: red;
display:inline-block;
vertical-align:top;
transition: all 10s;
}
.rotate {
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
</div>
<button>start</button>
<button>stop</button>

How to change background color every n-seconds?

So a while back I think i saw an effect on some site that was transitioning between different background colors (changing background colors).
The color changed like every 2-3 seconds.
The transitions were pretty smooth as well. I found it pretty cool.
I'm redesigning my services website and would like to add that effect to my site.
There are 2 variables that need to be controlled: time and color.
P.S. Not trying to get anyone to write the code for me, but could you please refer me to some links where I can find out about this effect.
Would be great if you could tell me the name of this effect and the library it exists in.
Here's JS Fiddle that shows you some #keyframes in combo with the js to slow down timing via click. Hope that helps!
.body {
width: 100%;
height: 1000px;
animation-name: colorChange;
animation-duration: 10s;
animation-iteration-count: infinite;
text-align: center;
}
#keyframes colorChange {
0% {
background: red;
}
20% {
background: blue;
}
40% {
background: green;
}
60% {
background: orange;
}
80% {
background: purple;
}
100% {
background: red;
}
}
.button {
padding: 10px;
margin-top: 40px;
font-size: 20px;
}
$( ".button" ).on( "click", function () {
$( ".body" ).css( "animation-duration", "20s" )
})
Edit
Added snippet.
$( ".button" ).on( "click", function () {
$( ".body" ).css( "animation-duration", "20s" )
})
.body {
width: 100%;
height: 1000px;
animation-name: colorChange;
animation-duration: 10s;
animation-iteration-count: infinite;
text-align: center;
}
#keyframes colorChange {
0% {
background: red;
}
20% {
background: blue;
}
40% {
background: green;
}
60% {
background: orange;
}
80% {
background: purple;
}
100% {
background: red;
}
}
.button {
padding: 10px;
margin-top: 40px;
font-size: 20px;
}
<div class="body">
<button class="button">Change Timing</button>
</div>
To change your website background color in a defined time interval you can follow the bellow link.
http://www.cakephpexample.com/html/add-gradient-effect-to-your-website-by-javascript/
Where a complete example given with source code.
You can possibly do it with CSS3 animation keyframes.
Take a look at this Fun With Pulsing Background Colors in CSS3.

CSS3 Animation: Forwards fill not working with position and display on Safari

So, I have created a CSS3 animation that is supposed to fade out an element by setting its opacity from 1 to 0 and at the last frames change the position to absolute and display to none. But on Safari it will only maintain the opacity, position and display are not set to the final values.
#-webkit-keyframes impressum-fade-out {
0% {
opacity: 1;
display: block;
position: relative;
}
99% {
opacity: 0;
position: relative;
}
100% {
opacity: 0;
display: none;
position: absolute;
}
}
It seems to work on Chrome but not on Safari (I tried version 8). Apparently, position and display do not work properly with animation-fill-mode: forwards...
JSFiddle: http://jsfiddle.net/uhtL12gv/
EDIT For Bounty: I am aware of workarounds with Javascript and transitionend events. But I am wondering why Browsers lack support for this? Does the specification state that fillmode forwards doesnt apply to some attributes like position or is this a bug in the browsers? Because I couldnt find anything in the bug trackers.. If anybody has some insight, I would really appreciate it
As Suggested in the comments, you can adjust the height.
EDIT: Animation Reference Links Added.
Display property is not animatable.
Position property is not
animatable.
List of all CSS properties and if and how they are
animatable.
$('.block').click(function() { $(this).toggleClass('active') });
#-webkit-keyframes impressum-fade-out {
0% {
opacity: 1;
}
99% {
opacity: 0;
}
100% {
opacity: 0;
height:0;
}
}
.block {
width: 100px;
height: 100px;
background: blue;
}
.block2 {
width: 100px;
height: 100px;
background: red;
}
.block.active {
-webkit-animation-name: impressum-fade-out;
animation-name: impressum-fade-out;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block2"></div>
I would suggest you the cross-browser solution based on CSS3 Transitions and transitionend event:
JSFiddle
$('.block').one('click', function() {
var $this = $(this);
$this.one('webkitTransitionEnd transitionend', function() {
$this.addClass('block_hidden');
$this.removeClass('block_transition');
});
$this.addClass('block_transition');
});
.block {
width: 100px;
height: 100px;
background: blue;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.block_2 {
background: red;
}
.block_transition {
opacity: 0;
}
.block_hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block block_2"></div>

Running a loop in the background in Angular

Not certain what options I have, I want to run a loop within a controller that runs in the background and steps every n'th milli seconds, it will just change the colour on a button, want it to go from green to orange and then back using ng-style.
What is a sensible approaches to running a loop in the background, for obvious reasons I would like to avoid locking up the whole page just to have a button changing colour.
Since you're using Angular, you should use the Angular solution: $interval.
A simple example, assuming you're using a boolean in the scope to determine whether the button is green or orange:
angular.module('myApp', [])
.controller('myController', ['$scope', '$interval',
function($scope, $interval) {
$scope.isGreen = true;
$interval(function() {
$scope.isGreen = !$scope.isGreen;
}, 1000);
}
]);
This will toggle $scope.isGreen every second.
I think perhaps a css option might be the way to go here. You can loop animation in css.
Keyframe Animation Syntax
Here's an example
#-webkit-keyframes looping-background {
0% { background-color: orange; }
50% { background-color: green; }
100% { background-color: orange; }
}
#-moz-keyframes looping {
0% { background-color: orange; }
50% { background-color: green; }
100% { background-color: orange; }
}
#-o-keyframes looping {
0% { background-color: orange; }
50% { background-color: green; }
100% { background-color: orange; }
}
#keyframes loopingN {
0% { background-color: orange; }
50% { background-color: green; }
100% { background-color: orange; }
}
.loop_animation {
-webkit-animation: looping-background 2s infinite; /* Safari 4+ */
-moz-animation: looping-background 2s infinite; /* Fx 5+ */
-o-animation: looping-background 2s infinite; /* Opera 12+ */
animation: looping-background 2s infinite; /* IE 10+, Fx 29+ */
}
<button class="loop_animation">I am a button</button>
Use a javascript event timer to call a function.
https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers
why dont u you use
setTimeout(function(){
// change the color of button here
}),n*1000);
this set time out should be called in recursive loop .
<body onload = "changeButtonColor()">
<script>
function(){
// change the color here
setTimeout(function(){
// change the color of button here
}),n*1000);
}
</script>

How to override CSS3 animation with Javascript?

I change the background color of the table (from lightgrey to lightgreen and back) for X seconds with CSS3 animation:
#keyframes change {
0% {background-color: lightgreen;}
99% {background-color: lightgreen;}
100% {background-color: lightgrey;}
}
the HTML code:
<tr style='background-color: lightgrey; animation: change Xs linear 5s;'>
Now I need to override the CSS animation and change the background color of the table (at any moment) to red when I click on it (and come back to lightgrey when re-click stopping the animation).
I simply try to add this code but the CSS animation always overrides the Javascript onclick command:
onclick="this.style.animationPlayState='paused'; this.style.backgroundColor='red';"
Any suggestions? Do you think it's better to do all this in Javascript?
You might want to defer that to CSS classes and selectors:
/* Skipping the -webkit prefix needed by chrome for sake of brevity */
.animated:not(.clicked) {
animation: change linear 5s;
}
#keyframes change {
0% { background-color: lightgreen; }
99% { background-color: lightgreen; }
100% { background-color: lightgrey; }
}
.clicked {
background-color: red;
}
Then, just add the clicked class when the row is clicked:
// Using jQuery for simplicity
$("table").on("click", "tr", function() {
$(this).addClass("clicked");
});
Working example: http://jsbin.com/IQaRUZa/1/edit
The solution adopted (solved with "!important" CSS3 element):
HTML code:
<tr id="1" style='background-color: lightgrey; animation: change_visite 3s linear 3s;' onclick="change(document.getElementById('1'));">
CSS code:
#keyframes change_visite {
0% {background-color: lightgreen;}
99% {background-color: lightgreen;}
100% {background-color: lightgrey;}
}
.evidenziato {
background-color: coral !important;
}
JS code:
function change(classe){
if(classe.className === "evidenziato"){
classe.className='';
} else {
classe.className='evidenziato';
}
}
Working example here: http://jsbin.com/ENAqocUb/1/edit?html,css,js,output

Categories

Resources