?
Solved

xsl - html structure help.

Posted on 2006-05-15
6
Medium Priority
?
254 Views
Last Modified: 2012-08-14
hi I have an xsl stylesheet that i need some help to re organize how the html is written out.

right now the row display is horizontal, but i need it to be vertical.

I've tried to change it, but i just brake tha file everytime. I am still working on it, but if someone can take a look at it and tell me how to change it so it looks as i ideally wanted taht would be nice.

here is my xsl file:


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/>

<xsl:template match="/">
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="myweatherpage">

    <table class="pfp">
        <xsl:apply-templates/>
    </table>
</xsl:template>

<xsl:template match="forecast">
<xsl:for-each select="//day[position() = 1]">
    <table border="0" cellspacing="0">
      <tr>
          <td class="bgrnd">
              <p class="date"><xsl:value-of select="//location/@city"/>, <xsl:value-of select="//location/@state"/><xsl:text> - </xsl:text><xsl:value-of select="date"/></p>
          </td>
      </tr>
    </table>
      
<xsl:apply-templates select="hourly"/>            
    </xsl:for-each>
        <table border="0" cellspacing="0" width="460"></table>      
</xsl:template>


<xsl:template match="hourly">
   <table border="0" cellspacing="0" width="460">
              <tr>
                  <td class="forecastperiod">
                    <p class="forecastperiod">Hour by hour</p>
                </td>
            </tr>
            <tr>
                <td class="tablelabel">
                    <p class="tablelabel"><xsl:value-of select="label"/></p>
                </td>
                    <table cellspacing="1" cellpadding="1" border="0" width="460">
                          <tr>
                              <td class="tablelabel">
                                  <p class="tablelabel">Hour</p>
                              </td>
                              <xsl:apply-templates select="hourheader/hour[position() mod 2 = 1]"/>
                          </tr>
                          <tr>
                              <td class="tablelabel">
                                  <p class="tablelabel">Temperature</p>
                              </td>
                              <xsl:apply-templates select="obs[@type='temperature']/ob[position() mod 2 = 1]"/>
                          </tr>
                          <tr>
                              <td class="tablelabel">
                                  <p class="tablelabel">Feels like</p>
                              </td><span class="align">
                              <xsl:apply-templates select="obs[@type='feelslike']/ob[position() mod 2 = 1]"/></span>
                          </tr>
                          <tr>
                              <td class="tablelabel">
                                  <p class="tablelabel">Winds</p>
                              </td>
                              <xsl:apply-templates select="obs[@type='windspeed']/ob[position() mod 2 = 1]"/>
                          </tr>
                          <tr>
                              <td class="tablelabel">
                                  <p class="tablelabel">Direction</p>
                              </td>
                              <xsl:apply-templates select="obs[@type='winddirection']/icon[position() mod 2 = 1]"/>
                          </tr>
                          <tr>
                              <td class="tablelabel">
                                  <p class="tablelabel">Dewpoint</p>
                              </td>
                              <xsl:apply-templates select="obs[@type='dewpoint']/ob[position() mod 2 = 1]"/>
                          </tr>
                          <tr>
                              <td class="tablelabel">
                                  <p class="tablelabel">Skies</p>
                              </td>
                              <xsl:apply-templates select="obs[@type='skyconditions']/icon[position() mod 2 = 1]"/>
                          </tr>
                          <tr>
                              <td class="tablelabel">
                                  <p class="tablelabel">Precipitation</p>
                              </td>
                              <xsl:apply-templates select="obs[@type='precipitation']/icon[position() mod 2 = 1]"/>
                          </tr>
                          <tr>
                              <td class="tablelabel">
                                  <p class="tablelabel">Humidity</p>
                              </td>
                              <xsl:apply-templates select="obs[@type='humidity']/ob[position() mod 2 = 1]"/>
                          </tr>
                        </table>
              </tr>
    </table>
</xsl:template>

