<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flipflops.org &#187; jQuery</title>
	<atom:link href="http://www.flipflops.org/category/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.flipflops.org</link>
	<description>Flipflops.org is about web development and fairly conceptual art</description>
	<lastBuildDate>Tue, 31 Jan 2012 23:26:16 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>My first bit of Mootools and centering a Google Map in a hidden div</title>
		<link>http://www.flipflops.org/2009/10/26/my-first-bit-of-mootools-and-centering-a-google-map-in-a-hidden-div/</link>
		<comments>http://www.flipflops.org/2009/10/26/my-first-bit-of-mootools-and-centering-a-google-map-in-a-hidden-div/#comments</comments>
		<pubDate>Mon, 26 Oct 2009 22:56:10 +0000</pubDate>
		<dc:creator>Flipflops</dc:creator>
				<category><![CDATA[Google]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Mootools]]></category>

		<guid isPermaLink="false">http://www.flipflops.org/2009/10/26/my-first-bit-of-mootools-and-centering-a-google-map-in-a-hidden-div/</guid>
		<description><![CDATA[Started a new job last week for a really cool agency in a place I really want to work* &#8211; but they are Mootools users not jQuery folk, so I am been thrown headlong into (among other things) the world of Mootools. I&#8217;m used to just sitting down and being able to make things work [...]]]></description>
			<content:encoded><![CDATA[<p>Started a new job last week for a really cool agency in a place I really want to work* &#8211; but they are Mootools users not jQuery folk, so I am been thrown headlong into (among other things) the world of Mootools. I&#8217;m used to just sitting down and being able to make things work quickly and painlessly with jQuery and it is funny being back to basics again. Today I wrote my first useful bit of Mootools code, which in the grand scheme of things is nothing &#8211; just a nice fading toggle to show and hide a Google Map &#8211; but it still felt good.</p>
<p>Along the way I had to ran into a problem with my map &#8211; when I showed it the centre-ing was gone &#8211; I tried all sorts of things&#8230; map.checkResize() didn&#8217;t work and map.setCenter() didn&#8217;t work.</p>
<p>Eventually I deduced that first you actually need to call both functions &#8211; reset, then centre e.g.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">&nbsp;
    map.<span style="color: #660066;">checkResize</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    map.<span style="color: #660066;">setCenter</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> GLatLng<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">51.90568</span><span style="color: #339933;">,</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1.33214</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Along my way I have found a <a href="http://jqueryvsmootools.com/">great article comparing jQuery and Mootools</a> &#8211; which I would recommend to anyone going either way.</p>
<p>*But it is a kind of a personal philosophy not to ever say on my blog where I do work, just because. I&#8217;ve taken over a big project running on a Cloud server written by a load of other people, the sort of thing that is hard but very rewarding.<br />
** I have no idea where those coordinates are. Maybe Up North somewhere?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.flipflops.org/2009/10/26/my-first-bit-of-mootools-and-centering-a-google-map-in-a-hidden-div/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Minimum age with the jQuery UI Datepicker</title>
		<link>http://www.flipflops.org/2009/01/28/minimum-age-with-the-jquery-ui-datepicker/</link>
		<comments>http://www.flipflops.org/2009/01/28/minimum-age-with-the-jquery-ui-datepicker/#comments</comments>
		<pubDate>Wed, 28 Jan 2009 21:04:49 +0000</pubDate>
		<dc:creator>Flipflops</dc:creator>
				<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.flipflops.org/2009/01/29/minimum-age-with-the-jquery-ui-datepicker/</guid>
		<description><![CDATA[Minimum age with the jQuery UI Datepicker Just been working on a registration form where the minimum age of registering users has to be 18. Using the fabulous jQuery UI Datepicker (see documentation it&#8217;s really easy to set up a Date of Birth field so that the a user has to be a least 18 [...]]]></description>
			<content:encoded><![CDATA[<p>Minimum age with the jQuery UI Datepicker</p>
<p>Just been working on a registration form where the minimum age of registering users has to be 18. Using the fabulous <a href="http://docs.jquery.com/UI/Datepicker">jQuery UI Datepicker (see documentation</a> it&#8217;s really easy to set up a Date of Birth field so that the a user has to be a least 18 years old.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">&nbsp;
$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#dob&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">datepicker</span><span style="color: #009900;">&#40;</span>
    <span style="color: #009900;">&#123;</span>
      minDate<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1900</span><span style="color: #339933;">,</span><span style="color: #CC0000;">1</span><span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> maxDate<span style="color: #339933;">:</span> <span style="color: #3366CC;">'-18Y'</span><span style="color: #339933;">,</span>
      dateFormat<span style="color: #339933;">:</span> <span style="color: #3366CC;">'dd/mm/yy'</span><span style="color: #339933;">,</span>
      defaultDate<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1970</span><span style="color: #339933;">,</span><span style="color: #CC0000;">1</span><span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
      changeMonth<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
      changeYear<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
      yearRange<span style="color: #339933;">:</span> <span style="color: #3366CC;">'-110:-18'</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>					
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.flipflops.org/2009/01/28/minimum-age-with-the-jquery-ui-datepicker/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery plugin to print HTML forms</title>
		<link>http://www.flipflops.org/2008/06/03/jquery-plugin-to-print-html-forms/</link>
		<comments>http://www.flipflops.org/2008/06/03/jquery-plugin-to-print-html-forms/#comments</comments>
		<pubDate>Tue, 03 Jun 2008 20:09:19 +0000</pubDate>
		<dc:creator>Flipflops</dc:creator>
				<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.flipflops.org/2008/06/03/jquery-plugin-to-print-html-forms/</guid>
		<description><![CDATA[Recently for a project, a client wanted to be able to print pages from a web application that were just forms. This was never intended when the application was originally built, so there were no separate view screens of data. Naively I thought this would be easy &#8211; knock up a print style sheet and [...]]]></description>
			<content:encoded><![CDATA[<p>Recently for a project, a client wanted to be able to print pages from a web application that were just forms. This was never intended when the application was originally built, so there were no separate view screens of data. Naively I thought this would be easy &#8211; knock up a print style sheet and bob&#8217;s your uncle&#8230; if only.</p>
<p>There are a couple of problems that just aren&#8217;t really fixable using a pure CSS solution, firstly &lt;select&gt; menus look pretty horrible no matter what you to them and &lt;textarea&gt; fields look fairly bad, but even worse than their aesthetic merits (or lack of rather) is the fact that the overflowing content i.e. the content that you need to scroll to see, will not be printed.</p>
<p>In the end for the application I ended up adding views, but it got me thinking and so I&#8217;ve written a quick jQuery plugin to print forms. It works by looking for any &lt;select&gt; menus or  &lt;textarea&gt; fields and replacing them with &lt;div&gt; tags styled to look like form elements. When you click on one of the &lt;div&gt;s to edit it, it reverts to the original form element and when it looses the focus (using the jQuery blur() method) the field is swapped back and replaced by the &lt;div&gt;.</p>
<p>When you come to print the form because all of the &lt;select&gt; menus and  &lt;textarea&gt; fields have been replaced by &lt;div&gt;s you can style them as you want using a print style sheet and get a nice looking form with no missing content.</p>
<p><strong>Have a look at the <a href="http://www.flipflops.org/example/print-form.html">working example</a> and view source to see how to use it.</strong></p>
<p><strong><a href='http://www.flipflops.org/wp-content/uploads/2008/06/print-form.zip' title='printform plugin'>download printform plugin example</a></strong></p>
<p>You will want to edit / write CSS for both screen and print appropriate to your situation.<br />
Tested on IE6, IE7, Firefox 2.0.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">&nbsp;
<span style="color: #006600; font-style: italic;">/*
 * printform 1.0
 * By John Elliott (http://www.flipflops.org)
 * Copyright (c) 2008 John Elliott
 * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
*/</span>
&nbsp;
<span style="color: #006600; font-style: italic;">/**
 * convert textareas and select tags to divs so that you HTML forms can be printed.
 *
 *
 *
 * @name printform
 * @type jQuery
 * @author John Elliott (http://www.flipflops.org)
 * @desc 
 * 
 * @example $('#tester').printform();
 * @desc call the plugin on #tester - any select or textareas will be replaced
 *
 * @param settings - not used, but included for future proofing! (I'm sure there will be options sometime...)
 *
*/</span>
&nbsp;
jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">printform</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>settings<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">new</span> jQuery.<span style="color: #660066;">printform</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> settings<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
&nbsp;
&nbsp;
jQuery.<span style="color: #660066;">printform</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>obj<span style="color: #339933;">,</span> settings<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
  	<span style="color: #006600; font-style: italic;">/*
  	* within a parent object - replace the textareas and select menus
  	*/</span>
&nbsp;
&nbsp;
 	init<span style="color: #009900;">&#40;</span>obj<span style="color: #339933;">,</span> <span style="color: #3366CC;">'textarea'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	init<span style="color: #009900;">&#40;</span>obj<span style="color: #339933;">,</span> <span style="color: #3366CC;">'select'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
&nbsp;
&nbsp;
	<span style="color: #003366; font-weight: bold;">function</span> init<span style="color: #009900;">&#40;</span>obj<span style="color: #339933;">,</span> fieldType<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">/*
	* loop through each instance of an element within the parent 
	*/</span>
&nbsp;
		obj <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span>obj<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'id'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span> <span style="color: #339933;">+</span> obj <span style="color: #339933;">+</span> <span style="color: #3366CC;">' '</span> <span style="color: #339933;">+</span> fieldType<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
			<span style="color: #003366; font-weight: bold;">var</span> id <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'id'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			field_replacer<span style="color: #009900;">&#40;</span>id<span style="color: #339933;">,</span> fieldType<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>		
&nbsp;
&nbsp;
	<span style="color: #003366; font-weight: bold;">function</span> field_replacer<span style="color: #009900;">&#40;</span>id<span style="color: #339933;">,</span> fieldType<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">/*
	* function to replace the elements with divs
	*/</span>
&nbsp;
			str <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span> <span style="color: #339933;">+</span> id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			str <span style="color: #339933;">=</span> str.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\n/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'&lt;br /&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#replace-'</span> <span style="color: #339933;">+</span> id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">0</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #006600; font-style: italic;">// if a replacement div already exists for this element, then just show it.</span>
				<span style="color: #006600; font-style: italic;">// update the content of the replacer with the edited content</span>
				jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#replace-'</span> <span style="color: #339933;">+</span> id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>			
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #006600; font-style: italic;">// otherwise create a new replacement div for the element</span>
				jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span> <span style="color: #339933;">+</span> id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">after</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;div class=&quot;'</span> <span style="color: #339933;">+</span> fieldType <span style="color: #339933;">+</span> <span style="color: #3366CC;">'-replace&quot; id=&quot;replace-'</span> <span style="color: #339933;">+</span> id <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot;&gt;'</span> <span style="color: #339933;">+</span> str <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>			
			<span style="color: #009900;">&#125;</span>
&nbsp;
			jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span> <span style="color: #339933;">+</span> id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// hide the element that has just been replaced</span>
			field_watcher<span style="color: #009900;">&#40;</span>id<span style="color: #339933;">,</span> fieldType<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// add event listeners</span>
	<span style="color: #009900;">&#125;</span>											
&nbsp;
	<span style="color: #003366; font-weight: bold;">function</span> field_watcher<span style="color: #009900;">&#40;</span>id<span style="color: #339933;">,</span>  fieldType<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">/*
	* add listeners to the elements
	* onclick - show the original element and hide the replacer
	* onblur - call the field_replacer to update the page
	*/</span>
&nbsp;
		jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#replace-'</span> <span style="color: #339933;">+</span> id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span> <span style="color: #339933;">+</span> id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#replace-'</span> <span style="color: #339933;">+</span> id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span> <span style="color: #339933;">+</span> id<span style="color: #009900;">&#41;</span>.<span style="color: #000066;">blur</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
			field_replacer<span style="color: #009900;">&#40;</span>id<span style="color: #339933;">,</span>  fieldType<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>								
&nbsp;
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Thanks to to Mike Alsup for his great (if rather daunting) guide to writing plugins on <a href="http://www.learningjquery.com/2007/10/a-plugin-development-pattern/trackback">Learning jQuery</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.flipflops.org/2008/06/03/jquery-plugin-to-print-html-forms/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery &#8211; watch a checkbox field</title>
		<link>http://www.flipflops.org/2008/02/28/jquery-watch-a-checkbox-field/</link>
		<comments>http://www.flipflops.org/2008/02/28/jquery-watch-a-checkbox-field/#comments</comments>
		<pubDate>Thu, 28 Feb 2008 11:18:50 +0000</pubDate>
		<dc:creator>Flipflops</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Web Things]]></category>

		<guid isPermaLink="false">http://www.flipflops.org/2008/02/28/jquery-watch-a-checkbox-field/</guid>
		<description><![CDATA[This is a simple function I wrote that will monitor a &#60;checkbox&#62; field on a form. If the &#60;checkbox&#62; is ticked then it will show a specified &#60;div> and if the &#60;checkbox&#62; is un-ticked then it will hide the specified &#60;div&#62;. View the working example Initially I thought that I might be able to use [...]]]></description>
			<content:encoded><![CDATA[<p>This is a simple function I wrote that will monitor a &lt;checkbox&gt; field on a form. If the &lt;checkbox&gt; is ticked then it will show a specified &lt;div> and if the &lt;checkbox&gt; is un-ticked then it will hide the specified &lt;div&gt;.</p>
<p><a href="/example/test_checkbox.php">View the working example</a></p>
<p>Initially I thought that I might be able to use the .toggle() function &#8211; but I when users returned to a form I needed the &lt;div&gt;s to show or hidden according to stored values.</p>
<p>I also have a very similar function that does the same thing for &lt;select&gt; fields. Logically you might then combine the functions into a single function or a plugin that could monitor checkboxes, radio buttons, select menus and show or hide &lt;div&gt;s accordingly &#8211; but at what point does the complexity of the just using the function outweigh the simplicity of using it? This is something I haven&#8217;t decide on yet.</p>
<p>At the moment I can just call it like so:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">&nbsp;
testCheckbox<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'id_of_checkbox'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'id_of_div'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>If I were to combine these functions I would likely loose this speed / clarity &#8211; for instance a &lt;select&gt; might want to show or hide different &lt;div&gt;s based on different selected values and then I would need to start passing arrays to the function &#8211; loosing the initial simplicity. The only answer is to go ahead, write one and see what happens.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">&nbsp;
<span style="color: #339933;">&lt;</span>script<span style="color: #339933;">&gt;</span>
   $<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
&nbsp;
&nbsp;
   testCheckbox<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'showHide'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'targetDiv'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
&nbsp;
&nbsp;
&nbsp;
   <span style="color: #003366; font-weight: bold;">function</span> testCheckbox<span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> target<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">+</span>key<span style="color: #009900;">&#41;</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:checked&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
     $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">+</span>target<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
     $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">+</span>target<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">+</span>key<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span> 
&nbsp;
&nbsp;
&nbsp;
      <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
       <span style="color: #009900;">&#123;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">+</span>key<span style="color: #009900;">&#41;</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:checked&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
         <span style="color: #009900;">&#123;</span>
          $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">+</span>target<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
         <span style="color: #009900;">&#125;</span>
        <span style="color: #000066; font-weight: bold;">else</span>
         <span style="color: #009900;">&#123;</span>
          $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#'</span><span style="color: #339933;">+</span>target<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
         <span style="color: #009900;">&#125;</span>
       <span style="color: #009900;">&#125;</span>
     <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
&nbsp;
   <span style="color: #009900;">&#125;</span>
&nbsp;
   <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p><strong>Note</strong> When I wrote this function it seemed logical to use the .change() function &#8211; but I have had to chnage this to .click() because .change() seems to fail silently and unpredictably in IE7.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.flipflops.org/2008/02/28/jquery-watch-a-checkbox-field/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>A simple jQuery menu with persistence using cookies</title>
		<link>http://www.flipflops.org/2008/01/19/a-simple-jquery-menu-with-persistence-using-cookies/</link>
		<comments>http://www.flipflops.org/2008/01/19/a-simple-jquery-menu-with-persistence-using-cookies/#comments</comments>
		<pubDate>Fri, 18 Jan 2008 23:28:33 +0000</pubDate>
		<dc:creator>Flipflops</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://www.flipflops.org/2008/01/19/a-simple-jquery-menu-with-persistence-using-cookies/</guid>
		<description><![CDATA[Recently I&#8217;ve been making a concerted effort to learn jQuery the JavaScript framework as opposed to just using all the wonderful plugins off the shelf. Recently I needed a bit of code to show and hide a navigation menu, but with persistence using cookies so as you move from page to page it can remember [...]]]></description>
			<content:encoded><![CDATA[<p>Recently I&#8217;ve been making a concerted effort to learn <a href="http://www.jQuery.com">jQuery</a> the JavaScript framework as opposed to just using all the wonderful plugins off the shelf.</p>
<p>Recently I needed a bit of code to show and hide a navigation menu, but with persistence using cookies so as you move from page to page it can remember which sections to show. I was pretty confident, using bog standard JavaScript I knew I could knock it out really quickly, but The whole point of learning something new is to learn something new so I decided to do it using jQuery. I was pretty confident, last week I wrote some quite complex form validation code in a fraction of the time I could&#8217;ve done it in without using jQuery (it&#8217;s that pretty but it works well and it was my first attempt to do anything at all complex).</p>
<p>Getting the menu to work has been quite a struggle and I had to spend a surprising amount of time getting it to work, and judging by the posts on various blogs and groups a lot of other people have been stumped by this one too. </p>
<p>Anyway here is my solution, if anybody can help me simplify it further, their help would be greatly appreciated. Obviously you need to <a href="http://docs.jquery.com/Downloading_jQuery">download jQuery</a>, you will need to include the code and you will need an unordered list to act as the menu, in this example id=&#8221;#demo-menu&#8221;.</p>
<p>A couple of posts have been really invaluable figuring out how to do this, so credit where it&#8217;s due, thanks: </p>
<ul>
<li><a href="http://kelvinluck.com/article/switch-stylesheets-with-jquery">http://kelvinluck.com/article/switch-stylesheets-with-jquery</a></li>
<li><a href="http://pixelcarnage.com/articles/development/jquery-collapsible-menu/">http://pixelcarnage.com/articles/development/jquery-collapsible-menu/</a></li>
</ul>
<p><strong><a href="http://www.flipflops.org/example/jquery_menu.html">View the working example</a></strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#demo-menu &gt; li &gt; a&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">not</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:first&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;+ ul&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slideUp</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#demo-menu &gt; li &gt; a &gt; span&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'+'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// add an indicator to the menu items to show there is a child menu</span>
&nbsp;
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#demo-menu &gt; li&gt; a&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			toggleMenu<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			checkCookie<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
&nbsp;
&nbsp;
		<span style="color: #003366; font-weight: bold;">function</span> checkCookie<span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span>
			<span style="color: #009900;">&#123;</span>
				<span style="color: #006600; font-style: italic;">/*
&nbsp;
						check if there is a cookie set for a sub menu 
						if there is then show the menu
&nbsp;
				*/</span>
&nbsp;
				<span style="color: #003366; font-weight: bold;">var</span> cookieName <span style="color: #339933;">=</span> id.<span style="color: #660066;">id</span><span style="color: #339933;">;</span>
&nbsp;
				<span style="color: #003366; font-weight: bold;">var</span> c <span style="color: #339933;">=</span> readCookie<span style="color: #009900;">&#40;</span>cookieName<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
				<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>c <span style="color: #339933;">===</span> <span style="color: #3366CC;">'show'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
					$<span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
						$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;span&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'-'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;+ ul&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slideDown</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fast'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
					<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
				<span style="color: #009900;">&#125;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">function</span> toggleMenu<span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span>
			<span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
					<span style="color: #006600; font-style: italic;">/*
							toggle the +/- indicators
					*/</span>
					togglePlusMinus<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
&nbsp;
					<span style="color: #006600; font-style: italic;">/*
						toggle the menu open or closed
					*/</span>
					$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;+ ul&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">slideToggle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;fast&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">function</span> togglePlusMinus<span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span>
			<span style="color: #009900;">&#123;</span>
&nbsp;
				$<span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
					<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">find</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;+ ul&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">':visible'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
						<span style="color: #009900;">&#123;</span>
							$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;span&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'+'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
							eraseCookie<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">id</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #009900;">&#125;</span>
					<span style="color: #000066; font-weight: bold;">else</span>
						<span style="color: #009900;">&#123;</span>
							$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">children</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;span&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'-'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
							createCookie<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">id</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'show'</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">365</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
						<span style="color: #009900;">&#125;</span>
&nbsp;
				<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// cookie functions http://www.quirksmode.org/js/cookies.html</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> createCookie<span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #339933;">,</span>value<span style="color: #339933;">,</span>days<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>days<span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> date <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			date.<span style="color: #660066;">setTime</span><span style="color: #009900;">&#40;</span>date.<span style="color: #660066;">getTime</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span>days<span style="color: #339933;">*</span><span style="color: #CC0000;">24</span><span style="color: #339933;">*</span><span style="color: #CC0000;">60</span><span style="color: #339933;">*</span><span style="color: #CC0000;">60</span><span style="color: #339933;">*</span><span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #003366; font-weight: bold;">var</span> expires <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;; expires=&quot;</span><span style="color: #339933;">+</span>date.<span style="color: #660066;">toGMTString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #003366; font-weight: bold;">var</span> expires <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
		document.<span style="color: #660066;">cookie</span> <span style="color: #339933;">=</span> <span style="color: #000066;">name</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;=&quot;</span><span style="color: #339933;">+</span>value<span style="color: #339933;">+</span>expires<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;; path=/&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">function</span> readCookie<span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> nameEQ <span style="color: #339933;">=</span> <span style="color: #000066;">name</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;=&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> ca <span style="color: #339933;">=</span> document.<span style="color: #660066;">cookie</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">';'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>i <span style="color: #339933;">&lt;</span> ca.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span>
		<span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> c <span style="color: #339933;">=</span> ca<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">while</span> <span style="color: #009900;">&#40;</span>c.<span style="color: #660066;">charAt</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">==</span><span style="color: #3366CC;">' '</span><span style="color: #009900;">&#41;</span> c <span style="color: #339933;">=</span> c.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>c.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>c.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>nameEQ<span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> c.<span style="color: #660066;">substring</span><span style="color: #009900;">&#40;</span>nameEQ.<span style="color: #660066;">length</span><span style="color: #339933;">,</span>c.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">function</span> eraseCookie<span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		createCookie<span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">,-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>


<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</pre></td><td class="code"><pre class="html" style="font-family:monospace;">&lt;ul id=&quot;demo-menu&quot;&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;item one&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;item two&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;three&quot; &gt;item three&lt;span&gt;&lt;/span&gt;&lt;/a&gt; 
		&lt;ul&gt;
			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;item 3.1&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;item 3.2&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;#&quot;&gt;item 3.3&lt;/a&gt;
&nbsp;
			&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;item four&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot; id=&quot;five&quot;&gt;item five &lt;span&gt;&lt;/span&gt;&lt;/a&gt; 
		&lt;ul&gt;
				&lt;li&gt;&lt;a href=&quot;#&quot;&gt;item 5.1&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href=&quot;#&quot;&gt;item 5.2&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href=&quot;#&quot;&gt;item 5.3&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;item six&lt;/a&gt;&lt;/li&gt;
&nbsp;
&lt;/ul&gt;</pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.flipflops.org/2008/01/19/a-simple-jquery-menu-with-persistence-using-cookies/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

