attempting to modify a javascript page to embed in a php page
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 -->
<script language=\"javascript\">
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\";
}
}
}
</script>
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 posted this at 18:41 — 31st August 2003.
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.
m3rajk posted this at 19:16 — 31st August 2003.
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
POSIX. because a stable os that doesn't have memory leaks and isn't buggy is always good.
Suzanne posted this at 20:49 — 31st August 2003.
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 posted this at 20:53 — 31st August 2003.
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 -->
<script language=\"javascript\">
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\";
}
}
}
</script>
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>
}
?>
m3rajk posted this at 21:12 — 31st August 2003.
They have: 461 posts
Joined: Jul 2003
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 posted this at 21:17 — 31st August 2003.
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.