<xsl:template match="ob">
    <xsl:choose>
        <xsl:when test="@type='max'">
            <td class="maxvalue" width="15">
                <p class="tablevaluebig"><xsl:value-of select="."/></p>
            </td>
      </xsl:when>
      <xsl:when test="@type='min'">
            <td class="minvalue" width="15">
                <p class="tablevaluebig"><xsl:value-of select="."/></p>
            </td>
      </xsl:when><xsl:otherwise>
            <td class="tablevalue" width="15">
                <p class="tablevalue"><xsl:value-of select="."/></p>
            </td>
      </xsl:otherwise>
    </xsl:choose>
</xsl:template>      

<xsl:template match="icon">
      <td width="30" class="tableicon">
          <p class="tablevalue">
      <xsl:choose>
      <xsl:when test="@type='clearday'">
            <IMG border="0" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/18x18/clearday.gif" alt="Clear skies"/>
      </xsl:when>
      <xsl:when test="@type='clearnight'">
            <IMG border="0" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/18x18/clearnight.gif" alt="Clear skies"/>
      </xsl:when>
      <xsl:when test="@type='cloudyday'">
            <IMG border="0" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/18x18/cloudyday.gif" alt="Cloudy"/>
      </xsl:when>
      <xsl:when test="@type='cloudynight'">
            <IMG border="0" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/18x18/cloudynight.gif" alt="Cloudy"/>
      </xsl:when>
      <xsl:when test="@type='mostlycloudyday'">
            <IMG border="0" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/18x18/mostlycloudyday.gif" alt="Mostly cloudy"/>
      </xsl:when>
      <xsl:when test="@type='mostlycloudynight'">
            <IMG border="0" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/18x18/mostlycloudynight.gif" alt="Mostly cloudy"/>
      </xsl:when>
      <xsl:when test="@type='partlycloudyday'">
            <IMG border="0" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/18x18/partlycloudyday.gif" alt="Partly cloudy"/>
      </xsl:when>
      <xsl:when test="@type='partlycloudynight'">
            <IMG border="0" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/18x18/partlycloudynight.gif" alt="Partly cloudy"/>
      </xsl:when>
      <xsl:when test="@type='s'">
            <img src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/wind/arrow_n.gif" alt="Winds from the south"/>
      </xsl:when>
      <xsl:when test="@type='sw'">
            <img  src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/wind/arrow_ne.gif" alt="Winds from the southwest"/>
      </xsl:when>
      <xsl:when test="@type='w'">
            <img  src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/wind/arrow_e.gif" alt="Winds from the west"/>
      </xsl:when>
      <xsl:when test="@type='nw'">
            <img  src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/wind/arrow_se.gif" alt="Winds from the northwest"/>
      </xsl:when>
      <xsl:when test="@type='n'">
            <img  src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/wind/arrow_s.gif" alt="Winds from the north"/>
      </xsl:when>
      <xsl:when test="@type='ne'">
            <img  src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/wind/arrow_sw.gif" alt="Winds from the northeast"/>
      </xsl:when>
      <xsl:when test="@type='e'">
            <img  src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/wind/arrow_w.gif" alt="Winds from the east"/>
      </xsl:when>
      <xsl:when test="@type='se'">
            <img  src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/wind/arrow_nw.gif" alt="Winds from the southeast"/>
      </xsl:when>
      <xsl:when test="@type='mix'">
            <img width="16" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/precip/mix.gif" alt="Mixed precipitation expected"/>
      </xsl:when>
      <xsl:when test="@type='mixchance'">
            <img width="16" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/precip/mixchance.gif" alt="Chance of mixed precipitation"/>
      </xsl:when>
      <xsl:when test="@type='rainlikely'">
            <img width="16" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/precip/rain.gif" alt="Rain expected"/>
      </xsl:when>
      <xsl:when test="@type='rainchance'">
            <img width="16" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/precip/rainchance.gif" alt="Chance of rain"/>
      </xsl:when>
      <xsl:when test="@type='snowlikely'">
            <img width="16" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/wind/18x18/snow.gif" alt="Snow expected"/>
      </xsl:when>
      <xsl:when test="@type='snowchance'">
            <img width="16" src="http://www.nbcweatherplus.com/sh/wxplus/icons/xhour/wind/18x18/snowchance.gif" alt="Chance of snow"/>
      </xsl:when>
      
      </xsl:choose>
      </p></td>
