Saturday, July 23, 2005
Show Layer
this code from Log of misc.js of Google Ajaxslt
at first start capture mouse location.
on click open or move
layer .
This code was tested on IE6.0 & Firefox 1.0.6
<html>
<head>
<script Language="JavaScript">
<!--
var mouseX;
var mouseY;
var html="<hr>";
function showLayer(x,y,html,id){
var l=getLayer(x,y,id);
l.innerHTML=html;
}
function getLayer(x,y,id){
if(!id){
id="showLayer";
}
var l = document.getElementById(id);
if (!l) {
l = document.createElement('div');
l.id = id;
l.style.position = 'absolute';
l.style.left = x+'px';
l.style.top = y+'px';
l.style.width = '250px';
l.style.height = '150px';
l.style.overflow = 'auto';
l.style.backgroundColor = '#f0f0f0';
l.style.border = '1px solid gray';
l.style.fontSize = '10px';
l.style.padding = '5px';
document.body.appendChild(l);
}else{
l.style.left = x+'px';
l.style.top = y+'px';
}
return l;
}
function mouseMove(evt){
if(document.all){
mouseX = event.x;
mouseY = event.y;}
else{
mouseX = evt.pageX;
mouseY = evt.pageY;
}
}
if(document.all) {
document.onmousemove = mouseMove;
}
else if(document.getElementById){
window.document.onmousemove = mouseMove;
}
else {
window.onmousemove = mouseMove;
window.captureEvents(Event.MOUSEMOVE);
}
// -->
</script>
</head>
<html>
<body>
<input type="button" value="click" onclick="showLayer(mouseX,mouseY,html)">
<br><br><br><br><br><br><br><br>
<input type="button" value="click" onclick="showLayer(mouseX,mouseY,html)">
</body>
</html>
Thursday, July 14, 2005
xmlhttprequest.js and http-xslt.html
---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Simple XSLT test</title>
<script src="misc.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<script src="xpath.js" type="text/javascript"></script>
<script src="xslt.js" type="text/javascript"></script>
<script type="text/javascript" src="xmlhttprequest.js"></script>
<script type="text/javascript">
var xslt;
var xml;
logging__ = true;
xsltdebug__ = true;
function test_xslt() {
var xml = xmlParse(el('xml').value);
var xslt = xmlParse(el('xslt').value);
var html = xsltProcess(xml, xslt);
el('html').value = html;
el('htmldisplay').innerHTML = html;
}
function cleanxml() {
var req = new XMLHttpRequest();
if (req) {
req.onreadystatechange = function() {
//alert( req.readyState+","+req.status);
//if (req.readyState == 4 && req.status == 200)
if (req.readyState == 4 ) //for local
{
el('xml').value=req.responseText;
cleanvalue('xml');
}
};
req.open('GET', 'xml.xml');
req.send(null);
}
var req2 = new XMLHttpRequest();
if (req2) {
req2.onreadystatechange = function() {
//alert( req.readyState+","+req.status);
//if (req.readyState == 4 && req.status == 200)
if (req2.readyState == 4 ) //for local
{
el('xslt').value=req2.responseText;
cleanvalue('xslt');
}
};
req2.open('GET', 'xslt.xml');
req2.send(null);
}
}
function cleanvalue(id) {
var x = el(id);
x.value = x.value.replace(/^\s*/, '').replace(/\n\s*/g, '\n');
}
</script>
<link rel="stylesheet" href="test.css"/>
</head>
<body onload="cleanxml()">
<form onsubmit="test_xslt();return false">
<table>
<tr>
<td>
<textarea id="xml" cols="40" rows="10">
</textarea>
</td>
<td>
<textarea id="xslt" cols="40" rows="10">
</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="process"/>
</td>
</tr>
<tr>
<td>
<textarea id="html" cols="40" rows="10">
</textarea>
</td>
<td>
<div id="htmldisplay"></div>
</td>
</tr>
</table>
</form>
</body>
</html>