Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

So if I create a custom cqwp (by that I simply mean customizing the view by adding fields to webpart and modifying the xslt in itemstyle), can I apply jquery after the fact to limit the size the webpart uses on the page, and make all content scrollable?

Basically I made a custom view for cqwp that rolls up blog posts, so it will just list one after another. I want many posts displayed because there are a ton, but the page ends up being very very long this way. So is there some jquery I could apply to this webpart that limits it to a specific size and adds a vertical scroll bar?

Thanks as always with helping a beginner!

share|improve this question
add comment

2 Answers 2

up vote 2 down vote accepted

Yes you can. This is done easily by adding the jQuery snippet to the first item the XSLT spews out only.

In your ContentQueryMain.xslt find the template OuterTemplate.CallItemTemplate. It has a <xsl:choose> going on in it. In the <xsl:otherwise> clauss add the following:

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

Go to your ItemStyle.xslt and in that either create a new or modify a current template and add this:

<xsl:param name="CurPos"/>

right under

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

So you should have something like this:

<xsl:template name="MyTemplate" match="Row[@Style='MyTemplate']" mode="itemstyle">
    <xsl:param name="CurPos"/>
    // Rest of your template structure here
</xsl:template>

Within this template add the following:

<xsl:if test="$CurPos = 1">
<xsl:comment>
    <![CDATA[
      $(document).ready( function() {
         // your logic to add css etc. to surrounding container here
      });
    ]]>
  </xsl:comment>
</xsl:if>

So your end result should be something like this:

<xsl:template name="MyTemplate" match="Row[@Style='MyTemplate']" mode="itemstyle">
    <xsl:param name="CurPos"/>
    <xsl:if test="$CurPos = 1">
        <xsl:comment>
            <![CDATA[
              $(document).ready( function() {
                 // your logic to add css etc. to surrounding container here
              });
            ]]>
        </xsl:comment>
    </xsl:if>
    // Rest of your template structure here
</xsl:template>

Hope this helps :)

share|improve this answer
    
thanks very much for all the info! helped me greatly –  Justin Aug 4 '12 at 10:32
add comment

In theory yes, if you can get the CQWP to output the required HTML for the jquery libraries to operate properly. If you can't, then you'll have to write something from scratch to do it.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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