...

View Full Version : Problems with a Color preview page



TickTock
11-02-2006, 12:46 AM
Ok let me give you a brief over view of what I'm trying to do.

I have a text input field that allows users to type in either names of colors or hex values and then displays a little preview box next to the field. While the code I have works it generates a JS error I just can not seem to get rid of. Any ideas?

Here is the JS


<script>
function previewColor(passedColor)
{
var parsed = true;
var validchars = "abcdefghijklmnopqrstuvwxyz0123456789##";
var numExists = false;

for (var i=0; i < passedColor.length; i++) {
var letter = passedColor.charAt(i).toLowerCase();
if (validchars.indexOf(letter) > 25) {
numExists = true;
}
if (letter == "##" && i > 0) {
alert("You may only enter the ## sign at the beginning of a hexidecimal number.");
parsed = false;
break;
}
if (validchars.indexOf(letter) != -1) {
continue;
} else {
alert("Invalid character: " + letter);
parsed = false;
break;
}
}
if (numExists && passedColor.indexOf("##") < 0) {
alert("You must enter the ## sign at the beginning of a hexidecimal number.");
parsed = false;
}
if (passedColor.indexOf("##") == 0 && passedColor.length > 7) {
alert("Hexidecimal numbers must be 6 characters in length.");
parsed = false;
}
if (passedColor.length > 13) {
alert("The color may not be longer than 13 characters.");
parsed = false;
}
if (parsed) {
document.getElementById("html_frame").style.background = passedColor;
document.getElementById("color").value = passedColor;
}
}

function updateSubmit() {
google = /[0-9a-fA-F]{6}/;
color = document.getElementById("color").value;

if(color.search(google) != -1 && color.indexOf("##") == -1)
{
document.getElementById("color").value = "##" + color;
}
document.getElementById("ColorPicker").submit();
}
</script>

Heres the field that calls the function:


input id=color type=text name=color onKeyUp="previewColor(document.getElementById('color').value);">

brandonH
11-02-2006, 02:14 AM
could you post your whole source code for me please. would make it easier for me to copy it and recreate your page for trouble-shooting.

TickTock
11-02-2006, 05:06 PM
Here is the whole source code for that page, but the reason I didn't post it before is becuase most of the page is in ColdFusion


<cfset Meeting_ID = "#request.StateManager.getMeetingID()#">
<cfset DSN = request.StateManager.getDSN()>
<cfset root_dir = request.statemanager.getrootdir() >
<cfset this.MeetingManager = createobject("component", "#application.Root_Dir#.cfc.MeetingManager").MeetingManager(ExternalManager="#request.ExternalManager#") >
<cfset color_type_code = attributes.color_type_code>

