WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

HTML Tips and Tricks: The Webmaster's Bakery Part 2

HTML Tips and Tricks: The Webmaster's Bakery
Part 2

by Scott Clark

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 ]

HTML5 Development Center

Recent Articles