Click here to Skip to main content
16,005,389 members
Home / Discussions / Web Development
   

Web Development

 
AnswerRe: how to send table format in html in mail? Pin
Michael Sync15-Aug-07 20:43
Michael Sync15-Aug-07 20:43 
QuestionJavaScript / Browser Window Height Pin
Heavy Storm15-Aug-07 7:48
Heavy Storm15-Aug-07 7:48 
AnswerRe: JavaScript / Browser Window Height Pin
andyharman15-Aug-07 8:05
professionalandyharman15-Aug-07 8:05 
GeneralRe: JavaScript / Browser Window Height Pin
Heavy Storm16-Aug-07 3:47
Heavy Storm16-Aug-07 3:47 
AnswerRe: JavaScript / Browser Window Height Pin
R. Giskard Reventlov15-Aug-07 21:09
R. Giskard Reventlov15-Aug-07 21:09 
QuestionDisplay long numbers inasp page from ms access Pin
dheema14-Aug-07 21:13
dheema14-Aug-07 21:13 
AnswerRe: Display long numbers inasp page from ms access Pin
Fred_Smith14-Aug-07 22:00
Fred_Smith14-Aug-07 22:00 
QuestionJavaScript Problem Pin
Rocky#14-Aug-07 20:09
Rocky#14-Aug-07 20:09 
Hi all, I'm gonna come to my question quickly as it has quite a lengthy code.
I'm using JavaScript in an XSL file that is used to transform any XML file into a form that is generally shown in IE. The only difference I'm trying to make is to make all nodes collapsed when the documents gets loaded.


<code><!--
|
| XSLT REC Compliant Version of IE5 Default Stylesheet
|
| Original version by Jonathan Marsh (jmarsh@microsoft.com)
| http://msdn.microsoft.com/xml/samples/defaultss/defaultss.xsl
|
| Conversion to XSLT 1.0 REC Syntax by Steve Muench (smuench@oracle.com)
|
+-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output indent="no" method="html"/>

