Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation Need help to some JAVASCRIPT!

    Hello CodingForum!

    Im seeking some help to do some JavaScript

    I got this code: http://f.cl.ly/items/1f0f3p1v1h1q1U4...20løsning.html

    And then my question is: How can i make a triangle that illustrates the data which the program calculated using javascript - instead of using a .gif file to illustrate the triangle?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Im pretty noob - can u highlight the place were the triangle is made?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by mort982a View Post
    Im pretty noob - can u highlight the place were the triangle is made?
    In that case I fear that vic's script is a mite hard for you.

    Have a look at

    https://developer.mozilla.org/en/Can...Drawing_shapes

    The canvas element is a feature of HTML5 which is not supported by all browsers.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    I was looking at this page

    and figured you could do this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">
    <head>
    
    <style type="text/css">
    		#tri {
    			width:0px; 
    			height:0px; 
    			border-left:50px solid transparent;  /* left arrow slant */
    			border-right:0px solid transparent; /* right arrow slant */
    			border-bottom:50px solid #2f2f2f; /* bottom, add background color here */
    		}
    		
    	</style>
    </head>
    <body>
    <div id="tri"></div>
    		
    height:<input id="height" type="text" value="50"/>		
    width: <input id="width" type="text" value="50"/>
    <input type="button" value="calculate" onclick="calcTri()"/>	
    	
    <script type="text/javascript">
    function calcTri(){
    var thetri=document.getElementById("tri");
    var ht=document.getElementById("height").value;
    var wd=document.getElementById("width").value;
    thetri.style.borderBottom=ht+"px solid #2f2f2f"
    thetri.style.borderLeft=wd+"px solid transparent"
    }
    </script>		
    </body>
    </html>
    which seems to be a better cross-browser solution (works in IE, FF and Chrome). maybe you can modify it
    Last edited by xelawho; 04-05-2012 at 07:49 PM. Reason: added cross-browser info

  • Users who have thanked xelawho for this post:

    Philip M (04-05-2012)

  • #6
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I can't figure how to do it.
    Can some of you try to make a code there will work including my code.
    Last edited by mort982a; 04-05-2012 at 09:36 PM.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    what's the confusion?

    The only difference between my code and yours is that mine starts with the height and width as known and your starts with the height and hypoteneuse as known.

    I never studied any trigonometry (that I'm aware of), so anybody feel free to jump in here, but being that c squared =a squared plus b squared, if you have a and c then finding b is just the square root of c squared minus b squared, isn't it?

    And being that this is a homework assignment, that's probably all the help you need, no?

    in the meantime, I pimped out my code a little - like I say, I have no idea if the numbers are right, but they seem ok to me...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">
    <head>
    
    <style type="text/css">
    		#tri {
    			width:0px; 
    			height:0px; 
    			border-left:150px solid transparent;  /* left arrow slant */
    			border-right:0px solid transparent; /* right arrow slant */
    			border-bottom:150px solid #2f2f2f; /* bottom, add background color here */
    		}
    		#A {
    		position:absolute; 
    		top:150px;
    		}
    		#a {
    		position:absolute; 
    		top:75px;
    		}
    		#b {
    		position:relative; 
    		left:75px;
    		background-color:white;
    		top:-40px;
    		}
    		#c {
    		position:absolute; 
    		top:88px; 
    		left:58px;
    		background-color:white;
    		}
    		#B {
    		white-space:nowrap;
    		}
    	</style>
    </head>
    <body>
    <div id="tri">
    <div id="c">c: 212.13</div>
    <div id="A">A: 90 deg</div>
    <div id="a">a: 150</div>
    <div id="B">B: 45 deg</div>
    
    </div>
    <div id="C">C: 45 deg</div>
    <span id="b">b: 150</span>
    <br>
    <br>		
    height:<input id="height" type="text" value="150"/>		
    width: <input id="width" type="text" value="150"/>
    <input type="button" value="calculate" onclick="calcTri()"/>	
    	
    <script type="text/javascript">
    function calcTri(){
    var thetri=document.getElementById("tri");
    var ht=document.getElementById("height").value;
    var wd=document.getElementById("width").value;
    thetri.style.borderBottom=ht+"px solid #2f2f2f"
    thetri.style.borderLeft=wd+"px solid transparent"
    document.getElementById("A").style.top=ht+"px"
    document.getElementById("a").style.top=ht/2+"px"
    document.getElementById("c").style.top=(ht/2)+15+"px"
    document.getElementById("b").style.left=wd/2+"px"
    document.getElementById("c").style.left=(wd/2)-15+"px"
    document.getElementById("a").innerHTML="a: "+ht; 
    document.getElementById("b").innerHTML="b: "+wd;
    var hyp=Math.sqrt((ht*ht)+(wd*wd))
    document.getElementById("c").innerHTML="c: "+hyp.toFixed(2)
    document.getElementById("C").innerHTML="C: "+Math.round(Math.atan(ht/wd)*180/Math.PI*100)/100+" deg";
    document.getElementById("B").innerHTML="B: "+Math.round(Math.asin(wd/hyp)*180/Math.PI*100)/100+" deg";
    }
    </script>		
    </body>
    </html>

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by xelawho View Post
    I never studied any trigonometry (that I'm aware of), so anybody feel free to jump in here, but being that c squared =a squared plus b squared, if you have a and c then finding b is just the square root of c squared minus b squared, isn't it?
    That's correct provided that it is a triangle with one 90 degree angle.

    For generic triangles you'd need to use sine cosine or tan depending on which two you have. If I remember correctly sine is opposite over hypotenuse, cosine is adjacent over hypotenuse and tan is opposite over adjacent.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    If you only have two sides and you don't know that the triangle is a right triangle, the problem is not solvable.

    You can solve for the unknown sides and angles if you know any of the following, where S means side and A means angle and the ordering implies the postioning:
    SAS
    SSA
    SSS
    ASA

    In the case of a right triangle, you have either SAS or SSA, depending on which two sides you have, so it is solvable.

    If you think of solving the problem using a ruler, protractor, and compass, it becomes easier to see why you need one of those combinations.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    <script>
    function res(){
    	a1 = parseFloat(document.getElementById("a1").value);
    	c1 = parseFloat(document.getElementById("c1").value);
    	b1 = Math.round(Math.sqrt((c1*c1)-(a1*a1))*100)/100;
    	A1 = Math.round((Math.asin(a1/c1))*100*57.29577951308235)/100;
    	B1 = Math.round((90-A1)*10000)/10000;
    
    	if(a1 == 0 || c1 == 0) {
    		alert("Du har ikke indtastet en værdi!");
    	}
        else if (isNaN(a1) || isNaN(c1)) {
    		alert("Du skal indtaste et tal!");
    	}
        else if ( a1 >= c1)  {
    		alert("Det er ikke muligt at a er mindre end c");
    	}
        else  {
    		document.getElementById("b1").value = b1;
    		document.getElementById("A11").value = A1;
    		document.getElementById("B11").value = B1 ;
            Draw(a1,c1)
    
    	}
    }
    </script>
    <div align="center">
    	<table border="0" summary="">
    		<tr>
            <div id="canvas" style="position:relative;width:250px;height:250px;border:solid black 1px;" ></div>
    
    		</tr>
    
    
    	</table>
    
    <div align="center">
    	<font size="4"><br />Indtast værdierne a og c, klik på Udregn
    	<table width="300" height="0" border="0">
    		<tr>
    			<td>
    				<form method="post" action="" name="veardi">
    <table id="cal1" width="100%" border="0">
    	<tr align="middel" valign="middel">
        			<b><font>a</font></b> =
    				<input type="text" id="a1" name="a1" value="40" />
    				<br />
    				<b><font>c</font></b> =
    				<input type="text" id="c1" name="c1" value="90">
    				<br />
                    <br />
                    <b><font>C</font></b> =
    				<input type="text" id="C1" name="C1" value="90" readonly="true">
    				<br />
                    <b><font>b</font></b> =
    				<input type="text" id="b1" name="b1" value="0" readonly="true">
    				<br />
                    <b><font>A</font></b> =
    				<input type="text" id="A11" name="A1" value="0" readonly="true">
    				<br />
                    <b><font>B</font></b> =
    				<input type="text" id="B11" name="B1" value="0" readonly="true">
                 </td>
           </tr>
    
    	</font>
    </div>
    </form>
    <tr align="center" valign="top">
    <td width="0">
    <div align="left">
    	<input type="button" name="udregn" value="Udregn"onClick="res()">
    </div>
    </td>
    <td width="1" height="65">
    <div align="center"></div>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    
    <table>
    	<tr>
    		<td><input type="button" value="Ny udregning" onClick="window.location.reload()"></td>
    	</tr>
    </table>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Draw(a,c){
      var obj=document.getElementById('canvas'),w=obj.offsetWidth-40,b = Math.round(Math.sqrt((c*c)-(a*a))*100)/100,clone=document.createElement('DIV'),r=a/b,b1,a1,s1,t;
      b=Math.max(Math.min(b,w),w);
      a=b*r
      while (a>obj.offsetHeight-40){
       a--;
      }
      b=a/r;
      obj.innerHTML='';
      clone.style.position='absolute';
      clone.style.width='1px';
      clone.style.height='1px';
      clone.style.color='black';
      clone.style.backgroundColor='black';
      clone.style.fontSize='14px';
      b1=clone.cloneNode(true)
      b1.style.width=b+'px';
      b1.style.top=obj.offsetHeight-20+'px';
      b1.style.left=(obj.offsetWidth-b)/2+'px';
      obj.appendChild(b1);
    
      a1=clone.cloneNode(true)
      a1.style.height=a+'px';
      a1.style.left=(b1.offsetLeft+b)+'px';
      a1.style.top=b1.offsetTop-a+'px';
      obj.appendChild(a1);
    
      var hyp=Math.sqrt(b*b+a*a),xr=b/hyp,yr=a/hyp;
      for (var z0=0;z0<hyp;z0++){
       clone=clone.cloneNode(false);
       clone.style.left=z0*xr+'px';
       clone.style.top=-z0*yr+'px';
       b1.appendChild(clone);
      }
      s1=clone.cloneNode(true)
      s1.style.height='10px';
      s1.style.left=a1.offsetLeft-10+'px';
      s1.style.top=b1.offsetTop-10+'px';
      obj.appendChild(s1);
      s1=clone.cloneNode(true)
      s1.style.width='10px';
      s1.style.left=a1.offsetLeft-10+'px';
      s1.style.top=b1.offsetTop-10+'px';
      obj.appendChild(s1);
    
      t=clone.cloneNode(true)
      t.appendChild(document.createTextNode('A'))
      t.style.left=b1.offsetLeft-10+'px';
      t.style.top=b1.offsetTop-10+'px';
      obj.appendChild(t);
    
      t=clone.cloneNode(true)
      t.appendChild(document.createTextNode('C'))
      t.style.left=b1.offsetLeft+b+5+'px';
      t.style.top=b1.offsetTop-10+'px';
      obj.appendChild(t);
    
      t=clone.cloneNode(true)
      t.appendChild(document.createTextNode('B'))
      t.style.left=b1.offsetLeft+b+'px';
      t.style.top=b1.offsetTop-a-20+'px';
      obj.appendChild(t);
    
      t=clone.cloneNode(true)
      t.appendChild(document.createTextNode('b'))
      t.style.left=b1.offsetLeft+b/2+'px';
      t.style.top=b1.offsetTop+'px';
      obj.appendChild(t);
    
      clone.style.color='red';
    
      t=clone.cloneNode(true)
      t.appendChild(document.createTextNode('a'))
      t.style.left=a1.offsetLeft+5+'px';
      t.style.top=a1.offsetTop+a/2+'px';
      obj.appendChild(t);
    
      t=clone.cloneNode(true)
      t.appendChild(document.createTextNode('c'))
      t.style.left=b1.offsetLeft+b/2-10+'px';
      t.style.top=a1.offsetTop+a/2-10+'px';
      obj.appendChild(t);
    }
    
    res();
    /*]]>*/
    </script></body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    mort982a (04-06-2012)

  • #11
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    <script>
    function res(){
    	a1 = parseFloat(document.getElementById("a1").value);
    	c1 = parseFloat(document.getElementById("c1").value);
    	b1 = Math.round(Math.sqrt((c1*c1)-(a1*a1))*100)/100;
    	A1 = Math.round((Math.asin(a1/c1))*100*57.29577951308235)/100;
    	B1 = Math.round((90-A1)*10000)/10000;
    
    	if(a1 == 0 || c1 == 0) {
    		alert("Du har ikke indtastet en værdi!");
    	}
        else if (isNaN(a1) || isNaN(c1)) {
    		alert("Du skal indtaste et tal!");
    	}
        else if ( a1 >= c1)  {
    		alert("Det er ikke muligt at a er mindre end c");
    	}
        else  {
    		document.getElementById("b1").value = b1;
    		document.getElementById("A11").value = A1;
    		document.getElementById("B11").value = B1 ;
            Draw(a1,c1)
    
    	}
    }
    </script>
    <div align="center">
    	<table border="0" summary="">
    		<tr>
            <div id="canvas" style="position:relative;width:250px;height:250px;border:solid black 1px;" ></div>
    
    		</tr>
    
    
    	</table>
    
    <div align="center">
    	<font size="4"><br />Indtast værdierne a og c, klik på Udregn
    	<table width="300" height="0" border="0">
    		<tr>
    			<td>
    				<form method="post" action="" name="veardi">
    <table id="cal1" width="100%" border="0">
    	<tr align="middel" valign="middel">
        			<b><font>a</font></b> =
    				<input type="text" id="a1" name="a1" value="40" />
    				<br />
    				<b><font>c</font></b> =
    				<input type="text" id="c1" name="c1" value="90">
    				<br />
                    <br />
                    <b><font>C</font></b> =
    				<input type="text" id="C1" name="C1" value="90" readonly="true">
    				<br />
                    <b><font>b</font></b> =
    				<input type="text" id="b1" name="b1" value="0" readonly="true">
    				<br />
                    <b><font>A</font></b> =
    				<input type="text" id="A11" name="A1" value="0" readonly="true">
    				<br />
                    <b><font>B</font></b> =
    				<input type="text" id="B11" name="B1" value="0" readonly="true">
                 </td>
           </tr>
    
    	</font>
    </div>
    </form>
    <tr align="center" valign="top">
    <td width="0">
    <div align="left">
    	<input type="button" name="udregn" value="Udregn"onClick="res()">
    </div>
    </td>
    <td width="1" height="65">
    <div align="center"></div>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    
    <table>
    	<tr>
    		<td><input type="button" value="Ny udregning" onClick="window.location.reload()"></td>
    	</tr>
    </table>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Draw(a,c){
      var obj=document.getElementById('canvas'),w=obj.offsetWidth-40,b = Math.round(Math.sqrt((c*c)-(a*a))*100)/100,clone=document.createElement('DIV'),r=a/b,b1,a1,s1,t;
      b=Math.max(Math.min(b,w),w);
      a=b*r
      while (a>obj.offsetHeight-40){
       a--;
      }
      b=a/r;
      obj.innerHTML='';
      clone.style.position='absolute';
      clone.style.width='1px';
      clone.style.height='1px';
      clone.style.color='black';
      clone.style.backgroundColor='black';
      clone.style.fontSize='14px';
      b1=clone.cloneNode(true)
      b1.style.width=b+'px';
      b1.style.top=obj.offsetHeight-20+'px';
      b1.style.left=(obj.offsetWidth-b)/2+'px';
      obj.appendChild(b1);
    
      a1=clone.cloneNode(true)
      a1.style.height=a+'px';
      a1.style.left=(b1.offsetLeft+b)+'px';
      a1.style.top=b1.offsetTop-a+'px';
      obj.appendChild(a1);
    
      var hyp=Math.sqrt(b*b+a*a),xr=b/hyp,yr=a/hyp;
      for (var z0=0;z0<hyp;z0++){
       clone=clone.cloneNode(false);
       clone.style.left=z0*xr+'px';
       clone.style.top=-z0*yr+'px';
       b1.appendChild(clone);
      }
      s1=clone.cloneNode(true)
      s1.style.height='10px';
      s1.style.left=a1.offsetLeft-10+'px';
      s1.style.top=b1.offsetTop-10+'px';
      obj.appendChild(s1);
      s1=clone.cloneNode(true)
      s1.style.width='10px';
      s1.style.left=a1.offsetLeft-10+'px';
      s1.style.top=b1.offsetTop-10+'px';
      obj.appendChild(s1);
    
      t=clone.cloneNode(true)
      t.appendChild(document.createTextNode('A'))
      t.style.left=b1.offsetLeft-10+'px';
      t.style.top=b1.offsetTop-10+'px';
      obj.appendChild(t);
    
      t=clone.cloneNode(true)
      t.appendChild(document.createTextNode('C'))
      t.style.left=b1.offsetLeft+b+5+'px';
      t.style.top=b1.offsetTop-10+'px';
      obj.appendChild(t);
    
      t=clone.cloneNode(true)
      t.appendChild(document.createTextNode('B'))
      t.style.left=b1.offsetLeft+b+'px';
      t.style.top=b1.offsetTop-a-20+'px';
      obj.appendChild(t);
    
      t=clone.cloneNode(true)
      t.appendChild(document.createTextNode('b'))
      t.style.left=b1.offsetLeft+b/2+'px';
      t.style.top=b1.offsetTop+'px';
      obj.appendChild(t);
    
      clone.style.color='red';
    
      t=clone.cloneNode(true)
      t.appendChild(document.createTextNode('a'))
      t.style.left=a1.offsetLeft+5+'px';
      t.style.top=a1.offsetTop+a/2+'px';
      obj.appendChild(t);
    
      t=clone.cloneNode(true)
      t.appendChild(document.createTextNode('c'))
      t.style.left=b1.offsetLeft+b/2-10+'px';
      t.style.top=a1.offsetTop+a/2-10+'px';
      obj.appendChild(t);
    }
    
    res();
    /*]]>*/
    </script></body>
    </html>
    Thank you so much - But can u do me one more favor ? - Comment the lines in the canvas so i can defend it to the exam,

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    if this is for an exam the least you can do is analyse the code so that you understand it
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    mort982a (04-06-2012)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •