Enhancing Structural Markup with JavaScript

[ArticleBot]

This is a dedicated thread for discussing the SitePoint article 'Enhancing Structural Markup with JavaScript'

[r937]

maybe it's me, but i didn't see anything on the demo of the panel switching script

i saw all three panels, all the time

perhaps it's because i was using internet explorer 6 on windows?


rudy
http://r937.com/

[Skunk]

maybe it's me, but i didn't see anything on the demo of the panel switching script

i saw all three panels, all the time

That's because the easytoggle.js script which accompanies the example doesn't appear to be on the server - I've emailed SitePoint and pointed out the error. In the meantime you can see a demo that uses a very slightly older version of the code here:

http://simon.incutio.com/code/js/eas...e/example.html

It works fine in IE5, 5.5 and 6. Older browsers (such as NS4 and IE4) display all of the panels at once which at least means the data in them is still accessible.

[Octal]

Moved on since the days of Gameplay and the 'Hub I see!

Nice article mate, the first of many hopefully

[Skunk]

Moved country as well I'm in the United States for a year on placement before heading back to the UK to finish my degree.

[Skunk]

The demo has now been fixed: http://www.sitepoint.com/examples/ma...ggle-demo.html

[Octal]

So when's your first Sitepoint book coming out?

[Anonymous]

I have tried substituting an image for the text link, but it doesn't work, why is this?

[vchau76]

I tried using an image instead of the text link, but it doesn't work, it just gives me an empty screen. Why is this?

[Anonymous]

I find this article very useful. I've used similar approachs on my webpages, like building tables of contents, or even building menus with links. In other words, it's like a javascript approximation to XSLT or one of those transformation languages that enhance the look of your code.

Two thumbs up!

Rick

[vchau76]

What's the point of posting on this forum if I don't get an answer? Is anyone reading this post at all?! I will post my question again.

I have tried to use an image link instead of a text link to call the panels, however, when I do so, all i get is a blank screen. Is there a work around for this?

[vgarcia]

What's the point of posting on this forum if I don't get an answer? Is anyone reading this post at all?! I will post my question again.

I have tried to use an image link instead of a text link to call the panels, however, when I do so, all i get is a blank screen. Is there a work around for this?

Can we see your code, so we know what you're talking about? That's generally more helpful and will get you more responses.

[vchau76]

Can we see your code, so we know what you're talking about? That's generally more helpful and will get you more responses.

/* easytoggle2.js
   - Simon Willison, 5th November 2003
   - See http://simon.incutio.com/archive/2003/11/06/easytoggle
*/
addEvent(window, 'load', et_init);
var et_toggleElements = [];
/* Initialisation */
function et_init() {
	var i, link, id, target, first;
	first = true;
	for (i = 0; (link = document.links[i]); i++) {
		if (/\btoggle\b/.exec(link.className)) {
			id = link.href.split('#')[1];
			target = document.getElementById(id);
			et_toggleElements[et_toggleElements.length] = target;
			if (first) {
				first = false;
			} else {
				target.style.display = 'none';
			}
			link.onclick = et_toggle;
		}
	}
}
function et_toggle(e) {
	/* Adapted from http://www.quirksmode.org/js/events_properties.html */
	if (typeof e == 'undefined') {
		var e = window.event;
	}
	var source;
	if (typeof e.target != 'undefined') {
		source = e.target;
	} else if (typeof e.srcElement != 'undefined') {
		source = e.srcElement;
	} else {
		return true;
	}
	/* For most browsers, targ would now be a link element; Safari however
	   returns a text node so we need to check the node type to make sure */
	if (source.nodeType == 3) {
		source = source.parentNode;
	}
	var id = source.href.split('#')[1];
	var elem;
	for (var i = 0; (elem = et_toggleElements[i]); i++) {
		if (elem.id != id) {
			elem.style.display = 'none';
		} else {
			elem.style.display = 'block';
		}
	}
	return false;
}
/* Thanks to Scott Andrew */
function addEvent(obj, evType, fn){
	if (obj.addEventListener) {
		obj.addEventListener(evType, fn, true);
		return true;
	} else if (obj.attachEvent) {
		var r = obj.attachEvent("on"+evType, fn);
		return r;
	} else {
	 return false;
	}
}

This is the easytoggle2.js script which I downloaded from the article.

So instead of using a text link like this: <a href="#panel1" class="toggle">View</a>. I want to use an image link like this <a href="#panel1" class="toggle"><img src="image.gif"></a>. However, when I try to do this method all I get when I click on the image link is a blank screen and the panels don't show up.

[Anonymous]

Doesn't work in Mac IE5

[vchau76]

Ok, I have patiently waited to see if anyone could help me with this issue of using an image instead of a text link to switch panels and still no reply. I am starting to wonder if anyone reads these forums. Can anyone out there offer a solution to my problem?

[admtc]

Ok, I have patiently waited to see if anyone could help me with this issue of using an image instead of a text link to switch panels and still no reply. I am starting to wonder if anyone reads these forums. Can anyone out there offer a solution to my problem?

Hmm. Sure enough, the image doesn't work, but it's not immediately obvioius to me from the code why not. If you throw some text in alongside the image, clicking that seems to work (YMMV).

Maybe using a FIR technique would work(?).

[Anonymous]

Ok, it seems everyone is asking the same question, and the author is not responding to e-mail enquires, so, any JS guru's care to take a good look at why images do not work with this script? I'm pretty sure everyone reading this would appreciate it greatly. Mr. Willison? Hmmm?

[MikeFoster]

In Simon's original code...

(1) Wrap the IMG elements in the A elements.

(2) In the function 'et_toggle()', don't use the event target because now the target is the IMG element. Instead, use this, which points to the A element because of...

link.onclick = et_toggle;

[MikeFoster]

Like this...

/* easytoggle.js, by Simon Willison 
   modified by Mike Foster, 24Mar04, Cross-Browser.com */

var et_toggleElements = [];

if (document.getElementById && document.links) window.onload = et_init;

function et_init() {
     var i, link, id, target, first;
     first = true;
     for (i = 0; (link = document.links[i]); i++) {
         if (/\btoggle\b/.exec(link.className)) {
             id = link.href.split('#')[1];
             target = document.getElementById(id);
             et_toggleElements[et_toggleElements.length] = target;
             if (first) {
                 first = false;
             } else {
                 target.style.display = 'none';
             }
             link.onclick = et_toggle;
         }
     }
}

function et_toggle(e) {
     var id = this.href.split('#')[1];
     var elem;
     for (var i = 0; (elem = et_toggleElements[i]); i++) {
         if (elem.id != id) {
             elem.style.display = 'none';
         } else {
             elem.style.display = 'block';
         }
     }
     return false;
}

[Bruno]

You can tweak this script to easily choose which panel you want to show as the default (instead of having it always show the first. Like this:

/* Initialisation */
function et_init() {
var i, link, id, target, first;
/* first = true; remove this declaration*/
for (i = 0; (link = document.links[i]); i++) {
if (/\btoggle\b/.exec(link.className)) {
id = link.href.split('#')[1];
target = document.getElementById(id);
et_toggleElements[et_toggleElements.length] = target;

if /*if the link class includes the word default, set first to true*/
(/\bdefault\b/.exec(link.className)){
first = true;

}
if (first) {
first = false;
} else {
target.style.display = 'none';
}
link.onclick = et_toggle;
}
}
}

Then all you have to do is include "default" in the class attribute of the link, like so:
<a href="#youpanel" class="toggle default">Link</a>

[Hallvord R. M. Steen]

The demo scripts in this article contain a bug that will cause them to fail unexpectedly in browsers that support DOM2 Events properly: event handlers are capturing by default. The line

obj.addEventListener(evType, fn, true);

should read

obj.addEventListener(evType, fn, false);

See
http://my.opera.com/hallvors/journal/47