See it in action at: Loading images with XML & jQuery

<script type="text/javascript">

$(document).ready(function()
{
$.get(’myData.xml’, function(d)
{
$(’#list’).append(’<dl id="list1Cont" />’);

$(d).find(’book’).each(function()
{
var $book = $(this);
var title = $book.attr("title");
var linkurl = $book.attr(’linkurl’);

var imageurl = $book.attr(’imageurl’);

var html = ‘<dt> <img class="bookImage" alt="" src="’ + imageurl + ‘" /> <span class="link"><a href="http://www.startriteshoes.com/childrens-shoes/’ + linkurl + ‘">’ + title + ‘</a></span></dt>’ ;
// html += ‘<dd>’;
// html += ‘<dt class="title">’ + title + ‘</dt>’;
// html += ‘<span class="link"><a href="http://www.startriteshoes.com/childrens-shoes/’ + linkurl + ‘">’ + title + ‘</a></span>’;
// html += ‘</dd>’;

$(’#list1Cont’).append($(html));

});
});

$.get(’myData2.xml’, function(d)
{
$(’#list2′).append(’<dl id="list2Cont" />’);

$(d).find(’book’).each(function()
{
var $book = $(this);
var title = $book.attr("title");
var linkurl = $book.attr(’linkurl’);

var imageurl = $book.attr(’imageurl’);

var html = ‘<dt> <img class="bookImage" alt="" src="’ + imageurl + ‘" /> <span class="link"><a href="http://www.startriteshoes.com/childrens-shoes/’ + linkurl + ‘">’ + title + ‘</a></span></dt>’ ;
// html += ‘<dd>’;
// html += ‘<dt class="title">’ + title + ‘</dt>’;
// html += ‘<span class="link"><a href="http://www.startriteshoes.com/childrens-shoes/’ + linkurl + ‘">’ + title + ‘</a></span>’;
// html += ‘</dd>’;

$(’#list2Cont’).append($(html));

});
});
});
</script>

<?xml version="1.0" encoding="utf-8" ?>
<books>
<book title="F1X" imageurl="http://www.ekstasis.net/images/funpics/f1scx.jpg" linkurl="7200_7/ELISE"></book>
<book title="Fly in my" imageurl="http://www.ekstasis.net/images/funpics/fly_soup.jpg" linkurl="2200_7/SPIN"></book>
<book title="Why the long face?" imageurl="http://www.ekstasis.net/images/funpics/horse.jpg" linkurl="3043_7/QUICK_STEP"></book>
<book title="Mornin" imageurl="http://www.ekstasis.net/images/funpics/wake_up.jpg" linkurl="2121_7/TRILOGY"></book>
</books>

• Progressive CSS
• Progressive JavaScripting
• Unobtrustive JavaScript
• Understand browsers and users
• Event Delegation
• Relationships
• Maintenance
• JQuery
• JQuery & XML

Here’s a download link: Behavioral separation and jQuery

Version 2.1 is available at google code – here’s the link: code.google.com/p/swfobject/

Main Advantages:

• It’s more optimized and flexible than any other Flash Player embed method around.
• It uses unobtrusive JavaScript.
• It offers a standards-based, accessible way to serve flash.
• It allows you to avoid click-to-activate mechanisms to activate active content in Internet Explorer 6/7 and Opera 9+.

There are two publishing methods: static publishing method & dynamic publishing method.

Both methods allow you to use standards-based markup and a way to serve alternative content (including a option to install / upgrade your flash) if flash isn’t supported.

The main advantage of the static publishing method is: If you have the Flash plug-in installed, but have JavaScript disabled or a use a browser that doesn’t support JavaScript, you will still be able to see your Flash content.

Usually there’s a good reason why JavaScript isn’t supported. W3C schools Browser Stats states 95% of users have JavaScript On. So unless you specifically want to cater for devices like Sony PSP (which has very poor JavaScript support) the dynamic publishing method is recommended.

The advantages of the dynamic publishing method are: It avoids click-to-activate mechanisms to activate active content in Internet Explorer 6/7 and Opera 9+.

Using parameters:

There aren’t a lot of examples of using parameters. Here’s an example for making movies transparent. This is often necessary to have DHTML elements appear ABOVE the flash movies (as well as content / imagery below.)

<script type="text/javascript">
// <![CDATA[
	var flashvars = false;
    var params = {
		quality: "high",
		wmode: "transparent",
		scale: "noscale"
	};
	var attributes = {};
	swfobject.embedSWF("/flash/movie.swf", "flashcontentID",
"550", "400", "6.0.0", "false", flashvars,
params, attributes);
// ]]>
</script>

Bugs:

There appears to be an unresolved issue where the flash movie doesn’t load in Internet Explorer 7. You can find more details at the flashcomguru.com forum

Adobe state only a very small number of IE7 users are affected but many users believe the issue is more widespread.

Setting the flash version to "0" does solve the issue. But if the user doesn’t have flash the alternative content is not served. Adobe.com’s player census state about 98% of users have flash player version 7 and above installed. (Only 80% use version 9 so this solution would not be satisfactory).

<!--[if !IE 7]><!-->
    <script type="text/javascript">
    // <![CDATA[
	swfobject.embedSWF("/flash/movie.swf", "flashcontentID",
"550", "400", "6.0.0", "false", flashvars,
params, attributes);
    // ]]>
    </script>
<!--<![endif]-->

<!--[if IE 7]><!-->
    <script type="text/javascript">
    // <![CDATA[
	swfobject.embedSWF("/flash/movie.swf", "flashcontentID",
"550", "400", "0", "false", flashvars,
params, attributes);
        // ]]>
    </script>
<!--<![endif]-->

Alternatively, use the alternative content to embed the movie and then use a src=”image.gif” with details describing what’s happening / what steps to take.

Note: Not sure how using using expressinstall.swf affects this issue.

• XHTML Strict 1.0 W3C valid markup.
• Semantically correct markup – e.g. use <ul> unordered lists for any list of items.
• Common identifiers should be used based on potential HTML classes and hCard microformat.

Cross Browser Valid:

• Identical (and fully functional) user experience across browsers. (note: browser differences for font anti-aliasing are expected) – Internet Explorer 6, 7 & 8 + Safari 2 & 3 + Firefox 2 & 3 + Google Chrome + Opera 9 for Windows XP | Firefox 2 & 3 + Safari 2 & 3 for Mac OSX.

CSS Styling:

• CSS styles must be completely unobtrusive with no inline styles.
• Elements should not be positioned absolutely unless necessary – All main element blocks should normally be positioned relatively so if new content is added the existing elements would automatically reposition in the flow. Also wherever font-size is increased the layout integrity remains.

Client side scripting:

• All JavaScript should be unobtrusive and loaded / called through external files – using IDs or Classes as hooks, no inline JavaScript such as onclick functions.
• The existence of Functions and Objects should be tested for before use where practical.
• The jQuery library is preferred.

Accessibility:

• JavaScript features are unobtrusive and the dynamic features degrade well with scripting disabled: All content should be accessible with JavaScript disabled including hidden or asynchronously included content. (e.g. Content asynchronously included with AJAX is replaced with a standard link for screen readers or clients with no javaScript.)
• Content should be accessible via keyboard for users without mouse control.
• Using meaningful ALT text for information images.
• Links should have descriptive hyperlink text and titles warning of link actions.
• Text colours have adequate contrast for colour blind/challenged users.
• Avoid the use of frames, which are difficult for special browsers to interpret.
• Keyboard shortcut to main content available.
• Labels assigned to form items and forms have accessible design.

Usability:

• Links, buttons & other dynamic elements have hover states, focus states and active states.
• AJAX calls include history recording for forward / back buttons and bookmarking / links.
• Navigation menu will only activate when the user intends to use it – i.e. user slows the cursor down over a link. The menu is not activated if the cursor is dragged across the menu. (through a delay or hover intent script)
• Search field has suggestion. This is greyed out until the user starts typing.

SEO:

• Site is fully available without JavaScript.
• Semantic mark-up with consistent URL, breadcrumb and content titles. Where titles are graphical, <h1> image replacement techniques are used.
• CSS coding allows the content to appear before the top and left navigation in the source code. Spiders will arrive at the header then the <h1> tags at the top of the content. They spider the content first then the navigation and footer last – enhancing SEO.

Optimization:

• Repeating background image layers used for reoccurring design patterns.
• Dynamic graphical elements preloaded and highlighted using CSS sprites technique.
• AJAX used to pull in optional content where file size may degrade performance.

Accessibility issues that are not priority 1 issues and do not fail the legal Accessibility guideline requirements:
- Text input fields with a default value – Text fields may have a default value – but only for users with JavaScript enabled (96% of users). This is so that a ‘dynamic’ default value can be added that disappears when the user click in the box. This is a superior solution but not 100% accessible to people with disabilities.
- Adjacent links are separated by white space – CSS is used to separate some adjacent links. This can make it difficult for some older assistive technologies (readers for the blind). This is done to improve performance and ease of future updates. People should update their older assistive technologies.
- Web colour scheme may not be tested against protanope, deuteranope, and tritanope colour-blindness.
- Form fieldsets do not have legends. These are normally catered for by titles, or left out when the design requires.

Testing and evaluating DHTML menu trees.

Each menu included in the list (below) has it’s own testing area. They’ve been tested for full functionality within a working ‘mini site’ and adapted to demonstrate whether it’s possible to open nested levels and display the current location without altering the body tag.

Here’s the list of menus with a link to the test and a link to the original sites:

Displaying the ‘current location’ is vital for clear site navigation. This feature is not usually included with the original menu source code. In order to test whether it is possible to adapt the menus to include this feature each menu has been set up – where possible – to indicate the ‘current location’ and automatically open the tree at that level.

Links below include the local test area and the original URL providing the source code.

Only free-of-charge menu systems are included in this evaluation.

Overview of evaluation criteria:

• Is it accessible? Driveable by keyboard only?
• How separate is the content, presentation, and behaviour.
• Does it degrade well without JavaScript or CSS?
• How easy is it to indicate the ‘current location’ of the page selected?
• Does it opens and displays current status for an included page – [e.g. HTML: main.php?page=page1.] i.e. cannot use body tags or code in section of page?
• When clicking on the parent item / title of the section do the nested list items open – i.e. not just clicking on the graphic which can cause confusion?
• Is it xhtml 1.0 strict valid?

In order to keep the nested levels visible at a specific location I have used one of two types of server-side functions:

<?php
$theuri = $_SERVER['REQUEST_URI']; ?>
<?php
if ( ($theuri =="/s01sub1a01.php") or ($theuri ==
"/tests/menu13/section1pages/s01sub1a02.php"))
echo " class=\"liOpen\"";
else echo " class=\"liClosed\""; ?>

or

<?php
if ( ($thisPage=="s01sub1b01")
or ($thisPage=="s01sub1b02") or ($thisPage=="s01sub1b03") )
echo " rel=\"open\""; ?>

A better method to use is demonstrated below.
This has not been used in these tests because of the need for
modRewrite using the RewriteEngine:

$lines = split("\n", $menu);
foreach ($lines as $line) {
$current = false;
preg_match('/href="([^" mce_href="([^"]+)"/', $line, $url);
if (substr($_SERVER["REQUEST_URI"], 0, 5) == substr($url[1], 0, 5)) {
$line = str_replace('<a h', '<
a id="current" h', $line); }
echo $line."\n";
}

[Full source code available at: http://photomatt.net/ ]

or

<?php
$menu =
file_get_contents("/inc/menu.htm");
$menu = preg_replace("|<li><
a xhref=\"" .
basename($_SERVER['PHP_SELF']) . "\">(.*),/code><!--[^-->]+>
</li>|U","<
li class=\"current\">$1</li>", $menu);
echo $menu;
?>