0

I need help in creating tickers news so far what I had done is like below This is the result i get, what i wanted it to be is to show only in one single line

im using itemstyle template for content query.

 <xsl:template name="MarqueeTitleOnly" match="Row[@Style='MarqueeTitleOnly']" mode="itemstyle">

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

<div class="item link-item">
  <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
  <a href="{$SafeLinkUrl}" title="{@LinkToolTip}">
    <xsl:if test="$ItemsHaveStreams = 'True'">
      <xsl:attribute name="onclick">
        <div style="color: red; font-size: 14pt;">
          <xsl:value-of select="@OnClickForWebRendering"/>
        </div>
      </xsl:attribute>
    </xsl:if>
    <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
      <xsl:attribute name="onclick">
        <div style="color: red; font-size: 14pt;">
          <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
        </div >
      </xsl:attribute>
    </xsl:if>
    <div style="color: #1ca1ab; font-family: DIN-Round; font-size: 12pt;">    
      <marquee direction="left" behavior="scroll" scrolldelay="1" scrollamount="3" style="background: #F5F5F5;white-space:nowrap;overflow:hidden">
        <xsl:value-of select="$DisplayTitle" />
      </marquee >
    </div>
  </a>
</div>

im a complete newbie in sharepoint and i dont know what to do for it to only marquee all the list item in only one single line so it can behave like ticker news. I would be appreciate if you could help me with this.

7
  • you need to wrap your marquee above the div which is being created for each list item...and also replace the div css class which is causing each list item to be displayed in new line... Dec 6, 2016 at 4:36
  • @SiddharthVaghasia could you show me some example to follow? i kind of get what you trying to say but i dont know where to start without an example. thank you for your respond.
    – Blazeous
    Dec 6, 2016 at 5:31
  • please help me on this. I have been doing this for weeks still no solution.
    – Blazeous
    Dec 6, 2016 at 7:59
  • Can you upload your whole xslt somewhere...i can try.. Dec 6, 2016 at 9:03
  • @SiddharthVaghasia thats was the whole code for making the list item move.. i miss the part </xsl:template> at the bottom..
    – Blazeous
    Dec 6, 2016 at 13:52

1 Answer 1

0

I tried to replicate your functionality with Content Query webpart, this seems to be more complex with XSLT approach. Below are reason

  1. ItemStyle.xsl is called for each row, hence we need to tweak login her to start marquee which first row is being rendered and close marquee when last marquee is being rendered. But this might not work because for each row is rendered inside li and li will be closed before marquee is being closed and this will invalid html structure.

  2. We need to tweak ContentQueryMain.xsl. this you have to do it before below line. but this change will make generic change to all the content query webpart. to make it just for your this instance you need to match your match="Row[@Style='MarqueeTitleOnly']" . But you might not get style value here...

    < xsl:for-each select="$Rows"> .....

                < xsl:call-template name="OuterTemplate.CallItemTemplate">
                        < /xsl:call-template>
    

though it is possible with XSLT, but it would require a good amount of time to make it happen. so I am proposing an alternate solution to achieve this by using client object model.

  1. add content editor webpart, create a empty div container

  2. Write and include in content editor Javacript to get list items from News List.(you can either use SPServices or rest api) below example is for spservices.

        $(document).ready(function () {   $().SPServices({
                             operation: "GetListItems",
                             async: false,
                             listName: "News",
                             CAMLQuery: "<Query></Query>", //you can modifiy query according to filter you equire
                             CAMLViewFields: "<ViewFields><FieldRef Name='ID' /><FieldRef Name='Title' /></ViewFields>",            
                             completefunc: function (xData, Status) {
                                 $(xData.responseXML).SPFilterNode("z:row").each(function () {
                                    $(".news-ticker").append("<span>" + $(this).attr("Title")+ "</span>")
    
                                });
                             }
                         });
    
                         });
    

Note - above code is not tested but it should work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.