Left Brain Right Brain

This is the last post that I’ll be making concerning Megan directly.

It seems that there are a lot of people who don’t appreciate the fact that I write honestly and openly (within reason) about my daughter and some aspects of our life together. That takes on a variety of forms. From some people it manifests itself as invective against me or (incredibly) against Megan herself. This has become increasingly hard to bear.

For others it seems that this takes the form of seeing what I write as a personal attack on them. To a large extent thats their issue. I say nothing on here that I haven’t said in the appropriate places. However, its becoming increasingly apparent that what I talk about on here in respect to Megan could have serious repercussions for certain aspects of her life. I don’t want, either directly nor indirectly, to jeapordise these vital aspects of her development so I choose to remain silent on these issues where they affect Megan directly from this point on.

This blog first started as a personal account of Megan’s development. It was my personal wailing wall and we hoped it would be (in times to come) our scrapbook of the various things in Megan’s development we could look back on and relive.

I have recieved the greatest amount of feedback of any of the subjects I talk about on this site on issues regarding Megan. People want to know how she’s doing and for far flung relatives the blog served its primary function of an online diary. For friends and colleagues made online I know that discussing Megan’s issues provided a mechanism to express thoughts, fears, hopes and opinions regarding their own autistic children. By and large my posts on this subject were positive and people saw them in that light. I received on average 4 to 5 emails a day asking how Megan was doing with (for example) Melatonin or if her huge progress at school last year was being maintained. Sometimes people felt they ‘know’ Megan well enough to see aspects of their own kids mannerisms or behaviours and this encouraged them to talk about things either in the comments or via email that they might not have otherwise asked. A lot of my web developer colleagues have professed that they knew nothing about autism until they read about it on here and feel that through coming to know Megan – albeit in an abstract way – they have a greater understanding of the nature of autism.

To all these people – I’m sorry. It gave me as much pleasure to write about Megan and her progress as it did for you to read about it. Unfortunately, we live in a world where these things can be used as weapons against you and I can’t expose Megan’s developmental progress to such a risk.

Ken over at Technosight will be hosting the inaug, inagru first ever Blogoposium this Wednesday and will be discussing a subject I blogged about fairly recently: the phenomenon of Web 2.0. Ken mailed me saying:

I think you could really add something to the conversation, especially because you are not necessarily drinking the ‘cool-aid’ of Web 2.0 (which is one question I am asking people to address).

Well, I’m as open to flattery and delusions of being a maverick as anyone else so I thought – ‘hey, I’m a designer (big ego) _and_ I’m a blogger (also big ego) therefore I must really _really_ believe what I say is worth listening to – so, what the hell.’

So I mailed Ken back saying I’d love to be involved. The idea reminds me a little bit of the various blog carnivals that my good friend Orac runs/hosts/gets involved in and I think its an attempt to utilise the power of blogs in a coordinated and semantic manner – which is always a good thing.

Ken is looking for lots of involvement on this and as I think its a great idea (and lets face it, the design/development blogosphere talks about these things in a meme-like fashion anyway so it may as well be formalised and organised) I also think it would be a good idea for lots of people to get involved.

Ken has a few incentives to offer to the first 30 people to trackback on the day itself (Wed 28th Sept – thats this Wed fact fans):

The first 30 trackbacks will receive a complimentary copy of the advanced uncorrected proof of Seth Godin’s The Big Moo (the book doesn’t come out till October).

which is jolly decent of him.

Now, a lot of the design/dev bloggers _I_ know are as egotistical and opinionated as I am – so ladies and gentlemen – have at it.

I’m stretching my Javascript legs a bit at the moment and am beginning to really enjoy the freedom that decent DOM support across the major browsers offers.

I recently had occasion to create an ‘events’ page which will be inserted into an upcoming project. As there will be a lot of events being added to this page I wanted to create it as a collapsible unordered list. But as a Javascript ‘workout’ for myself I resolved that I would only use Javascript that was unobtrusive, degraded gracefully and was accessible as possible. that meant no onclick attributes, no ‘#’ in href attributes and code that was valid and clean.

Here’s the markup:

<h1>Events Listing</h1>	
	
<p>Browse the listing for upcoming events</p>
			
<ul class="open">
	
<li>
		
<h2>4th Annual &ndash; Summit</h2>
			
<ul id="ul_item1" class="opensub">
<li id="item1_1">
<h3>22nd September 2005, Main Campus</h3>
<p>blah blah blah....</p>
</li>
</ul>
		
</li>
					
<li>
		
<h2>Managing the Market Or Some Such Bollocks</h2>
			
<ul id="ul_item2" class="opensub">
<li id="item2_1">
<h3>24th November 2005. The Conference Centre</h3>		
<p>etc etc etc...</p>
</li>
</ul>					                             
		
</li>
	
</ul>

Fairly self-explanatory markup. The sublists hold the content but users with Javascript and CSS enabled will get a clickable link (not shown in this markup – patience my precious…) whilst those without will just get this.

I then wrote three fairly simple javascript codeblocks (two functions and one class). Function number one I called ‘toggle’ and thats what it does. When a specific link is clicked, it either shows or hides an element. Like so:

function toggle(id){
var ul = "ul_" + id;
var img = "img_" + id;
var ulElement = document.getElementById(ul);
var imgElement = document.getElementById(img);
if (ulElement){
 if (ulElement.className == "closed"){
  ulElement.className = "opensub";
  imgElement.src = "opened.gif";
  }else{
  ulElement.className = "closed";
  imgElement.src = "closed.gif";
  }
 }
}

So, the function is passed a value referenced as ‘id’ (more on that later). It then appends that passed value onto the end of two elements and applies a class of ‘closed’ or ‘opensub’ as appropriate.

What I wanted to do next was ensure that if the user didn’t have Javascript then the ‘opensub’ CSS class was applied (as we need to present the whole page to them) and if they do have Javascript then we need to apply the ‘closed’ class to the element.

I also wanted to ensure that if the user did have Javascript then he existing markup above was annotated with markup that will make each heading a clickable link and provide a little feedback in the form of an image. Hence:

function initState () {
var lists = document.getElementsByTagName("ul");
for (var j=0; j<lists.length; j++) {
 if(lists[j].className == "opensub") {
  lists[j].className = "closed";
 }
}	
var subHeads = document.getElementsByTagName("h2");
for (var k=0; k<subHeads.length; k++) {
 var arrImg = document.createElement("img");
 arrImg.src="closed.gif";
 arrImg.id="img_item" + [k+1];
 subHeads[k].appendChild(arrImg);
 var holdText = subHeads[k].firstChild.data;
 subHeads[k].firstChild.data = "";
 var placeAnchor = document.createElement("a");
 placeAnchor.href = "test.htm";
 placeAnchor.id = "item" + [k+1];
 placeAnchor.className = "ddown";
 placeAnchor.appendChild(document.createTextNode(holdText));
 subHeads[k].appendChild(placeAnchor);
 }
}

This function has two main parts. The first part (knowing that the user does have javascript installed – we'll see how later) turns all instances of 'opensub' (which displays to the page by default) to 'closed' – meaning a user with Javascript gets the 'rolled up' items. The second part hunts for all h2 elements and creates the markup for both the image and the clickable text in the heading element. These two lines:

var holdText = subHeads[k].firstChild.data;
subHeads[k].firstChild.data = "";

firstly, get the value of the text in the

element, stores it for later use and then gets rid of it – if it didn’t we’d have both the existing text plus the clickable text. Which would be crap.

Once all this is coded we need a way to fire this whole process. I did this in the class below:

window.onload = function() {
  if (!document.getElementsByTagName) return false;
  initState();
  var lnks = document.getElementsByTagName("a");
  for (var i=0; i<lnks.length; i++) {
    if(lnks[i].className == "ddown"){
      lnks[i].onclick = function() {
        toggle(this.getAttribute("id"));
        return false;
      }
    }
  }
}

The crucial line is line 2:

if (!document.getElementsByTagName) return false;

This says that if the browser doesn't support the prerequisite method then the whole things off, the extra markup doesn't get created and everything appears on the page all at once.

This function also passes the 'id' value to the 'toggle' function by getting the id attribute value of the link thats been clicked.

To complete this whole thing we lastly need to create the CSS that will do the actual showing and hiding:

h2 a {
display: inline;
}

.open {
display: block;
}

.closed {
display: none;
}

ul li,
ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.open li img {
vertical-align: middle;
}

And thats that – job done. See it in action or download the whole thing here.

Amended

I thought it might be nice to see if we could close every other entry when one entry is clicked – this means only one entry is ever displayed which might be preferable for some. All this needs is some minor tweaks to the Javascript.

For the function initState() I added the line:

arrImg.className="ddImg";

Immediately below this one:

arrImg.id="img_item" + [k+1];

So I have a class to hook myself into in the next function – toggle(id).

I’ve added two new if statements here that firstly close up all the ul elements with the class name ‘opensub’ and then closed all the img elements with the (see above) class name ‘ddImg’. What’ll happen later in this function is that the selected id will be passed in exactly the same manner as it was before thus opening the correct list and image. Here’s the annotated code for toggle(id)

var allLists = document.getElementsByTagName("ul");
for (var x=0; x<allLists.length; x++) {
if(allLists[x].className == "opensub") {
 allLists[x].className = "closed";
 }
}
var allListImg = document.getElementsByTagName("img");
 for (var y=0; y<allListImg.length; y++) {
 if(allListImg[y].className == "ddImg") {
  allListImg[y].src = "closed.gif";
 }
}

I put this code right at the very start of the function.

And thats that. Whenever you click on an entry, all other open entries will shut automatically.

The example’s here and the download is here.

Amendement No II

And its only now of course that I remember that screenreader users invariably _do_ have Javascript turned on and that display: none hides things from the screenreader.

One frantic search later, I find the answer in the Off-Left technique. So the code for the closed class now reads:

.closed {
 position: absolute;
 left: -999px;
 width: 990px;
}