Help to incorporate an html code in xslt

ismailc · January 4th, 2008, 08:42 AM

Hi, I need help please! Don'T really know XSLT

I have an HTML code that works:
I try and add it to an xslt file but it moans about the javascript.
Like it does not like && (i replaced it with "and")
Please Anyone Assist!

[u]Below is the code, highlight in RED the code it does not like</u>

<html>
    <head>
      <style type="text/css">

        #dhtmltooltip{
        position: absolute;
        width: 150px;
        border: 2px solid black;
        padding: 2px;
        background-color: lightyellow;
        visibility: hidden;
        z-index: 100;
        /*Remove below line to remove shadow. Below line should always appear last within this CSS*/
        filter: progid:DXImageTransform.Microsoft.Shadow(color=gra y,direction=135);
        }

      </style>
    </head>
    <body>
      <div id="dhtmltooltip"></div>

      <script type="text/javascript">

        var offsetxpoint=-60 //Customize x offset of tooltip
        var offsetypoint=20 //Customize y offset of tooltip
        var ie=document.all
        var ns6=document.getElementById && !document.all
        var enabletip=false
        if (ie||ns6)
        var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

        function ietruebody(){
        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
        }

        function ddrivetip(thetext, thecolor, thewidth){
        if (ns6||ie){
        if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
        if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
        tipobj.innerHTML=thetext
        enabletip=true
        return false
        }
        }

        function positiontip(e){
        if (enabletip){
        var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
        var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
        //Find out how close the mouse is to the corner of the window
        var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
        var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

        var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
           //if the horizontal distance isn't enough to accomodate the width of the context menu
        if (rightedge<tipobj.offsetWidth)
        //move the horizontal position of the menu to the left by it's width
        tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
        else if (curX<leftedge)
        tipobj.style.left="5px"
        else
        //position the horizontal position of the menu where the mouse is positioned
        tipobj.style.left=curX+offsetxpoint+"px"
        //same concept with the vertical position
        if (bottomedge<tipobj.offsetHeight)
        tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" :window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
        else
        tipobj.style.top=curY+offsetypoint+"px"
        tipobj.style.visibility="visible"
        }
        }

        functionhideddrivetip(){
        if(ns6||ie){
        enabletip="false"
        tipobj.style.visibility="hidden"
        tipobj.style.left="-1000px"
        tipobj.style.backgroundColor=''
        tipobj.style.width=''
        }
        }

        document.onmousemove='positiontip'
</script>
      <a href="ajax.htm" onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials','yellow', 300);" onMouseout="hideddrivetip();">?</a>
    </body>
</html>

Martin Honnen · January 4th, 2008, 08:56 AM

An XSLT stylesheet is an XML document so you have to follow the XML syntax rules.
For embedded JavaScript code it is best to use a CDATA section e.g.

Code:

<script type="text/javascript"><![CDATA[
if (a && b) { }

]]></script>

joefawcett · January 4th, 2008, 08:56 AM

There are a number of special characters in XML, & and < for instance, that need to be escaped if just being used as text. There are two ways to do this, you can escape them individually, & is &-a-m-p-; and < is &-l-t-; (without the dashes).
A simpler alternative for large blocks of text is to use a CDATA section. To do this put <![CDATA[ at the start of the text and ]]> at the end:

Code:

<script type="text/javascript">
<![CDATA[
        var offsetxpoint=-60 //Customize x offset of tooltip
        var offsetypoint=20 //Customize y offset of tooltip
//more code
document.onmousemove='positiontip'
]]>
</script>

See http://www.w3schools.com/xml/xml_cdata.asp

--

Joe (Microsoft MVP - XML)

ismailc · January 7th, 2008, 03:43 AM

Hi, Thank You and I'm very gratefull for the assistance!

I added the code but once i add the cdata all my script below that untill the cdata close is greyed out!

<script type="text/javascript">
<![CDATA[
} <--- All script greyed out
}
document.onmousemove='positiontip'
]]>
</script>

Please Help, Regards

joefawcett · January 7th, 2008, 04:17 AM

I'm not sure why the } have appeared in the CDATA block, that's not what Martin nor I wrote.
As to being "greyed out" what does that mean?
If you open the transform in IE the section will be greyed out, that's how IE represents CDATA.

This has nothing to do with how the final transform, which is HTML and run in the browser, will operate.

--

Joe (Microsoft MVP - XML)

mhkay · January 7th, 2008, 05:29 AM

Being "greyed out" just means that the software you are using to look at the data is deciding to make it more colourful. Try to view it using something that doesn't introduce such distortions, for example Notepad.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

ismailc · January 7th, 2008, 07:18 AM

Hi, Thank You
I tested it but nothing happens, I have no experiece in xslt.
I click on the ? then the other page pops up - so it does not see or execute the function.

I copied in Notepad can't see the difference - in notepad excluding the CDATA then it works fine in HTML but the moment i add the CDATA in notepad it does not work!

Any other suggestions, i have to get this working!

Regards

bonekrusher · January 7th, 2008, 10:44 AM

As a note, I dont use: <![CDATA[]]>.

I just use <script> and it works fine.

Bones

ismailc · January 7th, 2008, 10:56 AM

Hi, thanks for the assistance mine does not want to work - i have so many red underlined

code:

<script type="text/javascript">

        var offsetxpoint=-60 //Customize x offset of tooltip
        var offsetypoint=20 //Customize y offset of tooltip
        var ie=document.all
        var ns6=document.getElementById && !document.all
        var enabletip=false
        if (ie||ns6)
        var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

        function ietruebody(){
        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
        }

        function ddrivetip(thetext, thecolor, thewidth){
        if (ns6||ie){
        if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
        if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
        tipobj.innerHTML=thetext
        enabletip=true
        return false
        }
        }

        function positiontip(e){
        if (enabletip){
        var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
        var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
       //Find out how close the mouse is to the corner of the window
       var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
       var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

       var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000

       //if the horizontal distance isn't enough to accomodate the width of the context menu
      if (rightedge<tipobj.offsetWidth)
      //move the horizontal position of the menu to the left by it's width
      tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
      else if (curX<leftedge)
      tipobj.style.left="5px"
      else
      //position the horizontal position of the menu where the mouse is positioned
      tipobj.style.left=curX+offsetxpoint+"px"

      //same concept with the vertical position
      if (bottomedge<tipobj.offsetHeight)
      tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
      else
      tipobj.style.top=curY+offsetypoint+"px"
      tipobj.style.visibility="visible"
      }
      }

      function hideddrivetip(){
      if (ns6||ie){
      enabletip=false
      tipobj.style.visibility="hidden"
      tipobj.style.left="-1000px"
      tipobj.style.backgroundColor=''
      tipobj.style.width=''
      }
      }

      document.onmousemove=positiontip

    </script>

regards

mhkay · January 7th, 2008, 11:06 AM

You've still got "&&" in there! Joe's first reply to you told you that you either need to escape that as &&, or put it in a CDATA section as <![CDATA[&&]]>

Sorry, but if you ignore the advice that you get, you can't expect people to keep helping you.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference