Email conversation
| From | Valerie Rice |
|---|
| To | Me |
|---|
| Subject | JavaScript & Cookies Problems Please help. |
|---|
| Date | 4 December 2004 16:22 |
|---|
Hello
I have been going mad for days now. I am doing a script that allows users
to change the font size and then store this info into a cookie for future
use and to pass this info to the other pages (I haven't even attempted the
later yet!). I can't seem to get it to work, I am only just learning JS &
cookies. I would be soooo greatfull if you could assist.....I came across
you site the other day and have found it very helpful (you are now in my
favourites!)
Eventually this page will have two cookies, one to store how many sales and
another to change the font.....hope you can make some sense of it....Thanks
for looking/helping. Val
This is what I have;
[source code for web page that is not correctly saving cookies - don't
worry, I'll analyse it in a moment ;) ]
| From | Me |
|---|
| To | Valerie Rice |
|---|
| Subject | Re: JavaScript & Cookies Problems Please help. |
|---|
| Date | 4 December 2004 17:06 |
|---|
Val,
A few mistakes:
> function SetCookie(name, value) {
> document.cookie = name + "=" + escape(value);
> }
note that function names are case sensitive. even though you have another
function further down that does the same thing, _this_ is the one you will
be using, as it is called SetCookie, not setCookie
> <!-- JavaScript to actually dynamically change background -->
This is an invalid nested HTML comment. Comments in JavaScript should be
written as:
//JavaScript to actually dynamically change background
> if (document.cookie != "") {
> changeFont = document.cookie.split("=")[1]
> }
Ok, this will only work if there is one cookie. Once you get two or more,
they are all mushed together in one long string, with cookie name and value
pairs separated by "; ". You need to split the string by "; ", then look
through each pair and split each in turn, and if the name matches what you
called your cookie, then the associated value is what you need.
My script ( http://www.howtocreate.co.uk/jslibs/cookie.js ) will handle
this for you, so I suggest you use that instead.
> function setCookie(newFont) {
This function will not be used. If you want to use this function, you must
use an upper case S.
> document.cookie = "newFont=";expires=" + expireDate.toGMTString()
This is syntactically invalid and will produce errors, preventing the
entire script from running. You have ended a string then continued as if
you had not:
"this is a string"THIS IS NOT!
Try this instead:
document.cookie = "newFont="+escape(newFont)+";expires=" + expireDate.toGMTString()
> alert("Sorry, you need a newer browser, like IE 6 or NS 6+ to use this");
If you feel you must write something like this, please at least make it
accurate. Opera, Safari, Konqueror, ICEbrowser etc are all able to do this.
Although Konqueror and ICEbrowser are not commonly used, Opera and Safari
are commonly used. As an Opera user myself I always hate it when people
overlook my chosen browser.
Note also that this script would actually work in IE 5+
> <body ... onClick="SetCookie('newFont')">
Setting cookies when someone clicks on the page is a very bad idea. For a
start, people who do not use a mouse cannot click it, and yet the script is
supposed to improve accessibility by using a bigger font.
Secondly, and much more annoyingly, it will set a cookie _every_ time they
click, no matter where they click. Every time they click on the page, every
time they use auto-panning, every time they click a link, every time they
right click to open their context menu. If they have set their browser to
prompt them to accept cookies, they will be unable to use the page at all,
because each time they try to click a link, the cookie prompt appears
instead.
A few things for you to think about, but I hope this helps you solve your
problems.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Valerie Rice |
|---|
| To | Me |
|---|
| Subject | Re: JavaScript & Cookies Problems Please help. |
|---|
| Date | 5 December 2004 18:16 |
|---|
Mark
Thanks for you prompt reply and helpful explanation, I really appreciate
you spending the time to assist people like me who do not know enough about
this subject.
I will take on-board your comments and try to solve this problem
Thanks again
Val
| From | Valerie Rice |
|---|
| To | Me |
|---|
| Subject | Re: JavaScript & Cookies Problems Please help. |
|---|
| Date | 17 December 2004 21:37 |
|---|
Hi Mark
I have spent some time trying to get this cookie thing to work but to no
avail.
This is what I have now - Can you help?
Thanks
[source code for the page with a few little changes, and a copy of my
retrieveCookie function ]
| From | Me |
|---|
| To | Valerie Rice |
|---|
| Subject | Re: JavaScript & Cookies Problems Please help. |
|---|
| Date | 20 December 2004 16:08 |
|---|
Val,
> function setCookie(newFont) {
you still have two functions with this name. this one is not being used
(the one with the lower case s)
> function SetCookie(name, value) {
this is the one you are using - but it doesn't actually change the font
size
> var = SetCookie(cookieFont, newFont ; sales, pan1=23,pan3=153,pan4=21,pan9=5) {
urgh. this function is calling itself. _if_ the browser could actually run
this, it would get lost in an endless loop.
Importantly, the browser will not be able to run it, because that is not a
valid text string.
Text strings must be in quotes. The function accepts two parameters only,
but it looks like you are attempting to pass it 4 parameters (and you have
omitted the quotes).
Just remove this line. it is not doing anything useful.
> now = new Date
this is a constructor and should have () after it
> expireDate.setMonth(expireDate.getMonth()+6);
no, not a good idea. 12 + 6 = 18, and there are not 18 months in a year.
some browsers will allow you to do this, others will not. just add on the
correct number of milliseconds.
> onload="SetCookie('sales','pan1=23,pan3=153,pan4=21,pan9=5')";"('cookieFont','newFont')"
I think you have misunderstood how HTML attributes work. This is what you
should have used:
onload="SetCookie('sales','pan1=23,pan3=153,pan4=21,pan9=5');SetCookie('cookieFont','newFont');"
Of course, this will just save the word "newFont" as the value for the font,
so that is probably not what you want
Try this (you must download a copy of my cookie script to use as a header
file:
http://www.howtocreate.co.uk/jslibs/cookie.js ):
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript">
<!-- // hiding from older browsers
function changeFont(newFont) {
if( document.body ) {
document.body.style.fontSize = newFont;
setCookie( 'cookieFont', newFont, 15552000 );
} else {
alert("Sorry, you need a newer browser, like IE 5, NS 6+, Opera or Safari to use this");
}
}
lastVisit = retrieveCookie('pageVisit');
lastVisit = new Date(lastVisit?lastVisit:0);
setCookie( 'pageVisit', ( new Date() ).getTime(), 15552000 );
function doOnLoadStuff() {
SetCookie('sales','pan1=23,pan3=153,pan4=21,pan9=5');
var prefFont = retrieveCookie('cookieFont')
if( prefFont ) {
changeFont('cookieFont','newFont');
}
}
// -->
</script>
</head>
<body onload="doOnLoadStuff();">