We Keep Coding

replace a cube by a sphere in three.js with an input

I have to replace the cube by a sphere with the input forme but if i add a function in the javascipt the cube disappears.
What do I have to do if I want to change the cube's dimensions?
I don't know how to link the function modifie with the three numeric inputs (longueur, largeur, hauteur) because as I've said before if I add on function, the cube disappears. The functions are wrong?
See JSFiddle
function modifie(){
var longueur ,
var largeur,
var profondeur.
longueur =document.getElementById("longueur").value
largeur =document.getElementById("largeur").value
profondeur =document.getElementById ("profondeur").value
}

I would consider the new possibilities of CSS3. FIDDLE
$("div").addClass("ball")
div {
display: block;
width: 200px;
height: 200px;
margin: 30px auto 0;
background-color: #3b4ba3;
transition: all 5s ease;
}
div.ball {
border-radius: 50%;
box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Alphabets or Text filling effect in jquery

I am developing a site for my client and he asked me to have the same below site kind a effect for his website
http://www.big.dk/
here you can see text is filling up and after it finish filling all the letters, homepage loads up. any idea how can I copy the same kind a effect or any code you can share. I try to rip the code but I think the site is using swf file not jquery as I couldn't rip it successfully.

To achieve the effect mentioned, I followed the following approach.
Create an image with required text on it (StackOverflow for example).
Make the text on this image transparent. (I did it in Microsoft Powerpoint).
This is how the image looks
Note that the text area is transparent. Download this image and open it in any image viewer to verify.
Then, Create a gradient. (You can use this for simplicity)
Combining the above resources, here is the fiddle.
#color {
position: absolute;
width: 800px;
height: 130px;
background: -moz-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* ff3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ff0000), color-stop(25%, #2AA830), color-stop(50%, #05C1FF), color-stop(75%, #ffff00), color-stop(100%, #0808BF));
/* safari4+,chrome */
background: -webkit-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* safari5.1+,chrome10+ */
background: -o-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* opera 11.10+ */
background: -ms-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* ie10+ */
background: linear-gradient(90deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* w3c */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0808BF', GradientType=1);
/* ie6-9 */
}
#text {
position: absolute;
width: 800px;
height: 130px;
background: url('http://i.stack.imgur.com/plKV4.png');
background-size: 100% 100%;
}
#slider {
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
background: gray;
animation: slide forwards 5s linear;
}
#keyframes slide {
0% {
left: 0%;
}
100% {
left: 100%;
}
}
<div id="color">
<div id="slider"></div>
<div id="text"></div>
</div>
I have used keyframes animation to fill the color.
It can be easily replaced by jQuery

CSS simple doughnut chart

I need to build a very simple doughnut chart ( 2 values, no animations, pure css)
didn't found anything simple in google ( everything is using animation or many values)
Please help me :)

Demo
CSS
.value {
height:100%;
width:100%;
border-radius:100%;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 5px rgba(0, 0, 0, 0.1) inset;
position:absolute;
background: -moz-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3498db), color-stop(50%, #3498db), color-stop(50%, #FFFFFF), color-stop(100%, #FFFFFF));/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* Opera11.10+ */
background: -ms-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* IE10+ */
background: linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* W3C */
}
The trick which makes it work is also it's limitation.... Using linear-gradient from 0% to 50% it shows #3498db color and then from 50% to 100% it shows #FFFFFF color... To set this dynamically with a perfect look will be a lot difficult...
Hope it helps..!!

I'm not sure if you can make one using pure CSS, but check out highcharts. Theirs is pretty simple, and you can do it with only two values (don't be intimidated by the example).

Is it possible to make a child div static while keeping the parent fixed?

I have a column that is aligned on the right hand side of the page. The column must span the entire height of the page, thus my reasoning behind making it fixed. There will be items within the column that should not be fixed. No matter what I play with the items continue the scroll with the page.
Does anyone have a way to either make the child div static within the parent that is fixed, or a way to make a column span the entire height of the page without using a fixed positioning?
Here is the CSS:
.rightCol{
width: 28px;
position: fixed;
bottom: 0px;
top: 0px;
z-index: -1;
margin-left: 969px;
}
.rightColItem{
margin-top: 95px;
margin-left: 10px;
position: absolute;
}​
And the HTML:
<div class="rightCol">
<div class="rightColItem">
I want this to be static and not fixed
</div>
</div>
And here is a link to a fiddle -->
http://jsfiddle.net/7hmKy/
Any help is greatly appreciated!
Edit 1: The right aligned bar is inside a container div of 1000px.