</xsl:template>            

<xsl:template match="hour">
<xsl:if test="@show='light'">
    <td width="20" class="day">
        <p class="timeofday"><xsl:value-of select="."/></p>
    </td>
</xsl:if>

<xsl:if test="@show='dark'">
    <td width="20" class="night">
        <p class="timeofday"><xsl:value-of select="."/></p>
    </td>
</xsl:if>
</xsl:template>            

</xsl:stylesheet>


0
Comment
Question by:itortu
  • 3
  • 3
6 Comments
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 16683958
Hi itortu,
> right now the row display is horizontal, but i need it to be vertical.

here is how you should do it

- you first make your title row
- then you need a for-each construct that loops over the hours
- using the position of the hour, you can adres the specific ob or icon

I ll show you a little example in a minute

Cheers!
0
 
LVL 60

Accepted Solution

by:
Geert Bormans earned 400 total points
ID: 16684103
itortu,

I made the change to the hourly template
to cover Hour and Temperature
I think you can take it from there

    <xsl:template match="hourly">
        <table border="0" cellspacing="0" width="460">
           <tr>
                <td class="forecastperiod">
                    <p class="forecastperiod">Hour by hour</p>
                </td>
            </tr>
            <tr>
                <td class="tablelabel">
                    <p class="tablelabel"><xsl:value-of select="label"/></p>
                </td>
            </tr>
            <tr>
                <td>Hour</td>
                <td>Temperature</td>
            </tr>
            <xsl:for-each select="hourheader/hour">
                <xsl:variable name="thisPosition" select="position()"/>
                <tr>
                    <xsl:if test="$thisPosition mod 2 = 1">
                        <xsl:apply-templates select="."/>
                        <xsl:apply-templates select="../../obs[@type='temperature']/ob[position() = $thisPosition]"/>
                    </xsl:if>
                </tr>
            </xsl:for-each>
        </table>
    </xsl:template>
0
 

Author Comment

by:itortu
ID: 16684175
question Gertone,

if i add another column such as Dew Point

<td>Hour</td>
<td>Temperature</td>
<td>Dew Point</td>

how would this code change then?

<xsl:for-each select="hourheader/hour">
    <xsl:variable name="thisPosition" select="position()"/>
        <tr>
            <xsl:if test="$thisPosition mod 2 = 1">
                <xsl:apply-templates select="."/>
                <xsl:apply-templates select="../../obs[@type='temperature']/ob[position() = $thisPosition]"/>
            </xsl:if>
        </tr>
</xsl:for-each>

something like this?

<xsl:for-each select="hourheader/hour">
    <xsl:variable name="thisPosition" select="position()"/>
        <tr>
            <xsl:if test="$thisPosition mod 2 = 1">
                <xsl:apply-templates select="."/>
                <xsl:apply-templates select="../../obs[@type='temperature']/ob[position() = $thisPosition]"/>
                <xsl:apply-templates select="../../obs[@type='dewpoint']/ob[position()     = $thisPosition]"/>
            </xsl:if>
        </tr>
</xsl:for-each>

 
THANK YOU!
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:itortu
ID: 16684454
got it, looks very nice.

thank you much Gertone!

take care,

itortu.
0
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 16684695
well, you found it before I returned
you are welcome
0
 

Author Comment

by:itortu
ID: 16684712
hey Gertone I posted another question related to this same task of mine. if you have some time do you think you can advice on it?

thanks again : )

here is the link to the ?

http://www.experts-exchange.com/Web/Web_Languages/XML/Q_21851084.html
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Client Need Led Us to RSS I recently had an investment company ask me how they might notify their constituents about their newsworthy publications.  Probably you would think "Facebook" or "Twitter" but this is an interesting client.  Their cons…
I was working on a PowerPoint add-in the other day and a client asked me "can you implement a feature which processes a chart when it's pasted into a slide from another deck?". It got me wondering how to hook into built-in ribbon events in Office.
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question