How do I force a div's height to less than 20px ?

[pob327]

I am trying to write some code to create a gradient background using javascript. I have looked at the FAQ section, but I am new to javascript and the solution in there is too complicated for me (it also seems that there must be a simpler method).
I have a good script, but I now have 2 small probs:

1. how can I reduce the height of the divs I create to less than 20px ("newDiv.style.height = 10px" does not work) ?

2. how can I control the CSS float property in order to allow my script to achieve horizontal as well as vertical gradients ?

<!--
var i = 0;
var j = 0;
for (j = 0; j < 25; j++)
{
var newDiv = document.createElement("div");
newDiv.style.width = 100;
newDiv.style.height = 20;
document.getElementsByTagName("body")[0].appendChild(newDiv);
for (i = 0; i < document.getElementsByTagName("div").length; i++)
{
document.getElementsByTagName("div")[i].style.backgroundColor = (256*256*i*10) + (256*i*10) + i*10;
}
}

 

[BillyRayPreachersSon]

1. You're missing quotes around your value:

newDiv.style.height = [!]'[/!]10px[!]';[/!]

2. Using JS, you refer to "styleFloat", e.g.:

el.styleFloat = 'right';

It's a shame you found my gradient code so confusing - it was designed to work both L-R and T-B, and be fairly configurable. I think it's fairly simple, given those factors.

Hope this helps,
Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[pob327]

Hmmm...I now have the code below. But the height still won't go below 20px (it will go above 20px though) and the div's won't float right or left. Also, this doesn't seem to work in FireFox. I didn't realise there were browser probs with Javascript.

Any ideas ?

BillyRayPreachersSon, I did like your code for a gradient, but like I say I am just starting Javascript and couldn't make out what did what. In an effort to learn I had a go myself.

[code}
var i = 0;
var j = 0;
for (j = 0; j < 30; j++)
{
var newDiv = document.createElement("div");
newDiv.style.width = "10px";
newDiv.style.height = "100px";
newDiv.styleFloat = "left";
document.getElementsByTagName("body")[0].appendChild(newDiv);
for (i = 0; i < document.getElementsByTagName("div").length; i++)
{
document.getElementsByTagName("div").style.backgroundColor = (256*256*256) - (256*256*i*5) - (256*i*5) - i*5;
}
}

[/code]

 

[Rajashekhar222]

for gradient no need for javascript u can use css.

<div style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#EEEEF7', startColorstr='#7979BD');height:20px;width:600px"></div>

 

[BillyRayPreachersSon]

Try adding a style of "overflow:hidden" to your DIV - that should force the height to be exactly as you specify, regardless of content.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[pob327]

Excellent, thanks Dan. Using CSS "overflow: hidden; float: left", now allows me to have a smooth gradient vertical or horizontal.

One last thing. My code is pretty simple really, why does FireFox not like it ? It just comes up blank. Avoiding cross browser probs was half the point of doing this with Javascript !

 

[BillyRayPreachersSon]

Perhaps it doesn't like pure integer background colours Try converting to hex (don't forget the '#'), or use the RGB syntax.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[cLFlaVA]

also, have you considered that you may have set a padding for your div, thus limiting how small the actual div can get? what about line-height?



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]