?
Solved

Change HTML text color, reading color from XML data

Posted on 2009-04-14
6
Medium Priority
?
435 Views
Last Modified: 2013-11-19
I've an HTML table which uses an XML island as a data source. It displays fine.  One of the XML elements (called TYPE) contains an RGB color value.  I'd like make the text color for each entry the same as the TYPE color value.  Any ideas?  Thanks.
**** HTML ****
 
<table datasrc="#xmlSOEBase" width="100%" border=0 cellSpacing=0 language=vbscript>
	<tr>
		<td>
			<div><Label datafld="DISPLAY"></Label></div>
		</td>
	</tr>
</table>
 
<xml id="xmlSOEBase"></xml>
 
**** XML ****
<ROOT>
	<BASE>
		<DISPLAY>First entry</DISPLAY>
		<TYPE>762452</TYPE>
	<BASE>
	<BASE>
		<DISPLAY>Second entry</DISPLAY>
		<TYPE>345872</TYPE>
	<BASE>
</ROOT>

Open in new window

0
Comment
Question by:sj_hicks
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 24145523
Data Islands are a very old, Internet Explorer only technique.
It is very unflexible, and you can only map elements to data cells.
You would need a mapping from elements to a class or background colour attribute,
which you can't simply using data islands.

Have you considered XSLT?
It is easy and straightforward, performs a lot better and is a lot more flexible.
Just a little JavaScript and an little XSLT stylesheet and you are done.
Let me know if that is acceptable for you
0
 
LVL 7

Author Comment

by:sj_hicks
ID: 24153437
Hi Gertone, thanks for the info.  I'm not too worried about it being IE only, as the HTML being run as an HTA (HTML Application).  I'm including this table as part of a larger HTML document.  I've used basic XSLT before to make an XML file display nicely when you open the XML in a browser.  I looked into using XSLT for this scenario, but I'm not sure how make it work within an existing HTML document (if possible).  Are you able to give me any pointers, samples, links etc?
0
 
LVL 60

Accepted Solution

by:
Geert Bormans earned 2000 total points
ID: 24156589
Here is a basic HTML file,
It has a function that transforms the XML into an HTML table
and overwrites the innerHTML of a div with the transformation result onLoad
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select Transform</title>
    <script language="javascript">
      function transF()
      {
         var oXML = new ActiveXObject("Msxml2.DOMDocument");
         var oXSL = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
         var oTmpl= new ActiveXObject("Msxml2.XSLTemplate");
         var oProc ;
 
	       oXML.async = false;
         oXML.resolveExternals = false;
	       oXML.load("SOEB.xml"); 
	       
         oXSL.async = false;
         oXSL.resolveExternals = false;
         oXSL.load("SOEB.xsl");
 
         oTmpl.stylesheet = oXSL;
 
         oProc = oTmpl.createProcessor();
         oProc.input = oXML;
				 oProc.transform();
         var resHTM = oProc.output;
         document.getElementById("xmlSOEBase").innerHTML = resHTM;
      }
    </script>
</head>
 
<body onload="transF();">
<div id="xmlSOEBase"></div>
</body>
</html>

Open in new window

0
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 
LVL 60

Expert Comment

by:Geert Bormans
ID: 24156601
I named your xml document "SOEB.xml" and I named the XSLT "SOEB.xsl"
as you can see in the script
Here is the XSLT
Works fine at my desk
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:template match="/">
        <table border="1">
            <tr>
                <th>
                    <xsl:text>DISPLAY</xsl:text>
                </th>
            </tr>
            <xsl:apply-templates/>
        </table>
    </xsl:template>
    <xsl:template match="BASE">
        <tr bgcolor="{TYPE}">
            <td>
                <xsl:value-of select="DISPLAY"/>
            </td>
        </tr>
    </xsl:template>
 
</xsl:stylesheet>

Open in new window

0
 
LVL 7

Author Closing Comment

by:sj_hicks
ID: 31571264
Thanks for the info.  It doesn't quite fit into the HTA structure I'm using (my fault, not yours) - the current setup is quite large and detailed and it would take a quite a bit of rework to implement this functionality using the info you've provided, so I'll give it a miss for now.  However, thanks for your assistance - I've learnt some things I may be able to use in the future.
0
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 24165263
welcome
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

770 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