After almost three weeks I found the solution to the Javascript Flickr badge...

After Roger Johansson's help I kept looking around and ended up checking out
the Flickr API (I knew about it but I didn't think of it as the logical solution until then..). Anyway, I soon found out that I could get an XML document back with all the info needed to build a flickr badge. But...XMLHttpRequest cannot do cross scripting (XSS) because of security reasons and my php set up did not allow me to parse XML or send a call with XML-RPC. I still didn't want to have to change much to attain the result I was looking for.

Then I found an article on Vitamin by Cameron Adams of The Man in Blue.

I could get a response in JSON, no XSS problems and still be able to parse it with plain old Javascript.

I still had some problems and Cameron (thanks again) answered a question I asked him which pointed me in the right direction (code lines that shouldn't be broken marked with >>) :

On the page I now have two empty, unstyled divs. The first has an ID of write and the other of badge. I build the container divs with Javascript and then append the result inside the badge div.

It validates and now, if Javascript is disabled, I just get nothing which is exactly as it should be!!

On quirksmode.org :

Delegating the focus and blur events

Catching mouse events bubbling up the DOM tree ..

I have done a bit more testing and I found out that on Firefox the Javascript call returns only <img> and <a> but on IE6 it still returns <td>..I should have been more attentive. That's why the images end up outside the DIVs.

I'm still looking for a solution to the Flickr badge “problem”. I sent an email to Roger Johansson of 456 Berea St. and I got an answer back extremely fast. I already thanked him and I'm going to do it again: thanks!

He pointed me to this post by Chris Heilmann of Wait till I come. It's definitely interesting but I'm happy with the simple Javascript call I got from Flickr and I'm just trying to figure out why IE puts the images outside the DIV.

I did some more tests, actually coding Javascript on the page old style:

<script type="text/javascript">
document.write('<div id="photos_wrapper">');
document.write('<div id="photos">');
document.write('<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?..."><\/script>');
document.write('</div>');
document.write('</div>');
var div = document.getElementById('photos');
alert(div.firstChild.src);
</script>

It does not validate so I'm doing it just to test. The alert at the end of the script gives back the correct URI or script if I do alert(div.firstChild.NodeName) but the images are still OUTSIDE the DIVs in IE6...or, at least, they appear to be.

Using the DOM to build the Javascript external call to Flickr :

<script type="text/javascript">
document.write('<div id="photos_wrapper">');
document.write('<div id="photos">');
document.write('</div>');
document.write('</div>');
var div = document.getElementById('photos');
var js = document.createElement('script');
js.setAttribute('type','text/javascript');
js.setAttribute('src','http://www.flickr.com/badge_code_v2.gne?...');
div.appendChild(js);
alert(js.parentNode.id);
</script>

The result given by the alert at the end is correct (photos) but in Firefox it does not show the pictures the first time it loads the page (the Javascript call doesn't fire, I suppose) and doing a refresh causes the Javascript call to Flickr to take over the document making it blank and getting stuck on a bad URI call. On IE6 it just does not show the pictures (the Javascript call doesn't fire, I suppose).

Weird....

I also noticed that basically everyone that uses the Flickr badge as I do has the same “problem”, but it doesn't seem to bother them.

On Javascript kit I found this tutorial: external JavaScript and php. At this point, I really thought I had the solution.

So, I rewrote the php function accordingly:

<?php
header("content-type: application/x-javascript");
echo "document.write('<div id=\"photos_wrapper\">');";
echo "document.write('<div id=\"photos\">');";
echo "document.write('<script type=\"text/javascript\" src=\"http://www.flickr.com/badge_code_v2.gne?...\"></script>');";
echo "document.write('</div>');";
echo "document.write('</div>');";
?>

then placed a link to the external file inside the page where the badge is supposed to be:

<script src="functions/flickr.php" type="text/javascript"></script>

In Mozilla Firefox everything is all right, it validates and...IE puts the images OUTSIDE the div!! Why? Have no idea...

The simple fact that is possible to have some kind of data exchange between php and Javascript is very interesting in itself and I had never read anything about it before. I definitely learned something but I still haven't found the solution to the problem...

Still trying to get my head around the same Javascript problem. I tried the DOM (my first idea, actually, but I didn't want to have an extra div to use as a hook):

function flickr_badge(){
var target = document.getElementById('photos_hook');
if(!target) return;
var div = document.createElement('div');
div.setAttribute('id','photos_wrapper');
var div2 = document.createElement('div');
div2.setAttribute('id','photos');
var js_s = "<script type='text/javascript' src='http://www.flickr.com/badge_code_v2.gne?...'></script>";
div2.appendChild(js_s);
div.appendChild(div2);
target.appendChild(div);
}

and using innerHTML :

function flickr_badge(){
var target = document.getElementById('photos_hook');
if(!target) return;
var div = document.createElement('div');
div.setAttribute('id','photos_wrapper');
var div2 = document.createElement('div');
div2.setAttribute('id','photos');
var js_s = "<script type='text/javascript' src='http://www.flickr.com/badge_code_v2.gne?...'></script>";
div2.innerHTML = js_s;
div.appendChild(div2);
target.appendChild(div);
}

with the same result: the Javascript call to Flickr takes over and rewrites the whole page, I get only unstyled photos and a loopy request to connect with flickr...

I also tried embedding the Javascirpt directly in the page :

<script type="text/javascript">
document.write('<div id="photos_wrapper">');
document.write('<div id="photos">');
document.write('<scr'+'ipt type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?...."></scr'+'ipt>');
document.write('</div>');
document.write('</div>');
</script>


I had to break the <script> tag in two pieces, otherwise I get a Javascript unterminated string error (script tag nested inside another one), it works but it doesn't validate. Basically, so far, most of my possible solutions don't work and what works doesn't validate.

Beside the lack of web standards attention, I had another problem with the Flickr badge: with Javascript disabled I ended up with a rectangular empty div, 76px height, just sitting there..

I looked around on Google for a solution, at first I thought I could check if Javascript was enabled with php. It turns out that it's pretty easy to check if the browser has Javascript abilities but not if it's actually enabled. I know that php is a server side language and Javascript mostly client side, so it's not possible to call a php function from a Javascript script (except maybe using XMLHttpRequest but I did't even go there).

After trying various unsuccessful combinations I finally figured it out and I wrote the php function so that it writes what I need using Javascript:

<?php
function flickr(){
echo "<script type=\"text/javascript\">\n";
echo "document.write('<div id=\"photos_wrapper\">');\n";
echo "document.write('<div id=\"photos\">');\n";
echo "</script>\n";
echo "<script type=\"text/javascript\" src=\"http://www.flickr.com/badge_code_v2.gne?....."></script>\n";
echo "<script type=\"text/javascript\">\n";
echo "document.write('</div>');\n";
echo "document.write('</div>');\n";
echo "</script>\n";
}
?>

Now, if Javascript is enabled, all is good, otherwise just no empty divs and no flickr badge...I thought... but NO, now it doesn't validate because since there are three <script> “blocks” the parser sees an opening and ending mismatch of the divs ..So, I'm back where I started. More when I fix it..

An article on Digital Web Magazine:

Extending The JavaScript Date Object with User Defined Methods

On 456 Berea St. :

Beware of id and name attribute mixups when using getElementById in Internet Explorer

A post about XMLHttpRequest via Stringify :

Re-inventing XMLHttpRequest

Stringify has a new look, very nice.

An article on A List Apart:

If I Told You You Had a Beautiful Figure...

On The Strange Zen of Javascript :

How to build a simple calendar with JavaScript

On Content with Style :

Swapping nodes in a DOM tree

“ Whether or not your JavaScript is maintainable often seems to be relative to the task you're trying to accomplish. You can follow best practices, or not, and sometimes you'll be fine either way. Nevertheless, in this article, we'll demonstrate seven techniques you can add to your daily code writing habits to make you a better programmer.”

Seven JavaScript Techniques

On Vitamin:

Setting & Retrieving Accesskeys

Sound with Javascript:

sound in web browsers without Flash

“ In JavaScript, a function is an object; creating a function creates an object. Function objects can be a little more useful than the object literals we just discussed, though, in that they can be used as a template for new objects.”

Objectifying JavaScript

“ This article explains closures so that a programmer can understand them - using working JavaScript code.”

Closures Are Not Magic

Object Oriented Javascript:

Private, public and privileged members

One core thing about JavaScript that tends to confuse people is how to get private, public and privileged members.

Namespacing your JavaScript

Perhaps a very uncommon approach to developing web applications that require JavaScript (but should be more common) is namespacing your scripts.

Private Members in JavaScript

JavaScript is the world's most misunderstood programming language. Some believe that it lacks the property of information hiding because objects cannot have private instance variables and methods. But this is a misunderstanding. JavaScript objects can have private members.

Javascript includes
calling a script from within another script

Link thumbnail
displays a small image of the destination page when hovering on a link

On Particletree: JSON, Ajax, and UTF8

“ How do you go about sending any type of character to the server via JSON? The solution turns out to be quite simple, but arriving at the solution involved many attempts in the wrong direction.”

On Digital Web Magazine: accessible widgets for the web

When building web applications, we're working with a fairly restricted set of widgets, compared to those available for native desktop apps. The recent surge of interest in JavaScript points to a solution: we can replicate the functionality of sophisticated native widgets through some clever DOM scripting, and provide our users with exciting interfaces that bridge the gap between native apps and web apps.

I published the code for the two "search forms" under the ␄search posts” feature on the home page of this site.

On Dean Edwards's site: prototype and base

Comments on this post are interesting too.

On The Web Standards Project:
promoting the responsible use of JavaScript

On DOMScripting: Javascript teleprompter

On Curiosity is bliss: XmlHttpRequest debugging

On Garret Dimon's site:AJAX and DOM Scripting

On ParticleTree:

• guide to prototyping Ajax 1
• guide to prototyping Ajax 2
• guide to prototyping Ajax 3

On Vitamin:
responsible asynchronous scripting

On Stringify: AJAX page transition

On 456 Berea St. :
AJAX, JavaScript support and screen reader accessibility

On Quirksmode:
IE 7 and JavaScript

On Web-graphics: extending prototypes

On Web-Graphics: Javascript and Selectors

On Max Kiesler: 60 AJAX tutorials

On A List Apart: secure your code

On Dustin Diaz' site: awkward looking javascript

On Stringify: Class attributes and Javascript

On Web Standards Project: DOM builder

On DOM Scripting: XMLHttpRequest on the W3C

I want to write a bookmarklet to copy a quote from another site and save it formatted with a link to it. Just to make things even easier..

On A List Apart: getting started with AJAX

I have read comments and opinions about AJAX breaking accessibility rules. AJAX is a tool. As such it's not inherently "good" nor "bad" but defined by the the use that it's made of it. A hammer can be used either to build or to destroy a house.

On Web-Grapics: OOJS - overhyped and overcomplicating.

From Jalenak:

Periodic Table of the Elements AJAX Demo

AJAX :

• AJAX response: XML, HTML, or JSON?
• Fixing the back button that Ajax broke
• Treating the http status code right

• Introducing JSON
• Web Services + JSON
• JSON and Yahoo

An interesting use of Javascript :

Lightbox

From Web-graphics:

• JavaScript Function Arguments

On Evolt:

AJAX login system

Funny title? No, actually an interesting technique:

• AJAX vs. AHAH
• AHAH, Asychronous HTML and HTTP

From Scott Andrew LePera cross-browser event handler has stemmed a Peter-Paul Koch article and even a coding contest.

I have been using the traditional event registration model that, as explained, has some drawbacks but since my scripts are pretty simple I find it good enough. I also make use of Simon Willison's addLoadEvent() function as of my post.

Interesting technique:

• Footnotes

This mouseover effect is also interesting because simple:

• Mouseover effect

Found today:

“ When working with XML one regularly needs to test whether a node has a certain node type”

and this could be a convenient solution.

Javascript shell:

• single line
• multiline

I have been looking for a solution to a multi-language site that doesn't need to have the same pages repeated in different languages. I had tried using only Javascript but the translated text had to be saved together with the rest of the Javascript code and it didn't seem a practical solution.

I think that the solution could be XMLHttpRequest. I save all the “Studies” text in a XML file that has the same tags as the XHTML page and change the content of the page according to the language chosen by the user. I'm working on it, still polishing out a few glitches.

I found more links:

• del.icio.us
• javascript:xmlhttprequest
• xmlhttprequest forum

I didn`t realize that XMLHttpRequest was such a popular topic..I have been using XML for a while but it's difficult to find good articles and practical applications.

Learning about XMLHttpRequest..

• XMLHttpRequest for the masses
• Usable XMLHttpRequest
• XMLHttpRequest guidelines
• XMLHttpRequest

The random quotes are back again.

Also, fixed a few bad links and the Javascript code for the random quotes adding a check that avoids error alerts.

This post on Simon Willison site poses an interesting problem that I have encountered already many times.

As I said, I'm back online (even if with a few glitches..) and I have published the pop-up menu on the studies page.

It is very simple, the mark-up is valid XHTML and the CSS that I use for the layout can be changed to anything else. The menu works with Javascript-disabled/CSS-enabled, Javascript-enabled/CSS-disabled, Javascript and CSS disabled.