We Keep Coding

why inner style is not working in html progress

I am trying to apply linear-gradient to html progress bar but it's not applying the gradient
var customColor = '#cf014d';
ReactDOM.render(React.createElement("progress", { max: "100", value: "80",
style: { color: "linear-gradient(to left, #fff, #fff)" } }), document.getElementById('root'));
<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>

you need to use background: instead of color:
color - is for text color

Use background: for the background color. color is for the foreground color.
But, beyond that, progress bars are rendered in a proprietary way by each user agent, one set of styling rules won't work for all browsers. Just setting the style of the element is not enough, the browser renders a progress bar as a series of elements and each part must be styled correctly.
Here' is an example of creating the progress bar with React, but styling it with static CSS for rendering in browsers compliant with the -webkit- vendor prefix.
ReactDOM.render(React.createElement("progress", { max: "100", value: "80" }), document.getElementById('root'));
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;
width: 500px;
height: 20px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 25px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>

Background property will style the "background" part - not the value.
Here is a nice article for styling the progress bar.
https://css-tricks.com/html5-progress-element/

Html not loading dynamically into Div

I've been able to use answers provided at Load HTML page dynamically into div with jQuery to perfectly load html into divs in the past, however, with a new project that I've started which is based off of a codrops template (multi-level push menu), the pages do not load into the designated .content div
The webpage is here. I've loaded all the proper jquery libs, and the test page "bio.html" is properly pathed.
I am working very specifically on the first ul li menu list link "Biography" to just test the functionality of it.
The code I'm using in jquery is
$(document).ready(function(){
$("#bio").click(function(){
$('.content').load('bio.html');
//alert("Thanks for visiting!");
});
});
The selector "#bio" has been applied to
<li><a class="icon icon-male" id="bio">Biography</a></li>
in index.html. In the class="content" div tag I have it's css set to
.content {
color: white;
background: rgba(0,0,0,0.9);
background: -moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.9)), color-stop(100%, rgba(0,0,0,0.6)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
width: 60%;
border-radius: 2px;
padding: 3em 2em;
max-width: 1200px;
max-height: 800px;
margin: 0 auto;
box-shadow: 0 5px 7px -5px rgba(0,0,0,.7);
}
I don't know if any of the above code is interfering with whatever is not allowing the page to load dynamically when handler is clicked. I did make a change to class="content" from class="content clearfix" because I'm not too concerned about using the clearfix hack at the moment, which was the only change in identifying the element in the original codrops html.

you called jQuery library after your script ,
call jQuery first and then your script
and i encourage you to use 1.9.0 or later version.

Looking at your link you are loading your jquery file after your code therefor '$' is not defined move your jquery library above that and it should start working.

HTML input range Style in Firefox

