2010-03-05 02:01:13 +01:00
< ? php
$demos = json_decode ( file_get_contents ( 'demos.json' ));
2011-02-22 22:20:55 +01:00
function support ( $support , $url ) {
2010-03-05 02:01:13 +01:00
$browsers = split ( ' ' , 'ie firefox opera safari chrome' ); // big 5 - should I add iPhone (for geo, etc)?
$live = isset ( $support -> live ) ? split ( ' ' , $support -> live ) : array ();
$nightly = isset ( $support -> nightly ) ? split ( ' ' , $support -> nightly ) : array ();
2011-02-22 22:20:55 +01:00
$html = '<span title="unknown browser support" class="yourbrowser tag" id="test-' . $url . '"></span> ' ;
2010-03-05 02:01:13 +01:00
foreach ( $browsers as $browser ) {
$class = '' ;
if ( in_array ( $browser , $live )) {
$class .= ' live' ;
} else if ( in_array ( $browser , $nightly )) {
$class .= ' nightly' ;
} else {
$class .= ' none' ;
}
2010-10-19 21:07:30 +02:00
$html .= '<span title="' . trim ( $class ) . '" class="tag ' . $browser . $class . '">' . $browser . ':' . $class . '</span> ' ;
2010-03-05 02:01:13 +01:00
}
return $html ;
}
function spans ( $list ) {
$items = split ( ' ' , $list );
$html = '' ;
foreach ( $items as $item ) {
2010-10-19 21:07:30 +02:00
$html .= '<span class="tag">' . $item . '</span> ' ;
2010-03-05 02:01:13 +01:00
}
return $html ;
}
?>
2010-02-03 09:59:46 +01:00
<! DOCTYPE html >
2011-01-17 23:06:05 +01:00
< html id = " home " lang = " en " >
2010-02-03 09:59:46 +01:00
< head >
< meta charset = utf - 8 />
< meta name = " viewport " content = " width=620 " />
2010-03-04 13:07:09 +01:00
< title > HTML5 Demos and Examples </ title >
< link rel = " stylesheet " href = " /css/html5demos.css " type = " text/css " />
2010-03-20 20:14:30 +01:00
< script src = " js/h5utils.js " ></ script >
2011-02-22 22:20:55 +01:00
< script src = " js/modernizr.custom.js " ></ script >
2010-02-03 09:59:46 +01:00
</ head >
< body >
< section id = " wrapper " >
< header >
< h1 >< abbr > HTML </ abbr > 5 Demos and Examples </ h1 >
</ header >
< article >
2010-03-05 11:06:49 +01:00
< p >< abbr > HTML </ abbr > 5 experimentation and demos I ' ve hacked together . Click on the browser support icon or the technology tag to filter the demos ( the filter is an < code > OR </ code > filter ) .</ p >
2011-04-05 18:03:21 +02:00
< ? php /*
2011-05-28 16:32:21 +02:00
< section >
< a href = " http://leftlogic.com/tour " id = " promo " >
< p >< strong > Want to learn all about JavaScript ? </ strong ></ p >
< p > Full day limted places workshops covering HTML5 APIs , Node and jQuery for designers at < strong > £200 </ strong > running throughout May . < u > Find out more and grab your ticket now .</ u ></ p >
</ a >
</ section >
*/ ?>
2010-08-05 19:44:07 +02:00
< section >
2010-10-19 21:07:30 +02:00
< a href = " http://introducinghtml5.com " id = " ih5 " >
< p >< strong > Introducing HTML5 </ strong > by Bruce Laweson & amp ; Remy Sharp is the first full length book dedicated to HTML5 .</ p >< p > Get it now and kick some HTML5 ass !</ p >
2010-08-05 19:44:07 +02:00
</ a >
</ section >
2010-10-19 21:07:30 +02:00
< p id = " tags " class = " tags " >
</ p >
2010-03-05 02:01:13 +01:00
< table id = " demos " >
< thead >
2010-10-19 21:07:30 +02:00
< tr >
< th > Demo </ th >
< th > Support </ th >
2011-02-22 22:20:55 +01:00
< th > Technology </ th >
2010-10-19 21:07:30 +02:00
</ tr >
2010-03-05 02:01:13 +01:00
</ thead >
< tbody >
< ? php foreach ( $demos as $demo ) : ?>
< tr >
< td class = " demo " >< a href = " <?= $demo->url ?> " >< ? = $demo -> desc ?> </a><?php if (isset($demo->note)) { echo ' <small>' . $demo->note . '</small>'; }?></td>
2011-02-22 22:20:55 +01:00
< td class = " support " >< ? = support ( $demo -> support , $demo -> url ) ?> </td>
2010-03-05 02:01:13 +01:00
< td class = " tags " >< ? = spans ( $demo -> tags ) ?> </td>
</ tr >
< ? php endforeach ?>
</ tbody >
</ table >
2010-02-03 09:59:46 +01:00
< p > All content , code , video and audio is < a rel = " license " href = " http://creativecommons.org/licenses/by-sa/2.0/uk/ " > Creative Commons Share Alike 2.0 </ a ></ p >
</ article >
2011-01-17 23:06:05 +01:00
< a id = " html5badge " href = " http://www.w3.org/html/logo/ " >
2011-01-18 13:36:22 +01:00
< img src = " http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png " width = " 325 " height = " 64 " alt = " HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage " title = " HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage " >
2011-01-17 23:06:05 +01:00
</ a >
2010-02-03 09:59:46 +01:00
< footer >< a id = " built " href = " http://twitter.com/rem " >@ rem built this </ a ></ footer >
</ section >
2010-03-05 02:01:13 +01:00
2011-02-22 22:20:55 +01:00
< script src = " http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js " ></ script >
2010-03-05 02:01:13 +01:00
< script >
2011-02-22 22:20:55 +01:00
var tags = [];
2010-10-19 21:07:30 +02:00
$ ( document ) . delegate ( 'span.tag' , 'click' , function () {
var $tag = $ ( this ), tag = $tag . text (), type = $tag . closest ( 'td' ) . attr ( 'class' ) || 'tags' ;
2010-03-05 02:01:13 +01:00
if ( $tag . is ( '.selected' )) {
$ ( '.' + type + ' span:contains(' + tag + ')' ) . removeClass ( 'selected' );
} else {
$ ( '.' + type + ' span:contains(' + tag + ')' ) . addClass ( 'selected' );
}
// it's an AND filter
var $trs = $ ( '.' + type + ':has(span.selected)' ) . closest ( 'tr' );
if ( $trs . length ) {
2010-03-05 11:14:04 +01:00
$ ( 'tbody tr' ) . hide ();
2010-03-05 02:01:13 +01:00
$trs . show ();
} else {
2010-03-05 11:14:04 +01:00
$ ( 'tbody tr' ) . show ();
2011-02-22 22:20:55 +01:00
}
2010-10-19 21:07:30 +02:00
});
var html = [];
$ ( '.tags span.tag' ) . each ( function () {
var $tag = $ ( this ), tag = $tag . text ();
if ( ! tags [ tag ]) {
tags [ tag ] = true ;
html . push ( '<span class="tag">' + tag + '</span> ' );
2010-03-05 02:01:13 +01:00
}
});
2010-10-19 21:07:30 +02:00
$ ( '#tags' ) . append ( '<strong>Filter demos:</strong> ' + html . sort () . join ( '' ));
2011-02-22 22:20:55 +01:00
$ . getJSON ( 'demos.json' , function ( data ) {
var i = data . length , $test ;
while ( i -- ) {
if ( data [ i ] . test && ( new Function ( 'return ' + data [ i ] . test ))()) {
$ ( '#test-' + data [ i ] . url ) . addClass ( 'supported' ) . attr ( 'title' , 'your browser is supported' );
} else if ( data [ i ] . test ) {
$ ( '#test-' + data [ i ] . url ) . addClass ( 'not-supported' ) . attr ( 'title' , 'your browser is NOT supported' );
}
}
});
2010-03-05 02:01:13 +01:00
// $('tr td.demo').click(function () {
// window.location = $(this).find('a').attr('href');
// });
</ script >
2010-02-03 10:03:26 +01:00
< a href = " http://github.com/remy/html5demos " >< img style = " position: absolute; top: 0; left: 0; border: 0; " src = " http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png " alt = " Fork me on GitHub " /></ a >
2010-02-03 09:59:46 +01:00
< script >
var gaJsHost = (( " https: " == document . location . protocol ) ? " https://ssl. " : " http://www. " );
document . write ( unescape ( " %3Cscript src=' " + gaJsHost + " google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E " ));
</ script >
< script >
try {
var pageTracker = _gat . _getTracker ( " UA-1656750-18 " );
pageTracker . _trackPageview ();
} catch ( err ) {} </ script >
</ body >
</ html >