Two-column list using XSLT

I am seeking assistance with xsl transformation. The xml generated by SharePoint Server control is as follows:

<rows>
    <row>A</row>
    <row>B</row>
    <row>C</row>
    <row>D</row>
    <row>E</row>
    <row>F</row>
    <row>G</row>
    <row>H</row>
</rows>

The required transformation of the above xml is as shown below:

  <==  A-----------B  ==> An li sliding back and forth with the help of a slider plugin
       C-----------D
       E-----------F
       G-----------H

JUST LIKE THIS: https://i.sstatic.net/XTho5.png
(source: imagesup.net)

The necessary HTML format for the slider plugin to function correctly is as follows:

<div class="content-carousel">
<!-- start Basic Jquery Slider -->
        <ul class="bjqs">
          <li>
              <div class="content-left">
               <h4>A</h4>
               </div>
              <div class="content-right">
               <h4>B</h4>
               </div>
          </li>
        <li>
              <div class="content-left">
               <h4>C</h4>
               </div>
              <div class="content-right">
               <h4>D</h4>
               </div>
          </li>
          .
          .
        </ul>
</div>

Here is the actual raw XML file: https://gist.github.com/4380967

Check out the bjqs slider plugin requirement here: https://i.sstatic.net/0YqZq.png
(source: imagesup.net)

CURRENT PROGRESS: Although I have managed to achieve a two-column layout, it involves using table rows which generates unnecessary markup that is not suitable for the slider plugin. Here's what I have done for each row:

 <xsl:if test="$CurPos = 1 ">
    <xsl:text disable-output-escaping="yes">&lt;div&gt;&lt;table&gt;</xsl:text>
  </xsl:if>
  <xsl:if test="$CurPos mod 2 = 1">
    <xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
  </xsl:if> 
 
<li>
  <td width="50%" valign="top">
    <table width="90%">
      <tr height="35px" min-height="35px" valign="top">
        <td>
          <span>
            <xsl:if test="string-length($SafeImageUrl) != 0">
              <div class="image-area-left">
                <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
                  <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
                </a>
              </div>
            </xsl:if>
            
            <H3>
                <a href="{$SafeLinkUrl}"> <xsl:value-of select="@Title"/> </a>
            </H3>
            <div class="newsgist"><xsl:value-of select="substring(@Comments,0,200)"/>
                <xsl:if test="string-length(@Comments) &gt; 200">…</xsl:if>         <a href="{$SafeLinkUrl}"> Details…</a>  
            </div>
          </span> 
        </td>
      </tr>
 
    </table>
  </td></li>
 
  <xsl:if test="$CurPos mod 2 = 0">
    <xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
  </xsl:if>
  <xsl:if test="$CurPos = $LastRow ">
    <xsl:text disable-output-escaping="yes">&lt;/table&gt;&lt;/div&gt;</xsl:text>

Answer №1

Application:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

 <xsl:template match="/*">
     <div class="content-carousel">
     <ul class="bjqs">
      <xsl:apply-templates select="*[position() mod 2 =1]"/>
     </ul>
   </div>
 </xsl:template>

 <xsl:template match="row">
   <li>
     <div class="content-left">
        <h4><xsl:value-of select="."/></h4>
     </div>
       <div class="content-right">
         <h4><xsl:value-of select="following-sibling::*[1]"/></h4>
       </div>
  </li>
 </xsl:template>
</xsl:stylesheet>

Upon applying this transformation to the given XML document:

<rows>
    <row>A</row>
    <row>B</row>
    <row>C</row>
    <row>D</row>
    <row>E</row>
    <row>F</row>
    <row>G</row>
    <row>H</row>
</rows>

The desired output is obtained:

<div class="content-carousel">
   <ul class="bjqs">
      <li>
         <div class="content-left">
            <h4>A</h4>
         </div>
         <div class="content-right">
            <h4>B</h4>
         </div>
      </li>
      <li>
         <div class="content-left">
            <h4>C</h4>
         </div>
         <div class="content-right">
            <h4>D</h4>
         </div>
      </li>
      <li>
         <div class="content-left">
            <h4>E</h4>
         </div>
         <div class="content-right">
            <h4>F</h4>
         </div>
      </li>
      <li>
         <div class="content-left">
            <h4>G</h4>
         </div>
         <div class="content-right">
            <h4>H</h4>
         </div>
      </li>
   </ul>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access-Control-Allow-Headers does not allow the use of X-Requested-With

I'm currently working on a system that includes an add item to cart feature. This functionality involves using Jquery's $.ajax method. However, I've encountered an error when attempting to access the online server - "XMLHttpRequest canno ...

Tips for displaying information in an Autosearch feature

I am trying to implement an auto search feature using AJAX calls, but I am facing difficulties in displaying the results on the search bar. The search results are showing up properly elsewhere. <input type="text" id="select_link" placeholder="enter th ...

Angular UI grid: Arranging numbers in a straight line at the decimal point

