PrateekSaxena Posted December 30, 2006 Share Posted December 30, 2006 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 More sharing options...
jnutty1 Posted January 12, 2007 Share Posted January 12, 2007 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now