Home/ Questions/Q 890599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T13:45:33+00:00

first time poster. Please be gentle. This topic may be similar to several other

  • 0

first time poster. Please be gentle.

This topic may be similar to several other questions out there, but as far as I can see this is a unique problem I’m trying to solve. FWIW, I’m primarily a designer; I’m dangerous with Flash and HTML and CSS, but a bit in the weeds with everything else. From searching around, I appear to be heading for a ajax/jquery solution, which I need some help with.

To begin, I have built a fairly complex Flash interface which pulls content from a well-formed and validated XML file. This part is done, works beautifully.

However, the client wants to create a simple(r) javsScript version of the interface to be in place for viewers who don’t have Flash. AND, they would like this version to pull values (text) from the SAME XML file, so they only need to edit the one file to make changes.

Seems like a reasonable request, but executing it doesn’t appear to be quite so simple. The biggest hurdle is that I do not want to loop the XML for output – I want to call specific node values into specific elements.

Here’s as simple an example as I can muster. From XML like so:

<section>
    <page>
        <name image="image1.jpg">Section One</name>
        <copy>This is a description of section one.</copy>
    </page>
    <page>
        <name image="image2.jpg">Section Two</name>
        <copy>This is a description of section two.</copy>
    </page>
</section>

I want to create HTML like so:

<div id="greenBackground">
    <h1>[value from 1st XML <name> node]</h1>
    <p>[value from 1st XML <copy> node]</p>
    <img src="[value from 1st XML <name> node image attribute]" />
</div>

<div id="blueBackground">
    <h1>[Value of 2nd XML <name> node]</h1>
    <p>[Value of 2nd XML <copy> node]</p>
    <img src="[value from 2nd XML <name> node image attribute]" />
</div>

They key is that each div has a different id, in order for each ‘page’ to have unique background colors and formatting. The idea is then that I would use a simple overlapping div script to show/hide each of these ‘sections’ within the same footprint.

Hopefully this makes sense, please don’t hesitate for clarification. Any and all help is appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sounds like you are trying to do a transformation from XML to HTML. For this you can use a technology called XSLT but commonly known by many as an xslt transformation. You can use xslt in conjunction with xpath (query language for xml) to do exactly what you describe in your question.

    Here is the xml: (added the div id’s to the xml)

    <?xml version="1.0" encoding="utf-8"?>
<section>
    <page>
        <div id="greenBackground"></div>
        <name image="image1.jpg">Section One</name>
        <copy>This is a description of section one.</copy>
    </page>
    <page>
        <div id="blueBackground"></div>
        <name image="image2.jpg">Section Two</name>
        <copy>This is a description of section two.</copy>
    </page>
</section>

    Here is the xslt:

    <?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
    <body>
        <xsl:for-each select="section/page">
        <div>
            <xsl:attribute name="id">
                <xsl:value-of select="div//@id"/>
            </xsl:attribute>
            <h1>
                <xsl:value-of select="name"/>
            </h1>
            <p>
                <xsl:value-of select="copy"/>
            </p>
            <img>
                <xsl:attribute name="src">
                    <xsl:value-of select="name//@image"/>
                </xsl:attribute>
            </img>
            </div>
        </xsl:for-each>
    </body>
</html>
</xsl:template>
</xsl:stylesheet>

    Here is the output after you run the tranform:

    <html>
  <body>
    <div id="greenBackground">
      <h1>Section One</h1>
      <p>This is a description of section one.</p><img src="image1.jpg"></div>
    <div id="blueBackground">
      <h1>Section Two</h1>
      <p>This is a description of section two.</p><img src="image2.jpg"></div>
  </body>
</html>

    Enjoy!

    • 0