We have a set of data we want to navigate through, the content will remain static so the dynamic portion of it will be religated to an xml file using an xsl template then being processed by a php page...
I have valid xml, xsl and php - but - I'm not sure what the best practice would be navigating from, say "step 1" to "step 2"... Should I be using a javascript function? should I be using an XSL function? Is there an XSL function?
Any help would be kick ass!
Here's my details below...
xml
<?xml version="1.0" encoding="UTF-8"?>
<main mainname="Main Name">
<chapter chapterid="1" chaptername="Chapter 1">
<step stepid="1" stepname="Step 1" layout="content-pad">
<title>Title</title>
<subtitle>Sub Title</subtitle>
<content contenttitle="content title">
<text>This is the text area</text>
<flash>/path/to/flash/movie.flv</flash>
<transcripts>/path/to/transcripts.txt</transcripts>
<image>/path/to/image.png</image>
<main_options>
<video img="video-over.png" link="video.php" />
<audio img="audio-over.png" link="audio.php" />
<print img="print-over.png" link="print.php" />
<document img="document-over.png" link="document.php" />
<pdf img="pdf-over.png" link="pdf.php" />
<print img="print-over.png" link="pdf.php" />
<stats img="stats-over.png" link="stats.php" />
</main_options>
</content>
</step>
<step stepid="2" stepname="Step 2" layout="padwide">
<title>Title</title>
<subtitle>Sub Title</subtitle>
<content contenttitle="content title">
<text>This is the text area</text>
<flash>/path/to/flash/movie.flv</flash>
<transcripts>/path/to/transcripts.txt</transcripts>
<image>/path/to/image.png</image>
<main_options>
<video img="video-over.png" link="video.php" />
<audio img="audio-over.png" link="audio.php" />
<print img="print-over.png" link="print.php" />
<document img="document-over.png" link="document.php" />
<pdf img="pdf-over.png" link="pdf.php" />
<print img="print-over.png" link="pdf.php" />
<stats img="stats-over.png" link="stats.php" />
</main_options>
</content>
</step>
<step stepid="3" stepname="Step 3" layout="content-pad">
<title>Title</title>
<subtitle>Sub Title</subtitle>
<content contenttitle="content title">
<text>This is the text area</text>
<flash>/path/to/flash/movie.flv</flash>
<transcripts>/path/to/transcripts.txt</transcripts>
<image>/path/to/image.png</image>
<main_options>
<video img="video-over.png" link="video.php" />
<audio img="audio-over.png" link="audio.php" />
<print img="print-over.png" link="print.php" />
<document img="document-over.png" link="document.php" />
<pdf img="pdf-over.png" link="pdf.php" />
<print img="print-over.png" link="pdf.php" />
<stats img="stats-over.png" link="stats.php" />
</main_options>
</content>
</step>
</chapter>
<chapter chapterid="2" chaptername="Chapter 2">
<step stepid="1" stepname="Step 1" layout="content-pad">
<title>Title</title>
<subtitle>Sub Title</subtitle>
<content contenttitle="content title">
<text>This is the text area</text>
<flash>/path/to/flash/movie.flv</flash>
<transcripts>/path/to/transcripts.txt</transcripts>
<image>/path/to/image.png</image>
<main_options>
<video img="video-over.png" link="video.php" />
<audio img="audio-over.png" link="audio.php" />
<print img="print-over.png" link="print.php" />
<document img="document-over.png" link="document.php" />
<pdf img="pdf-over.png" link="pdf.php" />
<print img="print-over.png" link="pdf.php" />
<stats img="stats-over.png" link="stats.php" />
</main_options>
</content>
</step>
<step stepid="2" stepname="Step 2" layout="padwide">
<title>Title</title>
<subtitle>Sub Title</subtitle>
<content contenttitle="content title">
<text>This is the text area</text>
<flash>/path/to/flash/movie.flv</flash>
<transcripts>/path/to/transcripts.txt</transcripts>
<image>/path/to/image.png</image>
<main_options>
<video img="video-over.png" link="video.php" />
<audio img="audio-over.png" link="audio.php" />
<print img="print-over.png" link="print.php" />
<document img="document-over.png" link="document.php" />
<pdf img="pdf-over.png" link="pdf.php" />
<print img="print-over.png" link="pdf.php" />
<stats img="stats-over.png" link="stats.php" />
</main_options>
</content>
</step>
<step stepid="3" stepname="Step 3" layout="content-pad">
<title>Title</title>
<subtitle>Sub Title</subtitle>
<content contenttitle="content title">
<text>This is the text area</text>
<flash>/path/to/flash/movie.flv</flash>
<transcripts>/path/to/transcripts.txt</transcripts>
<image>/path/to/image.png</image>
<main_options>
<video img="video-over.png" link="video.php" />
<audio img="audio-over.png" link="audio.php" />
<print img="print-over.png" link="print.php" />
<document img="document-over.png" link="document.php" />
<pdf img="pdf-over.png" link="pdf.php" />
<print img="print-over.png" link="pdf.php" />
<stats img="stats-over.png" link="stats.php" />
</main_options>
</content>
</step>
</chapter>
</main>xsl
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp " ">
<!ENTITY copy "©">
<!ENTITY reg "®">
<!ENTITY trade "™">
<!ENTITY mdash "—">
<!ENTITY ldquo "“">
<!ENTITY rdquo "”">
<!ENTITY pound "£">
<!ENTITY yen "¥">
<!ENTITY euro "€">
]>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>emod skin | V2.1</title>
<link rel="stylesheet" type="text/css" href="assets/css/main.css" />
<link rel="stylesheet" type="text/css" href="assets/css/colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/scripts/swfobject.js"></script>
<script type="text/javascript" src="assets/scripts/jquery.colorbox.js"></script>
<script type="text/javascript" src="assets/scripts/jquery.pngFix.js"></script>
<script type="text/javascript" src="assets/scripts/jquery.tooltip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
$(".pu-video").colorbox({width:"400px", height:"400px", iframe:true});
$(".pu-audio").colorbox({width:"400px", height:"400px", iframe:true});
$(".pu-graphics").colorbox({width:"400px", height:"400px", iframe:true});
$(".pu-doc").colorbox({width:"400px", height:"400px", iframe:true});
$(".pu-stats").colorbox({width:"400px", height:"400px", iframe:true});
$(".pu-pdf").colorbox({width:"400px", height:"400px", iframe:true});
$(".pu-print").colorbox({width:"400px", height:"400px", iframe:true});
$(".pu-help").colorbox({width:"400px", height:"400px", iframe:true});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="toptext"><xsl:value-of disable-output-escaping="yes" select="main/@mainname" /></div>
<div id="help">
<a href="" class="tooltip pu-help" title="Need Help?"><img align="right" src="assets/images/EMOD_help.png" width="22" height="22" /></a>
</div>
<br clear="all" />
<div id="textarea-sm"><xsl:value-of disable-output-escaping="yes" select="main/chapter/@chaptername" /></div>
</div>
<div id="content">
<xsl:choose>
<xsl:when test="main/chapter/step/@layout = content-pad">
<div id="content-pad">
<h3><xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/@contenttitle" /></h3>
<p id="content-text">
<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/text" />
</p>
</div>
<div id="media">
<div id="mediaspace">
Fortunately, you need a new version of the flash player...<br />
<a href="http://get.adobe.com/flashplayer/">Click here to download the player</a>
</div>
<script type='text/javascript'>
var so = new SWFObject('assets/flash/player.swf','mpl','390','293','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/flash" />');
so.addVariable('autostart','false');
so.write('mediaspace');
</script>
</div>
<div id="transcripts">
<table width="384" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" style="font-size:11px; padding:2px 4px 4px 4px;">
<div id="popuparea">
<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/transcripts" />
</div>
</td>
</tr>
</table>
</div>
</xsl:when>
<xsl:otherwise>
<div id="widepad">
<h3><xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/@contenttitle" /></h3>
<p id="content-text">
<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/text" />
</p>
</div>
</xsl:otherwise>
</xsl:choose>
</div>
<div id="footer">
<table width="800">
<tr>
<td width="388" align="center" height="46" style="padding:5px 0 0 0;">
<div id="main-nav">
<table width="130" cellpadding="3" cellspacing="3" height="46" id="footer-nav-radius">
<tr>
<td width="32" height="32" align="center" style="padding-left:4px;">
<a href="#" class="tooltip" title="Back to the Beginning"><img align="absmiddle" src="assets/images/buttons/nav_lfx2.png" /></a>
</td>
<td width="32" height="32" align="center">
<a href="" class="tooltip" title="Previous"><img align="absmiddle" src="assets/images/buttons/nav_lf.png" alt="Back" /></a>
</td>
<td width="32" height="32" align="center">
<a href="" class="tooltip" title="Next"><img align="absmiddle" src="assets/images/buttons/nav_rt.png" alt="Forward" /></a>
</td>
</tr>
</table>
</div>
</td>
<td width="400" align="center" style="padding:5px 0 0 0;">
<div id="main-options">
<table width="292" cellspacing="3" cellpadding="3" height="46" id="footer-nav-radius">
<tr>
<td width="32" height="32" align="center" style="padding-left:4px;">
<a href="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/video/@link" />" class="tooltip pu-video" title="Video"><img src="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/video/@link" />" border="0" align="absmiddle" /></a>
</td>
<td width="32" height="32" align="center">
<a href="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/audio/@link" />" class="tooltip pu-video" title="Video"><img src="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/audio/@link" />" border="0" align="absmiddle" /></a>
</td>
<td width="32" height="32" align="center">
<a href="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/graphics/@link" />" class="tooltip pu-video" title="Video"><img src="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/graphics/@link" />" border="0" align="absmiddle" /></a>
</td>
<td width="32" height="32" align="center">
<a href="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/document/@link" />" class="tooltip pu-video" title="Video"><img src="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/document/@link" />" border="0" align="absmiddle" /></a>
</td>
<td width="32" height="32" align="center">
<a href="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/stats/@link" />" class="tooltip pu-video" title="Video"><img src="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/stats/@link" />" border="0" align="absmiddle" /></a>
</td>
<td width="32" height="32" align="center">
<a href="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/pdf/@link" />" class="tooltip pu-video" title="Video"><img src="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/pdf/@link" />" border="0" align="absmiddle" /></a>
</td>
<td width="32" height="32" align="center">
<a href="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/print/@link" />" class="tooltip pu-video" title="Video"><img src="<xsl:value-of disable-output-escaping="yes" select="main/chapter/step/content/main_options/print/@link" />" border="0" align="absmiddle" /></a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>php
<?php
error_reporting(E_ALL);
ini_set('display_errors','on');
?>
<?php
$xslDoc = new DOMDocument();
$xslDoc->load("xsl.xsl");
$xmlDoc = new DOMDocument();
$xmlDoc->load("xml.xml");
$proc = new XSLTProcessor();
$proc->importStylesheet($xslDoc);
echo $proc->transformToXML($xmlDoc);
?>Thanks!
Ted