How to convert a xml element into url using css?


Tags: css,xml

Problem :

I have an xml file which has an element like this

<video><title>XXXX</title><url>VIDEO ID OF YOUTUBE></url></video>

Is there any way to use CSS to display the elements as

<a href="http://www.youtube.com/videoid">XXXX</a>


Solution :

I do not know of a way to use CSS for this. But you can do this using a XSLT Stylesheet. Is that what you want? Then a XSLT Stylesheet similar to this can help you:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
  <xsl:output method="html" indent="yes"/>

  <xsl:template match="/" >
    <body>

      <xsl:apply-templates select ="/items/video"/>

    </body>
  </xsl:template>

  <xsl:template match="video" >
    <li>
      <a>
        <xsl:attribute name="href">
          <xsl:value-of select="./url" disable-output-escaping="yes" />
        </xsl:attribute>
        <xsl:value-of select="./title"/>
      </a>
    </li>
  </xsl:template>
  <xsl:template match=
    "*[not(@*|*|comment()|processing-instruction()) 
     and normalize-space()=''
      ]"/>

  <xsl:template match="text()"/>


</xsl:stylesheet>

This assumes that the XML input file looks as follows:

<?xml version="1.0" encoding="utf-8" ?>
<items>
  <video>
    <title>XXXX</title>
    <url>VIDEO ID OF YOUTUBE></url>
  </video>
  <video>
    <title>XXXX</title>
    <url>VIDEO ID OF YOUTUBE></url>
  </video>
</items>

Exactly how you should do the transform is hard to say when I don't know about your requirements. A XSLT transform can be done in a number of ways. If the XML input file is static one can let the webbrowser do the transformation. If the XML file is on a server you can write a transform in a awebpage and sen the HTML to the webbbrowser. It all depens on your environment.


    CSS Howto..

    jquery ui droppable : how to dropp an element outside a div with overflow:hidden?

    How to prevent transition to run on page load after height is set with javascript in Safari?

    How to update a div with another image in angular?

    How would I make these two elements on the same line?

    How to create equal height columns in pure CSS [duplicate]

    How to disable Cufon on certain elements?

    How do I align 2 divs (each has its own padding) next to each other?

    How do I draw a Diagonal div?

    How to get hovering shadow under a letter with CSS-only?

    How use a -ms-expand in GWT (Google Web Tolkit)

    How to find all elements with a particular CSS style, without a JS library?

    How can I make a textfield highlight in red only after its input is proven as incorrect?

    How do I keep my HTML elements on the same horizontal plane inside a parent DIV?

    How to make circle thing in CSS? [duplicate]

    How to disable and re-enable tabindex of hidden/visible elements?

    How to protect my injected elements CSS?

    I'm am trying to have a responsive navigation bar for small screens, how can I change the left links to a css drop-down menu?

    How to draw two non-concentric circles in CSS with numbers inside it?

    Ionic on Codepen: how to start a new pen and get Ionic support

    how to apply the style using css3 [duplicate]

    How to float div up?

    How to apply an active state to a CSS sprite?

    How to make a jQuery step animation?

    How to add to css class in a single html tag? [duplicate]

    Need help determining how to position this element with CSS

    How to make the textbox above the slider

    How can I keep percentage-based elements from overlapping?

    How can I align centered inline-block elements correctly?

    How to deselect with CSS?

    How do i include font awesome classes in my css file?