<cfset this.CustomColorManager = createobject("component", "#application.Root_Dir#.cfc.CustomColorManager").CustomColorManager(ExternalManager=#request.ExternalManager#)>

<cfquery name="getColorInfo" datasource="#DSN#">
SELECT * FROM custom_color_types WHERE code = '#color_type_code#'
</cfquery>

<cfquery name="getColor" datasource="#DSN#">
SELECT * FROM custom_colors WHERE type = '#getColorInfo.custom_color_type_id#' AND Meeting_id = #Meeting_ID#
</cfquery>

<cfquery name="getDefaultColor" datasource="#DSN#">
SELECT * FROM custom_colors WHERE type = '#getColorInfo.custom_color_type_id#' AND Meeting_id IS NULL
</cfquery>

<cfif getColor.RecordCount IS 0 OR attributes.defaultMode IS "Default">
<cfset current_color = getDefaultColor.color>
<cfelse>
<cfset current_color = getColor.color>
</cfif>

<cfset color1 = "Navy">
<cfset color2 = "#application.sysStyles.group1#">

<cfoutput>

<html>
<head>
<Title>Color Editor</title>
<style>
input {font-family:arial;font-size:8pt;}
select {font-family:arial;font-size:8pt;}
td.labelList {font-family:arial;font-size:7pt;color:black;}
td.labelList A{text-decoration:none;}
td.labelList A:hover{color:blue;}
td.form{font-family:arial;font-size:10pt;color:navy;}
td.tab_on{font-family:arial;font-size:8pt;color:white;background-color:#color1#;text-decoration:none;}
td.tab_off{font-family:arial;font-size:8pt;color:black;background-color:##EAEAEA;border:1px #color1# solid;height:10;border-top:3px solid ##696969;text-decoration:none;}
textarea.label{font-family:arial;font-size:9pt;}
textarea.instruction{font-family:arial;font-size:8pt;}
</style>
</head>
<body topmargin="0" leftmargin="0" bgcolor="#color2#">

<table align="center" cellpadding="5" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="3" bgcolor="navy"><font color="white" size="2" face="arial"><strong>Color Editor</strong></font></td>
</tr>
<tr>
<td class="form">
<cfif attributes.defaultMode IS "Meeting">
<cfoutput>&nbsp;meeting: <strong>#this.MeetingManager.getMtgInfo().meeting_name#</strong></cfoutput>
</cfif>
</td>
<cfif attributes.defaultMode IS "Default">
<td class="tab_off" width="100" align="center"><a href="#cgi.script_name#?fuseaction=dyna_color&meeting_id=#meeting_id#&color_type_code=#color_type_code#&defaultMode=Meeting&refresh=no&#request.StateManager.getURLParams()#" style="text-decoration:none;">edit meeting values</a></td>
<td class="tab_on" width="100" align="center">edit system defaults</td>
<cfelse>
<td class="tab_on" width="100" align="center">edit meeting values</td>
<td class="tab_off" width="100" align="center"><a href="#cgi.script_name#?fuseaction=dyna_color&meeting_id=#meeting_id#&color_type_code=#color_type_code#&defaultMode=Default&refresh=no&#request.StateManager.getURLParams()#" style="text-decoration:none;">edit system defaults</a></td>
</cfif>
</tr>
</table>
</cfoutput>

<cfset drawColorPicker()>

<cfif attributes.refresh IS "YES">
<cfoutput>
<SCRIPT language=JavaScript>
if(self.opener.location.href.search('refreshToggle') < 0)
{
self.opener.location.href = self.opener.location.href + "&refreshToggle=yes";
}
else
{
self.opener.location.href = self.opener.location.href
}
</SCRIPT>
</cfoutput>
</cfif>

<cffunction name="drawColorPicker">

<cfset colorsel = current_color>

<cfoutput>
<style>
##color_table {
list-style:none;
width:310px;
}
##color_table li {
width:100px;
float:left;
margin:0;
padding:0;
margin:1px;
border:1px solid black;
text-align:center;

justify:center;
}
</style>

<script>
function previewColor(passedColor)
{
var parsed = true;
var validchars = "abcdefghijklmnopqrstuvwxyz0123456789##";
var numExists = false;

for (var i=0; i < passedColor.length; i++) {
var letter = passedColor.charAt(i).toLowerCase();
if (validchars.indexOf(letter) > 25) {
numExists = true;
}
if (letter == "##" && i > 0) {
alert("You may only enter the ## sign at the beginning of a hexidecimal number.");
parsed = false;
break;
}
if (validchars.indexOf(letter) != -1) {
continue;
} else {
alert("Invalid character: " + letter);
parsed = false;
break;
}
}
if (numExists && passedColor.indexOf("##") < 0) {
alert("You must enter the ## sign at the beginning of a hexidecimal number.");
parsed = false;
}
if (passedColor.indexOf("##") == 0 && passedColor.length > 7) {
alert("Hexidecimal numbers must be 6 characters in length.");
parsed = false;
}
if (passedColor.length > 13) {
alert("The color may not be longer than 13 characters.");
parsed = false;
}
if (parsed) {
document.getElementById("html_frame").style.background = passedColor;
document.getElementById("color").value = passedColor;
}
}

function updateSubmit() {
google = /[0-9a-fA-F]{6}/;
color = document.getElementById("color").value;

if(color.search(google) != -1 && color.indexOf("##") == -1)
{
document.getElementById("color").value = "##" + color;
}
document.getElementById("ColorPicker").submit();
}
</script>

<form id="ColorPicker" action="#cgi.script_name#?fuseaction=act_dyna_color&Meeting_ID=#Meeting_ID#&refresh=no&#request.StateManager.getURLParams()#" method="POST">
<input type="hidden" name="color_type_code" value="#color_type_code#">
<input type="hidden" name="color_type_value" value="#getColorInfo.value#">
<cfif attributes.defaultMode IS "default">
<input type="Hidden" name="DefaultMode" value="Default">
<cfelse>
<input type="Hidden" name="DefaultMode" value="Meeting">
</cfif>
<tr>
<td>
<table>
<tr>
<td valign=top>
<table>
<tr>
<td>Current #attributes.defaultMode# Color:<br><br></td>
<td bgcolor="#colorsel#" border="1"><font color=white>#colorsel#</font></td>
<td></td>
</tr>
<tr>
<td>Enter a color:<br>(hexidecimal value<br>or English name)</td>
<td><input id=color type=text name=color onKeyUp="previewColor(document.getElementById('color').value);"></td>
<td><div style="background-color:#colorsel#;width:20;padding:3;" id="html_frame"></div>
</td>
</tr>
<tr>
<td></td>
<td><input type="image" src="/#request.StateManager.getRootDir()#/img/buttons/encompass_update.gif" border="0" onClick="updateSubmit();" style="cursor:pointer;"></td>
<td></td>
</tr>
</table>
</td>
<td width=50></td>
<td valign=top>

<cfset colorList = ArrayNew(1)>
<cfset colorList = this.CustomColorManager.getColorList()>
<ul id="color_table">
<cfloop from="1" to="#ArrayLen(colorList)#" index="i">
<li>
<a href="javascript:previewColor('#colorList[i]#');">
<div style="background-color:#colorList[i]#;height:30;text-decoration:none;color:white;cursor:pointer;" id="#colorList[i]#_box">#colorList[i]#</div>
</a>
</li>
</cfloop>
</ul>

</td></tr></table>
</td></tr></table>
</td></tr></table>
</form>
</body>
</html>
</cfoutput>
</cffunction>

brandonH
11-02-2006, 06:44 PM
for one i dont understand why you are posting the value to a cgi script.

second, you are using the onkeyup event handler. this causes the script to be run everytime the user lets up a key. basically if the value in the text field isnt a correct value on each keyup, it will cause errors when trying to assign the value to the preview area.

i reccomend using a button to run the script or write a small script to detect what key is being pressed iside the text field and if its the enter key, then run the script.

also, the use of the '#' symbol is not really needed, the browser will still recognize it, and if you still want it included you only need one, not two.

here is a thrown together page to do what you are asking for, it has both a button for triggering the script and it also detects if the enterkey is press and calls the function if so.

the enter key detection is real basic and you will need to modify it to make it cross browser friendly. right now it will work fine in I.E. though






<html>

<head></head>

<body>
<input id=color type=text name=color onkeyup="EnterPressed(event);">
<input type=button value=preview onclick="previewColor(document.getElementById('color').value);">
<div id="colorD" style="width:150px;height:150px;background-color:#ffffff;">
<script type=text/javascript>

function EnterPressed(e) {
var characterCode
e = event
characterCode = e.keyCode
if (characterCode == 13){ previewColor(document.getElementById('color').value);return true ;}
else{ return false;}
}


function previewColor(passedColor)
{
var parsed = true;
var validchars = "abcdefghijklmnopqrstuvwxyz0123456789#(),";
var numExists = false;

for (var i=0; i < passedColor.length; i++) {
var letter = passedColor.charAt(i).toLowerCase();
if (validchars.indexOf(letter) > 25) {
numExists = true;
}
if (letter == "#" && i > 0) {
alert("You may only enter the # sign at the beginning of a hexidecimal number.");
parsed = false;
break;
}
if (validchars.indexOf(letter) != -1) {
continue;
} else {
alert("Invalid character: " + letter);
parsed = false;
break;
}
}
if (numExists && passedColor.indexOf("#") < 0) {
alert("You must enter the # sign at the beginning of a hexidecimal number.");
parsed = false;
}
if (passedColor.indexOf("#") == 0 && passedColor.length > 7) {
alert("Hexidecimal numbers must be 6 characters in length.");
parsed = false;
}
if (passedColor.length > 13) {
alert("The color may not be longer than 13 characters.");
parsed = false;
}
if (parsed) {
document.getElementById("colorD").style.backgroundColor = passedColor;
document.getElementById("color").value = passedColor;
}
}
</script>



</body>

</html>

TickTock
11-02-2006, 08:49 PM
Well the page is a seperate popup that allows you edit contents on the parent window. The reason I use two #'s is becuase the CF compiler needs you to escape #'s since they are a special character delimiting CF variables. Let me give your suggestion a go and see how it works. The reason its on a key strike is to provide a realtime update of the preview color div. Thanks for the reply!

brandonH
11-02-2006, 10:55 PM
well, you can open up a window and write to it. and that window can perform calls back to the main window scripts and vise versa.




<html>
<head></head>
<body>
<input type=button value="color remote" onclick=OpWin()>
<div id="colorD" style="width:150px;height:150px;background-color:#ffffff;"></div>
<script type=text/javascript>

function EnterPressed(e) {
var characterCode
e = event
characterCode = e.keyCode
if (characterCode == 13){ previewColor(document.getElementById('color').value);return true ;}
else{ return false;}
}


function previewColor()
{ var passedColor=mywin.document.getElementById('color').value;
var parsed = true;
var validchars = "abcdefghijklmnopqrstuvwxyz0123456789#,";
var numExists = false;

for (var i=0; i < passedColor.length; i++) {
var letter = passedColor.charAt(i).toLowerCase();
if (validchars.indexOf(letter) > 25) {
numExists = true;
}
if (letter == "#" && i > 0) {
alert("You may only enter the # sign at the beginning of a hexidecimal number.");
parsed = false;
break;
}
if (validchars.indexOf(letter) != -1) {
continue;
} else {
alert("Invalid character: " + letter);
parsed = false;
break;
}
}
if (numExists && passedColor.indexOf("#") < 0) {
alert("You must enter the # sign at the beginning of a hexidecimal number.");
parsed = false;
}
if (passedColor.indexOf("#") == 0 && passedColor.length > 7) {
alert("Hexidecimal numbers must be 6 characters in length.");
parsed = false;
}
if (passedColor.length > 13) {
alert("The color may not be longer than 13 characters.");
parsed = false;
}
if (parsed) {
document.getElementById("colorD").style.backgroundColor = passedColor;
mywin.document.getElementById("color").value = passedColor;
}
}
</script>

<script type=text/javascript>
var mywin;
function OpWin(){
mywin=window.open('','thiswin',"right=100,top=500,width=300,height=200,toolbars=false");
var inc="<html style=\"border;0px;background-color:cdcdcd;margin:0px;\">\n<head>\n<title>color remote</title>\n</head>\n<body style=\"border0px;background-color:cdcdcd;margin:10px;\">";
inc+="\n<input type=text id=color name=color >\n<input type=button value=preview onclick=\"opener.previewColor(document.getElementById('color').value);\">";
inc+="\n</body>\n</html>";
mywin.document.write(inc);



}


</script>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum