|
Subject:
|
Colour Picker Ch11 P 388-391
|
|
Posted By:
|
craigrobertson
|
Post Date:
|
11/19/2004 12:49:36 PM
|
I'm having trouble actually seeing the colour picker. Selecting the colour works and it effects the rest of the site as it should. But i can't see the colour picker! This hasn't really stopped me from progressing but it would be nice to know why. I've tried pasting the code from the .zip file but it still doesn't show up. Is this a browser issue? I have IE6, XP Pro with ISS and MX2004. This is my code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
If Request.Form("btnSetColor") <> "" Then
Response.Cookies("BackGroundColor") = Request.Form("txtColor")
Response.Cookies("BackGroundColor").Expires = Date() + 30
End If
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/mainTemplate.dwt.asp" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>GlobalSoccerEvents.com - Your Source for Soccer Events Around the Globe</title>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<%
Dim sBackgroundColor
If Len(Request.Cookies("BackgroundColor")) > 0 Then
sBackgroundColor = Request.Cookies("BackgroundColor")
Else
sBackgroundColor = "#FFFFFF"
End If
Dim iTheme
If Len(Request.Cookies("SiteTheme")) > 0 Then
iTheme = Request.Cookies("SiteTheme")
Else
iTheme = 1 ' Our default theme
End If
%>
<link href="Styles/mainStyles.css" rel="stylesheet" type="text/css">
<link href="Styles/MainStyles<%=iTheme%>.css" rel="stylesheet"
type="text/css"
</head>
<body style="background-color: <%= sBackgroundColor %>"><!-- #BeginLibraryItem "/Library/mainMenu.lbi" --><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="Images/logo.gif"></td>
<td><table border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td><a href="home.asp" id="home">Home</a></td>
<td> </td>
<td><a href="events.asp" id="events">Events</a></td>
<td> </td>
<td><a href="mysite.asp" id="mysite">My Site</a></td>
<td> </td>
<td><a href="login.asp" id="login">Login</a></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<script language="javascript" type="text/javascript">
var sPageName = '<%=Request.ServerVariables("SCRIPT_NAME")%>';
sPageName = sPageName.substr(sPageName.lastIndexOf('/') + 1).toLowerCase();
sPageName = sPageName.substr(0, sPageName.lastIndexOf('.'));
if (document.getElementById(sPageName))
{
document.getElementById(sPageName).style.fontWeight = 'Bold';
document.getElementById(sPageName).style.fontSize = '14pt';
}
</script><!-- #EndLibraryItem --><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><!-- InstanceBeginEditable name="Title" -->
<h2>Change Background </h2>
<!-- InstanceEndEditable --></td>
</tr>
<tr>
<td><!-- InstanceBeginEditable name="Content" -->
<script language="JavaScript" type="text/javascript">
arrColors = new Array();
arrColors = ([
'FF9999', 'FFFFEF', '66FF99', '00FF66', '99FFFF', '3399FF',
'FF66CC', 'FF00FF', 'FF0000', 'FFFF00', '33FF33', '66FF33',
'00FFFF', '336699', '660099', 'FF33FF', '730D0D', 'EFBD00',
'33FF00', '006666', '0000AA', '6666CC', '990033', 'FF0099',
'660000', 'FF9933', '007700', '00AA00', '0000FF', '0000AA',
'990099', '33CCCC', '220000', '660033', '002200', '001100',
'000077', '000055', '000033', '000099', '001100', '999900',
'999966', '777777', '339999', 'CCCCCC', '000000', 'FFFFFF',])
document.writeln('<table cellpadding="0" cellspacing="2"><tr>');
var q = 0;
for (p=0 ; p < 6 ; p++)
{
for (i=0 ; i < 8 ; i++)
{
document.writeln('<td>');
document.writeln('<a href="JavaScript:setColor(\'#');
document.writeln(arrColors[q] + '\');">');
document.writeln('<span style="background-color:' + arrColors[q] + '">');
document.writeln('<img src="images/spacer.gif" width="15" height="15"');
document.writeln('alt="Click to change the background color to ');
document.writeln(arrColors[q] + '" border="0"></span></a></td>');
q++;
}
document.writeln('</tr><tr>');
}
document.writeln('</tr></table>');
function setColor(sColor)
{
document.frmSetColor.txtColor.value = sColor;
}
</script>
<form action="changeSiteBackground.asp" method="post" name="frmSetColor">
<input name="txtColor" type="text" value="">
<input name="btnSetColor" type="submit" value="Set Color">
</form>
<!-- InstanceEndEditable --></td>
</tr>
<tr>
<td align="center"><br>
<br>
<br>
<br>
<br>
<!-- InstanceBeginEditable name="Footer" --><!-- InstanceEndEditable --></td>
</tr>
</table>
</body>
<!-- InstanceEnd --></html>
Cheers
|
|
Reply By:
|
Imar
|
Reply Date:
|
11/19/2004 2:06:22 PM
|
Hi Craig,
This is a known issue and has been corrected in the MX 2004 version of the book (more or less).
The code uses code that is not strictly conform the HTML rules. With that code, and a Doc Type defined, the color picker is invisible.
Remove the following line from your code and it should work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Cheers,
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
|
|
Reply By:
|
craigrobertson
|
Reply Date:
|
11/19/2004 2:35:56 PM
|
once again, thank you very much Imar
|
|
