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 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems with a Color preview page

    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

    Code:
    <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:

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

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New Coder
    Join Date
    Nov 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    <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>

  • #4
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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



    Code:
    <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>
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #5
    New Coder
    Join Date
    Nov 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #6
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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.

    Code:
    <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>
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.


  •  

    Posting Permissions

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