I am interested in aligning decimal numbers in Angular UI Grid as shown below. 11.293 .89 233424 .34345 I have considered different approaches such as using a cell template with aligned divs or transparent 0s. Has anyone successfully imp ...

Grid layout showcasing masonry gallery

I've spent some time looking for a Masonry gallery with a grid layout, but couldn't find one that suited my needs. So, I decided to create my own. I implemented a customElement with grid layout, but encountered an issue when trying to assign grid ...

Creating a web application that uses AJAX and smoothly degrades if the browser does not support JavaScript

Apologies for the lengthy title, but my main focus is on creating an ajax-based application. I currently have a version one of this app that operates without requiring javascript. I am looking to upgrade it to utilize ajax for accessing resources from a t ...

Is it best practice to initialize loaded scripts before the JQuery .load callback is called or should it be done after the .ready callback in the loaded script?

When I click a button in my main document, I load the content of a specific div using jQuery: $("#my_div").load(function() { alert("Content Loaded"); }); The loaded content contains a script: <script> alert("Initial Alert from External Script" ...

Exploring Symfony2: Enhancing user experience with dynamic form submission and dropdown menu updates

Starting from the beginning. I have a tab-panned layout with links. Upon clicking a link, a drop-down checkbox form is injected directly into the HTML through $(".dropdown-toggle").click(function() { var projectId = $("#permission-form").attr("data-p ...

Leveraging oembed for dynamic content integration with SoundCloud in JSON

I'm looking to retrieve the latest 10 tracks of a user using oembed with json. $.getJSON("http://soundcloud.com/oembed", {url: "https://soundcloud.com/aviciiofficial", format: "json"}, function(data) { console.log(data.html); }) The d ...

using javascript to create two choices

I am facing a small complication between two select options in my javascript code. Here is the snippet of my javascript: function displayVals() { var singleValues = $("select option:selected").text(); //to stay selected $("#hiddenselect").val(s ...

Retrieving data with .getJSON and iterating over an array

I'm currently attempting to iterate through a multidimensional array, but I'm encountering difficulties. $.getJSON("file.json", function(json) { for(var i = 0; i < json.length; i++) { var county = json.data[i][9]; c ...

Exporting to Excel in an MVC framework

I attempted to export data to an excel sheet. Here is the code I used: var grid = new System.Web.UI.WebControls.GridView(); var dbcontext = new HotelDbContext(); grid.DataSource = dbcontext.Database.SqlQuery<ReportsDTO>("Usp_GetDaysBillReport").ToL ...

Issues with Jquery Ajax POST request not resolving

Can you explain why the success code is not being executed in this request? $(document).ready(function(){ var post_data = []; $('.trade_window').load('signals.php?action=init'); setInterval(function(){ ...

Perform a bash command using PHP when an HTML button is clicked

Today, my brain seems to be on vacation. Currently, I have set up a Raspberry Pi with vlc running and connected to a mounted screen on the wall. There is a web page with simple controls to manage the pi, switch between different vlc streams, or stop stream ...

What is the best way to ensure the website title is displayed properly on a mobile browser?

Concern I have been encountering difficulties while constructing a portfolio website using bootstrap 5. The issue arises with the navbar, causing the Title to overlap the hamburger menu and extend beyond the edge of the screen. Strangely enough, this prob ...

Tips on modifying the background color of a read-only field in an edit form

Changing the background color of a readonly field in the edit form of Free jqgrid can be a challenge. One potential solution involves specifying a style: .jqgrid-readonlycolumn { background-color: #FFFFDD; } This style is then used in the colmodel e ...

What is the most effective method for attaching a jQuery click event to every anchor tag within each row of a table?

Displayed here is a grid (basic html table) showcasing users with the option to delete a specific user by clicking on the delete link. My typical approach involves: <% foreach (var user in Model.Users) {%> <tr > <td align="right"><% ...

Issue with jqLite's .triggerHandler() functionality not behaving as anticipated

I'm having an issue with a piece of code that uses triggerHandler. The event is being called correctly, but it's not working as expected. Below is the code snippet and a link to a jsFiddle : HTML: <body ng-app="app"> <button box-cr ...

Odd behavior observed when clicking on the link

On the initial click with an anchor tag, I am experiencing different behavior compared to subsequent clicks. When the href value is set to "", no HTTP GET request is made on the first click. I cannot determine why the first click would behave differently t ...

Set the <img> source to link to a PHP webpage

I store all my images in a secure directory inaccessible to normal users. The filenames are generated randomly, so I want to keep the path and names of the files hidden. Currently, my img element looks like this: <img src="get_image.php?id=1"> This ...

Alignment problem detected in Firefox and Safari, but works perfectly in Chrome

Currently dealing with a CSS problem on my website that is only appearing in Safari and Firefox, while Chrome displays it correctly. The images are not positioning correctly and are stacking instead of being placed in each box as intended. I've expe ...