Can't Design Content Query Web Part JavaScript News Ticker

Question

I created a news list in SharePoint 2010 that shows news on the home page just like a news ticker with JavaScript. I used a content query web part to show news. This article is so useful, but doesn't work. Maybe I'm wrong.

I modified page.aspx containing CQWP, ItemStyle.aspx, and ContentQueryMain.aspx in SharePoint Designer 2010. I downloaded JavaScript news ticker and uploaded it to the All Files folder. I did these steps to show news:

1- Added to page header that contains CQWP:

<link href="css/ticker-style.css" rel="stylesheet" type="text/css" />
<script src="jquery.ticker.js" type="text/javascript"></script>

2- Added link reference to master page head:

<script type="text/javascript" src="../../jquery_news_ticker/includes/jquery.ticker.js"></script>
<script type="text/css" src="../../jquery_news_ticker/styles/ticker-style.css"></script>

3- Modified itemstyle:

<xsl:template name="simpleRowAndTitle" match="Row[@Style='simpleRowAndTitle']" mode="itemstyle">
    <xsl:param name="CurPos" />    
    <div class="item">    
        <span><xsl:value-of select="$CurPos" /></span> 
        <xsl:value-of select="@Title"/>        
    </div>
</xsl:template>

4- Modifed ContentByQueryMain.xsl:

In ContentByQueryMain.xsl search for the template "OuterTemplate.CallItemTemplate". This should contain an xsl choose statement. Find the "otherwise" part that looks similar to the below block:

<xsl:otherwise>
    <xsl:apply-templates select="." mode="itemstyle">
        <xsl:with-param name="CurPos" select="$CurPosition" />
    </xsl:apply-templates>
</xsl:otherwise>

5- Finally create template ticker:

<xsl:template name="ticker" match="Row[@Style='ticker']" mode="itemstyle">
    <xsl:param name="CurPos" />

    <xsl:variable name="SafeLinkUrl">
        <xsl:call-template name="OuterTemplate.GetSafeLink">
            <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
        </xsl:call-template>
    </xsl:variable> 

    <xsl:if test="$CurPos='1' ">    
        <xsl:variable name="JScript">
            <![CDATA[
                $(document).ready(function(){

                    $('.ticker-news-item').each(function(){
                        var newItemString = "<li class='news-item'>" + $(this).html()+ "</li>";
                        $('#js-news').append(newItemString);
                        $(this).remove();
                    }); 

                    $('#js-news').ticker({ });
                });
            ]]>
        </xsl:variable> 

        <script type='text/javascript'>
            <xsl:value-of select="$JScript" disable-output-escaping="yes"/>
        </script>
        <div id="ticker-wrapper" class="no-js">
            <ul id="js-news" class="js-hidden"></ul>
        </div>

    </xsl:if>

    <div class='ticker-news-item' >
        <a href='{$SafeLinkUrl}' target='_blank'>
            <xsl:value-of select="@Title" />
        </a>
    </div>  
</xsl:template>

6- Apply this template on CQWP:

After these steps nothing changes.

Answer 1

Check that the CSS and JS files are actually loaded in the page. Use the F12 Developer Tools in IE to see that.

Some of the references are using a path relative to the current page. ../../. Check that these get resolved correctly from the position of the page, or better yet, use references relative to the web application /path/site/library/file.

Check that all files involved (i.e. .CSS, .JS, .XSL) are checked in and published as major versions.

After that is established and the issue persists, start troubleshooting one file at a time. Omit CSS and JS files and make sure the CQWP renders the correct DOM elements. Once that is running, make sure the JS manipulations are correct. After that is working, finally, apply the custom CSS.