Help xsl formatting help needed

Question

I am creating this http://demo.webdeveloperplus.com/featured-content-slider/, image rotator in where data will be pulled automatically from a custom list.

Need help with markup, as current markup comes up as

<div id="rotate">
    <ul>
<li></li>
<div>One</div>
<li></li>  <div>two</div>

<li></li><div>three</div>
</ul>



    </div>

instead of 

<div id="rotate">
    <ul>
<li></li>
<li></li>
<li></li>
</ul>
  <div>One</div>
 <div>Two</div>
 <div>Three</div>
    </div>

I think I managed to get the markup. Any ideas or comments appreciated.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>
<style>

#featured{ 
    width:400px; 
    padding-right:250px; 
    position:relative; 
    border:5px solid #ccc; 
    height:250px; 
    background:#fff;
}
#featured ul.ui-tabs-nav{ 
    position:absolute; 
    top:0; left:400px; 
    list-style:none; 
    padding:0; margin:0; 
    width:250px; 
}
#featured ul.ui-tabs-nav li{ 
    padding:1px 0; padding-left:13px;  
    font-size:12px; 
    color:#666; 
}
#featured ul.ui-tabs-nav li img{ 
    float:left; margin:2px 5px; 
    background:#fff; 
    padding:2px; 
    border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{ 
    font-size:11px; font-family:Verdana; 
    line-height:18px; 
}
#featured li.ui-tabs-nav-item a{ 
    display:block; 
    height:60px; 
    color:#333;  background:#fff; 
    line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{ 
    background:#f2f2f2; 
}
#featured li.ui-tabs-selected{ 
    background:url('images/selected-item.gif') top left no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
    background:#ccc; 
}
#featured .ui-tabs-panel{ 
    width:400px; height:250px; 
    background:#999; position:relative;
}
#featured .ui-tabs-panel .info{ 
    position:absolute; 
    top:180px; left:0; 
    height:70px; 
    background: url('images/transparent-bg.png'); 
}
#featured .info h2{ 
    font-size:18px; font-family:Georgia, serif; 
    color:#fff; padding:5px; margin:0;
    overflow:hidden; 
}
#featured .info p{ 
    margin:0 5px; 
    font-family:Verdana; font-size:11px; 
    line-height:15px; color:#f0f0f0;
}
#featured .info a{ 
    text-decoration:none; 
    color:#fff; 
}
#featured .info a:hover{ 
    text-decoration:underline; 
}
#featured .ui-tabs-hide{ 
    display:none; 
}

</style>

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
    <xsl:output method="html" indent="no"/>
    <xsl:decimal-format NaN=""/>
    <xsl:param name="dvt_apos">'</xsl:param>
    <xsl:param name="dvt_firstrow">1</xsl:param>
    <xsl:param name="dvt_nextpagedata" />
    <xsl:variable name="dvt_1_automode">0</xsl:variable>

    <xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
        <xsl:call-template name="dvt_1"/>
    </xsl:template>



    <xsl:template name="dvt_1">
        <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
        <xsl:variable name="dvt_RowCount" select="count($Rows)" />
        <xsl:variable name="RowLimit" select="10" />
        <xsl:variable name="FirstRow" select="$dvt_firstrow" />
        <xsl:variable name="LastRow" select="$FirstRow + $dvt_RowCount - 1" />
        <xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />
                <div id="featured">

            <xsl:call-template name="dvt_1.body">
                <xsl:with-param name="Rows" select="$Rows"/>
                <xsl:with-param name="FirstRow" select="1" />
                <xsl:with-param name="LastRow" select="$dvt_RowCount" />
            </xsl:call-template>
                </div>

    </xsl:template>
    <xsl:template name="dvt_1.body">
        <xsl:param name="Rows"/>
        <xsl:param name="FirstRow" />
        <xsl:param name="LastRow" />
    <ul class="ui-tabs-nav">
        <xsl:for-each select="$Rows">
        <xsl:if test="@Active='1' or msxsl:string-compare(string(@Active),'Yes','','i')=0 or msxsl:string-compare(string(@Active),'True','','i')=0">

            <xsl:variable name="dvt_KeepItemsTogether" select="false()" />

                    <xsl:call-template name="dvt_1.rowview" />

            </xsl:if>
        </xsl:for-each>
        </ul>
        <xsl:choose>
<xsl:when test="position()=1">
  <div id="fragment-1" class="ui-tabs-panel" style="">
<img border="0" src="{substring-before(@Image, ', ')}" />
             <div class="info" >
                <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
             </div>
        </div>

</xsl:when>

<xsl:when test="position()=2">
  <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img border="0" src="{substring-before(@Image, ', ')}" />
             <div class="info" >
                <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
                <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
             </div>
        </div></xsl:when>

<xsl:when test="position()=3">
 <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image3.jpg" alt="" />
             <div class="info" >
                <h2><a href="#" >35 Amazing Logo Designs</a></h2>
                <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
             </div>
        </div>





</xsl:when>

