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";

Setting div height to equal width ( javascript )

I'm aware this is a popular question. I've read solutions to this including setting padding-bottom to equal width. As well as assigning this to the pseudo element so it's easier to insert content. (Plus other css solutions).
css height same as width
These do work but it's giving me trouble with some of the content I insert and it's not worth the hassle (since my whole site is construction from these squares).
I'm a novice when it comes to javascript but would there be an easy solution to enable a divs height to equal width. ( Sorry I'm too novice to even show an attempt :/ )
I try not to ask too many "write code for me" questions so references or explanations would be equally appreciated.
Answer: Thanks Jacob just to add onto your code this now works on resize incase anyone else has this same problem https://jsfiddle.net/pekqh5z1/4/
function updateSize(){
var box = $(".test");
box.css("height", box.width());
}
$( window ).resize(updateSize);
$(document).ready(function(){
updateSize();
})

This is super easy to do.
To edit set the style of an element with JS, you set the desired property of the style method.
var test = document.querySelector(".test");
test.style.height = getComputedStyle(test).width;
.test {
background: red;
}
<div class="test">Super uber goober</div>
With the JS, we first select the first appearance of .test, and assign it to a variable(var test = document.querySelector(".test");)
We then get the computed width of the element, and set that as its height(test.style.height = getComputedStyle(test).width;)
For the sake of completeness, here's a jQuery solution as well:
var test = $(".test");
test.css("height", test.width());
.test {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="test">Super uber goober</div>

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.

Change specific css styles through .animate()

I am currently coding my personal website and could really need some help with the jQuery.
I wanted the sticky navigation to change it's background color once it passes the header section, for that I've used the jQuery WayPoint plugin.
Then I defined some special css for the content above and the content under the header section. So far the background and font color changes, the .active class link and the color of the .navbar-brand however doesn't change.
Is something wrong in the following script?
$navbar.find('.navbar-brand').animate({color:'white'},500);
$navbrand.css({font-weight:"normal"});
$navbar.find('.navbar-brand').animate({color:'white'},500);
$navbrand.css({font-weight:"normal"});
If yes, then I'd really appreciate a explanation why it is not working.
Here is the full code:
$('#navchange').waypoint(function() {
var $navbar = $("#changenav");
var $navbrand = $("active > a:focus");
if($(window).scrollTop() < $('#navchange').css("top").replace("px", "")) {
// Above
$navbar.animate({backgroundColor:'transparent'},300);
$navbar.find('a').animate({color:'white'},500);
$navbar.find('.navbar-brand').animate({color:'white'},500);
$navbrand.css({font-weight:"normal"});
} else {
$navbar.animate({backgroundColor:'#FFFFFF'},500);
$navbar.find('a:link').animate({color:'#1abc9c'},500);
$navbar.find('.navbar-brand').animate({color:'#1abc9c'},500);
$navbrand.css({font-weight:"bold"});
}
});
And here is a link to my website.

You have some syntax errors.
You should quote the css attributes in .css.
$navbrand.css({"font-weight":"normal"});
$navbrand.css({"font-weight":"bold"});
You are also missing a period in your $navbrand selector.
var $navbrand = $(".active > a:focus");

Dynamically add css to page via javascript

I'm making a widget that will be added to external websites, and I have made a page that generates css for them to style it (text color, background color, font size, etc). I end up with a textarea filled with css for them to copy/paste to their website.
Is there a way to add this css to the current page in order to have a live preview?

If you want to add CSS as text
var style = document.createElement('style');
style.innerHTML = 'content';
document.head.appendChild(style);
If you want to add a CSS file
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'css/my.css');
document.head.appendChild(link);

I have traditionally appended a <style> block when doing elements.
var style_rules = [];
style_rules.push("#" + myElemId + " { /* Rules */ } ");
/* ... */
var style = '<style type="text/css">' + style_rules.join("\n") + "</style>";
$("head").append(style);
An important thing to note is that because you don't know what any of the existing styles is, or what id's might conflict on the page, it's very useful to keep track of your id's inside your JavaScript application, then using those to populate the injected <style> block. I also tend to run my names through a prefix function to ensure that the generic names of wrapper, and unit do not conflict (they are turned into something like myunique_wrapper and myunique_unit.
Incorporating a basic CSS reset like #myWrapper {margin: 0; padding: 0} can be a decent starting platform for building your own custom styles.
Addressing your unique case, a live preview so to speak, I would designate a div with standard elements. Then when they click "update" read in the rules and append them to the head. If you want to negate any residual effects from past rules you can remove the last <style> element or better yet give your <style> element an id. I'm not sure if that kind of selection would work, but it should.

var element = document.createElement('style');
element.setAttribute('type', 'text/css');
if ('textContent' in element) {
element.textContent = css;
} else {
element.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(element);

Can you add a style tag to the DOM, with the contents of the text-area in it? You may want to give it an id so you can change it later.

I recommend you start using a decent framework for your web/JavaScript development, personally I'd go with jQuery.
http://api.jquery.com/css/
There are some code snippets here that show you how to quickly set css properties for elements.