We Keep Coding

How to change the color of words in jumbotron using the reference $jumbotron?

I am learning web design and js .On my webpage, I define the default color is black in jumbotron h2.
.jumbotron h2{
text-align: center;
color:black;
}
define reference var $jumbotron = $('.jumbotron h2');
while running, I use $jumbotron.html('hellow world'); ...... to display some words and I want to change its color but I do not know how to set new color while running, how to get the color value and assign a new value for my variable $jumbotron? I have tried $jumbotron.color = or $jumbotron.color('') but they are wrong. I have not found any useful answers with google.

To change the color of an element using Jquery you can use the css attribute
The code will be:
$jumbotron.css("color", "color-code");
// Where color-code you can set the color code like: #0fc0fc

You can target the element like so
document.getElementById("p2").style.color = "blue";
this targets the element by its id. Or
document.getElementsByClassName("jumbotron h2").style.color = "blue";

How do I change website background

I've made a quiz which has 10 questions, and stores your points in a value called total. The total points you are able to get is 20, so when total > 10, I want the background to turn red.
I have already set a background using CSS on my website here:
<style type="text/css">
body{
background-image: url("twins.jpg");
}
However I can't seem to get my condition to work properly. I've tried:
if (total > 10) {
document.body.style.backgroundColor = "red";
}
I've tried:
if (total > 10) {
document.body.style.backgroundColor = "#AA0000";
}
And:
if (total > 10) {
document.getElementById('body').style.backgroundImage = "url(ashishot.jpg)";
}
But nothing seems to work. Maybe I'm placing my if statement in the wrong place, or maybe I'm trying to set the background incorrectly, I just want to know if this is the correct way to change a background image from CSS into JavaScript.

Yes this is the correct way to change background color using JS.
document.body.style.backgroundColor = "#AA0000";
Please try:
Placing alert() inside the IF block to see if block is executing
See if something is overlayed(z-indexed) on body

The javascript instruction is correct
document.body.style.backgroundColor = "red";
Your error may be the if condition, check if total its work properly usign the console or an alert to check it:
console.log(total);
or
alert(total);

You have more than one issue
Use directly the body property
document.body.style.backgroundImage
You need to quote the whole assignment and you need inner quotes for the image
'url("ashishot.jpg")';
Working example:
function setBackground() {
document.body.style.backgroundImage = 'url("http://lorempixel.com/300/200/")';
}
setTimeout(setBackground, 2000);
body {
background-image: url("http://lorempixel.com/400/200/");
}

if (total > 10) {
document.body.style.backgroundImage = "url(ashishot.jpg)";
}
body is not an id. also, setting background-color will not work because browser treat background-image first. To display background-color instead of background-image, simply delete the image. Setting classes is more flexible.
document.body.classList.add("total");
body {
background-image: url("http://www.studiocity-macau.com/uploads/images/SC/Entertainment/Batman/batman_share.jpg");
}
body.total {
background-image: none;
background-color: red;
}

Be aware that your backgound-image will be on top of the color you are setting in the if block. If the image covers the background entirely you will not notice the effect of changing the background color.
Both document.body.style.backgroundColor = "#AA0000" and document.body.style.backgroundColor = "red" are valid (although "red" == "#FF0000").
Make sure the if statement runs every time total increases.

Create a very low specificity css property