<xsl:when test="position()=4">
  <div id="fragment-4{generate-id()}" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image4.jpg" alt="" />
             <div class="info" >
                <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
                <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
             </div>
        </div>


</xsl:when>



</xsl:choose>



    </xsl:template>


    <xsl:template name="dvt_1.rowview">
    <xsl:variable name="myID" select="@ID"></xsl:variable>


<xsl:choose>
<xsl:when test="position()=1">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1" >
<a href="#">
<img border="0" src="{substring-before(@Image, ', ')}" />
<span><xsl:value-of select="@Title"/>
</span></a>
        </li> 


</xsl:when>

<xsl:when test="position()=2">
<li class="ui-tabs-nav-item" id="nav-fragment-2" >
<a href="#">
<img border="0" src="{substring-before(@Image, ', ')}" />
<span><xsl:value-of select="@Title"/>
</span></a>
        </li> 
</xsl:when>

<xsl:when test="position()=3">
<li class="ui-tabs-nav-item" id="nav-fragment-3" >
<a href="#">
<img border="0" src="{substring-before(@Image, ', ')}" />
<span><xsl:value-of select="@Title"/>
</span></a>
        </li> 





</xsl:when>

<xsl:when test="position()=4">
<li class="ui-tabs-nav-item " id="nav-fragment-4{generate-id()}" >
<a href="#">
<img border="0" src="{substring-before(@Image, ', ')}" />
<span><xsl:value-of select="@Title"/>
</span></a>
        </li> 


</xsl:when>



</xsl:choose>



    </xsl:template>





</xsl:stylesheet>   </XSL>

Plz put "I think I managed to get the markup" part as answer as well as any instructions how to use/run it in Sharepoint environment! Thanks
please explain how you solved it. One day, this may be useful for someone else.

Mighty · Answer 1 · 2012-07-05 11:41:16Z

The working version of Itemstyle Template

_blank

<xsl:if test="count(preceding-sibling::*)=0">
  <xsl:text disable-output-escaping="yes"><![CDATA[
  <html>
  <head>
  <script type="text/javascript" src="/Resources/jquery.min.js" ></script>

   </head>

]]>

  <xsl:text disable-output-escaping="yes"><![CDATA[<ul class="ui-tabs-nav">]]></xsl:text>
  <xsl:for-each select="../Row[@Style='Rotate']">
  <xsl:if test="@Active=1">
     <xsl:choose>
      <xsl:when test="position()=1">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1" >
          <a href="{concat('#fragment-',position())}">
            <!--<img border="0" src="{substring-before(@Image, ', ')}" />-->
            <span>
              <xsl:value-of select="@Title"/>
            </span>
          </a>
        </li>
      </xsl:when>
      <xsl:otherwise>
        <li class="ui-tabs-nav-item" id="{concat('nav-fragment-',position())}" >
          <a href="{concat('#fragment-',position())}">
          <!--  <img border="0" src="{substring-before(@Image, ', ')}" />-->
            <span>
              <xsl:value-of select="@Title"/>
            </span>
          </a>
        </li>
      </xsl:otherwise>
    </xsl:choose>

]]>

    <xsl:choose>
      <xsl:when test="position()=1">
        <div id="{concat('fragment-',position())}" class="ui-tabs-panel" style="">
          <img border="0" src="{substring-before(@Image, ', ')}" />
          <div class="info" >
            <h2>
              <a href="{substring-after(@Link, ',')}" >
                <xsl:value-of select="substring-after(@Link, ',')" disable-output-escaping="yes"></xsl:value-of>
              </a>
            </h2>
            <p>
              <xsl:value-of select="@Title" disable-output-escaping="yes"/>
              <a href="#" >
                <div>read more</div>
              </a>
            </p>
          </div>
        </div>
      </xsl:when>
      <xsl:otherwise>
        <div id="{concat('fragment-',position())}" class="ui-tabs-panel ui-tabs-hide" style="">
          <img border="0" src="{substring-before(@Image, ', ')}" />
          <div class="info" >
            <h2>
              <a href="{substring-after(@Link, ',')}" >
                <xsl:value-of select="substring-after(@Link, ',')" disable-output-escaping="yes"></xsl:value-of>
              </a>
            </h2>
            <p>
              <xsl:value-of select="@Title" disable-output-escaping="yes"></xsl:value-of>
              <a href="#" >
                <div>read more</div>
              </a>
            </p>
          </div>
        </div>
      </xsl:otherwise>
    </xsl:choose>
     </xsl:if>
  </xsl:for-each>
  <xsl:text disable-output-escaping="yes"><![CDATA[</div></body></html>]]></xsl:text>
</xsl:if>

asked	11 months ago
viewed	758 times
active	12 days ago

Help xsl formatting help needed

1 Answer

Your Answer

Not the answer you're looking for? Browse other questions tagged sharepoint-designer data-view-web-part content-query-web-part xslt or ask your own question.

Help xsl formatting help needed

1 Answer

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged sharepoint-designer data-view-web-part content-query-web-part xslt or ask your own question.

Related