attempting to modify a javascript page to embed in a php page

They have: 461 posts

Joined: Jul 2003

note: fixed the text color
i'm having a few issues with it.

the html ones, if you'd like to see, are located at: http://24.91.157.113/findyourdesire/colorfinder/
and the php version to access that is at: http://24.91.157.113/findyourdesire/colorfinder/colorFinderPageTest.php

the html version works fine but you'll notice the javascript isn't working when loaded via php.

i've also tried to add a test to see if the color is above 200/200/200 or 85/85/85 rgb (decimal and percent respectively) and all attempts caused the page to fail, so i put it back to how it was when it worked last.

i would like to have it use white text in the frames if it is below 200/200/200 ( or 85/85/85) and black otherwise (for visibility) i would also like to get ti so that i can create the page via the php script so that if changes are made that would affect the control page, it will be done automatically when i edit the include file.

i do not know why it doesn't work with the php script, but i do not believe the issue is php, i believe both of these have to do with javascript.

the phpscript: (modified so as to not cause horizontal scrolling)

<?php
include('/home/joshua/includes/fyd.incs.php');
if(isset(
$_GET['fn'])){
  if(
$_GET['fn']=='control'){ // create the control page
   
bgnpg('Font Color Hex-Code Finder Control Panel');
    echo <<<END
    <!--
    start of for color table that will be used to control the colors of the other pages
shown.
    use a table inside the form to position the options neater.
    take out the border/cell padding since those are unecesary.
    -->
    <form name=\"colortable\">
     
$tsnw
        <!-- first the space to write in the values -->
        <tr>
          <td colspan=\"3\" align=\"center\">
            <font face=\"andy\">
              <font color=\"red\"> Red: <input type=\"text\" name=\"red\" width=\"5\"></font>
              <font color=\"green\"> Green: <input type=\"text\" name=\"green\" width=\"5\">
</font>
            </font>
          </td>
        </tr>
        <tr>
          <td>
            <font face=\"andy\">
              <font color=\"blue\"> Blue: <input type=\"text\" name=\"blue\" width=\"5\"></font>
            </font>
          </td>
          <td align=\"left\">
            <!-- then tell what form they were written in -->
            <select name=\"hdp\">
              <option value=\"dec\">Decimal</option>
              <option value=\"per\">Percent</option>
            </select>
          </td>
          <td align=\"right\">
            <!-- then collect the information -->
            <input type=\"button\" onClick=\"findcolor()\" value=\"show me!\" >
        </tr>
      </table>
    </form>
   
    <!-- instructions on use -->
    <p>
      <font face=\"andy\">
        to use this page, select either \"Decimal\" or \"Percent\". Then type the RGB
values you desire to see.
        <br />for Decimal, acceptable values are 0 through 255 inclusive.
        <br />for Percent, acceptable values are 0 through 100 inclusive.
        <br />Note: leading 0 not always shown for each group (RGB)
      </font>
    </p>
   
    <!-- use java script to find out what was entered and handle it -->
    &lt;script language=\"javascript\"&gt;
      function findcolor(){ // find the colors
     
      /* find out what was entered */
      var hdp=(parent.cntrl.document.colortable.hdp.value);
      var red=(parent.cntrl.document.colortable.red.value *1);
      var gre=(parent.cntrl.document.colortable.green.value *1);
      var blu=(parent.cntrl.document.colortable.blue.value *1);
     
      /* check for type & validity, then call the write function */
      if(hdp==\"dec\"){
        /* make sure it is between 000 and 255 */
        if((red<0)||(red>255)){ // make sure the red value is valid
          alert(\"the value for Red is not legal, it must be between 0 and 255 inclusive.\")
        }else if((gre<0)||(gre>255)){ // make sure the red value is valid
          alert(\"the value for Green is not legal, it must be between 0 and 255 inclusive.\")
        }else if((blu<0)||(blu>255)){ // make sure the red value is valid
          alert(\"the value for Blue is not legal, it must be between 0 and 255 inclusive.\")
        }else { // if it's all legal then write it
          writecolor(\"dec\", red, gre, blu);
        }
      }else{ // if not decimal, it must be percent.
        /* make sure it is between 0 and 100 inclusive */
        if((red<0)||(red>100)){ // make sure the red value is valid
          alert(\"the value for Red is not legal, it must be between 0 and 100 inclusive.\")
        }else if((gre<0)||(gre>100)){ // make sure the red value is valid
          alert(\"the value for Green is not legal, it must be between 0 and 100 inclusive.\")
          }
          else if((blu<0)||(blu>100)){ // make sure the red value is valid
            alert(\"the value for Blue is not legal, it must be between 0 and 100 inclusive.\")
          }
          else {  // if it's all legal then write it
            writecolor(\"per\", red, gre, blu);
          }
        }
        
        function writecolor(type, r, g, b){ // makes sure everything is in hex,
then send it to be written
          if(type==\"dec\"){
            r=dechex(r);
            g=dechex(g);
            b=dechex(b);
            writeframe(r, g, b);
          }else{
            r=perhex(r);
            g=perhex(g);
            b=perhex(b);
            writeframe(r, g, b);
          }
            
          function writeframe(r, g, b){ // write to the frames;
         
          parent.b1.document.open(); // write red
          parent.b1.document.write(\"<html><body bgcolor=#\"+r+\"0000> \n Color=#\"+r+\"0000
\n </body></html>\");
          parent.b1.document.close();
              
          parent.b2.document.open(); // write yellow
          parent.b2.document.write(\"<html><body bgcolor=#\"+r+g+\"00> \n Color=#\"+r+g+\"00
\n </body></html>\");
          parent.b2.document.close();
             
          parent.b3.document.open(); // write green
          parent.b3.document.write(\"<html><body bgcolor=#00\"+g+\"00> \n Color=#00\"+g+\"00
\n </body></html>\");
          parent.b3.document.close();
             
          parent.c.document.open(); // write full color
          parent.c.document.write(\"<html><body bgcolor=#\"+r+g+b+\"> \n Color=#\"+r+g+b+
\" \n </body></html>\");
          parent.c.document.close();
              
          parent.d1.document.open(); // write magenta
          parent.d1.document.write(\"<html><body bgcolor=#\"+r+\"00\"+b+\"> \n Color=#\"+r+
\"00\"+b+\" \n </body></html>\");
          parent.d1.document.close();
               
          parent.d2.document.open(); // write blue
          parent.d2.document.write(\"<html><body bgcolor=#0000\"+b+\"> \n Color=#0000\"+b+
\" \n </body></html>\");
          parent.d2.document.close();
            
          parent.d3.document.open(); // write cyan
          parent.d3.document.write(\"<html><body bgcolor=#00\"+g+b+\"> \n Color=#00\"+g+b+
\" \n </body></html>\");
          parent.d3.document.close();
        }
      }
         
      function perhex(num){ // convert percent to hexidecimal
        /* convert to decimal, call dechex. (theory--> x/100=y/255-->255x=100y
-->255x/100=y) */
        return (fhex(dechex(Math.round((255*num)/100))));
      }
         
      function dechex(num){ // convert decimal to hexidecimal
        var hex;
        return (num.toString(16));
      }
            
      function vhex(num){ // is the hex number valid?
        if(!fhex(num)!=\"false\") return true;
        else return false;
      }
           
      function fhex(num){ // makes sure hexidecimal number is valid
        if((num.length<1)||(num.length>2)) return \"false\" // is it too large or empty?
          else{ // it is the right length, check the charachters.
            /* take the first character and check validity */
            num=num.toUpperCase();
            if((num.charAt(0)==\"0\")||(num.charAt(0)==\"1\")||(num.charAt(0)==\"2\")||
               (num.charAt(0)==\"3\")||(num.charAt(0)==\"4\")||(num.charAt(0)==\"5\")||
               (num.charAt(0)==\"6\")||(num.charAt(0)==\"7\")||(num.charAt(0)==\"8\")||
               (num.charAt(0)==\"9\")||(num.charAt(0)==\"A\")||(num.charAt(0)==\"B\")||
               (num.charAt(0)==\"C\")||(num.charAt(0)==\"D\")||(num.charAt(0)==\"E\")||
               (num.charAt(0)==\"F\")){
               /* is there a second character? */
               if(num.length==1){
                 num=\"0\"+num; // no, so add leading zero
                 return num; // return the number
               }else{ // yes, check for validty
                 if((num.charAt(1)==\"0\")||(num.charAt(1)==\"1\")||(num.charAt(1)==\"2\")||
                    (num.charAt(1)==\"3\")||(num.charAt(1)==\"4\")||(num.charAt(1)==\"5\")||
                    (num.charAt(1)==\"6\")||(num.charAt(1)==\"7\")||(num.charAt(1)==\"8\")||
                    (num.charAt(1)==\"9\")||(num.charAt(1)==\"A\")||(num.charAt(1)==\"B\")||
                    (num.charAt(1)==\"C\")||(num.charAt(1)==\"D\")||(num.charAt(1)==\"E\")||
                    (num.charAt(1)==\"F\")){
                      return num;
                 }else return \"false\";
               }
            }else return \"false\";
          }
        }
      }
    &lt;/script&gt;

END;
   
clspg();
  }
}else{
 
bgnfm('Font Color Hex-Code Finder');
  echo <<<END
  <frameset rows=\"55%,15%,15%,15%\">
    <!-- allow scrolling incase the user has text set to a size that will require it -->
    <frame scrolling=\"auto\" noresize=\"no\" name=\"cntrl\" src=\"
$_SERVER[PHP_SELF]?fn=control\">
</frame>
    <!-- create columns for the \"triangle\" -->
    <frameset cols=\"25%,50%,25%\">
      <!-- create subframes -->
      <frame scrolling=\"no\" noresize=\"yes\" name=\"b1\" src=\"r.html\"></frame>
      <frame scrolling=\"no\" noresize=\"yes\" name=\"b2\" src=\"y.html\"></frame>
      <frame scrolling=\"no\" noresize=\"yes\" name=\"b3\" src=\"g.html\"></frame>
    </frameset>
    <frame scrolling=\"no\" noresize=\"yes\" name=\"c\" src=\"rgb.html\"></frame>
    <!-- create columns for the \"triangle\" -->
    <frameset cols=\"38%,24%,38%\">
      <!-- create subframes -->
      <frame scrolling=\"no\" noresize=\"yes\" name=\"d1\" src=\"m.html\"></frame>
      <frame scrolling=\"no\" noresize=\"yes\" name=\"d2\" src=\"b.html\"></frame>
      <frame scrolling=\"no\" noresize=\"yes\" name=\"d3\" src=\"c.html\"></frame>
    </frameset>
    <!-- message to frame incapable browsers -->
    <noframe>
      <p>You need a frames-capable browser. I suggest Mozilla (1.3.1 or greater)
since this site was tested with it. Microsoft Internet Explorer been announced
\"End-Of-Life\" and will not be upgraded after 6.0. While it is currently capable of
handling nearly everything out there, it is only a matter of time till it no longer
displays pages properly.</p>
    </noframe>
  </frameset>
</html>
END;
}
?>

POSIX. because a stable os that doesn't have memory leaks and isn't buggy is always good.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

NO SPACES BEFORE echo<<

This isn't a problem with the JavaScript, it's a problem with your PHP again.

They have: 461 posts

Joined: Jul 2003

are you sure about that?
i know i have it like that in various other files where the javascript and such work, so i checked on php's website....
http://us4.php.net/manual/en/function.echo.php

Quote: echo <<

POSIX. because a stable os that doesn't have memory leaks and isn't buggy is always good.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

K, what aren't you getting?

NO EXTRA WHITESPACE... You have spaces all over the place in the here document syntax.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

<?php

include( '/home/joshua/includes/fyd.incs.php' );
if(isset(
$_GET ['fn' ])){
  if(
$_GET ['fn' ]== 'control' ){ // create the control page
    
bgnpg ('Font Color Hex-Code Finder Control Panel' );
    
    <!--
   
start of for color table that will be used to control the colors of the other pages
shown
.
    use
a table inside the form to position the options neater.
   
take out the border/cell padding since those are unecesary.
    -->
    <
form name=\"colortable\">
      =
$tsnw
        <!-- first the space to write in the values -->
        <tr>
          <td colspan=\"3\" align=\"center\">
            <font face=\"andy\">
              <font color=\"red\"> Red: <input type=\"text\" name=\"red\" width=\"5\"></font>
              <font color=\"green\"> Green: <input type=\"text\" name=\"green\" width=\"5\">
</font>
            </font>
          </td>
        </tr>
        <tr>
          <td>
            <font face=\"andy\">
              <font color=\"blue\"> Blue: <input type=\"text\" name=\"blue\" width=\"5\"></font>
            </font>
          </td>
          <td align=\"left\">
            <!-- then tell what form they were written in -->
            <select name=\"hdp\">
              <option value=\"dec\">Decimal</option>
              <option value=\"per\">Percent</option>
            </select>
          </td>
          <td align=\"right\">
            <!-- then collect the information -->
            <input type=\"button\" onClick=\"findcolor()\" value=\"show me!\" >
        </tr>
      </table>
    </form>
    
    <!-- instructions on use -->
    <p>
      <font face=\"andy\">
        to use this page, select either \"Decimal\" or \"Percent\". Then type the RGB
values you desire to see.
        <br />for Decimal, acceptable values are 0 through 255 inclusive.
        <br />for Percent, acceptable values are 0 through 100 inclusive.
        <br />Note: leading 0 not always shown for each group (RGB)
      </font>
    </p>
    
    <!-- use java script to find out what was entered and handle it -->
    &lt;script language=\"javascript\"&gt;
      function findcolor() {// find the colors
      
      /* find out what was entered */
      var hdp=(parent.cntrl.document.colortable.hdp.value);
      var red=(parent.cntrl.document.colortable.red.value *1);
      var gre=(parent.cntrl.document.colortable.green.value *1);
      var blu=(parent.cntrl.document.colortable.blue.value *1);
      
      /* check for type & validity, then call the write function */
      if(hdp==\"dec\") {
        /* make sure it is between 000 and 255 */
        if((red<0)||(red>255)) {// make sure the red value is valid
          alert(\"the value for Red is not legal, it must be between 0 and 255 inclusive.\")
         }else if((gre<0)||(gre>255)) {// make sure the red value is valid
          alert(\"the value for Green is not legal, it must be between 0 and 255 inclusive.\")
         }else if((blu<0)||(blu>255)) {// make sure the red value is valid
          alert(\"the value for Blue is not legal, it must be between 0 and 255 inclusive.\")
         }else {// if it's all legal then write it
          writecolor(\"dec\", red, gre, blu);
         }
       }else {// if not decimal, it must be percent.
        /* make sure it is between 0 and 100 inclusive */
        if((red<0)||(red>100)) {// make sure the red value is valid
          alert(\"the value for Red is not legal, it must be between 0 and 100 inclusive.\")
         }else if((gre<0)||(gre>100)) {// make sure the red value is valid
          alert(\"the value for Green is not legal, it must be between 0 and 100 inclusive.\")
           }
          else if((blu<0)||(blu>100)) {// make sure the red value is valid
            alert(\"the value for Blue is not legal, it must be between 0 and 100 inclusive.\")
           }
          else {  // if it's all legal then write it
            writecolor(\"per\", red, gre, blu);
           }
         }
         
        function writecolor(type, r, g, b) {// makes sure everything is in hex,
then send it to be written
          if(type==\"dec\") {
            r=dechex(r);
            g=dechex(g);
            b=dechex(b);
            writeframe(r, g, b);
           }else {
            r=perhex(r);
            g=perhex(g);
            b=perhex(b);
            writeframe(r, g, b);
           }
             
          function writeframe(r, g, b) {// write to the frames;
          
          parent.b1.document.open(); // write red
          parent.b1.document.write(\"<html><body bgcolor=#\"+r+\"0000> \n Color=#\"+r+\"0000
\n </body></html>\");
          parent.b1.document.close();
               
          parent.b2.document.open(); // write yellow
          parent.b2.document.write(\"<html><body bgcolor=#\"+r+g+\"00> \n Color=#\"+r+g+\"00
\n </body></html>\");
          parent.b2.document.close();
              
          parent.b3.document.open(); // write green
          parent.b3.document.write(\"<html><body bgcolor=#00\"+g+\"00> \n Color=#00\"+g+\"00
\n </body></html>\");
          parent.b3.document.close();
              
          parent.c.document.open(); // write full color
          parent.c.document.write(\"<html><body bgcolor=#\"+r+g+b+\"> \n Color=#\"+r+g+b+
\"\n </body></html>\");
          parent.c.document.close();
               
          parent.d1.document.open(); // write magenta
          parent.d1.document.write(\"<html><body bgcolor=#\"+r+\"00\"+b+\"> \n Color=#\"+r+
\"00\"+b+\" \n </body></html>\");
          parent.d1.document.close();
                
          parent.d2.document.open(); // write blue
          parent.d2.document.write(\"<html><body bgcolor=#0000\"+b+\"> \n Color=#0000\"+b+
\"\n </body></html>\");
          parent.d2.document.close();
             
          parent.d3.document.open(); // write cyan
          parent.d3.document.write(\"<html><body bgcolor=#00\"+g+b+\"> \n Color=#00\"+g+b+
\"\n </body></html>\");
          parent.d3.document.close();
         }
       }
          
      function perhex(num) {// convert percent to hexidecimal
        /* convert to decimal, call dechex. (theory--> x/100=y/255-->255x=100y
-->255x/100=y) */
        return (fhex(dechex(Math.round((255*num)/100))));
       }
          
      function dechex(num) {// convert decimal to hexidecimal
        var hex;
        return (num.toString(16));
       }
             
      function vhex(num) {// is the hex number valid?
        if(!fhex(num)!=\"false\") return true;
        else return false;
       }
            
      function fhex(num) {// makes sure hexidecimal number is valid
        if((num.length<1)||(num.length>2)) return \"false\" // is it too large or empty?
          else {// it is the right length, check the charachters.
            /* take the first character and check validity */
            num=num.toUpperCase();
            if((num.charAt(0)==\"0\")||(num.charAt(0)==\"1\")||(num.charAt(0)==\"2\")||
               (num.charAt(0)==\"3\")||(num.charAt(0)==\"4\")||(num.charAt(0)==\"5\")||
               (num.charAt(0)==\"6\")||(num.charAt(0)==\"7\")||(num.charAt(0)==\"8\")||
               (num.charAt(0)==\"9\")||(num.charAt(0)==\"A\")||(num.charAt(0)==\"B\")||
               (num.charAt(0)==\"C\")||(num.charAt(0)==\"D\")||(num.charAt(0)==\"E\")||
               (num.charAt(0)==\"F\")) {
               /* is there a second character? */
               if(num.length==1) {
                 num=\"0\"+num; // no, so add leading zero
                 return num; // return the number
                }else {// yes, check for validty
                 if((num.charAt(1)==\"0\")||(num.charAt(1)==\"1\")||(num.charAt(1)==\"2\")||
                    (num.charAt(1)==\"3\")||(num.charAt(1)==\"4\")||(num.charAt(1)==\"5\")||
                    (num.charAt(1)==\"6\")||(num.charAt(1)==\"7\")||(num.charAt(1)==\"8\")||
                    (num.charAt(1)==\"9\")||(num.charAt(1)==\"A\")||(num.charAt(1)==\"B\")||
                    (num.charAt(1)==\"C\")||(num.charAt(1)==\"D\")||(num.charAt(1)==\"E\")||
                    (num.charAt(1)==\"F\")) {
                      return num;
                  }else return \"false\";
                }
             }else return \"false\";
           }
         }
       }
    &lt;/script&gt;

clspg ();
  }
}else{
   bgnfm ('Font Color Hex-Code Finder' );
  
  <frameset rows=\"55%,15%,15%,15%\">
    <!-- allow scrolling incase the user has text set to a size that will require it -->
    <frame scrolling=\"auto\" noresize=\"no\" name=\"cntrl\" src=\"
$_SERVER [PHP_SELF ]?fn=control\">
</frame>
    <!-- create columns for the \"triangle\" -->
    <frameset cols=\"25%,50%,25%\">
      <!-- create subframes -->
      <frame scrolling=\"no\" noresize=\"yes\" name=\"b1\" src=\"r.html\"></frame>
      <frame scrolling=\"no\" noresize=\"yes\" name=\"b2\" src=\"y.html\"></frame>
      <frame scrolling=\"no\" noresize=\"yes\" name=\"b3\" src=\"g.html\"></frame>
    </frameset>
    <frame scrolling=\"no\" noresize=\"yes\" name=\"c\" src=\"rgb.html\"></frame>
    <!-- create columns for the \"triangle\" -->
    <frameset cols=\"38%,24%,38%\">
      <!-- create subframes -->
      <frame scrolling=\"no\" noresize=\"yes\" name=\"d1\" src=\"m.html\"></frame>
      <frame scrolling=\"no\" noresize=\"yes\" name=\"d2\" src=\"b.html\"></frame>
      <frame scrolling=\"no\" noresize=\"yes\" name=\"d3\" src=\"c.html\"></frame>
    </frameset>
    <!-- message to frame incapable browsers -->
    <noframe>
      <p>You need a frames-capable browser. I suggest Mozilla (1.3.1 or greater)
since this site was tested with it. Microsoft Internet Explorer been announced
\"End-Of-Life\" and will not be upgraded after 6.0. While it is currently capable of
handling nearly everything out there, it is only a matter of time till it no longer
displays pages properly.</p>
    </noframe>
  </frameset>
</html>

?>

They have: 461 posts

Joined: Jul 2003

Quote: Originally posted by Suzanne
K, what aren't you getting?

NO EXTRA WHITESPACE... You have spaces all over the place in the here document syntax.

that there's NOTHING with the END; line aside form that. i tried taking off the space between echo and <<

POSIX. because a stable os that doesn't have memory leaks and isn't buggy is always good.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

There were spaces after the semi-colon on each END; line. The echo<<

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.