I´ve got a CSS problem with a input-range element:
<input type="range" id="difficultSelect" max="3" min="1" value="2"/>
the css looks like this:
-webkit-appearance: none;
z-index: 102;
width: 225px;
height: 5px;
margin-left: 95px;
margin-top: 15px;
border-radius: 2px;
background: linear-gradient(to right, #83f922 0%,#ff4c00 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#83f922),
color-stop(100%,#ff4c00));
background: -moz-linear-gradient(left, #83f922 0%, #ff4c00 100%);
background: -webkit-linear-gradient(left, #83f922 0%,#ff4c00 100%);
As u can see, the background of the slider should show a linear-gradient from green to red.
In Chrome it displays as intended, but in Firefox there is the background-gradient, but ontop of it is the normal "grey" bar of the slider: http://imgur.com/xcxuZXV
Were is my mistake? Firefox Version ist 27.0.1
THANKS

Mozilla has a separate property to style the shadow dom of the input (which is what -webkit-appearance:none; takes care of for webkit):
::-moz-range-track {background:transparent; border:0px;}
On a side note, you can also style the slide/grip/button/thumb:
/* These need to be separated, not combined with a comma */
::-webkit-slider-thumb { /* ... */}
::-moz-range-thumb { /* ... */}

Equal height columns with foundation 4 and backbone.js

I have an existing project that works with backbone.js and I had to do the frontend using foundation (i did not do the backbone part of it). As it stands it's a two column blog-type of website and of course I need the sidebar and content column to be of equal height at all times. I have three problems:
As I am using foundation you might have guessed, this is a responsive design where the columns have a dynamic width
Using backbone the columns that need to be of equal height won't appear on load/ on document ready, they will come up after a login is done and appended by backbone to the DOM. (I have an empty div where backbone appends the stuff as it is needed)
Furthermore, the sidebar contains a list of items that when clicked, they disappear from the sidebar and appear on the content area, changing the height of the column as the user clicks on tem as of now.
I have tried a few scripts to no avail since I can never get to change the height of the columns after they actually appear on the DOM (I don't know how?) and I'm afraid the css ways of doing this will break my responsive layout/not work when numer 3 is happening.
This is my html, as simple as it is, when it's loaded:
<div class="row home collapse">
<div class="large-5 columns sidebar home-column">
</div>
<div class="large-7 columns content home-column">
</div>
</div>

Not sure if this is a good fix if you're already using a framework like Foundation; but check this article out: Equal Height Columns - Cross Browser.
Another solution would be to use background color; however, it is CSS3 dependent. For an example:
.container{
width: 100%;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #aaa), color-stop(66.7%, #aaa), color-stop(66.7%, #333), color-stop(100%, #333));
background-image: -webkit-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%);
background-image: -moz-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%);
background-image: -ms-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%);
background-image: -o-linear-gradient(left, transparent 0, #aaa 66.7%, #333 66.7%, #333 100%);
background-image: linear-gradient(left, #aaa 0%, #aaa 66.7%, #333 66.7%, #333 100%);
}
.container:after{
display: table;
float: none;
content: "";
}
.container .column1{
max-width: 66.7%;
width: 100%;
float: left;
}
.container .column2{
max-width: 33.3%;
width: 100%;
float: left;
}
The percent should be the same as your block size. The example is for two columns. This is if your markup is similar to this:
<div class="container">
<div class="column1">
<p>Some content</p>
</div>
<div class="column2">
<ul>
<li>Some Items</li>
<li>Some Items</li>
</ul>
</div>
</div>

How to create an triangle shape (fixed height, width=100%) with background

I have a graphic background, and I need to display a colored triangle in the top left corner (independing the resolution).
Can I create a triangle shaped element using only HTML/CSS/JS with width = 100% and height = 200px with background = red?
I can create it by IMG with width=100%, but I was hoping for a better solution than resizing an image.
The solution needs to be compatible with IE7+ and using browser's versions (more than 2%).
Thanks

Because you can't create a border which has a percentage, try using vw (viewer width) instead. So:
.triangle{
width: 0;
height: 0;
border-bottom: 600px solid blue;
border-left: 100vw solid transparent;
}

Vw units aren't supported by IE8, you will need to use a JS fallback for browsers that don't support these units.
Here is a jQuery script that sets the border-width according to the window size and adjusts it on window resize. Tested in IE8 (IE tester) :
$(document).ready(function() {
function triangle() {
var width = $('#wrap').width(),
border = width / 4;
$("#wrap .tr").css({
"border-left": border + "px solid #fff",
"border-bottom": border + "px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
border-left: 200px solid #fff;
border-bottom: 200px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>

To expand on web-tiki's answer, I think this is actually what you're going for:
$(document).ready(function() {
function triangle() {
$("#wrap .tr").css({
"border-left": $('#wrap').width() + "px solid #fff",
"border-bottom": "200px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>

I think it would be best to use background instead of borders:
.my-triangle {
width: 100%;
height: 200px;
background: linear-gradient(to left top, transparent 50%, red 50%);
}
<div class="my-triangle"></div>
Note that in order for it to be cross-browser compatible you will need to fiddle around with CSS prefixes, IE filters and SVG. (I don't readily have access to IE so I'll leave that one for you, but it would be something along these lines:)
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, transparent), color-stop(0.5, transparent), color-stop(0.5, #FF0000), color-stop(1, #FF0000));
background-image: -webkit-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -moz-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -ms-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -o-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: linear-gradient(to top left, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);

Just take a div element, give a class name 'triangle-topleft', and write the below given css
.triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
color of border-top would be the div's background color..Here it's red.
For more triangle structures, follow this link..
[http://css-tricks.com/examples/ShapesOfCSS/][1]