Jump to content

getElementById


PrateekSaxena
 Share

Recommended Posts

I am trying to make some boxes and lines on my HTML page throught JavaScript. This is the HTML file -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> gfx </TITLE><script src="gfx.js"></script></HEAD><BODY ><div id="me">I am a fool</div><script>initgraph(70,70,500,500, "white", "me");bar(10,10,100,1,"cyan","blue","box");xline(40,40,1000,"red","line1");</script></BODY></HTML>

This is the gfx.js file that I have written -

function initgraph(startx, starty, lenx, leny, bcolor, name){	here = document.getElementById(name);	here.innerHTML+='<div id="gfxLib" style="position:absolute; top:'+starty+'; left:'+startx+'; hieght:'+leny+'; width:'+lenx+';background-color:'+bcolor+'"></div>';	gfxLib.style.height= leny+'px';}function bar(startx, starty, lenx, leny, bcolor, bordercolor, name){	gfxLib.innerHTML+='<div id="'+name+'" style="position:absolute;border:solid; border-width:1px;"></div>';	ibar=document.getElementById(name);	ibar.style.top=starty+'px';	ibar.style.left=startx+'px';	ibar.style.height=leny+'px';	ibar.style.width=lenx+'px';	ibar.style.backgroundColor=bcolor;	ibar.style.borderColor=bordercolor;}function xline(startx, starty, len, bcolor,name){		gfxLib.innerHTML='<div id="'+name+'" style="position:absolute;padding:0px;margin:0px;height:1px;"></div>';	iline=document.getElementById(name);	iline.style.top=starty+'px';	iline.style.left=startx+'px';	iline.style.width=len+'px';	iline.style.backgroundColor=bcolor;	iline.style.height=1+'px';}

but the problem is that even when I specifiy the height of the DIV as 1px still the height visible reamins around 10-20px. but it you make an alert to tell the height then it shows the height to be 1px only. could anyone please tell me what the problem is??

Link to comment
Share on other sites

  • 2 weeks later...
I am trying to make some boxes and lines on my HTML page throught JavaScript. This is the HTML file -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> gfx </TITLE><script src="gfx.js"></script></HEAD><BODY ><div id="me">I am a fool</div><script>initgraph(70,70,500,500, "white", "me");bar(10,10,100,1,"cyan","blue","box");xline(40,40,1000,"red","line1");</script></BODY></HTML>

This is the gfx.js file that I have written -

function initgraph(startx, starty, lenx, leny, bcolor, name){	here = document.getElementById(name);	here.innerHTML+='<div id="gfxLib" style="position:absolute; top:'+starty+'; left:'+startx+'; hieght:'+leny+'; width:'+lenx+';background-color:'+bcolor+'"></div>';	gfxLib.style.height= leny+'px';}function bar(startx, starty, lenx, leny, bcolor, bordercolor, name){	gfxLib.innerHTML+='<div id="'+name+'" style="position:absolute;border:solid; border-width:1px;"></div>';	ibar=document.getElementById(name);	ibar.style.top=starty+'px';	ibar.style.left=startx+'px';	ibar.style.height=leny+'px';	ibar.style.width=lenx+'px';	ibar.style.backgroundColor=bcolor;	ibar.style.borderColor=bordercolor;}function xline(startx, starty, len, bcolor,name){		gfxLib.innerHTML='<div id="'+name+'" style="position:absolute;padding:0px;margin:0px;height:1px;"></div>';	iline=document.getElementById(name);	iline.style.top=starty+'px';	iline.style.left=startx+'px';	iline.style.width=len+'px';	iline.style.backgroundColor=bcolor;	iline.style.height=1+'px';}

but the problem is that even when I specifiy the height of the DIV as 1px still the height visible reamins around 10-20px. but it you make an alert to tell the height then it shows the height to be 1px only. could anyone please tell me what the problem is??

Prateek,In your xline function, change the line:
gfxLib.innerHTML='<div id="'+name+'" style="position:absolute;padding:0px;margin:0px;height:5px;"></div>';

to

gfxLib.innerHTML+='<div id="'+name+'" style="position:absolute;padding:0px;margin:0px;height:5px;overflow:hidden"></div>';

I added a "+" so you can see the box drawn and "overflow:hidden" style so the div will not expand past the height that has been set by the height property.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...