So I'm attempting to implement this javascript XML php driven testimonial feature into my website.The problem is: its not scrolling. The tutorial is not very good but it gives you all of the code and I was wondering if any of you could point out why it is not working for me. Do I need anything in particular to be installed on the server for it to work? Here is the tutorial's link:http://tutorialzine.com/2010/12/client-testimonials-xml-php-jquery/Here is all of my code.index.php\[code\]<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Client Testimonials Powered by PHP and XML | Tutorialzine Demo</title><link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/15466681/css/styles.css" /></head><body><div id="page"> <div id="topBar"> <div id="logo"> </div> <ul id="navigation"> <li><a href="http://stackoverflow.com/questions/15466681/#">Home</a></li> <li><a href="http://stackoverflow.com/questions/15466681/#">About</a></li> <li><a href="http://stackoverflow.com/questions/15466681/#">Buy Now!</a></li> </ul> </div> <div id="iPhone"> <p>Our new awesome iPhone App is available on the appstore.</p> </div> <div id="testimonials"> <ul> <?php $xmlFile = 'xml/testimonials.xml'; $xslFile = 'xml/transform.xml'; $doc = new DOMDocument(); $xsl = new XSLTProcessor(); $doc->load($xslFile); $xsl->importStyleSheet($doc); $doc->load($xmlFile); echo $xsl->transformToXML($doc); ?> </ul> </div></div><!-- You are free to remove this footer --><div id="footer"> <div class="tri"></div> <h1>Client Testimonials Powered by PHP and XML</h1> <a class="tzine" href="http://tutorialzine.com/2010/12/client-testimonials-xml-php-jquery/">Read & Download on</a></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script src="http://stackoverflow.com/questions/15466681/js/script.js"></script></body></html>\[/code\]transform.xml \[code\]<?xml version="1.0" encoding="utf-8"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl
utput method="html" encoding="utf-8" indent="no"/><xsl:template match="/testimonials"> <xsl:for-each select="item"> <li> <p class="text"> <xsl:value-of select="content"/> </p> <p class="author"> <xsl:value-of select="author-name"/> <xsl:if test="author-url != '' "> <xsl:value-of select="', '"/> <a> <xsl:attribute name="href"> <xsl:value-of select="concat('http://',author-url)"/> </xsl:attribute> <xsl:value-of select="author-url"/> </a> </xsl:if> </p> </li> </xsl:for-each></xsl:template></xsl:stylesheet>\[/code\]Testimonials \[code\]<?xml version="1.0" encoding="utf-8"?><testimonials> <item> <content>This has to be the most awesome app I've ever used!</content> <author-name>John Doe</author-name> <author-url>jdoe.com</author-url> </item> <item> <content>Simply amazing! It solved my problem. I highly recommend it.</content> <author-name>John Smith</author-name> <author-url>smith.com</author-url> </item> <item> <content>A tremendous success. It is like walking on sunshine compared to its competitors.</content> <author-name>John Smith</author-name> </item></testimonials>\[/code\]script.js $(document).ready(function(){\[code\] // Hiding all the testimonials, except for the first one. $('#testimonials li').hide().eq(0).show(); // A self executing function that loops through the testimonials: (function showNextTestimonial(){ // Wait for 7.5 seconds and hide the currently visible testimonial: $('#testimonials li:visible').delay(7500).fadeOut('slow',function(){ // Move it to the back: $(this).appendTo('#testimonials ul'); // Show the next testimonial: $('#testimonials li:first').fadeIn('slow',function(){ // Call the function again: showNextTestimonial(); }); }); })();\[/code\]and my css, I intend to only take out the php part and implement it into my own design.\[code\]*{ margin:0; padding:0;}html{ background:url('../img/html_bg.jpg') repeat #dbdbdb;}body{ color:#8b8b8b; background:url('../img/body_bg.jpg') repeat-x; background:url('../img/top_bg.jpg') no-repeat center top, url('../img/body_bg.jpg') repeat-x; font:15px Corbel,Arial,sans-serif; border:1px solid transparent;}#page{ width:800px; margin: 0 auto 120px;}#topBar{ height:62px; position:relative;}#logo{ width:194px; height:62px; position:absolute; top:0; left:0; background:url('../img/logo.jpg') no-repeat;}#navigation{ position:absolute; list-style:none; right:0; top:15px;}#navigation li{ display:inline;}#navigation li a{ text-decoration:none; font-weight:bold; float:left; padding:10px; margin-right:10px; font-size: 17px;}#iPhone{ height:400px; margin:60px auto 0; background:url('../img/iPhone.png') no-repeat;}#iPhone p{ display:none;}#testimonials{ width: 375px; padding: 45px 45px 35px 90px; background:url('../img/quotes.png') no-repeat 20px 20px rgba(178,178,169,0.2); min-height:90px; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;}#testimonials li{ display:none;}#testimonials li:first-child{ display:block;}#testimonials ul{ list-style:none;}#testimonials p.text{ font-size:24px;}#testimonials p.author{ color: #878787; font-size: 16px; font-style: italic; text-align: right; margin-top:10px;}#testimonials p.author a,#testimonials p.author a:visited{ color:#6aa42a;}/* General styles */#footer{ background-color:#212121; position:fixed; width:100%; height:70px; bottom:0; left:0;}#footer .tri{ border-color:transparent transparent #212121; border-style:solid; border-width:20px 17px; height:0; left:50%; margin:-40px 0 0 -400px; position:absolute; top:0; width:0;}#footer h1{ font-size:20px; font-weight:normal; left:50%; margin-left:-400px; padding:25px 0; position:absolute; width:400px;}#footer a.tzine,a.tzine:visited{ background:url("../img/tzine.png") no-repeat right top; border:none; text-decoration:none; color:#FCFCFC; font-size:12px; height:70px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0; width:290px;}a, a:visited { text-decoration:underline; outline:none; color:#8e8e7d;}a:hover{ text-decoration:none; color:#707062;}\[/code\]
utput method="html" encoding="utf-8" indent="no"/><xsl:template match="/testimonials"> <xsl:for-each select="item"> <li> <p class="text"> <xsl:value-of select="content"/> </p> <p class="author"> <xsl:value-of select="author-name"/> <xsl:if test="author-url != '' "> <xsl:value-of select="', '"/> <a> <xsl:attribute name="href"> <xsl:value-of select="concat('http://',author-url)"/> </xsl:attribute> <xsl:value-of select="author-url"/> </a> </xsl:if> </p> </li> </xsl:for-each></xsl:template></xsl:stylesheet>\[/code\]Testimonials \[code\]<?xml version="1.0" encoding="utf-8"?><testimonials> <item> <content>This has to be the most awesome app I've ever used!</content> <author-name>John Doe</author-name> <author-url>jdoe.com</author-url> </item> <item> <content>Simply amazing! It solved my problem. I highly recommend it.</content> <author-name>John Smith</author-name> <author-url>smith.com</author-url> </item> <item> <content>A tremendous success. It is like walking on sunshine compared to its competitors.</content> <author-name>John Smith</author-name> </item></testimonials>\[/code\]script.js $(document).ready(function(){\[code\] // Hiding all the testimonials, except for the first one. $('#testimonials li').hide().eq(0).show(); // A self executing function that loops through the testimonials: (function showNextTestimonial(){ // Wait for 7.5 seconds and hide the currently visible testimonial: $('#testimonials li:visible').delay(7500).fadeOut('slow',function(){ // Move it to the back: $(this).appendTo('#testimonials ul'); // Show the next testimonial: $('#testimonials li:first').fadeIn('slow',function(){ // Call the function again: showNextTestimonial(); }); }); })();\[/code\]and my css, I intend to only take out the php part and implement it into my own design.\[code\]*{ margin:0; padding:0;}html{ background:url('../img/html_bg.jpg') repeat #dbdbdb;}body{ color:#8b8b8b; background:url('../img/body_bg.jpg') repeat-x; background:url('../img/top_bg.jpg') no-repeat center top, url('../img/body_bg.jpg') repeat-x; font:15px Corbel,Arial,sans-serif; border:1px solid transparent;}#page{ width:800px; margin: 0 auto 120px;}#topBar{ height:62px; position:relative;}#logo{ width:194px; height:62px; position:absolute; top:0; left:0; background:url('../img/logo.jpg') no-repeat;}#navigation{ position:absolute; list-style:none; right:0; top:15px;}#navigation li{ display:inline;}#navigation li a{ text-decoration:none; font-weight:bold; float:left; padding:10px; margin-right:10px; font-size: 17px;}#iPhone{ height:400px; margin:60px auto 0; background:url('../img/iPhone.png') no-repeat;}#iPhone p{ display:none;}#testimonials{ width: 375px; padding: 45px 45px 35px 90px; background:url('../img/quotes.png') no-repeat 20px 20px rgba(178,178,169,0.2); min-height:90px; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;}#testimonials li{ display:none;}#testimonials li:first-child{ display:block;}#testimonials ul{ list-style:none;}#testimonials p.text{ font-size:24px;}#testimonials p.author{ color: #878787; font-size: 16px; font-style: italic; text-align: right; margin-top:10px;}#testimonials p.author a,#testimonials p.author a:visited{ color:#6aa42a;}/* General styles */#footer{ background-color:#212121; position:fixed; width:100%; height:70px; bottom:0; left:0;}#footer .tri{ border-color:transparent transparent #212121; border-style:solid; border-width:20px 17px; height:0; left:50%; margin:-40px 0 0 -400px; position:absolute; top:0; width:0;}#footer h1{ font-size:20px; font-weight:normal; left:50%; margin-left:-400px; padding:25px 0; position:absolute; width:400px;}#footer a.tzine,a.tzine:visited{ background:url("../img/tzine.png") no-repeat right top; border:none; text-decoration:none; color:#FCFCFC; font-size:12px; height:70px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0; width:290px;}a, a:visited { text-decoration:underline; outline:none; color:#8e8e7d;}a:hover{ text-decoration:none; color:#707062;}\[/code\]