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. 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 Added to page header that contains CQWP:
2-Added Added link reference to master page head:
3-Modified itmestyle Modified itemstyle:
4-Modifed 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:
5-Finally Finally create template ticker:
<xsl:template name="ticker" match="Row[@Style='ticker']" mode="itemstyle"> <xsl:param name="CurPos" />
<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"><uljs">
<ul id="js-news" class="js-hidden"></ul></div>ul>
</div>
</xsl:if>
<div class='ticker-news-item' ><a>
<a href='{$SafeLinkUrl}' target='_blank'><xsltarget='_blank'>
<xsl:value-of select="@Title" /><>
</a><a>
</div>
</xsl:template>
</xsl:template>
6-Apply Apply this template on CQWP:
