HTML Tips and Tricks: The Webmaster's Bakery
Part 2
Now starts the actual page. We test for the frames cookie that would be there if the viewer had already been to the site. If we find it, and it's not set to frames, we write a <BODY> tag to the page. If we find it and it is set to frames, then we write out a <FRAMESET> tag. Document.write() is a simple JavaScript function we'll use to write to the current document.
<SCRIPT LANGUAGE= "JavaScript">
<!---
if(GetCookie("frames") != "on")
document.write("<BODY>");
else document.write("<FRAMESET COLS=\"130,*\">
<frame src=\"left.htm\">
<frame src=\"right.htm\">
</FRAMESET>");
// the document.write statement must actually be on
// one line, or MSIE gives an error...go figure?
function setcookie(){
document.cookie = "frames=on; PATH=/";
}
//-->
</SCRIPT>
This little form allows us to use a checkbox to indicate if we want frames or not. We could have also used a graphic or button, and we could have had the button refresh the page as well, but we'll save that for a later column.
<FORM>
<INPUT TYPE = "checkbox" onClick = setcookie()>
<B>I WANT FRAMES FROM NOW ON!</B>
</FORM>
<FONT SIZE=+2>The software industry</FONT>
is still reeling after today's announcement that
Microsoft and Netscape have merged their browsers
into a single browser called Internet Navigator.
</BODY>
</HTML>
And we need some code for the framed version so the viewer can still
change their mind and go back to the no-frames version. Once again we
first call upon Bill Dortch's cookie functions:
<html>
<head>
<title></title>
<SCRIPT LANGUAGE="JavaScript">
// Public domain cookie code written
// by Bill Dortch, hIdaho Design
// (bdortch@netw.com)
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return
unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) ==arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
// end public cookie functions
//-->
</SCRIPT>
</head>
<SCRIPT LANGUAGE="JavaScript">
<!---
function setcookie(){
document.cookie = "frames =off; PATH = /";
}
//-->
</SCRIPT>
<FORM>
<INPUT TYPE = "checkbox" onClick = setcookie()>
<b>
I WANT NO FRAMES FROM NOW ON!
</b>
</FORM>
</BODY>
</HTML>
This allows the viewer to click the checkbox to return to the non-framed version (by refreshing the page) if they so desire (see screen shot). This is just one of the many excellent functions that cookies can provide, and this example gives you an idea of how to go about using cookies and simple JavaScript. Cookies aren't necessary for every site, but they do provide an versatile, extendible tool for developers. As long as folks are clear about exactly what cookies do, they'll be a lot less likely to resent them. After all, they don't just have to be used for marketing, as the above example proves. Cookies are your friends!
Bring Out Your Best
We'd like to use this column to show developers the greatest HTML tips and tricks. To accomplish this task, we need you, the reader, to send in your slickest Web tricks that use HTML, JavaScript, or other inline coding technologies. If we publish your tip, you'll get a free Web Developer® carry bag loaded with interesting and valuable goodies, as well as fame, glory, and professional adulation. Show the world how clever you are, and we can all improve our techniques and Web sites. Please send your annotated code to me at
sclark@jupitermedia.com.
[ < HTML Tips and Tricks: The Webmaster's Bakery:
Part 1 ] |
|