<xsl:template match="/">
<HTML>
<HEAD>
<SCRIPT>
var xmlDoc;
<xsl:comment><![CDATA[
function f(e){
alert('hi F(e)');
if (e.className=="ci") {
if (e.children(0).innerText.indexOf("\n")>0) fix(e,"cb");
}
if (e.className=="di") {
if (e.children(0).innerText.indexOf("\n")>0) fix(e,"db");
} e.id="";
}
function fix(e,cl){
alert('hi Fix');
e.className=cl;
e.style.display="block";
j=e.parentElement.children(0);
j.className="c";
k=j.children(0);
k.style.visibility="visible";
k.href="#";
}
function ch(e) {
alert('hi Ch');
mark=e.children(0).children(0);
if (mark.innerText=="+") {
mark.innerText="-";
for (var i=1;i<e.children.length;i++) {
e.children(i).style.display="block";
}
}
else if (mark.innerText=="-") {
mark.innerText="+";
for (var i=1;i<e.children.length;i++) {
e.children(i).style.display="none";
}
}
}
function ch2(e) {
alert('hi Ch2');
mark=e.children(0).children(0);
contents=e.children(1);
if (mark.innerText=="+") {
mark.innerText="-";
if (contents.className=="db"||contents.className=="cb") {
contents.style.display="block";
}
else {
contents.style.display="inline";
}
}
else if (mark.innerText=="-") {
mark.innerText="+";
contents.style.display="none";
}
}
function cl() {
alert('hi CL');
e=window.event.srcElement;
if (e.className!="c") {
e=e.parentElement;
if (e.className!="c") {
return;
}
}
e=e.parentElement;
if (e.className=="e") {
ch(e);
}
if (e.className=="k") {
ch2(e);
}
}
function ex(){alert('hi ex');}
function h(){alert('hi H'); window.status=" ";}

function collapseAll()
{
alert('collapse all function called');
var mark;
mark = document.getElementById('node_anchor');

//m=mark.children(0).children(0);
//mark.innerHtml="+";
//for (var i=1;i<e.children.length;i++) {
// e.children(i).style.display="none";
//}





}

document.onclick=cl;
document.onLoad = collapseAll();
]]>
</xsl:comment>
</SCRIPT>
<STYLE>
BODY {font:x-small 'Verdana'; margin-right:1.5em}
.c {cursor:hand}
.b {color:red; font-family:'Courier New'; font-weight:bold;
text-decoration:none}
.e {margin-left:1em; text-indent:-1em; margin-right:1em}
.k {margin-left:1em; text-indent:-1em; margin-right:1em}
.t {color:#990000}
.xt {color:#990099}
.ns {color:red}
.dt {color:green}
.m {color:blue}
.tx {font-weight:bold}
.db {text-indent:0px; margin-left:1em; margin-top:0px;
margin-bottom:0px;padding-left:.3em;
border-left:1px solid #CCCCCC; font:small Courier}
.di {font:small Courier}
.d {color:blue}
.pi {color:blue}
.cb {text-indent:0px; margin-left:1em; margin-top:0px;
margin-bottom:0px;padding-left:.3em; font:small Courier;
color:#888888}
.ci {font:small Courier; color:#888888}
PRE {margin:0px; display:inline}
</STYLE>
</HEAD>
<BODY class="st">
<xsl:apply-templates/>
</BODY>
</HTML>
</xsl:template>

<xsl:template match="processing-instruction()">
<DIV class="e">
<SPAN class="b">
<xsl:call-template name="entity-ref">
<xsl:with-param name="name">nbsp</xsl:with-param>
</xsl:call-template>
</SPAN>
<SPAN class="m">
<xsl:text>&lt;?</xsl:text>
</SPAN>
<SPAN class="pi">
<xsl:value-of select="name(.)"/>
<xsl:value-of select="."/>
</SPAN>
<SPAN class="m">
<xsl:text>?></xsl:text>
</SPAN>
</DIV>
</xsl:template>

<xsl:template match="processing-instruction('xml')">
<DIV class="e">
<SPAN class="b">
<xsl:call-template name="entity-ref">
<xsl:with-param name="name">nbsp</xsl:with-param>
</xsl:call-template>
</SPAN>
<SPAN class="m">
<xsl:text>&lt;?</xsl:text>
</SPAN>
<SPAN class="pi">
<xsl:text>xml </xsl:text>
<xsl:for-each select="@*">
<xsl:value-of select="name(.)"/>
<xsl:text>="</xsl:text>
<xsl:value-of select="."/>
<xsl:text>" </xsl:text>
</xsl:for-each>
</SPAN>
<SPAN class="m">
<xsl:text>?></xsl:text>
</SPAN>
</DIV>
</xsl:template>

<xsl:template match="@*">
<SPAN>
<xsl:attribute name="class">
<xsl:if test="xsl:*/@*">
<xsl:text>x</xsl:text>
</xsl:if>
<xsl:text>t</xsl:text>
</xsl:attribute>
<xsl:value-of select="name(.)"/>
</SPAN>
<SPAN class="m">="</SPAN>
<B>
<xsl:value-of select="."/>
</B>
<SPAN class="m">"</SPAN>
</xsl:template>

<xsl:template match="text()">
<DIV class="e">
<SPAN class="b"> </SPAN>
<SPAN class="tx">
<xsl:value-of select="."/>
</SPAN>
</DIV>
</xsl:template>

<xsl:template match="comment()">
<DIV class="k">
<SPAN>
<A STYLE="visibility:hidden" class="b" onclick="return false" onfocus="h()">-</A>
<SPAN class="m">
<xsl:text>&lt;!--</xsl:text>
</SPAN>
</SPAN>
<SPAN class="ci" id="clean">
<PRE>
<xsl:value-of select="."/>
</PRE>
</SPAN>
<SPAN class="b">
<xsl:call-template name="entity-ref">
<xsl:with-param name="name">nbsp</xsl:with-param>
</xsl:call-template>
</SPAN>
<SPAN class="m">
<xsl:text>--></xsl:text>
</SPAN>
<SCRIPT>f(clean);</SCRIPT>
</DIV>
</xsl:template>

<xsl:template match="*">
<DIV class="e">
<DIV STYLE="margin-left:1em;text-indent:-2em">
<SPAN class="b">
<xsl:call-template name="entity-ref">
<xsl:with-param name="name">nbsp</xsl:with-param>
</xsl:call-template>
</SPAN>
<SPAN class="m">&lt;</SPAN>
<SPAN>
<xsl:attribute name="class">
<xsl:if test="xsl:*">
<xsl:text>x</xsl:text>
</xsl:if>
<xsl:text>t</xsl:text>
</xsl:attribute>
<xsl:value-of select="name(.)"/>
<xsl:if test="@*">
<xsl:text> </xsl:text>
</xsl:if>
</SPAN>
<xsl:apply-templates select="@*"/>
<SPAN class="m">
<xsl:text>/></xsl:text>
</SPAN>
</DIV>
</DIV>
</xsl:template>

<xsl:template match="*[node()]">
<DIV class="e" id="div_super">
<DIV class="c" id="node_shape">
<A class="b" href="#" id="node_anchor" onclick="return false" onfocus="h()">-</A>
<SPAN class="m">&lt;</SPAN>
<SPAN>
<xsl:attribute name="class">
<xsl:if test="xsl:*">
<xsl:text>x</xsl:text>
</xsl:if>
<xsl:text>t</xsl:text>
</xsl:attribute>
<xsl:value-of select="name(.)"/>
<xsl:if test="@*">
<xsl:text> </xsl:text>
</xsl:if>
</SPAN>
<xsl:apply-templates select="@*"/>
<SPAN class="m">
<xsl:text>></xsl:text>
</SPAN>
</DIV>
<DIV>
<xsl:apply-templates/>
<DIV>
<SPAN class="b">
<xsl:call-template name="entity-ref">
<xsl:with-param name="name">nbsp</xsl:with-param>
</xsl:call-template>
</SPAN>
<SPAN class="m">
<xsl:text>&lt;/</xsl:text>
</SPAN>
<SPAN>
<xsl:attribute name="class">
<xsl:if test="xsl:*">
<xsl:text>x</xsl:text>
</xsl:if>
<xsl:text>t</xsl:text>
</xsl:attribute>
<xsl:value-of select="name(.)"/>
</SPAN>
<SPAN class="m">
<xsl:text>></xsl:text>
</SPAN>
</DIV>
</DIV>
</DIV>
</xsl:template>

<xsl:template match="*[text() and not (comment() or processing-instruction())]">
<DIV class="e">
<DIV STYLE="margin-left:1em;text-indent:-2em">
<SPAN class="b">
<xsl:call-template name="entity-ref">
<xsl:with-param name="name">nbsp</xsl:with-param>
</xsl:call-template>
</SPAN>
<SPAN class="m">
<xsl:text>&lt;</xsl:text>
</SPAN>
<SPAN>
<xsl:attribute name="class">
<xsl:if test="xsl:*">
<xsl:text>x</xsl:text>
</xsl:if>
<xsl:text>t</xsl:text>
</xsl:attribute>
<xsl:value-of select="name(.)"/>
<xsl:if test="@*">
<xsl:text> </xsl:text>
</xsl:if>
</SPAN>
<xsl:apply-templates select="@*"/>
<SPAN class="m">
<xsl:text>></xsl:text>
</SPAN>
<SPAN class="tx">
<xsl:value-of select="."/>
</SPAN>
<SPAN class="m">&lt;/</SPAN>
<SPAN>
<xsl:attribute name="class">
<xsl:if test="xsl:*">
<xsl:text>x</xsl:text>
</xsl:if>
<xsl:text>t</xsl:text>
</xsl:attribute>
<xsl:value-of select="name(.)"/>
</SPAN>
<SPAN class="m">
<xsl:text>></xsl:text>
</SPAN>
</DIV>
</DIV>
</xsl:template>

<xsl:template match="*[*]" priority="20">
<DIV class="e">
<DIV STYLE="margin-left:1em;text-indent:-2em" class="c">
<A class="b" href="#" onclick="return false" onfocus="h()">-</A>
<SPAN class="m">&lt;</SPAN>
<SPAN>
<xsl:attribute name="class">
<xsl:if test="xsl:*">
<xsl:text>x</xsl:text>
</xsl:if>
<xsl:text>t</xsl:text>
</xsl:attribute>
<xsl:value-of select="name(.)"/>
<xsl:if test="@*">
<xsl:text> </xsl:text>
</xsl:if>
</SPAN>
<xsl:apply-templates select="@*"/>
<SPAN class="m">
<xsl:text>></xsl:text>
</SPAN>
</DIV>
<DIV>
<xsl:apply-templates/>
<DIV>
<SPAN class="b">
<xsl:call-template name="entity-ref">
<xsl:with-param name="name">nbsp</xsl:with-param>
</xsl:call-template>
</SPAN>
<SPAN class="m">
<xsl:text>&lt;/</xsl:text>
</SPAN>
<SPAN>
<xsl:attribute name="class">
<xsl:if test="xsl:*">
<xsl:text>x</xsl:text>
</xsl:if>
<xsl:text>t</xsl:text>
</xsl:attribute>
<xsl:value-of select="name(.)"/>
</SPAN>
<SPAN class="m">
<xsl:text>></xsl:text>
</SPAN>
</DIV>
</DIV>
</DIV>
</xsl:template>

<xsl:template name="entity-ref">
<xsl:param name="name"/>
<xsl:text disable-output-escaping="yes">&amp;</xsl:text>
<xsl:value-of select="$name"/>
<xsl:text>;</xsl:text>
</xsl:template>

</xsl:stylesheet></code>

Now I'm gonna give to you the main code segments so that you dont have too much trouble in it

The place where it creates the divs for making the XML nodes appear like tree nodes is this

<code><xsl:template match="*[node()]">
<DIV class="e" id="div_super">
<DIV class="c" id="node_shape">
<A class="b" href="#" id="node_anchor" onclick="return false" onfocus="h()">-</A>
</code>

I've tried to give it ID's so that I can refer to it in my code as

<code>function collapseAll()
{
alert('collapse all function called');
var mark;
mark = document.getElementById('node_anchor');

//mark=mark.children(0).children(0);
//mark.innerText="+";
//for (var i=1;i<e.children.length;i++) {
// e.children(i).style.display="none";
//}





}
</code>

I've noticed that the ch function gets called when you click on a node with className = "e" and it gets the object as
<code>function ch(e) {
alert('hi Ch');
mark=e.children(0).children(0);
if (mark.innerText=="+") {
mark.innerText="-";
for (var i=1;i<e.children.length;i++) {
e.children(i).style.display="block";
}
}
else if (mark.innerText=="-") {
mark.innerText="+";
for (var i=1;i<e.children.length;i++) {
e.children(i).style.display="none";
}
}
}
function cl() {
alert('hi CL');
e=window.event.srcElement;
if (e.className!="c") {
e=e.parentElement;
if (e.className!="c") {
return;
}
}
e=e.parentElement;
if (e.className=="e") {
ch(e);
}
if (e.className=="k") {
ch2(e);
}
}

document.onclick=cl;
document.onLoad = collapseAll();
</code>

The problem is that when i try to get the object from getelementbyID function it doesnt allow me to change its properties in the same way as it does in the case of onClick Event.

Can u plz tell how I can accomplish this task.

Thank you

Rocky
AnswerRe: JavaScript Problem Pin
Guffa15-Aug-07 4:08
Guffa15-Aug-07 4:08 
GeneralRe: JavaScript Problem Pin
Rocky#15-Aug-07 5:05
Rocky#15-Aug-07 5:05 
AnswerRe: JavaScript Problem Pin
led mike15-Aug-07 4:23
led mike15-Aug-07 4:23 
GeneralRe: JavaScript Problem Pin
Rocky#15-Aug-07 5:03
Rocky#15-Aug-07 5:03 
Question.NET Oracle Connections Pin
.NET4Ever14-Aug-07 17:44
.NET4Ever14-Aug-07 17:44 
AnswerRe: .NET Oracle Connections Pin
Fred_Smith14-Aug-07 22:02
Fred_Smith14-Aug-07 22:02 
AnswerRe: .NET Oracle Connections Pin
.NET4Ever15-Aug-07 4:16
.NET4Ever15-Aug-07 4:16 
QuestionHow to create html documents with embedded images ? HTML printing problems.. [modified] Pin
GuimaSun14-Aug-07 7:44
GuimaSun14-Aug-07 7:44 
QuestionPreventing password fill-in Pin
GregStevens14-Aug-07 5:30
GregStevens14-Aug-07 5:30 
AnswerRe: Preventing password fill-in Pin
Vasudevan Deepak Kumar14-Aug-07 5:39
Vasudevan Deepak Kumar14-Aug-07 5:39 
GeneralRe: Preventing password fill-in Pin
GregStevens14-Aug-07 5:59
GregStevens14-Aug-07 5:59 
QuestionImplementing FLVPlayer compatible with c#.net 2.0 Pin
harryforum14-Aug-07 0:18
harryforum14-Aug-07 0:18 
Questionimplementing yahoo maps in c#.net website Pin
harryforum13-Aug-07 22:58
harryforum13-Aug-07 22:58 
Questionflash Pin
michael_jhons13-Aug-07 22:16
michael_jhons13-Aug-07 22:16 
Questionbutton inside a gridview to display more detailed grid view Pin
Oga M13-Aug-07 21:36
Oga M13-Aug-07 21:36 
QuestionFramework for developing ASP.NET Pin
ctlqt1213-Aug-07 20:20
ctlqt1213-Aug-07 20:20 
AnswerRe: Framework for developing ASP.NET Pin
Christian Graus13-Aug-07 20:45
protectorChristian Graus13-Aug-07 20:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.