Notes on a web journey

posted on: 02 April 2008

Javascript flickr badge

filed under: @ 14:27:21 by 7colors

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..

Tags:

COMMENTS:

Post a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <strike> <strong>

CSS,Javascript and Php studies

Anti spam email
A solution to writing an anti spam email contact link
filed under: Javascript
Background image
A background image randomizer that I used in the second version of this site.
filed under: Javascript/CSS
Javascript menu
A menu that uses Javascript and session cookies.
filed under: Javascript/CSS
MiniSite
Experimenting with CSS and Javascript.A simple but, in my opinion, nice navigation “system”. The MiniSite is a one page site.
filed under: Javascript/CSS
Photo display
Protect copyrighted photos: a simple but effective solution.
filed under: Javascript/CSS
Photo gallery
A photo gallery made for a friend
filed under: Javascript
PHP menu
A PHP menu that can be updated without having to re-publish all the pages is on.
filed under: PHP
Pop-up menu
A very simple pop up menu powered by Javascript. It works also if Javascript is disabled.
filed under: Javascript/CSS
RSS feed
How to write and use an RSS feed
filed under: rss-xml
Tag replacer
The Tag replacer explained and a link to it.
filed under: PHP
Tags search
A search form build and powered using Javascript and the DOM
filed under: Javascript