I am trying to create a very low specificity css property using javascript. Just like !unimportant (which doesn't exists)
I don't know whether this is possible or not.
My reason to look for something like !unimportant is that I am writing a small javascript plugin. In which I want to add a default style to a element which should be later easily overriden by the user.
But if I write:
element.style.backgroundColor = "green";
The user will not be able to override the above style easily without using !important. So, I added a dynamic style tag by using the following code:
var style = document.createElement('style');
// WebKit hack :(
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
and then to the above code, I added a dynamic stylesheet using the following code:
var element = document.getElementById('main');
// To use attribute names to apply the styles
element.setAttribute('custom-el', '1');
var sheet = style.sheet;
var properties = "background-color: green;";
var elName = "[custom-el]";
if (sheet.insertRule) {
sheet.insertRule(elName + "{" + properties + "}", 0);
} else if (sheet.addRule) {
sheet.addRule(elName, properties, 0);
}
Now the background-color: green can be overriden by using the following code:
div.main {
background-color: red;
}
But as you can see in css, I used higher specificity to override background-color: green i.e div + .green.
But I want the overriden to happen even when user writes the following css:
.main{ /* Could be simple class name or id name or even tag name */
background-color: red;
}
Fiddle
This might seems to be a small issue. but it is a big problem for me. Please help.

I would simply write like this:
element.style.backgroundColor = element.style.backgroundColor || "green";
Where, if backgroundColor is undefined then it uses green as backgroundColor else it would take the backgroundColor from stylesheet.

Finally I got the answer..
document.head.insertBefore(style, document.head.children[0]);
I should just insert the dynamic stylesheet above already present stylesheets in the head tag.
Working Fiddle
Unfortunately, this is not working in any IE version. I am still looking for answer.

Keep gradient the same when changing background image with javascript

I have a background image that I want to change every 10 seconds. However, I have a gradient on top of that image, that I dont want to change when i change the image. This is the original css:
#carBanner
{
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(230, 230, 230, 1) 100%), url('TS12-COVER.jpg');
}
Then I have javascript that has a function that is called every 10 seconds, the function looks like this:
function changeImage()
{
document.getElementById('carBanner').style.background = "url('haegri.png')";
}
When i do this, the gradient no longer appears on top of the picture.. I have also tried this:
function changeImage()
{
document.getElementById('carBanner').style.background = "linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(230, 230, 230, 1) 100%), url('haegri.png');"
}
But then the image wont change.
Can anyone please tell me how i can change the background image and still keep the gradient? Thanks in advance!

Use CSS classes to control this behavior, you can add or remove class from your element in javascript. You CSS class can have your settings of background and gradient.

Using style.background will affect all properties of background. However if you specifically want to target backgroundImage please use below mentioned code.
function changeImage()
{
document.getElementById('carBanner').style.backgroundImage = "url('haegri.png')";
}
Update:
Since this method does not seem to work, I am posting this fiddle on lines as mentioned by kush. This method seems to work as long as you just want to swap between 2 images.
It basically uses 2 classes with two different background images. On click instead of changing just image, previous class gets removed and new class is applied.
http://jsfiddle.net/gtej2/
I will still looking for more elegant solution and will update fiddle soon.

For the image use:
background-image
Or in your code:
.style.backgroundImage ...

What about using an overlay? You place a div on which you are setting the image and another div over it on which you set your gradient.
Therefore you would have to set correctly your overlay, but with JS it's quite easy:
$(document).ready(function () {
// Set the overlay over the image slider
var left = $("#test").offset().left;
var top = $("#test").offset().top;
$("#overlay").css('left', left + 'px');
$("#overlay").css('top', top + 'px');
// Change your image
setInterval(changeImage,1000);
});
This would look like this: http://jsfiddle.net/QtBlueWaffle/Tj7j5/1/

How to temporarily add a CSS style?

I have a div and when I mouse over it I want to change the background (and possibly other properties). I can do it by calling el.style.backcolor = "", but is there a way I can add another CSS style to it then remove it later? Like style += mouseOverStyle and then style -= mouseOverStyle. That way I could select the properties to change in the CSS instead of in the JavaScript code.
EDIT: I may want to apply the new style in other situations, not just mouseover, so #div:hover isn't really a general solution. What I'm really asking is is there something like style.add("style") and style.remove("style")?

If I understood you correctly, you're asking to change the background when you hover your div element?
This is easily done via CSS, no Javascript or other codes are necessary!
#myDiv
{
background-color: #f00;
}
#myDiv:hover
{
background-color: #00f;
}
Of course you can change other styles too, you don't need to add another class to change one or more styles.
Hope that helps :)

Just add or remove CSS classes when needed.
Adding:
yourElement.className += ' my_class';
Removing:
yourElement.className = yourElement.className.replace(/\bmy_class\b/, '');
With jQuery you can use addClass, removeClass and toggleClass methods (see the docs).

You could try using multiple :hover pseudo selectors:
div.style1:hover { background: red }
div.style2:hover { background: yellow }
Then use javascript/jquery to switch between html class attributes

I would recomendate you to use a JS library, such as jQuery. In jQuery it is simple like that:
http://api.jquery.com/addClass/ together with the mouseover event handling http://api.jquery.com/mouseover/.

function changeStyle()
{
document.getElementById("elementID").style.color="green";
}
after the .style. you should paste the css attribute you want to edit.

If you're wanting to use js, change the properties on the user event.
onmouseover : el.style.background = "blue";
onmouseout : el.style.background = "red";
If you want to add more properties as time goes along just throw it in a function
function onMouseOverFunction () {
el.style.background = "blue";
el.style.color = "blue";
el.style.font-size= "1em";
}