An easier method—with less markup too—is to use CSS3 gradients for the background of your page. You can also easily use an image fallback to support old browsers:
body {
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(100%, #fa8072), color-stop(100%, transparent));
background: -webkit-linear-gradient(right, #fa8072 200px, transparent 200px);
background: -moz-linear-gradient(right, #fa8072 200px, transparent 200px);
background: -o-linear-gradient(right, #fa8072 200px, transparent 200px);
background: linear-gradient(right, #fa8072 200px, transparent 200px);
}
.sidebar {
width: 200px;
float: right;
}
Demo (I used Sass and Compass because they make CSS3 gradients much easier to keep updated.)
EDIT:
Based on your comment, I've created a new example using a centered body that is 1000px wide (with some finagling you could use a div) and changed the gradients to replicate a border:
body {
height: 100%;
min-height: 2000px;
width: 1000px;
margin: 0 auto;
background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(98.33333%, transparent), color-stop(98.33333%, #000000), color-stop(100%, transparent)), -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #000000), color-stop(83.33333%, #000000), color-stop(100%, transparent));
background: -webkit-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -webkit-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: -moz-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -moz-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: -o-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -o-linear-gradient(right, #000000, #000000 10px, transparent 12px);
background: linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), linear-gradient(right, #000000, #000000 10px, transparent 12px);
}
Demo

how to set button gradient color for textbox?

I want to design a textbox and textarea with some gradients effects inside them look like the above img.
I find a way to set it on button.
But i was not able to fix it to a textarea.

You can check this Ultimate Gradient Generator or Css Portals. This will fullfill your need.
Hence you you have not inserted you css and html. We can do this far.
If you need code use the following
.gradient_effect{
background: rgb(252,255,244); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(179,190,173,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(40%,rgba(223,229,215,1)), color-stop(100%,rgba(179,190,173,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-9 */
.text_box-border:double 5px #000000;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright:8px;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
-moz-box-shadow: 10px 10px 5px #8c898c;
-webkit-box-shadow: 10px 10px 5px #8c898c;
box-shadow: 10px 10px 5px #8c898c;
}

textarea {
background: -webkit-linear-gradient(red, black);
background: -moz-linear-gradient(top, red, black);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#000000');
}​
http://jsfiddle.net/EjFUd/
Edit: beat me to it!

​textarea {
background: rgb(255, 255, 255);
background: -moz-linear-gradient(270deg, rgb(255, 255, 255) 75%, rgb(230, 230, 230) 100%);
background: -webkit-linear-gradient(270deg, rgb(255, 255, 255) 75%, rgb(230, 230, 230) 100%);
background: -o-linear-gradient(270deg, rgb(255, 255, 255) 75%, rgb(230, 230, 230) 100%);
background: -ms-linear-gradient(270deg, rgb(255, 255, 255) 75%, rgb(230, 230, 230) 100%);
background: linear-gradient(270deg, rgb(255, 255, 255) 75%, rgb(230, 230, 230) 100%);
}​
Exmpl - http://jsfiddle.net/VSpB8/
for more css3 generators - http://css3gen.com/gradient-generator/

Here try this : [note : adjust the color u want]
css:
#gradientTextarea {
background: -moz-linear-gradient(top, #ffffff 0%, #f5f5f5 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f5f5)); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); / Opera 11.10+ /
background: -ms-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); / IE10+ /
background: linear-gradient(to bottom, #ffffff 0%,#f5f5f5 100%); / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 );
border:1px solid #f5f5f5;
}
html
<textarea id="gradientTextarea"></textarea>

#gradient {
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #ccc), color-stop(100%, #fff));
background: -moz-linear-gradient(top, #ccc, #fff);
}
with #grandient as the id of the input box
use this one to generate your gradient:
http://www.colorzilla.com/gradient-editor/